ドアを開け閉めしたいんだけど、アニメーションで動かすにはどうやったら良いんだろう・・
アニメーション機能に特化したTweenサービスを使うことによって、簡単に出来ちゃうよ。
例として、学校の校門を開け閉めするプログラミングを事例に教えるね。
出来るようになること
Tweenサービスを使ったモノを動かすアニメーションが出来るようになります。
Tweenサービスは、２つの値の間をスムーズに変化させることができます。オブジェクトの位置、大きさ、色をアニメーション化することが出来るのです。
Tweenを作る
Tweenは、２つの値の間をアニメーションするので、スタートとゴールを決めます。
スタートに移動前の門を置き、移動先となるゴールに同じパーツをコピーし、衝突しないようにプロパティのCanCollide を”1″にします。また、移動先のパーツが見えないようにTransparency を”1″ にしましょう。
校門手前に置いたボタンに触れたら、校門が開くようにしたいため、ボタンにスクリプトを追加しました。スクリプトの内容を記載して解説していきます。
①最初にTweenService を利用することを宣言します。
-- サービス
local TweenService = game:GetService("TweenService")②プレイヤーがボタンに触れると校門が動くようにしたいため、スクリプトの親を指定します。
-- ボタン
local button = script.Parent③ボタンに触れたら、OpenKomon という関数を呼び出すようにします。
button.Touched:Connect(OpenKomon)④OpenKomon 関数でTweenService を利用し、パーツを動かすよう指定します。
-- 校門の位置設定
local part1 = workspace.MonLeft
local part2 = workspace.MonLeft2
local part3 = workspace.MonRight
local part4 = workspace.MonRight2
-- goal となるパーツを指定。座標指定でも良いです。
local goal2 = {}
goal2["Size"] = part2.Size
goal2["Color"] = part2.Color
goal2["CFrame"] = part2.CFrame
local goal4 = {}
goal4["Size"] = part4.Size
goal4["Color"] = part4.Color
goal4["CFrame"] = part4.CFrame
local function OpenKomon(player)
local tweenInfo = TweenInfo.new(6)
local tween = TweenService:Create(part1, tweenInfo, goal2) -- part1をgoal2へ移動させる
tween:Play() -- tweenアニメーションの再生
local tweenInfo = TweenInfo.new(6)
local tween = TweenService:Create(part3, tweenInfo, goal4) -- part3をgoal4へ移動させる
tween:Play() -- tweenアニメーションの再生
end)TweenInfo について説明します。TweenInfoを利用することでパラメータを設定することができます。パラメータは必要な分だけ設定すればよく、設定しなかったパラメータはそれぞれのデフォルトの値になります。
| Time | 補完時間 |
| EasingStyle | モーション制御 |
| EasingDirection | モーションの方向 |
| RepeatCount | 繰り返し回数(-1で永遠) |
| Reverses | 繰り返すときに逆再生するか |
| DelayTime | 再生までの遅延時間 |
EasingStyle は、アニメーションにイージング（緩やかな動き）を加えるために使用するパラメータです。基本的な動きはLinear ですが、いろいろな動きがあるので、用途によって使い分けましょう。
| 項目 | 値 | 説明 |
| Linear | 0 | 一定の速度で移動します。 |
| Sine | 1 | サイン関数のような曲線を描きながらアニメーションを実行します。最初は遅く始まり、中間で速度が最高になり、最後にゆっくりと終了します。 |
| Back | 2 | ターゲットをわずかにオーバーシュートしてから、元の位置に戻ります。 |
| Quad | 3 | 2次関数のような曲線を描きながらアニメーションを実行します。最初は遅く始まり、中間で速度が増加し、最後に急激に終了します。 |
| Quart | 4 | Quadに似ていますが、より高速で開始します。 |
| Quint | 5 | Quartに似ていますが、より高速で開始します。 |
| Bounce | 6 | バウンドするような動きをするアニメーションを実行します。指定した距離まで進み、その後、指定した距離よりも高い場所にバウンドしてから再度目的地に戻ります。 |
| Elastic | 7 | 輪ゴムのように動き、ターゲットを数回オーバーシュートします。 |
| Exponential | 8 | トゥイーンがターゲットに近づくと、速度が急速に低下します。 |
| Circular | 9 | トゥイーンがターゲットに近づくにつれて減速し、円をたどります。 |
| Cubic | 10 | Quadに似ていますが、低速で開始します。 |
こちらは、スクリプトの全体です。
-- サービス
local TweenService = game:GetService("TweenService")
-- ボタン
local button = script.Parent
-- 校門の位置設定
local part1 = workspace.MonLeft
local part2 = workspace.MonLeft2
local part3 = workspace.MonRight
local part4 = workspace.MonRight2
local goal2 = {}
goal2["Size"] = part2.Size
goal2["Color"] = part2.Color
goal2["CFrame"] = part2.CFrame
local goal4 = {}
goal4["Size"] = part4.Size
goal4["Color"] = part4.Color
goal4["CFrame"] = part4.CFrame
local function OpenKomon(player)
local tweenInfo = TweenInfo.new(6)
local tween = TweenService:Create(part1, tweenInfo, goal2) -- part1をgoal2へ移動させる
tween:Play() -- tweenアニメーションの再生
local tweenInfo = TweenInfo.new(6)
local tween = TweenService:Create(part3, tweenInfo, goal4) -- part3をgoal4へ移動させる
tween:Play() -- tweenアニメーションの再生
end)
button.Touched:Connect(OpenKomon)※参考資料
https://create.roblox.com/docs/reference/engine/classes/Tween
https://create.roblox.com/docs/reference/engine/enums/EasingStyle
校門を作ってくれたモデラーさんは、こちら👇
コメント