UI Design Starter Guide

Resources Community Tutorials
, , ,
#12

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

7 Likes
#13

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

6 Likes
#14

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. :grinning:

4 Likes
#15

You’re the one who gave me the idea lol

Shoutout to colbert2677!

4 Likes
#16

o-oh i didn’t know that

:hushed:

3 Likes
#17

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

5 Likes
Feedback on Menu GUI. [New to GUI]
#18

I actually needed some info from this. Thanks!

4 Likes
#19

How did I not know about Anchor Points :open_mouth: Good Tutorial!

5 Likes
#20

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

6 Likes
Properly Scaling Main GUI
Importing images from Adobe Xd into ROBLOX makes the image low quality, why?
#21

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

2 Likes
#22

Such a good tutorial! :open_mouth: Helped out a lot!! :smiley: :smiley: :smiley: :smiley: :smiley:

3 Likes
#23

Probably the best UI tutorial out there. Nice work :grinning:

3 Likes
#24

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

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

3 Likes
#25

Is it possible to write a v2 version including constraints?

3 Likes
#26

Nice tutorial I’m going to cut out this example Screenshot_243

To try it out right now.

1 Like
#27

Great tutorial! Bookmarked for sure.

3 Likes
#28

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 :slight_smile:

6 Likes
#29

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

3 Likes
#30

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

7 Likes
#32

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

5 Likes