UI Design Starter Guide

[EmeraldSlash (Rio)]

You’re the one who gave me the idea lol

Shoutout to colbert2677!

[colbert2677 (ImagineerColbert)]

o-oh i didn’t know that

[MetaProx]

This is an awesome tutorial. Kudos on the spritesheets, had no idea how to implement them properly up until now.

[Noble_Draconian]

I actually needed some info from this. Thanks!

[edenojack]

How did I not know about Anchor Points Good Tutorial!

[Korrokku (Kenny)]

Very Helpful If I ever want to get into UI designing, I will bookmark this.

[LuckyTux]

I’m a bit late to the party here but thank you for writing this!

[NinjoOnline]

Such a good tutorial! Helped out a lot!!

[HLVM]

Probably the best UI tutorial out there. Nice work

[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?

[Tor_Laws (Tor)]

Is it possible to write a v2 version including constraints?

[Mrplunkett (Lol)]

Nice tutorial I’m going to cut out this example

To try it out right now.

[vuunie]

Great tutorial! Bookmarked for sure.

[EmeraldSlash (Rio)]

I don’t have much time but it would like this:

local SPRITE_SIZE_X, SPRITE_SIZE_Y = 32, 32

local function changeSprite(newSpriteIndex) 
    local newSpriteOffset = Vector2.new(newSpriteIndex * SPRITE_SIZE_X, newSpriteIndez * SPRITE_SIZE_Y)
    imageLabel.ImageRectOffset = newSpriteOffset
end

changeSprite(0)
changeSprite(3)

I don’t have time to do more sorry, and this only changes the offset. If you’ve got a good setup then you shouldn’t need to change sizes anyway.

@Tor_Laws
Yeah sure, I’ve been meaning to do something about constraints so I’ll put v2 on my to do list

[TheAposol]

Amazing tutorial, love it! 10/10! Packed lots of important information in my head. Though, on top of that I would recommend, you insist them to use https://www.roblox.com/library/2233768483/Roundify

[rinyafii (rin)]

Good guide, lot of stuff to get going. Personally, I like to use scale, not offset, with UIAspectRatio constraints. This is what I feel gives the most consistent experience because something made with offset would be gigantic on smaller screens

[TD_PIayz (thatgirlagain)]

This deserves way more recognition than it already has. Just the fact that you took your own time to help any aspiring developers. Thank you! <3

[Arvensis (Arvy)]

Really nice guide, goes in-depth about a lot of stuff that goes un-noticed.

Good job, I’ll recommend this to anyone who is interested in designing UI.

[Ulxqra]

Good job on this, also extra info: I would recommend 100% getting a UI design plugin to enhance your UI.

[re_fire123]

thx u sooo much for the help