Roblox에 GIF 넣는 방법: 파티클, 파트 또는 UI로 표시하기

Roblox는 이미지를 PNG, JPG 또는 BMP로 가져오며 GIF의 첫 프레임만 표시하므로, 애니메이션 GIF를 Decal로 업로드하면 움직이지 않습니다. GIF의 모든 프레임을 하나의 이미지에 넣고 직접 재생하면 해결됩니다. ParticleEmitter는 플립북으로 자동 재생하고, ImageLabel은 몇 줄의 Luau로 재생합니다.

재생 방법 선택하기

• 월드 안에서 (불, 포털, 코인, 타격 효과): ParticleEmitter의 플립북을 사용합니다. 카메라를 향하고 빛나며, 파티클 하나만 사용합니다.
• 파트 표면에 평평하게 표시 (TV, 포스터, 표지판): SurfaceGui 안의 ImageLabel에 스프라이트 시트를 넣고 스크립트로 프레임을 차례로 표시합니다.
• 화면에 표시 (보상 팝업, 점프 스케어, 로딩 스피너): ScreenGui 안에 같은 ImageLabel을 사용합니다.

Roblox에서 바로 사용할 수 있는 기성 애니메이션

라이브러리의 모든 이펙트는 ROBLOX 버튼으로 Roblox 플립북으로 다운로드할 수 있어 GIF가 필요 없습니다. GIF로 자주 찾는 이펙트 몇 가지를 소개합니다.

픽셀 아트 회전 코인돈 획득 팝애니 황금 오라구르는 화염구 폭발카툰 물보라픽셀 아트 포털 문치유 마법진어둠 속 붉은 눈

직접 만든 GIF를 플립북 파티클로 변환하기

1. 무료 Roblox 플립북 메이커를 열고 GIF를 끌어다 놓으세요. 브라우저에서 실행되며 파일을 업로드하지 않습니다.
2. Grid는 Auto로 두세요. 프레임이 4개 이하면 2x2 그리드, 16개 이하면 4x4, 64개 이하면 8x8 그리드에 들어갑니다. 더 긴 GIF는 타이밍을 유지하도록 프레임 64개를 균등하게 선택합니다.
3. GIF의 배경이 검은색이면 Background를 Black으로 설정해 투명하게 만드세요.
4. 플립북 PNG를 다운로드해 Studio의 Asset Manager에 업로드하세요. 에셋 ID를 복사합니다.
5. 워크스페이스에 Attachment가 있는 Part를 넣고, Attachment 안에 Flipbook이라는 이름의 ParticleEmitter를 넣으세요. Texture를 ID로, FlipbookLayout을 그리드로, FlipbookMode를 OneShot으로 설정합니다. Lifetime은 메이커에 표시된 초 단위 시간으로, Speed는 0으로 설정합니다.
6. Part에 이 스크립트를 추가하세요. GIF를 파티클 하나씩 반복 재생합니다.

-- 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를 파트나 화면에 표시하기

평면 애니메이션을 만들려면 GIF를 스프라이트 시트로 변환해 스프라이트 시트를 만드세요. 시트 크기는 1024 px 이하로 유지하세요. Roblox는 더 큰 이미지를 축소합니다. 파트의 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 안에서 실행되며, Adornee를 파트로 설정한 상태로 StarterGui 아래에 놓인 SurfaceGui에서도 실행됩니다. 파트에 바로 넣은 SurfaceGui에서는 대신 RunService.Heartbeat를 사용하는 Script를 넣으세요.

알아둘 제한 사항

• 1024 px: Roblox는 1024 x 1024보다 큰 이미지를 축소하므로 긴 GIF는 디테일이 사라집니다. 프레임 수를 줄이거나 GIF를 더 작게 만들면 선명하게 유지됩니다.
• 플립북당 프레임 64개: Roblox가 읽을 수 있는 가장 큰 크기는 8x8 그리드입니다. 더 긴 애니메이션은 프레임을 균등하게 선택해 재생하거나 플립북 두 개로 나누세요.
• 검토: 업로드한 이미지는 모든 Decal과 마찬가지로 검토를 거칩니다. 직접 만든 애니메이션이나 라이브러리 이펙트는 문제없이 승인됩니다.

플립북 PNG는 무료입니다. 각 이펙트 페이지의 ROBLOX 버튼은 계정 없이 사용할 수 있고, 무료 계정으로 스튜디오에서 원하는 그리드와 텍스처 크기를 선택해 내보낼 수도 있습니다(하루 3개 이펙트). 이미터가 설정되어 있고 재생 스크립트가 포함된 .rbxmx 준비 모델과 UI용 UIFlipbook.luau는 월 $7.99부터 모든 플랜에서 제공됩니다.