How to create a sprite sheet on roblox?

So, I want to make an animated image in my game, so I’m asking how you can make spritesheets? The only way I can think of is upload all the images as decals (which will take a LONG time), and script each image. Is there any alternative?

9 Likes

You can upload them as one image and use the ImageRectOffset and ImageRectScale properties. There’s a handy little module for it that makes it so much easier which you can find here: SpriteClip Sprite Sheet Animation Module

11 Likes

This might help you if you intend to convert a existing animation :

Otherwise, you have to do a 2D Animation with a specific software that support generating a spritesheet
LevelUp

you create this gif and there will be a option to convert into the following :


This method will allow you to play (simulate a gif) ingame with only 1-2 decals depend of the amount of frames

13 Likes

So is blender ok, if it is, how do I upload it to roblox?

I don’t really understand what that means

1 Like

read this topic so you understand how you can import and play in-game

2 Likes

My module basically just creates a class to make the setup and animation easier. The post has a model uploaded which contains an example of an animated image.

You have to require the module with require() and create a new SpriteClip object.

local SpriteClip = require(script.SpriteClip)
local sprite = SpriteClip.new()

After which you will have to create an ImageLabel (or any other class with an Image property) and set an uploaded sprite sheet to it.

local imglbl = Instance.new("ImageLabel")
--set the properties

Now assign the label to the SpriteClip object, give it the sprite and image dimensions and call the :Play() method.

sprite.Adornee = imglbl
--The provided documentation in my post has detailed explanation of what each of these does
sprite.SpriteSizePixel = Vector2.new(50,50)
sprite.SpriteCountX = 5
speite.SpriteCount = 20
sprite:Play()

Once done, use :Destroy() to avoid memory leaks.

sprite:Destroy()

Using :Pause() will stop the animation, while :Stop() will stop the animation and set the current frame to start.

4 Likes

The only current way to make a sprite sheet on roblox is through uploading images. Roblox, as far as I know, has no plans on adding any alternatives (such as uploading gifs or videos), so yes, as it stands the only way to make a sprite sheet us through uploading multiple images.

1 Like

Indeed, and we should be grateful for their decision.

They are well aware this wouldn’t be healthy, because a direct importation from .GIF will only leads to stolen files, Considering almost no one in Roblox can really produce it from scratch, it’s a forgotten domain here.

There is already tons of stolen IP in the roblox library that roblox does nothing to stop; not to mention several roblox artists can make gifs, just look at the twitter pages of some artists.

Not only that. GIF is well known for being an incredibly low quality format. Even though it is lossless, it is limited to only 256 colors (8 bits). To make matters worse, because of its lossless nature, the files are enormous and redundant compared to other formats such as JPEG, which offers higher quality by removing less obvious information. It is actually better to use a spritesheet and slice the image in Roblox itself.

1 Like

So, technically speaking, all the different frames will be included in one image. And what the script does is go through the image? Is that what it mean? If so, can I make that in blender? Like is there a function in blender that makes sprite sheets? I’m quite new to all of this.

do you know how to put all the frames in an image?

1 Like

You can do it in GIMP or any other image editor. Make a canvas of a size big enough to fit all of them. You can place them all side by side, or 5x5, so it doesn’t really matter. Also, remember to crop to content to save some space.

The sprites have to be at a constant distance from eachother. If the largest sprite is 100x200, all other sprites need to be of the same size. If there is a space between 2 sprites, then all sprites need the same space.

1 Like

ok ill try my best :smiley: and I hope that it’s good!

1 Like

is there a way to do it with blender though, i’m more used to it

Blender does feature a basic image editor, so it should be. It will export a square image as far as I know, so you will end up with some unused space. The only importance is that you export any kind of an image format that is uploadable to Roblox.

1 Like

I recommend checking out the Developer Hub Page on ImageRectOffset.
ImageLabel.ImageRectOffset (roblox.com)