Chat with us, powered by LiveChat

what is a game without a main menu can you name one this lumberyard to tour will continue our UI editor series and show you how to build a main screen for your game by working with a UI editor and the UI campus ref component and hooking that together

in script canvas [Music] hey world welcome back to another lumberyard tutorial I am John Diaz you’re a technical designer here on the lumber you’re our team you’ll notice this is a little bit different and while it’ll have a different video and audio format you can expect the same

great information as I’m recording from my home studio instead of the office in the previous episode we took the red barrel series demo that Lewis template set up and added a reticle UI canvas that helped us align our shot pretty simply now I want to dive in a

little bit deeper and show you how to make script canvas work with your UI canvas we’re gonna be working in our Nemo sample but you can do this in any project if you don’t have anyone want to follow along you can find that from our downloads page on

top of that a lot of handy reference documentation on our doc site you can find all of that in the video description and if you want to stay up to date as we release more videos in this series or our entire backlog make sure to hit that subscribe

button so you can get notified when that happens help us hit that 10,000 subscriber mark once you have Nemo setup and installed let’s make sure that we have the necessary gems make sure that you have the ly shine and ly shining examples gem and the UI basics gem

let me call out that we’re working in version one point 23 of the editor if you haven’t played a Nemo before it’s a little submarine where you can move around with waz de shoot with the left click collect pickups and your ammo score and health are all controlled

via UI canvas and script canvas and it’s missing a main menu so let’s go ahead and add that I always like to grab some reference for what other people are doing in their projects and typically what you usually see is some type of dynamic or static background some

buttons with an indication of which button is highlighted okay that gives me a good basis for what I want to do let’s go in and add Oh before we do that let’s actually grab a good hero shot for our main menu background something like that looks pretty good

what do you think make sure when you’re saving that that you save it somewhere in your project directory so I’m gonna select textures and I’m gonna save it right here emo main screen DOM and now the asset processor should pick that up and bring it in as an

asset that I can use let’s go in and open our UI editor now so in tools come down to our UI editor I went ahead and set up a keyboard shortcut since we’re gonna be using that quite often alright let’s add an element to hold that new image

so new empty element let’s rename that to background and come on over here to our properties panel go to add component select Mitch it’s worth noting that I can only add one component type per element so if you want to add another image I have to add another

element in the image component let’s go to sprite path and click browse and let’s find that menu image for that main screen image right there let’s hit image type and select stretch to fit so it’s proportional go ahead and click on your scale widget and then below that

guy let me call out that we’ve lost our actual bounds of our canvass resolution let’s hide that just like other editing software you can add guides so if I drag out at the top ruler I’ll get a y-axis guide I just want to show the boundaries to make

sure I don’t bleed over grab out of the left ruler 1280 and 1 in the center for a good measure this is 360 it’s how you know you’ve been working again for a while when you have this map dedicated to the Becky hand ok now we can turn

that back on what’s missing here let’s move that a bit lower right yeah that’s pretty good I think that’s pretty good framing let’s add another component for the logo image sprite Pat let’s look for our logo let’s scale that up and so I can translate this up but

what that does is because it’s anchored to the center it records the offset so let me sit all that and just make use of the anchor to get that in the top center no let’s add in our button element we can create a button from scratch or we

can take advantage of our slice library to add a button and the benefit of that is that it already comes setup for you with a placeholder text so if I click on text I can change that to say press or click enter to play let’s grow that font

up by double let’s add a drop shadow font effect and let’s change the color to match our branding a little bit better and let’s resize the button itself with the scale widget and then position that we wanted so I’m gonna anchor that to the bottom Center and then

offset it a bit one more thing let’s preview that to see what it looks like so notice you won’t see the guides and when I hover over it you get that feedback that I’m actually hovering over it if you want to change that you can come down here

to the button properties drop down over hover and change the color to something different so now you’ll see it’s yellow that’s well first let’s save that I’m gonna save that in main screen you want to canvas let’s add that to our game now so let’s add an entity

call that main screen or main menu drag that into the UI layer let’s add a UI canvas asset wrath component I was pointed to our main menu UI canvas or main screen UI canvas sorry let’s load that automatically and run the game okay there it is our main

screen is there well you will notice that I don’t actually see my mouse and when I press ENTER click nothing happens so let’s fix both of those things let’s open up are you I can this property so again any element you have selected over here you came in

on the right hand side and you have its properties if you have nothing selected you get the UI canvas properties and this is where I want to add in the one component that you can add a Lua script let’s browse and so in our ly shine examples if

you look for display mouse cursor there’s a Lua script already provided for us that shows you where the mouse is if you want to peek under the hood see what it’s actually doing it’s not too exciting and some wrapper functions with some functionality that does all of that

for us make sure to save that run the game and now we can actually see where our mouse cursor is on screen so in our main menu entity let’s add a script canvas component and let’s get to authoring as always a great place to start any graph is

on graph start and you’ll want to load your canvas make sure you’re using the UI canvas asset ref one not the canvas manager and since the UI canvas ask the ref lives on the entity you can just point to yourself now that we have the entity ID right

from here as well we will want to say on enter I think it is or enter pressed in the UI canvas input on canvas enter pressed and with that selected go ahead and click on display connection controls in the node inspector make sure that that’s connected so when

you press ENTER on the keyboard in this canvas you just want to unload that screen so you I can’t assassin on load a sitrep we don’t need this one and points itself and let’s also make sure that that button is working for us and the way that the

bucket works is a little different right because you want to get access to the exact element and while we’re here let’s name that start button in case we start adding more buttons save that make sure it’s not dirty let’s go back to our script canvas with the canvas

entity ID drag out and we have a handy function called find element by name that’s use on a UI canvases and it works with a string ID so we want to get our start button once we have access to the button we want to know when you’ve clicked

it right so I think we have an on button click in the UI button same thing like before make sure that you display connection controls or you’ll get a warning if I try to save this guy so I’m gonna save this guy real quick in tutorials and then

call this start menu script I notice I’m gonna get this nice warning down here it says hey you’re not actually gonna be executing anything so make sure that I hit out to connect so when I click on that button what I want to do I want to do

the same thing want to unload myself and let’s give that a shot I’m feeling pretty good about this run the game clicking click on the button boom I’m in it unloaded and let’s make sure that our enter on the keyboard works fantastic thank you guys for watching please

leave a like a comment hit that subscribe button if you’re not already a subscriber to these official lumberyard tutorial videos I’m always reading the comments let me know if you found the video helpful please join us on our forums and continued building the discussion there as always look

at the video description for handy links to additional documentation other relevant videos and where you can go to on our forums to participate in this discussion download lumber yard today if you haven’t done so already it’s always getting better we’re constantly releasing new versions and new updates to

it the lumberyard team is hiring check out the video description for links to our current open positions if you can see this as something you would like to come help build thank you for watching I’ll see you guys in the next lumber yard tutorial video you

Author

bramen

Leave a comment