🎮
RobloxのTween入門

2025/03/06に公開
tween
Roblox
luau
tech
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を組み合わせたり、イベントと連携させたりすることで、もう少し複雑なアニメーションの作成に挑戦することも可能です。

 5. 参考文献Roblox TweenService Documentation
1. Tweenの基本概念

2. TweenServiceの基礎

2.1 TweenServiceとは

2.2 TweenService:Createの基本構文

2.3 TweenInfoのパラメータ解説

2.4 Tweenの作成と再生

2.5 Tweenで変更可能なプロパティ

3. スクリプトの実装例

3.1 位置を滑らかに移動させる

3.2 サイズを変化させる

3.3 色を変化させる（フェードイン・アウト）

3.4 回転させる

4. まとめ

5. 参考文献

Discussion
