RobloxにGIFを入れる方法：パーティクル、Part、UIで使う

Robloxに画像をインポートするときはPNG、JPG、BMPが使われ、GIFは最初のフレームだけが表示されます。そのため、アニメーションGIFをDecalとしてアップロードしても動きません。GIFのすべてのフレームを1枚の画像にまとめ、自分で再生するのが解決策です。ParticleEmitterならフリップブックで自動再生でき、ImageLabelなら数行のLuauで再生できます。

再生方法を選ぶ

• ワールド内（炎、ポータル、コイン、ヒットエフェクト）： ParticleEmitterのフリップブックを使います。カメラの方を向き、光り、パーティクルを1つだけ使います。
• Partの表面（テレビ、ポスター、看板）： SurfaceGui内のImageLabelにスプライトシートを設定し、スクリプトでフレームを切り替えます。
• 画面上（報酬の表示、ジャンプスケア、ローディングスピナー）： ScreenGui内の同じImageLabelを使います。

Robloxですぐ使える完成済みアニメーション

ライブラリのすべてのエフェクトは、GIFを使わずにROBLOXボタンからRobloxのフリップブックとしてダウンロードできます。GIFとしてよく検索されるエフェクトをいくつか紹介します。

ドット絵の回転するコイン現金獲得アニメ風金色オーラ転がる火球の爆発カートゥーン風の水しぶきドット絵のポータルゲート回復サークル暗闇の赤い目

自分のGIFをフリップブックパーティクルにする

1. 無料のRobloxフリップブックメーカーを開き、GIFをドロップします。ブラウザ上で処理され、ファイルはアップロードされません。
2. GridはAutoのままにします。最大4フレームなら2x2、最大16フレームなら4x4、最大64フレームなら8x8のグリッドに配置されます。64フレームを超えるGIFでは、タイミングが合うようにフレームが均等に選ばれます。
3. GIFの背景が黒い場合は、BackgroundをBlackに設定して透明にします。
4. フリップブックPNGをダウンロードし、StudioのAsset Managerにアップロードします。アセットIDをコピーします。
5. ワークスペースにPartを置き、Attachmentを追加します。その中にFlipbookという名前のParticleEmitterを追加します。TextureにIDを、FlipbookLayoutにグリッドを、FlipbookModeにOneShotを設定し、Lifetimeにはメーカーに表示される秒数を、Speedには0を設定します。
6. このスクリプトをPartに追加すると、GIFを1つずつのパーティクルでループ再生します。

-- Script inside the Part. The ParticleEmitter is Part > Attachment > Flipbook.
local emitter = script.Parent:WaitForChild("Attachment"):WaitForChild("Flipbook") :: ParticleEmitter
local LIFETIME = 1.2 -- the Lifetime the flipbook maker shows

emitter.Rate = 0
emitter.Lifetime = NumberRange.new(LIFETIME)
while true do
	emitter:Emit(1)
	task.wait(LIFETIME)
end

Sizeを希望するstuds単位のサイズに設定し、光るエフェクトではLightEmissionを1にします。その他のプロパティはRobloxの設定ページにあります。

自分のGIFをPartや画面上で再生する

平面上でアニメーションさせる場合は、GIFからスプライトシートへでスプライトシートを作成します。シートは1024 px以下にしてください（Robloxはそれより大きな画像を縮小します）。Part上のSurfaceGui、またはScreenGuiにImageLabelを配置し、Imageにシートを設定して、フレームを順に切り替えます。

-- LocalScript inside the ImageLabel
local RunService = game:GetService("RunService")
local label = script.Parent :: ImageLabel

local COLUMNS, ROWS = 4, 4 -- the sheet's grid
local FRAMES = 16 -- frames in the sheet (the last row can be part-empty)
local FPS = 12
local SHEET = Vector2.new(1024, 1024) -- the sheet's size in px

local cell = Vector2.new(SHEET.X / COLUMNS, SHEET.Y / ROWS)
label.ImageRectSize = cell
local start = os.clock()
RunService.RenderStepped:Connect(function()
	local i = math.floor((os.clock() - start) * FPS) % FRAMES
	label.ImageRectOffset = Vector2.new((i % COLUMNS) * cell.X, (i // COLUMNS) * cell.Y)
end)

LocalScriptはScreenGui内で実行できます。また、StarterGuiの下に置いたSurfaceGuiでAdorneeをPartに設定した場合も実行できます。Partに直接親子付けしたSurfaceGuiでは、代わりにRunService.Heartbeatを使うScriptを使用します。

知っておきたい制限

• 1024 px： Robloxは1024 x 1024を超える画像を縮小するため、長いGIFは細部が失われます。フレーム数を減らすか、GIFを小さくすると鮮明さを保てます。
• フリップブックあたり64フレーム： Robloxが読み込める最大グリッドは8x8です。長いアニメーションはフレームを均等に選んで再生するか、2つのフリップブックに分けます。
• モデレーション： アップロードした画像は、Decalと同様にすべて審査されます。自作のアニメーションやライブラリのエフェクトなら問題なく通過します。

フリップブックPNGは無料です。各エフェクトページのROBLOXボタンはアカウント不要で使えます。また、無料アカウントでもスタジオから、グリッドとテクスチャサイズを選んで書き出せます（1日3エフェクト）。エミッターを設定済みで再生用Scriptが付いた.rbxmxの準備済みモデルと、UI用のUIFlipbook.luauは、月額$7.99からのすべてのプランに含まれます。