Tween Service について

Roblox LuauのTweenServiceは、

Robloxゲーム内でオブジェクトのアニメーションを作成するための機能です。

使い方が少し複雑で分かりにくいので、

最初面食らうと思います。

私もそうでした。

ですのでじっくり丁寧に解説していきます。

UIの移動や拡大縮小、ワークスペース上のパーツの移動等、

Humanoid以外のオブジェクトのアニメーションでは、

Tween Serviceを使うのが一般的です。

(HumanoidにはAnimatorオブジェクトという

アニメーション専用のオブジェクトが別にあります。)

Tween Serviceを使用すると、

一つの状態から別の状態へのスムーズな遷移を定義できます。

たとえば、オブジェクトの位置、大きさ、透明度、色などのプロパティを

アニメーション化することができます。

TweenServiceは、オブジェクトの現在の状態から、

アニメーションの開始状態、終了状態、時間、

イージングスタイルなどを指定することによって動作します。

アニメーションは、指定した時間にわたって、

指定した開始状態から終了状態に移行していきます。

Tween Serviceの構文と利用例をみてみましょう。

スクリプトを4つのステップに分けると理解しやすいです。

local TS = game:GetService(“TweenService”)

1.変数TSでTween Serviceを参照します。

おなじみのGetServiceメソッドを使います。

local tweenInfo = TweenInfo.new(5)

2.TweenInfoを定義します。

TweenInfoには最大で6つの引数を使えます。

コンストラクタ

new(time: number, easingStyle: EasingStyle, easingDirection: EasingDirection, repeatCount: number, reverses: boolean, delayTime: number)  

引数が沢山ある場合、コンピュータは順序で判別しているので、

順序が非常に大切になります。

Timenumber

Tweenアニメーションの所要時間(秒)

EasingStyleEasingStyle

Tweenアニメーションの挙動変化

EasingDirectionEasingDirection

EasingStyle が適用されるのが、最初の半分(In)、最後の半分(Out)

または両方(InOut)

RepeatCountnumber

Tweenアニメーションが1度実行された後繰り返す回数

Reversesboolean

最初のTweenアニメーション後に逆向きに動作するか否か

DelayTimenumber

Tweenアニメーションが開始するまでの待ち時間(秒)

もちろんこれらを全て使う必要はなく、1つか2つ使う場合が多いです。


ところでここでEasingという単語がでてきましたが、Easingとは何でしょうか?

Roblox Luauのeasingとは、アニメーションやトランジションの効果を制御するための数学的な関数です。easing関数は、オブジェクトの移動や変形を滑らかにし、自然なアニメーションを作るのに役立ちます。

例えば、オブジェクトが緩やかに開いたり閉じたりするアニメーションを作成するには、easing関数を使用することができます。easing関数は、オブジェクトが移動する速度を調整することができます。例えば、加速度や減速度を追加することができます。

Roblox Luauでは、さまざまなタイプのeasing関数が利用可能です。例えば、InQuad、OutQuad、InOutQuadなどのQuad関数、InExpo、OutExpo、InOutExpoなどのExpo関数、InElastic、OutElastic、InOutElasticなどのElastic関数があります。これらの関数は、異なる速度プロファイルを生成し、異なるアニメーション効果を提供するために使用されます。


3.次にTweenのインスタンスを作ります。

local tween = TweenService:Create(part, tweenInfo, goal)

Createメソッドは引数を3つとります。

Create(instance: Instance, tweenInfo: TweenInfo, propertyTable: table)

それぞれ、Tweenの対象となるインスタンス、先ほど作成したTweenInfo,

そして対象インスタンスのプロパティ値のディクショナリーです。

(具体的には

となります。)

複数のプロパティを同時に変化させることも可能ですが、

複数のTweenで同一のプロパティを変化させる場合は、

最新のものだけが実行されます。

このようにTweenはプロパティ値を変化させるものなので、

実際にはアニメーション以外のこと(色の変更等)も行えます。

4.Play()関数でTweenアニメーションを実行します。

tween:Play()

キャンセルするにはCancel()を使います。

tween:Cancel()

このような流れになります。

またTweenServiceと似たようなもので

GUIに対して使えるGuiObject:TweenSizeAndPosition()

というメソッドも存在しますが、

説明は別の機会にします。

それでは具体例をみていきましょう。

ここでは私が実際に作ったエクスペリエンスを使います。

次のリンクからダウンロードして、

TweenInfoの引数やプロパティテーブルを色々いじってみてください。

https://www.roblox.com/games/12538309421/TweenSamples

これによってTweenServiceの仕組みがよくわかるようになり、

使いこなせるようになっていくはずです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です