フリップブックを使ったRoblox UIエフェクト

ParticleEmitterは3Dワールド内で動作しますが、報酬、ボタン、バッジはScreenGui内にあります。同じフリップブックPNGもそこで再生できます。ImageLabelが1コマずつ表示し、ImageRectSize（コマのピクセル単位のサイズ）とImageRectOffset（左上からのコマの開始位置）を使って、LocalScriptがコマを進めます。

インターフェース向けのエフェクト

実績解除クエスト完了レア度別フレーム受け取りボタン通知バッジのポップクールダウン完了タップきらめき波紋新アイテムのきらめき

ImageLabelでフリップブックを再生する

コマは左上から行ごとに進みます。グリッドとテクスチャサイズはファイル名に記載されています（デフォルトでは、-roblox-8x8.pngは1024 pxのテクスチャ上に8x8コマ）。再生時間はエフェクトページのLifetimeです。

-- LocalScript inside an ImageLabel
local RunService = game:GetService("RunService")

local label = script.Parent
local GRID, SIZE, SECONDS = 8, 1024, 2.8 -- from the file name and the effect page
local cell = SIZE / GRID

label.Image = "rbxassetid://123456789" -- your uploaded flipbook
label.ImageRectSize = Vector2.new(cell, cell)

local start = os.clock()
RunService.RenderStepped:Connect(function()
	local t = (os.clock() - start) / SECONDS
	local i = math.floor((t % 1) * GRID * GRID)
	label.ImageRectOffset = Vector2.new((i % GRID) * cell, (i // GRID) * cell)
end)

これは無限にループします。完成済みモデルにはUIFlipbook.luauが付属します。これは同じ処理に加えて、さらに多くの機能を備えたModuleScriptです。UIFlipbook.play(label, { image, grid, seconds, loop, size, pixelated })は1回再生し、loopがfalseならラベルを非表示にします。ドット絵ではPixelatedのリサンプルモードを設定し、stop()関数を返します。

見た目を整える

• ラベルを正方形にします。各コマは正方形のセルです。ImageLabelにAspectRatio 1のUIAspectRatioConstraintを追加してコマが引き伸ばされないようにし、BackgroundTransparencyを1に設定します。
• 横長バナー：縦より横に長いエフェクトは正方形のセル内に収まるため、横長バナーではセルの一部しか使いません。ParticleFX Studioのエクスポートで4x4または2x2のグリッドを選ぶと、各コマを256または512 pxにできます。
• グロー：ImageLabelはPNGを通常の画像として描画します。ワールド内でLightEmission 1を使う場合のように、光が追加されるわけではありません。光るエフェクトは暗いパネルの上に表示するときれいです。
• ドット絵：拡大縮小してもピクセルエフェクトがくっきり表示されるように、ImageLabelのResampleModeをPixelatedに設定します。
• ワールド内で使う場合：同じスクリプトは、BillboardGui（NPCやペットの頭上に表示するアイコン）またはSurfaceGui（Part上の看板や画面）内のImageLabelでも動作します。

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