アニメーションパーツ

プレイヤーは、アニメーションで何かをしているかどうかについてフィードバックを得ることができます。これは、ツリーがヒットされるときに木を震動させるか、ペットが餌を与えられるときに喜びを持ってバウンスすることです。この場合、プレイヤーがクリックするとボタンが移動するように表示します。

アニメーションとのツイーン

オブジェクトのアニメーションの 1つの方法は、ティーンを使用することです。 tween 、スモーズ、スモーズ という名前のプロセスは、特定の期間の開始値を終了値に変更するプロセスです。ティーンは、位置、色、または回転などのプロパティを変更するプロパティを変更できます。

プロジェクト設定

このプロジェクトでは、tween はオブジェクトを開始位置から目標位置に移動します。

1. アニメーションするパーツを決めます。下の例では、 1 はボタンで、 2 は壁です。

   

2. 動くパーツに、ClickDetector という名前のスクリプトを追加します。ClickDetector の名前を変更しないでください。

   

   多くのパーツがあるモデルを使用している場合は、1つのパーツを選択して移動 (この例のボタンなど)、MoveTween スクリプトを子として設定します。

3. TweenMove スクリプトを開きます。その後、以下のスクリプトをコピーしてパストします。

   -- 選択した軸に基づいて、部品をツインしてバックアンドフォール
   -- ボタンにはオン/オフステートがあり、部品を前方または後方に移動させます
   
   local TweenService = game:GetService("TweenService")
   local button = script.Parent
   local clickDetector = button:FindFirstChildWhichIsA("ClickDetector")
   local buttonState = -1  -- ボタンの方向を決定します;-1 はボタンが押されることを意味し、1 は外に出ます
   local inTween = false
   
   -- カスタマイズ可能な変数
   local TWEEN_TIME = 0.15
   local TWEEN_MOVE_DISTANCE = 1.5
   
   -- 変数をツイーン
   local buttonTweenInfo = TweenInfo.new(
   	TWEEN_TIME,  -- 時間
   	Enum.EasingStyle.Quad,  -- EasingStyle
   	Enum.EasingDirection.Out  -- 方向転換
   )
   
   local function buttonPress()
   	-- ボタンが減速する場合は、再び使用されないようにします
   	if inTween == true then
   		return
   	end
   
   	-- ボタンの位置の新しい CFrame を計算
   	local offsetCFrame = CFrame.new(0, TWEEN_MOVE_DISTANCE * buttonState, 0)
   	local newCFrame = button.CFrame:ToWorldSpace(offsetCFrame)
   
   	-- ツイーンを作成してプレイ
   	local tweenButton = TweenService:Create(button, buttonTweenInfo, {CFrame = newCFrame})
   	tweenButton:Play()
   	inTween = true
   
   	-- ボタンを再び使用可能にする
   	tweenButton.Completed:Connect(function()
   		inTween = false
   		-- ボタンの状態を逆にする
   		buttonState *= -1
   	end)
   
   end
   
   clickDetector.MouseClick:Connect(buttonPress)

4. オブジェクトをプレイテストし、クリックします。テスト中、オブジェクトが正しい方向や距離を移動しないことに気づくかもしれません。それは次のセクションでカスタマイズできます。

移動のツイーンを調整する

スクリプトを追加した状態で、ゲームのニーズに合わせてカスタマイズできます。ボタンは、前方、戻る方、または上下方向の移動に対応するようにツイーン可能です。

ポジションを変更する

ティーンは、開始値からゴール値に移行します。このスクリプトは、CFrames を使用して、ボタンを現在の位置に関連する方向で移動します。その方向は、スクリプトのライン 28 で制御されます。

その行で、X、Y、Z 座標を使用して新しい CFrame が作成されます。この例では、ボタンは Y 軸に対して移動します。

-- ボタンの位置の新しい CFrame を計算
local offsetCFrame = CFrame.new(0, TWEEN_MOVE_DISTANCE * buttonState, 0)
local newCFrame = button.CFrame:ToWorldSpace(offsetCFrame)

