Make A Gorgeous Start Menu (Unity UI Tutorial)!

Here are the basics for creating an epic start menu in Unity! Thank you Erik Coburn for coding the final version of the menu system!
Wishlist my next game!
Follow me on Twitter:
Follow me on Facebook:


Tutorial Project Files:
PSD Layers Exporter:


Xem thêm bài viết khác:

50 thoughts on “Make A Gorgeous Start Menu (Unity UI Tutorial)!

  1. WHOA. My next game Neversong comes out on Steam MAY 20th! Wishlist now to snag that tasty launch discount 🙂

  2. Hii the tutorial really help me! but the link for the photoshop script is gone…is there another place where I can download it?

  3. Can anyone tell me the difference in UIElements and Unity UI(packages)?i have seen the unity manual but i could not understanding the main difference.

  4. Hey, I just saw your video and I really enjoyed it. Is there any way I can get a private lesson from you, like a real private class. Is the join button next to the subscribe button going to take me to a private class with you? Looking forward to your replies, great video

  5. Hi Thomas, new subscriber here. I would like to ask you what resolution you set the PSD files. Do you go with 72 dpi or do you go higher? Love the channel, thanks.

  6. How would you implement a working quit button here? I am unsure how to link code to the buttons as apposed to the animations.

  7. Nice video, Thomas. However 72dpi is good for 1920×1080, or even 2560×1440… however your high dpi monitors (4K & 8K) run at the 96dpi level. So if your going to make any type of asset for 4K (such as your textures), make sure your pixel density is set to 96dpi. You shouldn't use the browser standard as a guideline, since modern browsers could really care less what the dpi is. Back in the day, 72dpi was coined as the standard. Not today, however.

  8. Just a little advice for everyone who wants to work along with this tutorial: Do NOT animate your UI elements using the Unity animator! Even if the animator is "stuck" on a 1 frame idle animation it will still perform a set-call on EVERY field that is animated (position, scale, rotation, etc.) on EVERY frame of your application. While that alone is reason enough never to do that, it gets even worse: Even though nothing seems to change on your canvas those set-calls trigger the ENTIRE canvas to recalculate every single element it contains.

    1) Only animate your UIs via code using coroutines. It is the only way to ensure that nothing is updated when nothing is supposed to happen.
    2) If you have an element that has to be animated 24/7 -> put it on a seperate canvas. That way the rest of your UI won't have to be recalculated every frame.
    3) Uncheck "raycast target" on EVERY element that isn't interacteable in your design. Only leave it checked for buttons, sliders, etc.. Otherwise you might block input + you will trigger unnecessary calls on object that aren't supposed to do anything.
    4) If you fade out elements by reducing the alpha: Consinder ".SetActive(false)" whenever alpha is 0. Just because you can't see it anymore, that doesn't mean the actual mesh isn't updated/recalculated.

    Unitys UI system can be a real bitch and performance killer. It might not matter as much for a very small menu scene like the one in this video, but you are going to feel the impact in a game scene that renders hundreds of UI elements + the actual game big time – especially on low end and mobile devices.

  9. While scaling components with handles, you can press and hold 'alt' to scale them in both directions (like a mirror effect)..

    It's a real time saver 👍

  10. I plan to make a 2D game which is a crossover between block breaker and space invaders. for 4:3 ratio, can I still do it in 4K?

  11. "Because I am a smart dude, i have this all set up". TITLE: (UNITY UI TUTORIAL) i thought this was tutorial lmfao

  12. I'm looking at this tutorial after having this in my Game Dev playlist for a while. After making my first menus using Unity's weird input/event system, this looks like the best method to execute switch menu to menu without any issues. Thank you so much for show me and others this.

  13. 8:55 you are best dev i ever see. it look same what ever user screen size is. just like you designed. NOT scaling smaller LOL. wow nice 4k gaming. what the fuck that saying i want switch gears but cant read so small text. switching 1080 oh nice.lets play 1080 then better frame rate not stress gpu nice!

  14. 3:56 yeah stupid game devs. lets use 4k and text are small. not scale relative same as 1080. it should look same what ever screen resolution is.when using 4k then text has more pixels it look nice. 99% going bigger resolution text get SMALLER why? why use bigger resolution then use exactly same text size it will be small and still use same pixels looks bad LOL
    its like lets use 4k resolution becouse it has more room(wrong thinking) its 4k to give more resolution. it should not change anything on game other than resolution.

    same goes OS resolution. going higher should leave every relative size. its user preference if want text and icon go smaller.if i use 4k i use it becouse resolution not for make everything smaller LOLwhy want use same 64×64 icons in 4k when can use 128×128 and it look same as 1080,but BETTER QUALITY lol

  15. Tbh I've never drawn a day in my life and I say this cause I know games need art but I'm in love with coding and games so i'll give it go

  16. I need to thank you for just the first few seconds of your video it made me smile, I really needed that today ❤️

  17. Instead of using Input.GetAxis and changing the gravity of the input, you could also just use Input.GetAxisRaw.

  18. Another great tutorial! Well done! 😊👍 But where do we find the Photoshop PNG export script? The link in the description seems broken… 😅

  19. Hi from France !
    Great tutorial ! Thanks a lot !
    I followed your tutorial to build my menu, but I have a lot of problems to switch between "Main menu" and "Save Select Menu" that we see in the end of your video.
    Please keep going (if you can of course) to make a next tutorial of this one (Gorgeous Start Menu – Part 2 for exemple).
    You are a master ! Thank you !

  20. Do you not use textmesh pro? I find it to be extremely buggy and I'm about to say f it and just program it all from scratch.

  21. I haven't been able to get it to work properly, it keeps saying that the parameter doesn't exist for "pressed" and "selected"

  22. Before designing those animations I suggest all beginner fellows to take a look at tweening. It will save a lot of time for you.

  23. Stop complaining guys… he put the full project folder in the description. There you can see where every component and script is supposed to be.

    Great vid, helped me a lot!

  24. To what extent can you customize your main screen with the free version? ive read that with the free version it is limited

  25. This guide is shit. You literally skipped the main reason why i am here. Show us all from scratch you lazy man

  26. Hey.. i know you are doing well. I have a question. Why did you not use actual button from UI instead you use a rectangle,text and script (to make it functional). Isn't it a lot of effort to do? Kindly, reason my query. Thank you.

  27. What about ultra wide screens support? If I use 1920×1080 reference resolution my elements at bottom and upper edges of screen get cut on ultra wide resolutions. What should I do?

  28. You literally skipped over the most important parts. Cmon, man, your stuff looks great but what the actual fuck

  29. I'm sorry to have to say this but, this is an awful tutorial. I spent 4 hours trying to follow his instructions and only made it 3 minutes into the video without running into some MAJOR problems. There is so much he didn't mention. One of them being dragging the background into the scene area, he never mentioned that before you can do that, you need to use the inspector and change the texture type from Default to 2D (Sprite and UI). This i'm sure is just one of many things he left out that makes this video unwatchable. Sorry mate

  30. Thanks Thomas, for guys who are complaining for the missing steps, you can check other videos how to animate, this is advanced tutorial.

  31. No hate at all, I love your videos, they are amazing. But as a developer I can tell that you does not have that "feeling" of writing good code. The MenuButtonController break one very important clean code principle and the posix — (decrement) operator is not reasonable to use in your example. I suck at sound, marketing and any graphic design so I do not say that one dev can master all. Just an interesting realisation that you do not need to be perfect in order to bring alive a good idea. Thanks for teaching this.

  32. "Because I am a smart dude, I already have this all set up". OHH SHIIIIIIITTTTTT!!!


Leave a Reply

Your email address will not be published. Required fields are marked *