RobloxのTweenServiceを使いこなす！アニメーション実装の基本と実践
Robloxのゲームで「扉がスムーズに開く」「アイテムがふわっと浮かび上がる」「ステージクリア時にオブジェクトが飛んでいく」といった演出を見たことはありませんか？これらはほぼ間違いなく TweenService で実現されています。
TweenServiceはRoblox開発でもっとも使う頻度の高いサービスのひとつです。コードの量は少なく、覚えるべき概念も限られているので、スクリプト初心者でも比較的早く習得できます。この記事ではTweenServiceの仕組みから実際に使えるコードまでを段階的に解説します。
TweenServiceとは何か
Tween（トゥイーン） とは、ある状態から別の状態へ、指定した時間をかけてなめらかに変化させる技術です。「in-between（中間）」を略したのがTweenの語源で、アニメーション業界でも長く使われてきた概念です。
Robloxでは TweenService というサービスを通じてこの機能を利用できます。パーツの位置・回転・サイズ・透明度・色など、数値や型で表現できるプロパティならほとんどすべてTweenで補間できます。
まず最初に game:GetService("TweenService") でサービスを取得します。以降の操作はすべてこのオブジェクトを通して行います。
local TweenService = game:GetService("TweenService")
TweenInfo：アニメーションの「設計書」
Tweenを作る前に TweenInfo を用意する必要があります。TweenInfoはアニメーションの動き方を定義するオブジェクトです。
local info = TweenInfo.new(
1.5, -- 時間（秒）
Enum.EasingStyle.Quad, -- イージングスタイル
Enum.EasingDirection.Out, -- イージング方向
0, -- 繰り返し回数（0=繰り返しなし）
false, -- 逆再生するか
0 -- 開始までの待機時間（秒）
)
引数が多く見えますが、実際によく使うのは最初の3つです。
EasingStyleの選び方
| スタイル | 動きの印象 | 向いている用途 |
|---|---|---|
Linear |
一定速度・機械的 | ローディングバーなど |
Sine |
なだらかな波のような加速 | 浮遊・呼吸のような環境演出 |
Quad |
自然なゆっくり加速・減速 | ほとんどの場面に使える万能型 |
Back |
少し行き過ぎてから戻る | ボタン・ポップアップUI |
Bounce |
バウンドして止まる | コミカルな演出 |
Elastic |
ゴムのように揺れる | キャラクター演出 |
迷ったら Quad + EasingDirection.Out の組み合わせが自然な動きになるのでおすすめです。
EasingDirectionの選び方
EasingDirectionは「どのタイミングで変化が大きいか」を決めます。
In：最初はゆっくり、終わりに向かって速くなるOut：最初に勢いよく動き、終わりに向かってゆっくり止まる（最も自然に見える）InOut：最初と終わりの両方でゆっくりになる（往復アニメーションに向いている）
ほとんどの場合は Out を選んでおけば問題ありません。
EasingStyleごとの動きの違いを実際に確認したいときは、Roblox Tween Generator でリアルタイムにプレビューできます。プレビューに反映されるのは Time・EasingStyle・EasingDirection の3つです。RepeatCount・DelayTime・Reversesはプレビューには表示されませんが、コピーされるコードにはきちんと含まれます。
実践コード：扉を開けるアニメーション
理論より実際に動くコードを見た方が理解は早いです。よくあるユースケース「プレイヤーが近づいたら扉が開く」を例に書いてみます。
local TweenService = game:GetService("TweenService")
-- ドアのパーツを取得（Explorerで名前を合わせること）
local door = workspace:WaitForChild("Door")
-- 開いた状態の位置（元の位置から上に4マス移動）
local openPosition = door.Position + Vector3.new(0, 4, 0)
-- TweenInfo：0.8秒・Quad・Out
local info = TweenInfo.new(0.8, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)
-- Tweenを作成
local openTween = TweenService:Create(door, info, { Position = openPosition })
-- ProximityPromptで起動する例
local prompt = door:FindFirstChildOfClass("ProximityPrompt")
if prompt then
prompt.Triggered:Connect(function()
openTween:Play()
end)
end
ポイント： Position だけを指定しているので、扉が横にスライドするだけで回転はしません。回転も加えたい場合は CFrame を使います。
よくある落とし穴と対処法
① サーバースクリプトが座標を上書きしてしまう
ServerScriptService 内のスクリプトは毎回起動時に実行されます。もしスクリプト内でパーツの初期座標を指定している場合、Tweenで動かした後に再起動するとリセットされてしまいます。初期位置の設定は workspace 上で直接行い、スクリプトでは変化量（差分）だけを扱う設計にするとトラブルが減ります。
② Anchoredになっていないパーツが物理演算で落ちる
TweenはAnchoredのパーツでも動作します。ただし、AnchoredをOFFにするとTween中に重力の影響を受けて落下することがあります。Tween中は Anchored = true にしておくのが基本です。
③ Tweenが途中で止まる・スキップされる
複数のTweenを連続して実行するとき、前のTweenを :Cancel() または :Pause() せずに新しいTweenを :Play() すると予期しない動作になることがあります。状態管理をしっかり行い、1つのパーツに対して複数のTweenが競合しないよう注意しましょう。
もっと効率よくTweenを設計するには
TweenService自体はシンプルですが、EasingStyleの組み合わせは30種類以上あり、時間や方向も含めると膨大なパターンになります。コードを書く前に動きをイメージしておくことが時間の節約につながります。
そこで役立つのが Roblox Tween Generator です。ブラウザ上でEasingStyleとEasingDirectionをリアルタイムにプレビューしながら、Time・RepeatCount・DelayTime・Reversesも含めた全パラメータを設定して、すぐ貼り付けられるLuaコードをワンクリックでコピーできます。ブラウザ完結でデータは一切外部に送信されないので、安心して使えます。Studio上で何度も試して時間を無駄にする前に、まずこのプレビューツールで動きを確認してからコードに落とし込む流れがおすすめです。
おわりに
Robloxの公式ドキュメントは情報量が豊富で、開発者にとって非常に心強い存在です。一方で、何から始めればいいかわからない初心者にとっては、どこを見ればいいかの入口自体が見つけにくいと感じることもあります。TweenServiceはそんな入口のひとつです。「こんな動きができるんだ」という発見が、次のアイデアのきっかけになることも多いです。
まとめ
TweenServiceを使いこなすと、Robloxゲームの「感触」が大きく変わります。動きのあるゲームは静止したゲームよりプレイヤーが長く遊んでくれる傾向があり、世界観の演出にも大きく貢献します。
まずは Quad + Out の組み合わせで1秒のTween を1つ書いてみてください。それだけで扉・看板・エフェクトなど多くの場面に応用できます。慣れてきたら Back や Elastic で個性を出していくと、より印象的な演出が作れます。
TweenServiceをひとつ習得したら、次はUIアニメーション（Frame のサイズや透明度をTweenで変化させる）や、図鑑ポップアップの開閉演出など、画面上のUI要素にも応用してみましょう。コードの書き方はまったく同じで、対象をパーツからUIオブジェクトに変えるだけです。小さな動きの積み重ねが、ゲーム全体のクオリティを底上げしていきます。