ボタンが 異なる 方向に移動するには、単に希望するコーディネートの 1つを行で置き換えます: TWEEN_MOVE_DISTANCE * buttonState 。他のすべてのコーディネートを 0 に設定します。

たとえば、この行は X 軸に対して相対移動するようになります。

-- ボタンの位置の新しい CFrame を計算
local offsetCFrame = CFrame.new( TWEEN_MOVE_DISTANCE * buttonState, 0, 0)
local newCFrame = button.CFrame:ToWorldSpace(offsetCFrame)

時間と距離の調整

スクリプトには、tween の移動に影響する次の変数が含まれています。Capitalized 名前のような TWEEN_TIME は、このスクリプトを特定のように変更するために書き込まれています。

次の変数の値を変更してみてください:

• 行 11 - TWEEN_TIME : ツイーンが発生するのにかかる時間 (秒単位)。
• 行 12 - TWEEN_MOVE_DISTANCE : ボタンがスタッドで移動する距離。

他のプロパティをツイーン中

数値データタイプのプロパティのほとんどはツイーン可能です。このセクションには、回転など、ゲームによりより多くのプレイヤーフィードバックを提供できるようにするいくつかの一般的なプロパティが含まれています。注意してください、あなたはまた、複数のプロパティを同時にツイーンできます。

For a full list of properties, see the TweenService API page.

回転

回転の場合は、Vector3 を使用する代わりに、tweening と CFrames を組み合わせます。回転のツイーンは、ペットに使用するか、コインが回転するときにクリーチャーを動かすことができます。

次のスクリプトの例では、クリーチャーのポジションと回転が両方とも、クリックするとポジションと回転の両方が減速することで表示されています。

コードは、TWEEN_ROT_ANGLES の度数に基づいてオブジェクトを回転させます。

-- tween を使用してオブジェクトを回転させ、バウンスさせる
local TweenService = game:GetService("TweenService")
local partToTween = script.Parent
local clickDetector = partToTween:FindFirstChildWhichIsA("ClickDetector")
local inTween = false

-- カスタマイズ可能な変数
local TWEEN_TIME = 0.25
local TWEEN_ROT_ANGLES = -45
local TWEEN_MOVE_DISTANCE = 3

-- 変数をツイーン
local tweenInfo = TweenInfo.new(
	TWEEN_TIME,  -- 時間
	Enum.EasingStyle.Quad,  -- EasingStyle
	Enum.EasingDirection.Out,  -- 方向転換
	1,  -- RepeatCount (ゼロ未満の場合、tween は無限にループします)
	true  -- リバース (tween は目標に到達した時にリバースする)
)

local function activateAction()
	-- オブジェクトがツイーン中である場合、そのツイーンを再びツイーンさせないでください
	if inTween == true then
		return
	end

	-- オブジェクトの位置と回転の新しい CFrame を計算
	local offsetCFrame = CFrame.new(0, TWEEN_MOVE_DISTANCE, 0)
	local rotatedCFrame = CFrame.Angles(math.rad(TWEEN_ROT_ANGLES), 0, 0)
	offsetCFrame = offsetCFrame:ToWorldSpace(rotatedCFrame)
	local newCFrame = partToTween.CFrame:ToWorldSpace(offsetCFrame)

	-- ツイーンを作成してプレイ
	local tweenObject = TweenService:Create(partToTween, tweenInfo, {CFrame = newCFrame})
	tweenObject:Play()
	inTween = true

	-- オブジェクトの完了時に再びクリック可能にする
	tweenObject.Completed:Connect(function()
		inTween = false
	end)
end

clickDetector.MouseClick:Connect(activateAction)

スケーリング

ゲーム内のオブジェクトのサイズを変更すると、プレイヤーがそれらと対話したことも表示できます。たとえば、健康パックやジェムストーンのようなピックアップは、触れると縮まります。パーツをスケールするには、必要なサイズの Vector3 に拡張目標を変更します。

