Get started with Unity UI - Adventure text game tutorial

hello today i'll show you how to start with unity-wise system by creating a simple adventure text game text game as the name suggests does not have any graphics so all story and gameplay is communicated using text on the screen of course to make our game a bit more attractive we'll add the simple graphics and buttons let's jump right in we'll start with an empty unity project make sure to select 2d template then the first step is to create a canvas right click anywhere in a hierarchy and select ui canvas note the canvas is completely separate from the game elements you might be used to and is displayed always on top of your 3d objects or 2d sprites to focus on the canvas double-click it in the hierarchy let's start by creating some objects when you right-click on the canvas and hover again on ui option you'll see all the elements you can add i'll talk about all of them in a separate video but today we'll focus on text image and a button let's start with the first one go ahead and add text to your scene we can easily change all the properties of the text like the color font size alignment and of course the text itself i'll tune it a bit and change the content to castle mystery finally remember to rename our game object i'll call mine the title sometimes it might happen that the text is too big for its frame using correct tool we can easily resize it and position it whenever we'd like now add another text object this will be our main area for game story resize it to fill out almost all of the screen leaving some space at the bottom and call it main text to make our text a bit more readable we'll add a white background again right click on a canvas and select image then resize it to fill the same area as the text just created rename it to background but now we have a problem as you might already noticed our text has been covered with a white box that's because ui hierarchy is displayed layer by layer in the same order as in the hierarchy window that means that object lower in the list will be on top of others in our scene so to fix the problem let's move our newly created background image above the main text voila now everything looks great the last thing we are missing are the buttons they'll introduce some interactivity to our game player will be able to select one of the two options how he or she would like to continue the story for the last time right click on the canvas ui and select button as you can see it's very similar to the other components you can resize it move it and edit it but there are some differences for example to change its text you'll need to open button group and you'll see a text object as a child here another one is the main button controls in the inspector here you can change its color whenever it's hover or clicked you can select whether it's interactable or disabled and last but not least what action should be triggered when button is pressed this will be the left button and i'll call it option one we also need the second one so go ahead right click on the option one and select duplicate what's left is to position the new button properly and rename it to option 2. ok our ui is now finished it looks great on our display but if you like to open it on different screen size or on the mobile device the chances are that the whole screen would look kind of messy that's because we haven't set ui constraints you can check out my other upcoming video that will teach you how to make ui look good on every device now we need to get into the code to test out whether the buttons are working create new c-sharp script called game manager and open it whenever we use ui system in our scripts we need to add at the very top using unityengine.ui then let's add public variables for all objects that we'd like to change in our scene type public text and name of our main paragraph main text for buttons type public button option 1 and public button option 2. great now quickly remove update method because we won't be using it and let's start writing some code in the start method before writing the actual game code i'd like to show you how to modify our text and buttons type maintext.txt equals welcome to my game that line immediately changes our main text value on the screen let's also change buttons type option 1 dot get component in children text dot text equals hello because the button class does not have any easy way to get our button text we need to ask unity to find it for us and of course to change the value the same way as above repeat that step for the second button save your script and go back to the unity just before pressing the play button we need to link all the components firstly attach game manager script to the main camera and then link text object and both buttons to the corresponding places after that is done press play and if you haven't done anything wrong you should see that the text has changed now after we know some basic principles of how the unity y system works we can go a bit wild danger zone it's getting a bit harder but i'm sure you're gonna pull this off the basic idea of our game will be to make choices and of course each choice will turn the story in a different direction i've prepared here a very simple story as you can see each story block has two possible outcomes illustrated using the arrows the story starts on the yellow block and ends on the green or the red blocks we'll create a class called story block it will store a text text of both buttons and connections to the next story blocks that will come handy when user clicks on any of the two buttons let's show that in code above our game manager we'll create a new class called storyblock then add our variables type string story which will contain story of this block string option 1 text and option 2 text which will be the button texts with described choices and finally storyblock option 1 block and storyblock option 2 block which will be the links to the next story blocks okay now to finish things up and speed up the process we'll create a class constructor constructor allows us to assign some of the values immediately after creating a new class type public storyblock with the same parameters as above open brackets and then this dot story equals story that means that the class variable will be assigned to the variable that we pass in this one repeat the step for all other variables last but not least we'll add the default values to some of the variables that means that we will be able to create a new class object without specifying all variables to do that simply put equals null or equals quotation marks to the correct parameters great now it's time to code our blocks in the game manager class type storyblock block 1 equals new story block and for now pass only main text and buttons text in my case based on the diagram i've created it will be you just woke up in a small dark cell in an old castle the buttons will be look for other people and check the doors now i'll repeat this step for all other blocks [Music] great notice that the last two blocks does not contain button text because story won't be continued after that now finally let's connect all the blocks to each other based on diagram the first block connects to the block 2 and the block 3 and so on and so on [Music] finished time to write the last missing puzzle displaying blocks i'll create a new method in our game manager class that will be called display block and it will ask for the story block open brackets now move from the start method everything we have created so far to change main text and button texts then change them to display block dot story block that option 1 text and block that option to text then at the top create a new storyblock variable called currentblock and in our new function assign it to the block that we have just passed in why is that for the method is created to populate main text and button texts in our screen additionally we need to create two new methods called button one clicked and button two clicked that will be triggered after clicking the buttons these methods will run display block and pass an option one dog or option 2 block from the current block depending on the pressed button and to finish everything up type in the start method display block block 1 to start the game with the first block okay i have a great news end of coding now we need to get back to unity and link both of our buttons to the button clicked methods click on the button press a little plus symbol under on click trigger and drag main camera right here from the list select game manager and depending on the button select button one clicked or button to clicked repeat that for the second button and that's it it's time to run the game press play and wait for our first message if everything appears to be working click one of the buttons to see if the story continues there are still things that we might add to this game like having only one option to choose or proper game over screen but we will end right here i'd love to hear back from you if you like this video and what is more important if you try to create your own story be sure to tell me about it in a comment section also consider subscribing if you'd like to see other tutorials and guides for the unity ui system see you in the next video

Channel: Coco Code

Views: 79,212

Keywords: unity, cococode, tutorial, bionicl code, unity3d, gui, Unity GUI, unity gui tutorial, guide, Unity UI, Maciej maj, Unity UI start, Unity ui tutorial, bionicl, unity gui, unity ui guide, unity ui let's start, build unity ui

Id: xmR07iBW7zk

Length: 13min 26sec (806 seconds)

Published: Tue Sep 22 2020