UI Design Starter Guide

[LuckyTux]

Although I’m over a year late to the conversation, I’ve got a question.

@EmeraldSlash

Spritesheets

Often you may want to make a button that you hover over have a special effect or an image be animated. You don’t want to upload lots of images for one simple thing… so that’s where spritesheets come in.

Thanks google images

A spritesheet is made up of different sections all in the same size. It is responsible for holding entire animations in a single image.

So how do you implement this in ROBLOX?

All image objects have two properties: ImageRectSize and ImageRectOffset , which are both of the Rect value type (which is similar to a Vector2 ).

To define the size of each different sprite, you set ImageRectSize . To change which sprite the image is currently ‘viewing’, you use ImageRectOffset and set it to the location of the sprite (all in pixels of course).

Here’s an example:

My 52x104 spritesheet

Default view

Hover view

In regards to changing between the images with ImageRectSize, how would a script like that look like to change between the ImageRectSize and ImageRectOffset?