TweenServiceの応用テクニック｜連続アニメーションとUI演出でゲームの完成度を上げる

TweenServiceの基本記事でパーツをなめらかに動かす方法を紹介しました。「単発のアニメーションは作れる」という方が次に直面するのは、どう組み合わせて演出を作るかという問題です。

この記事では、連続Tween・ループ・複数プロパティの同時アニメーション・UIへの応用といった応用パターンを実例とともに解説します。ゲームの「完成度の差」はこういった細部の積み重ねです。

---

連続アニメーション：Tweenを順番につなげる

アイテム獲得演出やステージクリア演出など、「動き1→動き2→動き3」と順番に実行したい場面は多くあります。これには Completed イベントを使います。

local TweenService = game:GetService("TweenService")
local part = workspace:WaitForChild("Chest")

local info = TweenInfo.new(0.5, Enum.EasingStyle.Back, Enum.EasingDirection.Out)

-- ① 上に跳ねる
local jumpUp = TweenService:Create(part, info, {
    Position = part.Position + Vector3.new(0, 3, 0)
})

-- ② 元の位置に戻る
local fallDown = TweenService:Create(part, info, {
    Position = part.Position
})

-- ③ 回転してフェードアウト
local infoSpin = TweenInfo.new(0.8, Enum.EasingStyle.Quad, Enum.EasingDirection.In)
local spinOut = TweenService:Create(part, infoSpin, {
    Transparency = 1,
    Size = part.Size * 1.5
})

-- 連続実行
jumpUp:Play()
jumpUp.Completed:Connect(function()
    fallDown:Play()
    fallDown.Completed:Connect(function()
        spinOut:Play()
    end)
end)

Completed イベントはTweenが最後まで再生されたときに発火します。これを入れ子にすることで、タイミングを正確に制御した演出シーケンスが作れます。

---

ループTween：常に動き続けるオブジェクトを作る

環境演出（漂う光・揺れる看板・浮遊するアイテム）では、アニメーションを繰り返し続ける必要があります。RepeatCount を -1 に設定すると無限ループになります。

local TweenService = game:GetService("TweenService")
local lantern = workspace:WaitForChild("Lantern")

local floatInfo = TweenInfo.new(
    2,                              -- 2秒かけて
    Enum.EasingStyle.Sine,          -- なめらかな波形で
    Enum.EasingDirection.InOut,
    -1,                             -- 無限ループ
    true,                           -- 折り返して元の位置に戻る
    0
)

local floatTween = TweenService:Create(lantern, floatInfo, {
    Position = lantern.Position + Vector3.new(0, 1.5, 0)
})

floatTween:Play()

Reverses = true にすることで、上に動いたあと自動的に元の位置に戻ります。Sine + InOut の組み合わせは、呼吸するような自然なループ感が出るのでお祭りや和風の世界観にもよく合います。

---

複数プロパティの同時アニメーション

1つの TweenService:Create() のゴールテーブルには、複数のプロパティを同時に指定できます。位置・サイズ・色・透明度を1つのTweenでまとめて変化させることが可能です。

local TweenService = game:GetService("TweenService")
local gem = workspace:WaitForChild("Gem")

local info = TweenInfo.new(1.2, Enum.EasingStyle.Elastic, Enum.EasingDirection.Out)

local spawnTween = TweenService:Create(gem, info, {
    Position = gem.Position + Vector3.new(0, 5, 0),
    Size      = gem.Size * 1.8,
    Color     = Color3.fromRGB(255, 220, 0),
    Transparency = 0
})

-- 初期状態を透明にしてからTweenで現れさせる
gem.Transparency = 1
spawnTween:Play()

注意点： 同じパーツの同じプロパティを2つのTweenから同時に操作すると競合します。1パーツ・1プロパティに対してTweenは常に1つだけ動かすよう管理してください。

---

UIアニメーション：フェードインとスライドイン

TweenServiceはUIオブジェクト（Frame・TextLabel・ImageLabelなど）にも同じ書き方で使えます。透明度やサイズ・位置をTweenすることで、洗練されたUI演出が作れます。

フェードイン

local TweenService = game:GetService("TweenService")
local Players = game:GetService("Players")
local player = Players.LocalPlayer
local gui = player.PlayerGui:WaitForChild("ResultScreen")
local frame = gui:WaitForChild("Frame")

-- 初期状態：透明
frame.BackgroundTransparency = 1

local fadeIn = TweenService:Create(
    frame,
    TweenInfo.new(0.6, Enum.EasingStyle.Quad, Enum.EasingDirection.Out),
    { BackgroundTransparency = 0 }
)

fadeIn:Play()

スライドイン

UIをスライドさせるには Position プロパティをTweenします。UDim2 を使って画面外から画面内へ動かします。

-- 初期位置：画面右外
frame.Position = UDim2.new(1.2, 0, 0.3, 0)

local slideIn = TweenService:Create(
    frame,
    TweenInfo.new(0.5, Enum.EasingStyle.Back, Enum.EasingDirection.Out),
    { Position = UDim2.new(0.5, 0, 0.3, 0) }
)

slideIn:Play()

Back + Out を使うと、少し行き過ぎてから止まる弾力感が生まれ、UIがパキッと開く印象になります。

---

おわりに

TweenServiceの基本を覚えてから、次に悩んだのは「どう組み合わせるか」でした。単発のアニメーションはできても、連続した演出やUIのフェードインをどう実装するか、試行錯誤が続きました。この記事で紹介したパターンを知ることで、ゲームの完成度が一段階上がります。

EasingStyleの動きをコードを書く前に確かめたいときは、Roblox Tween Generator を活用してください。全パラメータをブラウザ上で設定してすぐ使えるコードをコピーできるので、試行錯誤の時間を大幅に短縮できます。

---

まとめ

テクニック	使いどころ
連続Tween（Completed）	アイテム獲得・ステージクリア演出
ループTween（RepeatCount = -1）	浮遊・揺れなど環境演出
複数プロパティ同時	出現・消滅エフェクト
UIフェードイン	リザルト画面・通知
UIスライドイン	メニュー・パネルの開閉

TweenServiceはパーツもUIも同じAPIで扱えます。基本パターンをひとつ覚えれば、応用先は無限に広がります。