UI Design Starter Guide

[EmeraldSlash (Rio)]

True but often this would sill require changes to optimize it for the platform.

Although I probably should have covered some of those other UI objects in the tutorial lol

[GGGGG14]

Nice tutorial! I hope more and more new users understand and implement nice UI into their games.

[colbert2677 (ImagineerColbert)]

I think I already made a post with a joke about having you teach me about your ways of UI design. This tutorial is fabulous and has given me many great pointers and teachings about how to get started on good UI design.

Thank you very much for this guide. +1 like and bookmark.

[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