How make a Gif (on Gui) using spritsheet?

Help and Feedback Scripting Support
, ,
#1

Iam 5 days trying put a Gif on my Gui, but i discovered that i need use spritsheet, i made my one

MegaPowerSpritesheet
MegaPowerSpritesheet557×600 497 KB

I saw forums, videos but i cant do that, Anyone can give a code example ? Iam really trying but is hard

2 Likes
How Can I Use A SpriteSheet To Create A GIF In-Game?
#2

Take a look at this resource:

It includes an uncopylocked place with the scripts in place.

1 Like
#3

This is for brick, and use decals, dont work on Gui (ScreenGui)

2 Likes
#4

Try my script. I was able to achieve this: https://gyazo.com/318f9dc027e8369a36b0cdf46f21f00c
I used this to turn my gif into a spritesheet: Turn gif into sprite sheet
This should compensate Roblox’s 1024 x 1024 image size limit too.

Parameters:

ImageLabel: ImageLabel Instance
ImageWidth: Width in pixels of the spritesheet
ImageHeight: Height in pixels of the spritesheet
Rows: Number of rows on the spritesheet
Columns: Number of columns on the spritesheet
NumberOfFrames: Total number of frames or sections on the spritesheet

Code

local RobloxMaxImageSize = 1024
local function AnimateGif(ImageLabel:ImageLabel,ImageWidth,ImageHeight,Rows,Columns,NumberOfFrames)
	
	local RealWidth
	local RealHeight
	
	if math.max(ImageWidth,ImageHeight) > RobloxMaxImageSize then -- Compensate roblox size
		
		local Longest = ImageWidth > ImageHeight and "Width" or "Height"
		
		if Longest == "Width" then
			
			RealWidth = RobloxMaxImageSize
			RealHeight = (RealWidth / ImageWidth) * ImageHeight
			
		elseif Longest == "Height" then
			
			RealHeight = RobloxMaxImageSize
			RealWidth = (RealHeight / ImageHeight) * ImageWidth
			
		end
		
	else
		RealWidth = ImageWidth
		RealHeight = ImageHeight
	end
	
	local FrameSize = Vector2.new(RealWidth/Columns,RealHeight/Rows)
	ImageLabel.ImageRectSize = FrameSize
	
	
	local CurrentRow, CurrentColumn = 0,0
	
	local Offsets = {}
	
	for i = 1,NumberOfFrames do
		
		local CurrentX = CurrentColumn * FrameSize.X
		local CurrentY = CurrentRow * FrameSize.Y
		
		table.insert(Offsets,Vector2.new(CurrentX,CurrentY))
		
		CurrentColumn += 1
		
		if CurrentColumn >= Columns then
			CurrentColumn = 0
			CurrentRow += 1
		end
		
	end
	
	local Index = 0
	task.spawn(function()
		
		while task.wait(.1) and ImageLabel:IsDescendantOf(game) do
			Index += 1

			ImageLabel.ImageRectOffset = Offsets[Index]

			if Index >= NumberOfFrames then
				Index = 0
			end

		end
		
	end)

end

Example

spritesheet
spritesheet2500×2800 797 KB 

AnimateGif(ImageLabel,2500,2800,4,5,16)
7 Likes
#5

Okie Bro thanks, after years you solved my problem lol, that IS epic came back moment.

1 Like
#6

I am also trying to do this, but if you can, can you explain more about this? Do I leave it as it is, or what do I do?

#7

I don’t understand what you mean by leave it as is. You just need to insert the code in a script. I’m assuming you know a little about guis and scripting btw, please let me know if you do not.

#8

I know a little. What I mean is do I have to change anything inside the code?

#9

The only thing I can think of from the top of my head is this:

while task.wait(.1)

You can change the wait duration to speed up or slow down the gif.
Other than that, you just need to feed it the necessary data when calling the function. That should be it.

#10

Because the reason why I am asking, I put the code into a script into the ImageLabel, and it seemed to not do anything.

#11

You need to insert the image into the image label first, the function does not do that for you.

#12

The image texture is of course inside the ImageLabel. What do you mean?

#13

I meant this
image

Are there any errors popping up in the output?

#14

No they’re no errors for what I see. Nothing happens. And yes I ofcourse did what you showed.

#15

Try to add

 print(ImageLabel:GetFullName())

at the start of the function to check if it’s the image label you indended.

Also, check that your numbers are correct. The image width and height should correspond with the spritesheet width and height, not the original gif.

#16

What do you exactly mean at the last part on what you said? also I am not on my PC currently. I got off around 40 minutes ago, so I can not try it right now.

#17

You have to convert your gif into a spritesheet. After converting, you will get a new image that looks like this: image

You need to get your image width and height from this new spritesheet.

#18

And where do I put the Width and Height?

#19

When you call the function. Add this line under the function and replace it with your data.

AnimateGif(ImageLabel,2500,2800,4,5,16)
#20

Like this? And what do I change the numbers with, do I keep them the same? as you sent?
image