RobloxのTween入門
RobloxでオブジェクトやUIを滑らかに動かしたり、フェードイン・アウトなどのアニメーション効果をつけたい場合、Tween(トゥイーン) と呼ばれる機能を使うと簡単に実現できます。
Tweenを使えば、オブジェクトの位置や色、サイズなどのプロパティを一定時間かけて徐々に変化させることができます。
本記事では、Tweenの基本概念からRobloxのTweenServiceの使い方を詳しく解説します。
1. Tweenの基本概念
Tween(トゥイーン) とは、「補間(interpolation)」とも呼ばれ、ある数値や状態から別の数値や状態へ、中間の値を自動的に算出して滑らかに遷移させる技術のことです。
アニメーション制作の分野では、中間のコマを自動生成する技法を指しますが、Robloxにおいてもこの概念を利用し、オブジェクトの様々なプロパティを滑らかに変化させることができます。
具体的には、Tweenを使うと以下のようなことが簡単に実現できます。
- オブジェクト(パーツ)の位置をA点からB点へゆっくり移動させる
- パーツのサイズを徐々に大きくしたり小さくしたりする
- 色を時間経過とともに変化させてフェードイン・フェードアウト効果を出す
- オブジェクトを回転させて向きを変える
- UI要素(ボタンやフレームなど)のサイズ・位置・透明度をアニメーション表示する
Tweenを使う最大のメリットは、スクリプトで逐一値を変更するループを書かなくても、Robloxエンジン側で自動的に中間値を補完してくれる点です。
例えば、自分でwhile
ループを使って0.1秒ごとに位置を少しずつ動かすコードを書く代わりに、Tweenに任せれば1行の命令で同じことが実現できます。これにより、コードがシンプルになり、滑らかなアニメーションを簡単に取り入れられます。
RobloxではTween機能を提供するクラスとしてTweenServiceが用意されています。
次のセクションでは、このTweenServiceの基本的な使い方を見ていきましょう。
2. TweenServiceの基礎
2.1 TweenServiceとは
TweenServiceは、Robloxのサービスの一つで、Tween(補間アニメーション)を作成・管理するための機能を提供します。
game:GetService("TweenService")
で取得でき、主に TweenService:Create() 関数を使ってTweenオブジェクトを作成します。
TweenServiceを使うと、対象となるオブジェクトと変更したいプロパティ、そして補間の詳細情報を指定して、Tween(アニメーション)を作成できます。
一度Tweenを作成して再生(:Play()
)すると、Robloxエンジンが指定された時間をかけて対象のプロパティを目標の値まで変化させてくれます。
2.2 TweenService:Createの基本構文
TweenServiceでTweenを作成する基本的な構文は次のとおりです。
local TweenService = game:GetService("TweenService")
local tweenInfo = TweenInfo.new(時間, イージングスタイル, イージング方向, 繰り返し回数, 往復, 遅延時間)
local 目標値テーブル = { プロパティ名1 = 目標値1, プロパティ名2 = 目標値2, ... }
local tween = TweenService:Create(対象オブジェクト, tweenInfo, 目標値テーブル)
tween:Play() -- 作成したTweenを再生開始
各項目の意味は以下のとおりです。
- 対象オブジェクト: Tweenでアニメーションさせたいインスタンス(例: PartやUIなど)。
- tweenInfo: 補間の詳細パラメータを指定するTweenInfoオブジェクト。
- 目標値テーブル (goal): オブジェクトのどのプロパティを、最終的にどの値まで変化させるかを辞書(table)形式で指定します。
-
tween: Create関数が返すTweenオブジェクト。
Play()
メソッドでアニメーションを開始できます。
参考: TweenInfo
2.3 TweenInfoのパラメータ解説
TweenInfoは、Tweenの動作(時間やイージングの種類など)を設定するためのオブジェクトです。TweenInfo.new()
の引数で細かく指定できます。それぞれの引数と意味を解説します。
TweenInfo.new(
Time, -- 補間にかける時間(秒)
EasingStyle, -- イージングスタイル(補間曲線の種類)
EasingDirection, -- イージングの方向
RepeatCount, -- 繰り返し回数
Reverses, -- 往復するかどうか
DelayTime -- 遅延時間(秒)
)
-
Time (時間): Tweenにかける時間(秒)です。デフォルトは1(秒)。時間が長いほどゆっくり変化し、短いほど素早く変化します。例えば2.0を指定すると、プロパティが初期値から目標値に達するまでに2秒かけます。
-
EasingStyle (イージングスタイル): 補間の速度変化の曲線(動きの“感じ”)を指定します。デフォルトは
Enum.EasingStyle.Quad
(二次曲線的な動き)です。主なイージングスタイルには以下のようなものがあります。-
Enum.EasingStyle.Linear
:一定の速度で変化します(直線的)。 -
Enum.EasingStyle.Quad
:最初ゆっくり、途中で加速し、終わりで減速。 -
Enum.EasingStyle.Bounce
:弾むような動きで目標に近づき、最後にバウンドするような効果。 -
Enum.EasingStyle.Elastic
:バネのように振動しながら収束する動き。
※イージングスタイルを変えると、同じ時間でも動き方が大きく変わります。例えばBounceにすると終わり際にバウンドする視覚効果が得られます。
参考: EasingStyle
-
-
EasingDirection (イージング方向): 補間の方向を
Enum.EasingDirection
で指定します。デフォルトはOut
です。-
Out
:開始時が速く、終了時にゆっくり(減速しながら終わる動き)。 -
In
:開始時がゆっくり、終了時に速く(加速しながら終わる動き)。 -
InOut
:開始時ゆっくり、途中速く、終わりまたゆっくり(両方の組み合わせ)。
例えば、
Quad
かつOut
にすると、最初勢いよく動き出し、最後にかけてゆっくり停止するような挙動になります。参考: EasingDirection
-
-
RepeatCount (繰り返し回数): Tweenを何回繰り返すかを指定します。デフォルトは0(繰り返しなし、一度きり)。
- 0の場合、1回再生して終了します。
- 1以上の整数を指定すると、その回数だけ完了後に再度Tweenを繰り返します(例えば1を指定すると合計2回再生することになる)。
- -1を指定すると無限ループになり、停止するまでずっとTweenを繰り返します。
-
Reverses (往復): 繰り返し時に往復するかどうか。デフォルトはfalse。trueにすると、一度目の補間で目標値に到達した後、次の繰り返しでは逆方向に補間されます。例えばPositionを移動するTweenで
RepeatCount=1
かつReverses=true
にすると、最初に目的地まで移動し、次に出発点まで戻ってきて停止します(往復運動)。 -
DelayTime (遅延時間): Tweenを再生開始してから実際に補間が始まるまでの待ち時間を秒で指定します。デフォルトは0秒です。例えば
DelayTime=2
にすると、Play()
してから2秒間待ってからゆっくり動き始めます。連続したアニメーションの演出や、一定時間遅れてから効果を出したい場合に使えます。
2.4 Tweenの作成と再生
TweenServiceとTweenInfoを使ってTweenを作成する方法を簡単な例で見てみましょう。
まず、Workspaceにあるパーツを1つ用意しておきます(名前を"Part"とします)。
このパーツの色を赤から青に5秒かけて変化させるTweenを作ってみます。
--!strict
-- TweenServiceを取得
local TweenService = game:GetService("TweenService")
-- 対象オブジェクトとなるパーツ
local part: BasePart = game.Workspace.Part
part.Anchored = true
-- Tweenの目標値を設定(Colorプロパティを赤から青へ)
local goal = {}
goal.Color = Color3.fromRGB(0, 0, 255) -- 目標の色:青 (R=0,G=0,B=255)
-- Tweenの情報を設定(5秒間かけて線形に変化)
local tweenInfo = TweenInfo.new(
5, -- Time: 5秒かけて変化
Enum.EasingStyle.Linear, -- EasingStyle: 線形補間
Enum.EasingDirection.Out, -- EasingDirection: 終わりゆっくり
0, -- RepeatCount: 繰り返しなし
false, -- Reverses: 往復なし
0 -- DelayTime: 遅延なし
)
-- Tweenを作成
local tween = TweenService:Create(part, tweenInfo, goal)
-- Tween再生開始
tween:Play()
上記のスクリプトを実行すると、Part
の色が5秒かけて赤から青に変化します。TweenService:Create(...)
でTweenオブジェクトを生成し、tween:Play()
で実行しています。
💡ポイント
-
TweenService:Create()
の第3引数にはテーブルで目標値を渡します。複数のプロパティを同時に変化させたい場合は、このテーブルに複数のキーと値を入れます。例えば、同時に位置も変えたい場合はgoal = {Color = Color3.fromRGB(0,0,255), Position = Vector3.new(10,5,0)}
のように設定できます。Tweenは複数プロパティの同時補間も可能です。 -
tween:Play()
を呼び出さないとTweenは開始しません。Createで作成しただけでは動かない点に注意してください。 - Tweenは非同期に動作します。スクリプトは
tween:Play()
を呼び出した後すぐに次の行に進みます。Tweenの完了を待って処理をしたい場合は後述するイベント(Completed)を使う必要があります。
2.5 Tweenで変更可能なプロパティ
RobloxのTweenService
はすべてのプロパティを補間できるわけではありません。数値型や色、座標など、連続的な値を持つプロパティが対象になります。具体的には、次のような型のプロパティがTween可能です。
-
数値 (
Number
) -
論理値 (
Boolean
) ※ 0から1への補間のように扱われ、主にUIのVisible
などON/OFFの遷移に使用 -
Vector系 (
Vector3
,Vector2
など) -
座標系 (
CFrame
,UDim2
など) -
色 (
Color3
) - UDim, UDim2(UIのサイズや位置)
例えば、BasePart
(パーツ) であれば、Position
(位置)、Size
(サイズ)、Color
(色)、Transparency
(透明度)などがTween可能です。
一方、Anchored
のOn/Offや CanCollide
などのブール値プロパティは、Tweenで補間されるのではなく、Tween完了時にパッと切り替わる動作になります。
例えば、Anchored
をfalse
からtrue
にTweenすると、Tween時間の経過後にfalse → true
に一気に変わるだけです。
⚠ 注意点
同一オブジェクトの同一プロパティに対し、同時に複数のTweenを再生することはできません。
あるプロパティに新しいTweenを開始すると、すでに再生中のTweenは自動的にキャンセルされます。
例えば、あるPart
のColor
をブルーへ変更中に、別のTweenでColor
をグリーンへ変更しようとすると、最初のブルーへの変更は途中で停止し、新しく開始したグリーンへの変更に置き換わります。
この性質を利用することで、ユーザーの操作に応じて途中でアニメーションを別の動きに切り替える(上書きする)ことも可能です。
3. スクリプトの実装例
ここでは、Tweenを使って基本的なアニメーション効果を実装するいくつかの例を紹介します。
位置の移動、サイズ変更、色変更、回転など、よく使われるTweenの実例をコード付きで説明します。
3.1 位置を滑らかに移動させる
例えば、あるパーツ(Part)を現在位置から別の位置まで滑らかに移動させるとします。
以下のコードでは、Workspace内のMovingPart
というパーツを(0, 5, 0)から(20, 5, 0)の位置まで、3秒かけて移動させます。
--!strict
local TweenService = game:GetService("TweenService")
local part: BasePart = game.Workspace.MovingPart
part.Anchored = true
-- 目標の位置を設定(現在の位置からX方向に20スタッド移動)
local targetPosition = Vector3.new(20, 5, 0)
local tweenInfo = TweenInfo.new(
3, -- 3秒かけて
Enum.EasingStyle.Quad,
Enum.EasingDirection.Out
)
local goal = { Position = targetPosition }
local moveTween = TweenService:Create(part, tweenInfo, goal)
moveTween:Play()
解説:
上記スクリプトを実行すると、MovingPart
はゆっくりと右方向に滑らかに移動していきます。EasingStyle.Quad
かつEasingDirection.Out
を指定しているので、最初は速く動き出し、最後の方でゆっくり減速して止まる自然な移動になります。これをLinear
に変えれば一定の速度で動くアニメーションになります。
ポイントとして、MovingPart
がアンカー(Anchored)を明示的にtrue
に設定しています。
アンカーされていないパーツを移動すると物理演算が働いて思わぬ挙動になる可能性があるので、純粋なアニメーション目的でTweenするパーツはAnchored = true
(アンカー固定)にしておくと良いでしょう。
3.2 サイズを変化させる
次に、パーツのサイズを徐々に大きくする例を見てみましょう。Size
プロパティはVector3
で表されるので、その各成分(X, Y, Z)をTweenで変化させることができます。
以下のコードでは、ResizablePart
というパーツのサイズを現在の2倍の大きさに、1.5秒かけて拡大します。
--!strict
local TweenService = game:GetService("TweenService")
local part: BasePart = game.Workspace.ResizablePart -- 対象のパーツ
part.Anchored = true
local currentSize = part.Size
local targetSize = currentSize * 2 -- 各軸を2倍に(単純にVector3をスカラー倍)
local tweenInfo = TweenInfo.new(
1.5,
Enum.EasingStyle.Linear,
Enum.EasingDirection.Out
)
local goal = { Size = targetSize }
local sizeTween = TweenService:Create(part, tweenInfo, goal)
sizeTween:Play()
解説:
ResizablePart
の大きさがゆっくりと2倍になります。ここではLinear
の補間を使っているため、サイズは一定のペースで徐々に大きくなります。
Quad
を使えば、最初ゆっくり最後速く、Bounce
を使えば弾むように伸縮するといった演出も可能です。
サイズ変更も見た目上の変化なので、こちらもパーツが物理的に動かないようAnchored推奨です。
また、サイズが変わることで周囲のオブジェクトと衝突したり重なったりする可能性がある点には注意してください。
3.3 色を変化させる(フェードイン・アウト)
色の変化、特にフェードイン・フェードアウト効果(だんだん表示/非表示になる)はUIでも3Dパーツでもよく使われます。色そのものを変える場合はColor
プロパティ(Color3型)をTweenし、透明度でフェードさせる場合はTransparency
プロパティ(0から1の数値)をTweenします。
以下の例では、ColorPart
というパーツの色を緑色から赤色にゆっくり(4秒かけて)変化させ、その途中に少しバウンドするようなイージングをかけてみます。
--!strict
local TweenService = game:GetService("TweenService")
local part: BasePart = game.Workspace.ColorPart -- 初期色が緑 (0,255,0) のパーツ
part.Anchored = true
local startColor = part.Color -- 例えばColor3.fromRGB(0, 255, 0)
local endColor = Color3.fromRGB(255, 0, 0) -- 赤色
local tweenInfo = TweenInfo.new(
4,
Enum.EasingStyle.Bounce, -- バウンドするような動き
Enum.EasingDirection.Out
)
local goal = { Color = endColor }
local colorTween = TweenService:Create(part, tweenInfo, goal)
colorTween:Play()
解説:
実行すると、ColorPart
の色が緑から赤に変わっていきます。EasingStyle.Bounce
のおかげで、色が変わりきる直前に少し行き過ぎて戻る(バウンドする)ような効果が出ます。
色のTweenでは変化の過程で色混ざり合うため、緑→赤では途中で黄色っぽく見えたりと面白い効果になります。
同様に、透明度(Transparency)をTweenすれば、オブジェクトの見え方をフェードアウト/インできます。
例えば透明度0(完全不透明)から1(完全透明)へのTweenをかければ徐々に消えていく効果になります。
3.4 回転させる
オブジェクトを回転させるには、Orientation
プロパティ(Vector3)やCFrame
プロパティをTweenします。
Orientation
はXYZ各軸回りの回転角(degree)を持つVector3です。
単純に回転させたい場合は、このOrientationの値を変化させるのがわかりやすいでしょう。
以下の例では、RotatingPart
というパーツをY軸周りに180度回転させます(0度から180度まで変更)。
2秒かけて回転し、しかも往復して元に戻るアニメーションにしてみます。
--!strict
local TweenService = game:GetService("TweenService")
local part: BasePart = game.Workspace.RotatingPart -- 対象のパーツ
part.Anchored = true
local currentOrientation = part.Orientation -- 現在のOrientation (例: (0, 0, 0))
local targetOrientation = Vector3.new(currentOrientation.X, currentOrientation.Y + 180, currentOrientation.Z)
-- 2秒で半回転し、さらにもう1回逆回転して戻る(往復)
local tweenInfo = TweenInfo.new(
2,
Enum.EasingStyle.Quad,
Enum.EasingDirection.InOut,
1, -- RepeatCount: 1回繰り返す(合計2回実行)
true -- Reverses: 繰り返し時に逆再生する
)
local goal = { Orientation = targetOrientation }
local rotateTween = TweenService:Create(part, tweenInfo, goal)
rotateTween:Play()
解説:
RotatingPart
は2秒かけて180度回転し、その後自動的に逆方向に2秒かけて回転して元の向きに戻ります。
これはRepeatCount=1
とReverses=true
の組み合わせによって、1回往復するTweenになっているためです。
EasingDirection.InOut
を指定しているので、回転の開始と終了がゆっくり、中間で速くなるような自然な動作になっています。
このように、TweenInfoのパラメータを工夫することで、一つのTweenで往復運動やループする動きを作ることもできます。
4. まとめ
本記事では、RobloxにおけるTweenの基本的な使い方を解説しました。
Tweenは、オブジェクトやUIのプロパティを滑らかに変化させるための強力なツールであり、TweenServiceを活用することで、滑らかなアニメーション効果を簡単に実装できます。
さらに、複数のTweenを組み合わせたり、イベントと連携させたりすることで、もう少し複雑なアニメーションの作成に挑戦することも可能です。
Discussion