How to load a Sprite (Animated Gif) in a roblox Gui (A sequel to "Gifs in roblox with only 1 image")

Resources Community Resources
#1

This is an updated version of my Previous Thread, in which I described how to make a gif using textures and texture offsets, this is both a tutorial and a resource, much like the previous post, so I will be making the post here, like the previous post

Additional notes: This is an example resource showing you how to do this, not necessarily how you should do it. If you have a better way to load or animate Spritesheets, do it, this was not built for performance.

Hello, recently people have been messaging me about my “Gifs in roblox with only 1 image thread” in which i explained how to use textures and texture offsets to load a sprite/“gif”, asking for how to do this for guis, I was a bit shocked by the amount of people who didn’t already know this, and since that old thread is still receiving those replies, I have made a quick and easy resource to load sprites into a gui.

This tool is extremely simple to use, and works on the same principle as my old spriteloader, but for guis.

How to:

First step: Convert your gif into a spritesheet if you’ve not already done that. A good tool for this that I used in the making of this example can be found here: Turn gif into sprite sheet

after you convert it to a spritesheet, you should get something like this:

image
image1414Ă—1438 177 KB

before we do anything with loading this sprite, we need to know some details about it
Rows, Columns, And frames.

Columns are the amount of frames going horizontally, as we can see from my beautiful example, this gif has 4 columns, to get the amount of rows, thats the amount of frames vertically in the example, so we can see here, we have 4 rows with an incomplete 5th row. When making a sprite, you include incomplete rows. This means we have 5 rows and 4 columns.

To get the amount of frames, you could just count them all, but an easier way is to multiply the complete columns by the complete rows, and adding frames from the incomplete last row, so for us, we have 4 complete rows, and 4 complete columns, and 2 extra frames on the 5th row, so we can simplify this and get 4*4+2, this was apparently more difficult to understand in my last thread, so I wanted to explain more in this one.

After that you can plug them into the script which explains how this works in much greater detail than here, but if you read it you will see its actually extremely simple, thank you for reading my thread.

Models to view
spriteloader.rbxm (5.5 KB)

And the place used in this example
Sprite loading example.rbxl (31.5 KB)

87 Likes
How would i make a animation through images ingame?
How would i put this on a surface gui
Making an GIF in ImageLabel (ScreenGui) | Trying to rewrite some random code
How would i make a flip clock effect?
Script wont do the same with the other instance
How do you put videos in GUIs?
SpriteSheet on Event!
How to make 2D rect animation using XML file
#2

My goodness, this needs a lot more recognition! This is amazing work: It’s amazing how you could script this, I would never be able to do so! Congratulations on this!

4 Likes
#3

how could I get this to work on a surfacegui

#4

Will This cause performance issues if the sprite is big like a animation or video?

1 Like
#5

The longer the video, the more pixelated it will be because the Roblox will compress big images when uploading decals.

#6

Why don’t roblox just release the Video feature it’s been a decade… and for my game I need videos of animations etc graphics and stuff I don’t want to always make 300 decals.

#7

Yeah, I remember they announced that a pretty long time ago at this point

#8

This will work on any gui, if you want to make it on a surface just convert the screen gui into a surface gui

#9

Hi @HungryFox02 I have a question that I wanted to ask. How do I convert screen gui gif to surface gui on brick part object?. Because I wanted to make it look like a times square led screen display. And I’m trying to find away how to make the image gif decal look more brighter, by using the surface gui and image label together. But I don’t know how to script that. And I’m having a hard time figuring it out

#10

Theres a few ways to do this
the first way would be to convert the local script into a server script (do not do this)

The second, better way, would be to just have the surface gui in your startergui folder, and set the adornee (the part adorns the gui) to the part you have chosen in your workspace. If you use streaming enabled, you might want to set said part to always be loaded, or check if it is loaded in the script and then set the adornee via the script.

#11

I like the fox theme you got going on there. Thanks for the tutorial!

1 Like
#12

Hey @HungryFox02! How can I get a GIF to work on a surface GUI as a decal so that the whole server can see it? Somehow with a texture, it doesn’t work how my setup is

#13

You could have a local script that syncs with a server object that tells the client what frame to show, you you could look here for how to do that with textures: Gifs in Roblox with only 1 image

But i’d recommend just using a gui that syncs with all clients, as having an animated image on the server like this can cause unnecessary lag.

If you’d like to know how to do that specifically, let me know and i’ll help

#14

May I know how you can replicate it on the Server side or on all Clients? I have a game that already is pretty hard to run… This might help me

#15

Can you elaborate more on this?

#16

Hey @HungryFox02, I have a small problem. I can’t have GIFS on textures because it cannot be seen in the dark. On a surface GUI or image labels, it can be seen in the dark since it has light influence. Do you have any idea on how to do it on image labels?

image
image605Ă—601 42.5 KB

#17

What I mean is how do you make a gui that syncs all clients for the animated image. Im reffering to this message I replied to.

#18

I’m currently struggling to get this to work…
Spritesheet image

image
image1068Ă—435 96.2 KB

The code:

local warperFramerate = 12 -- Do i need to explain this? (Caps at 60 cuz roblox bad) (additionally, this does not support frame skipping)
local lastFrame = 1 -- Frame the animation starts at
local frames = 2*7 -- Amount of frames in the animation
local rows = 2 -- Amount of vertical frames in the animation
local columns = 7 -- Amount of horizontal frames in the animation

local AnimationFrameWrapper = script.Parent.Holder -- The parent frame to the animated sprite, has clipping enabled so that only one frame can be displayed at once

local AnimatedSprite = AnimationFrameWrapper.ImageLabel -- The image you're animating

local t = tick() -- Used in animation framerate timing

AnimatedSprite.Size = UDim2.new(columns,0,rows,0) -- Sets the size of the image in case you set it wrong, really easy tho

local function UpdateWarper(f)
	if tick()-t >= 1/warperFramerate then -- check if enough time has passed between frames to update the sprite
		lastFrame = lastFrame + 1
		if lastFrame > frames then lastFrame = 1 end -- Loop gif
		local CurrentColumn = lastFrame -- set the current horizontal frame to the current frame
		local CurrentRow = 1
		repeat -- This gets what the current column and row should be based on the current frame (this is why we set CurrentColumn to lastFrame earlier)
			if CurrentColumn>columns then
				CurrentColumn = CurrentColumn - columns
				CurrentRow = CurrentRow + 1
			end
		until not(CurrentColumn>columns)

		-- Update the image label
		AnimatedSprite.Position = UDim2.new(-(CurrentColumn-1),0,-(CurrentRow-1),0)
		print(CurrentColumn,CurrentRow)
		f() -- This was used originally to 

		t = tick()
	end
end
UpdateWarper()

The result is just a still image of a part of the spritesheet
Result Image:
image

This is just your code, which i changed to fit my spritesheet. But it just isn’t working.
Is there something i’m missing?

#19

how would I play the gif only once?