【Roblox】GIFアニメーションをRoblox内で表示する

はじめに

このページでは、Robloxのプレース内でGIFアニメーションを表示する方法を簡単に解説していきます。
ゲーム中の背景に動きを与えたい、ディスプレイなどが飾ってあるお店の背景物に配置するなど、
静的な背景に動きを与えることができるので見栄えも良くなる機能なのでぜひ参考にしてみてください。

Robloxバージョン：0.625.0.6250509

Roblox内での基本的なGIFアニメーションの扱い

Robloxでは直接GIFファイルをサポートしていませんので、GIFをフレームごとの画像に分割する必要があります。

この記事では、複数の画像を連番で呼び出してアニメーションさせる方法と、
1つの画像に連番画像をまとめ、scriptでアニメーションさせる方法の2種を記載します。

また、参考として以下のGiFアニメーションをプレース上のディスプレイ上状の画面にハメ込んで見ます。

複数の画像を連番で呼び出してアニメーションさせる方法

GIFアニメーションの分割

GIFファイルをフレームごとの画像に分割します。オンラインのGIF分割ツールを使用して、GIFを複数のPNG画像に変換します。

画像のアップロード

各フレームの画像をRobloxにアップロードします。RobloxStudioの上部、表示タブからアセット管理を選び、インポートから各画像をアップロードできます。
テクスチャの一覧から後で選択できるようになっていますが、一応各画像のAsset IDをメモしておきましょう。

Textureの作成

スクリーン部分にアニメーションを適用するためのパーツを作成します。
このパーツの子にTextureを追加し、先ほどアップした画像の一番最初のコマのテクスチャを設定します。
そしてディスプレイのサイズに合うようにTextureの大きさを調整してください。

スクリプトの作成

画像をアニメーションさせるためのスクリプトを作成します。
以下は参考のスクリプトになりますので、こちらを参考にカスタマイズしてみてください。

local numFrames = 21 -- 画像の総フレーム数
local currentFrame = 1
local fps = 15 -- フレームレート
local full60fps = false -- 60FPSモードの有効/無効

local assetIds = {
　    　 "rbxassetid://FRAME1_ID",
         "rbxassetid://FRAME2_ID",
        -- その他のフレームも追加
}

local part = script.Parent -- 親のパート

if not part then
    warn("Parent part not found")
    return
end

local decal = Instance.new("Decal")
decal.Face = Enum.NormalId.Front
decal.Parent = part

local function updateTexture()
    if assetIds[currentFrame] then
    	decal.Texture = assetIds[currentFrame]
    else
    	warn("Texture for frame " .. currentFrame .. " not found")
    end
end

while true do
    if not full60fps then
    	wait(1/fps)
    else
    	game:GetService("RunService").Stepped:Wait()
    end

    updateTexture()

    currentFrame = currentFrame + 1
    if currentFrame > numFrames then
    	currentFrame = 1
    end
end

スクリプトの配置

上記のスクリプトをTextureに関連付けます。パーツの下にScriptを追加し、上記スクリプトを貼り付けます。

最後に実行ボタンを押すことで動きが確認できるかと思います。

注意点

この方法ですと、アニメーションが長くなれば長くなるほど必要な連番画像が増えていくので
画像の管理がしずらくなっていきます。
Roblox上では一度アップした画像データはユーザー側から削除することができないので、一部差し換えたい場合や、別パターンを作成したい場合などでもまた何枚もの画像をアップする必要が出ててしまうのでご注意ください。
また、一度画像を読み込んでこなければならないため、起動した当初にカクツキや乱れが出る場合があります。

1つの画像に連番画像をまとめ、scriptでアニメーションさせる方法

連番画像の作成

複数のフレームを一つの大きな画像にまとめます。
基本的に左上から順に右側に流れるように配置していくのが一般的です。

画像のアップロード

作成した大きな画像をRobloxにアップロードします。
RobloxStudioの上部、表示タブからアセット管理を選び、インポートから各画像をアップロードできます。

Textureの作成

連番時と同様にスクリーン部分にアニメーションを適用するためのパーツを作成します。
このパーツにTextureを追加し、先ほど追加した画像をテクスチャとして設定します。
この時連番の最初の画像がディスプレイのサイズになるように位置を調整してください。

スクリプトの作成

アニメーションを制御するスクリプトを作成します。
以下は参考のスクリプトになりますので、こちらを参考にカスタマイズしてみてください。。

local Frames = 60 --Amount of frames in gif
local currentFrame = 1

local rows = 4
local columns = 5

local currentRow,CurrentColumn = 0,0

local linear = false

local fps = 15 -- Max 30
local full60fps = false

local size = script.Parent.Parent.Size -- The gif should be on the front of the part

script.Parent.StudsPerTileU = columns*size.X
script.Parent.StudsPerTileV = rows*size.Y

while true do
    if not full60fps then wait(1/fps) else game:GetService("RunService").Stepped:Wait() end
    if linear then
    	script.Parent.OffsetStudsU = script.Parent.OffsetStudsU + size.X
    	if script.Parent.OffsetStudsU > script.Parent.StudsPerTileU then
		script.Parent.OffsetStudsU = 0
    	end
    else
    	CurrentColumn = CurrentColumn + 1
    	if CurrentColumn > columns then
    		CurrentColumn = 1
    		currentRow = currentRow + 1
    	end
    	if currentFrame > Frames then
    		currentRow,CurrentColumn,currentFrame = 1,1,1
    	end
    	script.Parent.OffsetStudsU = size.X*(CurrentColumn-1)
    	script.Parent.OffsetStudsV = size.Y*(currentRow-1)
    	currentFrame = currentFrame+1
    end
end

スクリプトの配置

上記のスクリプトをTextureに関連付けます。Textureの下にScriptを追加し、上記スクリプトを貼り付けます。

最後に実行ボタンを押すことで動きが確認できるかと思います。

注意点

この方法ですと、1枚の画像でアニメーションさせる都合上Robloxへアップする画像は少なくて済みますが、アニメーションのコマ数（画像数）を多くすることで画像サイズが大きくなってしまうのと、一枚ずつの解像度も合わせて下がってしまうのでご注意ください。

まとめ

上記2つの方法を解説しましたが、それぞれの方法にはメリットとデメリットがありますので、用途に応じて適切な方法を選んでください。
アニメーションを背景に追加することで、全体がリッチにな見た目になるのと表現幅もまた広がるかと思いますので、ぜひ一度お試しください。

以上、ご愛読ありがとうございました。