[Video Tutorial] Create a Main Menu Screen - UI Editor Part 2/5

Title : Construct a Main Menu with the Amazon Lumberyard UI Editor
Series : UI Editor
Version : BETA 1.23 (uploaded on April 6, 2020 )
Host : @JKingpin

Key Takeaways:

  • working in the UI Editor
  • loading & unloading a UI Canvas Asset Ref through Script Canvas

Prerequisites :
Enable the following gems:

  • LYShine
  • LYShineExamples
  • UI Basics

Project :
NEMO - to have all these gems already enabled and reference the UI example levels.

Resources :
:green_book: Docs - UI Editor
:blue_book: Book - Game Programming with Amazon Lumberyard 2nd Edition

This is part 2 of 5 videos in this series, and the 1st one that I work off of using our NEMO project. This is meant to be foundational reference and getting comfortable in the UI Editor and how to manipulate a UI Canvas Asset Ref from within Script Canvas.

I always advise checking out the video description, as I sneak links in there from time to time. :shushing_face:

Let me know what you think about the topic, the format (while I’m working from home, #SocialDistancing , the presentation. I’m always looking to improve for what best serves the Lumberyard dev community.

2 Likes

During the tuto, I tried to personnalize a button with an image; it seems that the new versus source button for Sprite is not activated ? :warning:
image

1 Like

John this tutorial works perfectly when applied and allows to get into more complicated stuff without fear by having this clear reference.

Just some remarks that could help as I reused this tuto for that
and thus discovered some things not clear for me.

Maybe in next tuto it could be interesting to know how to set the order when an image is superposed with buttons for example.

It could be interesting to be aware too of the impact of those thereafter different options that concerns the UI too.

image

1 Like

Thanks for the note.
Are you referring to the draw order of the elements? If so that did catch me, and it’ll be discussed in part 4.

excuse me @JKingpin, I lightened the previous post having too many pictures, but what makes it now incomprehensible … here are the pictures.
image
and
image

Thus to sum up preceeding post :
1/ to understand how to manage the order of superimposing entities/images/buttons…
2/ to clarify the impact of the “start active” , “load automatically” options when used compared to the Load / Unload Canvas, On Graph Start nodes in a script
3/ making buttons with sprite and tools inside LY to use (as one link seems broken) image

A future tutorial could focus on the Lumberyard’s Event operation … I find this part of the Events perfectly well thought out, practical and well done by the development team. :+1:
For example, being able to create the send or receive events nodes with a simple drag&drop from the Node Palette, with events previously designed from the Asset Editor, is well thought out to make things easier and avoid errors.

But reading the users guide does not give immediately the vision of the power of the tools available for the creation of a perfectly decoupled environment and a tutorial would be welcome to accelerate the learning of this key part of the Lumberyard scripting (remark: it exists already tutos that evok events, but not as well focused as you are making inside last tutos series that allow us to get a reference theme by theme … thanks for this actual focus John ! )