How to Make a Game with Visual Scripting (E03) - UI & LEVELS - Unity 2021 Tutorial (Bolt)

[Music] in this part we're going to add ui and levels to our game so let's get started by going to our scenes folder and in the scene folder let's create another scene and we'll call it start this is going to be the start scene of our game and in the start scene what i want to do is go to ui and add an image it's just going to be a white image that i'm going to have in the background and when i'm working in ui i actually like to work in the game view instead so let's go inside the game view and you can see the image is right here in the corner now i want to stretch this image covering the whole window here and to do that what i can do is click on this icon right here holding alt down on the keyboard i can click on this icon to stretch it in both horizontal and vertical so this is going to be our background and now i want to add some text so let's go to ui text this is going to be our start game text so i'll just name it like that and the text is also gonna have start game i'll increase the width to 800 and the height to 100 in the text settings i want to increase the font size to 80 and also for alignment i want to center it for the font type if we click right now you can see that there's only one font that we have here and i want to add a robota font we'll create a folder called fonts you can download the font that you want to use but right here i have a robota font i'll add the folder here and now if i select start the game again and go to fonts we have more options and i want to use the thin version so this one right here that looks pretty good but there's one thing that i like to change in the ui so currently if i make the screen bigger like this you can see that the size of the text is still the same and if you want your ui to scale with the size of the screen what you can do is go to canvas and right here for ui scale mode currently set to custom pixel size you can switch to scale with screen size and you can choose either to use width or height for your scaling so i'm going to use the height and now the window gets bigger the ui also gets bigger and i just like it like that now what i want to do for the start scene is when you click on the screen to start the next level and the way we can create that is by selecting this image let's actually rename it to ui background and for this game object i'm going to add a component a script machine and i'll select embed it go to added graph we're not going to use these units let's remove them and the unit that we're going to use is on mouse input and here we have a choice of selecting which button we're listening for and what type of action so what i want to do here is load my first level and for that we're going to use scene manager load scene but for this one i'm not going to use the scene name instead i'm going to use scene build index and i'll show what that is in a little bit and for the scene build index i'm going to pass in one and also i'll explain this in a little bit and that is it for our logic now let's go to our assets and go to our scenes and let's rename our simple scene to level one and now we want to add these two scenes into our game the way you do that is go into file build settings and right here at the top we can see scenes in build currently it's empty we can add our start scene and then a level one and right here on the right we have build index zero and one and that's why i was using one for the build index that i wanted to load we can close that and test out our start scene so now if i click on the screen you can see that the game starts and we can play our level the level one is not really much of a level so let's go fix that let's select level one but before you start copying the obstacles and the coins what you want to do is create some prefabs so let's create a folder call it prefab and the prefab is a saved configuration of a game object so if we want all of our coins to be configured just like we have it in the scene what we can do is drag this coin into the assets folder and that will create a prefab now if we use the prefab in our scene so for instance we duplicate this prefab now at any point if you want to modify how our coin looks or how it behaves what we can do is actually make those changes on the prefab so for instance let's scale it in x-axis by two and as soon as we make that change on the prefab you can see that both of those coins in our scene actually got modified so that is the benefit and it works the same for the logic as well now for this coin i used an embedded source and although it's going to work right now without a problem it is recommended to use graphs instead of embedded for a prefab because some of the logic won't actually update correctly and like in our case since we already created an embedded graph what you can do is actually convert it to a graph so click convert right here i'll just name the asset coin graph click save and that switched our source to graph and created that file for us so if we select these coins you can see that updated here as well and we shouldn't have problems with our graphs now let's also make a prefab for our obstacle for our finish line and for our player for the player we actually created a graph so we don't have to do any conversions here let's actually create a ground as a prefab as well but for the other objects if we're not going to be changing anything with them between the levels we can just keep them as they are but in case if we want to change anything with our camera or light in all of our scenes what we can do is create another empty game object and call this level base now we can add these three objects inside here and from this we can create a prefab that can be used in all of our levels the scene variables are meant to be unique per scene so we're going to leave that as a regular game object now let's make some changes here select this obstacle and add some obstacles around and these coins we can move them around so that they'll be easier to collect some like that a very simple first level let's save this level go to assets and to our scene select the level right here and we can duplicate this level by hitting ctrl d that creates a duplicate and it actually increments the level one to level two let's go to level two now to make the level design a little bit easier you can actually change your view so we can click on this y to actually look from the top and if we click on the center right here it's going to switch from perspective to orthographic so now we're in orthographic view and we can start creating our level like this from the top view so let's move the finish line a little bit further make our level longer and then we can hold this square down to move in both x's when you hold in an object you can click ctrl d and it will create a duplicate of that object and leave it at the place where you're holding it so it's a fast way that you can create your scene like that let's do the same thing with coins so add some coins here save level and let's duplicate one more time to create level three open level three move the finish line even further back if you have any difficulty of selecting that object the ground always gets selected one of the options we have here is to block selection so right here in the hierarchy if we click on this icon we're no longer will be able to select ground so that might help you we can hold down shift to select more than one item also you can scale the obstacles and the logic is still going to work so that is also an option but let's just call that good for our level three click save and we are done with our levels now we can go to file build settings and add the two levels that we just created we can select more than one add those in and now we have more levels that we can play now i haven't added the logic of loading at the next level so let's go ahead and do that right now and since we're using prefabs and graphs if we're going to make a change in one level the changes can be made to all levels as well so let's go edit graph and in the previous part what we did after we hit the finish line was just restart level and now we want to change it to loading the next level so we can use the same approach scene manager load scene by build index and the way we can load the next level is by incrementing our build index because our build index is actually incrementing with levels so we'll use that to load our next level let's get active scene first and from this scene we'll get build index and to this index we're gonna add one and pass it in for our load scene we can close that go to our start scene and test out the game so click on the screen and we start with the first level let's get those coins we go to the next one and after we complete the fourth one you can see that we get an error because build index 4 does not exist so to avoid the error what we can do is duplicate our start scene and make an n scene out of it let's open the end scene and in here for text let's just call it text and for text we're just gonna say thanks for playing now currently since we duplicate the start if you click on the screen it's gonna go back to level one and let's change it to actually quit the game so we can remove that load scene and look for application quit so now if you click on the end scene it's going to quit the game but one more thing that we want to add is actually display the coin count right here at the top and for the change to be applied to all the levels i'm actually going to use the level base one way we can go and modify our prefab is by clicking this arrow here and it goes inside our prefab if you want to get out you can click this arrow right there it's going to go back to your scene so let's go inside of our prefab and inside here let's add an image for the image source let's actually select one of the default images here this knob and change the color of it to yellow something like our coin let's switch the ui scale mode to scale with the screen size and switch it to use the height now i want to position this image in the top left corner so we can just use that and for the width i'm going to set it to 50 by 50. something like that and now let's add a ui text inside of our image we're going to align it to left and then set position x to 140 for the height let's set it to 60 and position it in the center for the font size i think 30 will do put some numbers here so that's how it's going to look and we can switch our font to roboto lite something like that that looks a little bit better and i think we can go and add some logic for changing the value so let's add script machine switch to embed it add a graph and in here i want to set text for text object so let's find sec text and i'll do it on start and also on update now for the text i need to pass in the amount of coins we have collected and if you remember from the last part we have it in the saved variables currently it's at 16 so we can add that variable to our graph but since our variable is an integer we need to convert it to a string so we want to look for integer to string unit that gives us a string output and we can use that for our input for our set text we can save it click play and test it out so right there we have a coin count and it decreases each time we pick up an item but we're still getting that error from our level three and it's because we have not added the end scene to our build settings add the end scene in and that should fix that problem now a couple things that i want to do before we try building this game is go back to assets prefabs select our player and for the player i think the forward speed is a little bit too fast so i want to decrease it to 18 and that should change the force speed of our player in all of our levels one more thing i want to add is some fog and the way we can add fog is go to window rendering lighting go under environment and right here we have an option for fog for the color i want it to be our background color so it's gonna blend in with the background and i think i'll increase the density that looks pretty good now if you go to our scenes and select level two you can see that the settings are different here so i'm gonna go ahead and do the same thing here as well save it and do the same thing for our level three save that and now the way you can build and test the game is by going to build settings right here i have a windows platform currently selected build and run you can create a folder builds and just build it inside there and after the game is built it will run and you can test it out so right there we successfully have built the game i'm still gonna make some bonus parts for this series and in one of them i actually want to add the scene transition so if you're interested in that make sure you subscribe and turn on the notifications so you get notified once i post that out i hope you guys enjoyed this mini series and that you found it helpful click on that like button write in the comments what you thought about it and i'll see you in the next one

Channel: Smart Penguins - GameDev

Views: 9,772

Keywords: Tutorials, GameDev, Smart Penguins, unity, unity game dev, indie gamedev, how to make a game, how to, develop games, brackeys, game making, game development, indie game, video game, beginner, easy, learn, course, game, develop, coding, basic, introduction, visual scripting, making games, getting started, unity bolt, how to make a game with unity, unity bolt tutorial, unity visual scripting tutorial, unity visual scripting 2021, how to make a game with visual scripting, unity no code

Id: pl3_Oj3xq-0

Length: 12min 56sec (776 seconds)

Published: Thu Apr 15 2021