-- パーツのスケールを捕捉し、その後、破壊する
local TweenService = game:GetService("TweenService")
local partToScale = script.Parent
local inTween = false

-- カスタマイズ可能な変数
local TWEEN_TIME = 1
local TWEEN_SCALE = Vector3.zero

-- 変数をツイーン
local tweenInfo = TweenInfo.new(
	TWEEN_TIME,  -- 時間
	Enum.EasingStyle.Exponential,  -- EasingStyle
	Enum.EasingDirection.Out  -- 方向転換
)

local function onPartTouch(otherPart)
	-- オブジェクトがツイーン中である場合、そのツイーンを再びツイーンさせないでください
	if inTween == true then
		return
    end

	local partParent = otherPart.Parent
    local humanoid = partParent:FindFirstChildWhichIsA("Humanoid")

	if humanoid then
		-- オブジェクトを拾った時以来の再衝突を防止する
        partToScale.CanCollide = false

		-- ツイーンを作成してプレイ
		local tweenObject = TweenService:Create(partToScale, tweenInfo, {Size = TWEEN_SCALE})
		tweenObject:Play()
        inTween = true

		-- オブジェクトを完了すると、オブジェクトを破壊する
		tweenObject.Completed:Connect(function()
			partToScale:Destroy()
		end)
	end
end

partToScale.Touched:Connect(onPartTouch)

色変更

パーツは、Color3 値で減少して色を変更できます。たとえば、敵または破壊可能なオブジェクトは、色を変更して、ヒットまたはクリックされたことに対するフィードバックを提供できます。

-- オブジェクトの色をクリック時に減算し、3クリック後に破壊します
local TweenService = game:GetService("TweenService")
local partToTween = script.Parent
local clickDetector = partToTween:FindFirstChildWhichIsA("ClickDetector")
local inTween = false

-- カスタマイズ可能な変数
local TWEEN_TIME = 0.2
local COLOR_ON_HIT = Color3.fromRGB(255, 0, 50)
local hitCount = 0

-- 変数をツイーン
local tweenInfo = TweenInfo.new(
	TWEEN_TIME,  -- 時間
	Enum.EasingStyle.Exponential,  -- EasingStyle
	Enum.EasingDirection.InOut,  -- 方向転換
	0,  -- RepeatCount (ゼロ未満の場合、tween は無限にループします)
	true  -- リバース (tween は目標に到達した時にリバースする)
)

local function activateAction()
	-- オブジェクトがツイーン中である場合、そのツイーンを再びツイーンさせないでください
	if inTween == true then
		return
	end

	-- ツイーンを作成してプレイ
	local tweenObject = TweenService:Create(partToTween, tweenInfo, {Color = COLOR_ON_HIT})
	tweenObject:Play()
	inTween = true

	-- オブジェクトの完了時に再びクリック可能にする
	tweenObject.Completed:Connect(function()
		inTween = false
		-- ヒット数を増加させる
		hitCount += 1
		-- 3回のヒット後、オブジェクトを破壊する
		if hitCount == 3 then
			partToTween:Destroy()
		end
	end)
end

clickDetector.MouseClick:Connect(activateAction)

このスクリプトは、色を変更するために通常のパーツを使用しますが、適用されたテクスチャの MeshParts を使用することもできます。MeshParts は通常、Roblox Studio でパーツを直接インポートするのではなく、3D モデルをインポートします。

完全にテクスチャ付きのメッシュパーツを作成中である場合は、フォロー中のことを推奨します：

1. スペシャルメッシュを使用する代わりに、メッシュパーツを使用してください。これは、メッシュパーツのテクスチャがスクリプトによって色付けされるためです。

2. スクリプトを変更して、色プロパティではなく、特殊メッシュの VertexColor を変更する。

プロジェクトサンプル

この非コピーロックされていない場プレースのスクリプト例をすべて表示します。すべてのスクリプトを変更することもできます。

スクリプトを含む、回転、スケーリング、および色変更のティーン。 ビュー >