パーツをアニメート

*このコンテンツは、ベータ版のAI(人工知能)を使用して翻訳されており、エラーが含まれている可能性があります。このページを英語で表示するには、 こちら をクリックしてください。

プレイヤーは、自分のアクションがアニメーションで何かを行っているかどうかについてのフィードバックを得ることができます。これは、ヒットすると木が揺れたり、ペットが喜んで飛び跳ねたりすることができます。この場合、プレイヤーがクリックすると移動するボタンを作る方法を示します。

アニメーションでツイーン

オブジェクトをアニメートする 1つの方法は、ティーンを使用することです。A ツイーン 、中間の短縮形は、特定の期間にスタート値を終了値に変更するプロセスです。ティーンは、位置、色、または回転などのプロパティを変更するのに使用できます。

プロジェクトの設定

このプロジェクトでは、ティーンがオブジェクトをスタートポジションからゴールポジションに移動します。

  1. アニメーションする部分を決定します。以下の例では、1 はボタンであり、2 は壁です。

  2. 移動する部分では、クリック検出器と名前が TweenMove のスクリプトを追加します。クリック検出器の名前を変更しないでください。

  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, -- 緩和スタイル
    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つを line: で置き換えるだけです。他のすべての座標を 0 に設定します。

たとえば、この行は代わりに X軸に対して移動します。


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

時間と距離の減衰

スクリプトには、ティーンの動作に影響を与える次の変数が含まれています。TWEEN_TIME のような大文字の名前は、このスクリプトを変更するために特別に書かれています。

以下の 1つの変数の値を変更してみてください:

  • 行 11 - TWEEN_TIME : ティーンが起こるのにかかる時間(秒)。
  • ライン 12 - TWEEN_MOVE_DISTANCE : ボタンがスタッドで移動する距離。

他のプロパティを比較する

数値データタイプを持つほとんどのプロパティは、減少することができます。このセクションには、回転などの一般的なプロパティが含まれており、ゲームにより多くのプレイヤーのフィードバックをもたらすのに使用できます。複数のプロパティを一度に保持することもできます。

プロパティの完全なリストについては、TweenService API ページを参照してください。

回転

回転のために、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, -- 緩和スタイル
Enum.EasingDirection.Out, -- 緩和方向
1, -- RepeatCount (ゼロ未満の場合、減衰が無期限にループする)
true -- リバース (ターゲットに到達すると、戻ります)
)
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, -- 緩和スタイル
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)

色変更

パーツは、カラー3 値で減衰して色を切り替えることができます。たとえば、敵や破壊可能なオブジェクトは、色をフラッシュして、ヒットやクリックされたというフィードバックを与えることができます。


-- クリックしてオブジェクトの色を変更し、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, -- 緩和スタイル
Enum.EasingDirection.InOut, -- 緩和方向
0, -- RepeatCount (ゼロ未満の場合、減衰が無期限にループする)
true -- リバース (ターゲットに到達すると、戻ります)
)
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)

このスクリプトは、通常のパーツを変更色に変更するとともに、適用されたテクスチャを持つメッシュパーツにこれを使用することもできます。メッシュパーツは、Roblox Studio で直接ビルドされるパーツよりも、3Dモデルをよくインポートします。

完全にテクスチャ化されたメッシュパーツで作業している場合、フォロー中のことをお勧めします:

  1. 特別なメッシュをメッシュパーツの代わりに使用する。これは、メッシュパーツのテクスチャがスクリプトによって色が変更されているのをオーバーライドするためです。

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

プロジェクトサンプル

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

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