UI Design Starter Guide

[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

[Zyrphox]

I’m a bit late here but thanks!

This really helped me out and I understand a bit more about UI Designing

[6thSky]

Dang, this is so accurate, I’ll be reading this over and over thx for tutorial.

[EdwardSheeransToe (EdSheeran)]

Wow thank you so much this is a really great tutorial, I’ll be sure to have this bookmarked!

[ojbaby]

What would be the best size for doing button icons? I ran into an issue earlier tonight and I want a work around so I don’t make the same mistake twice.

[EmeraldSlash (Rio)]

Hopefully I’ve interpreted your question right…

I tend to design all images at 1024x1024 – the highest resolution Roblox will upload images at (you can upload images at higher resolutions than this, but they will be downscaled). However, usually I upload them at smaller sizes such as 512x512 or 100x100 just because I don’t expect them to be displaying much larger on a reasonable screen.

If the ImageLabel will be use Offset for its size, you can upload the image at that size for best appearance. Otherwise, if it uses Scale, you may want to account for what it’ll look like at larger and smaller screen sizes like 1280x720, 1920x1080, and 3840x2160.

I also recommend making icons in a vector format whenever you can so that you don’t need to care about size. Vector images can be scaled infinitely and still look smooth, Roblox doesn’t support these but it’s still useful on your end so you can export to any size you like without issue. (In programs like Photoshop, Illustrator, and Affinity Designer/Photo these are often referred to as “shapes” and can be created and edited using the “pen” and “node” tools.)

Some other considerations are asset load times, spritesheets, and memory usage (although the latter should only be considered if you need to do some hardcore optimization, which you probably never will). Images of larger sizes will of course take longer to load than smaller images. You might also want to use spritesheets, in which case you’ll need to make icons smaller than the max size so that you can fit multiple within a single 1024x1024 image.

[DjStella2]

Thank you so much! Very useful. What programs should I use?

[EmeraldSlash (Rio)]

I personally recommend Affinity Designer and/or Affinity Photo for reasonably priced quality design and image editing software (they’re a one time payment). Adobe Photoshop and Illustrator are fine as well if you can afford them. If you can’t pay anything, I recommend Inkscape and Gimp which are both free.