Help with Sprite Sheets on GUI

How do I make a sprite sheet work on GUI? I have managed to do so with Surface GUIs but I want them to be on image labels. I cannot figure it out, I would appreciate the help!

Take a look at this post Gifs in Roblox with only 1 image

That doesnt help, I need help with Images, not surface GUIs

Also, there is a module specifically for Sprite Sheet Animations by nooneisback. SpriteClip Sprite Sheet Animation Module

I done a post on this topic back in March of last year, @goldenstein64 explained it perfectly!

This post was on Custom Font but it’ll apply to pretty much the same thing… You can adapt the code easy if you have any scripting knowledge.

Could you explain a little on how to modify it?

You should be able to use the ImageRectOffset and ImageRectSize properties of ImageLabels to choose which sprite to render.

e.g, if each sprite in your sprite sheet is 32x32 pixels with a 1 pixel buffer in between, you can keep the two values as constants up top:

local SPRITE_SHEET_ID = "rbxassetid://XXXXXXXX"

local SPRITE_SIZE = Vector2.new(32, 32)
local BUFFER_SIZE = Vector2.new(1, 1)

And your sprite renderer can be based on a position within the sheet by mapping them to names within a dictionary, with each sprite denoted by their offset from the top left:

local Sprites = {
    Pensive = Vector2.new(1, 0), -- at (32 + 1, 0) in the image
    Joy = Vector2.new(2, 0),
    Frown = Vector2.new(3, 0),
    -- etc
}

local function generateSprite(name)
    local location = Sprites[name]

    local newLabel = Instance.new("ImageLabel")
    newLabel.Image = SPRITE_SHEET_ID
    newLabel.ImageRectSize = SPRITE_SIZE
    newLabel.ImageRectOffset = (SPRITE_SIZE + BUFFER_SIZE) * location

    return newLabel
end

-- usage
generateSprite("Joy")

This way, your code can stay readable while making it easy to add new sprite entries in your Sprites dictionary.

1 Like