Transcripts
1. 0 Intro: Hello and welcome to this course. My name is Sonny from Able Games. Devon, I'll be your instructor before we get started. Let's see what you learn in what's needed. In this course, you'll learn how to create a menu screen for your mobile game. Let me show you how it will look like thistles. What you building this course. It is a simple menu for a mobile game. I'll call it Super Platform. This menu has two buttons, a play broaden in the settings, but so let's dive in and write some.
2. 1 Import Project Assets: there are a couple of assets would you require to get started with this section. By the end of this video, you would have seen the process of downloading the assets and importing them in your project. Not only that, this project file or asset file contains teen, which you can play like so you have a catch can control the catch using the keyboard keys. There are creates, and the cat can also be controlled. Using these mobile buttons. Here's the jump button. The fire button doesn't do anything and notice the cat can jump endlessly up to the moon. Right handed comes back on like so. So you'll realize that this scene is not perfect, right? So it's just a tiny, tiny portion of what's coming up in this course. The objective is to give you a feel off what you're going to develop through the entire course, right? So once you have a feel off days, I'm gonna show you there's an empty menu scene. You're going to click on that, and from there on, you'll kick start your journey of creating your mobile platformer by first creating ah, start menu screen. All right, so let's die writing and kick start the process off your mobile platformer journey. The download link is provided to you with this video. Go ahead, download the assets file and then, once downloaded, look in the project window. Select assets right Click Select Import Package Custom Package. Select a file and click open and you start to see a window that looks like this. Make sure all of the packages are selected. If they haven't been, you can click. Select all like so then click import and the import package process begins. You'll start to see this progress indication after the import is complete. Indie Project Window Under Assets Folder You'll notice now you have a couple of folders that looked like this scenes, animations, fonds scripts and sprites. Okay, once you to double quick scenes, select game plea and hit the play button. And as I promised, this is the scene that you can play and get a feel off a very tiny portion of what you're going to develop in this game, right? This cat can be controlled using the left and right arrow keys. The up arrow heat makes the cat jump. Ah, Papa, humping away to the moon right. And the a key is also the jump key for a mobile device. And the mobile buttons are working like so right exit the play mode. And like I told you, we have an empty menu scenes. I want you to double click this menu scene and you'll notice the name of the scene. Here is menudo opportunity. Okay, Hope you remember the pneumonic seen pro flat, right? So here's the scene. Alrighty. So with all of this configured, you're all set to kick start your journey of creating your awesome mobile pot. Former right, joining the next video. And let's kick start your process of creating your mobile platformer. I'll see you there.
3. 2 Download Sprites: Now let's have a look inside the projects panel and please look inside these price folder. There should be a U I folder, Double click the You Lie folder and right click and select. Create Fuller and let's call this guy buttons and create another folder and call it text. And we're going to store the game title here in the tax folder and all the buttons in here in the buttons fuller. So let's open our browsers and let's navigate to a website called Game R two d dot com. Okay, now I want you to click the freebies section, and that's where the entire magic is. Here. You see, these are completely free game assets. And, ah, I really want to give credit to this person. The owner of this website game r two d dot com because he's been kind enough to provide a lot of high quality to t sprites. As you can see, these are characters and then down low, you have free tile sets the environments. This is awesome. And then, for our buttons, you can use one of these packs here. So first I want to show you the license here. Okay, It's important. Anytime you're using an image from the Internet, it's always good to be aware off the licensing policies. Okay, now Game R two d dot com mentions that for the game assets in the freebie section, they are under a Creative Commons zero or C. C. Zero. Now CC zero stands for a public domain, which means you can use the assets free of cost and ah, in your commercial or in your personal projects without the need to go ahead and give a credit. Whoever I always like to give credit because it's somebody's hard work, right? So well, that's completely your call. But these these freebies here okay, here, completely free game assets Teas are in the public domain. So thanks once again to game R two D, and you can use the CAD game character from here. OK, you can just click on this and you're going to see a free download button. You can click on this. I've already done that and it's gonna be a sip file, which has to Fuhrer's one for cat and one for this dog. Okay, And now, if you want to look at the background, you congrats. The assets from here. The free platformer tile set. It's got this jungle bag Rome or a few Free to use any of the backgrounds that you want. Um, and as for the buttons, we're going to grab this casual game button pack. Okay? Here. When you click the free download again, it's going to be a, um, file. And so I've already downloaded the zip file here. Okay. And inside the sit file, we have a button, doc PNG. And this is the file that we're going to drag and drop here. Okay, so let me show you just dragged the Spartan doc PNG inside your buttons folder, and unity is going to do the importing for you. Okay? And they're now just to let you know this file. Currently, you cannot see the individual buttons inside, because if you see this file looks like this, Okay, this is the file, and in technical terms or your game programming terms, this kind of an image is called a spreadsheet. Okay. Now, spread sheet is simply an image which contains multiple images inside it. And these multiple images are arranged in rows and columns. They're they're said to be packaged or packed together using some sort off a compression algorithm. Definitely. These are technical terms, and for beginners to programming or game programming or any technical subject. These things sound confusing. So just for a start, remember, if anybody talks to you about a spreadsheet, visualize in your mind that a sprite, she looks like something like this. And it's always got more than one or two images. Okay, usually a lot of images, you know, combined together, arranged in rows and columns like this. Okay, I'll show you how you can actually extract these individual images from the single image or spray cheap.
4. 3 Working with Sprite Editor: okay and unities got a wonderful tool to do that. So once you highlighted this button image, please look inside the inspector panel and here for the sprite mode. Let's change this to multiple. Okay? This is how you indicate that your image is a spreadsheet, and I want you to uncheck generated maps. This is for three D games and not very useful in duty. And please change the format to true cutter. OK, we don't want any compression right now, and ah, looks good. We can click, apply. And after these changes have been applied, Now, please click on the Sprite editor and we'll see the magical Sprite editor. Now, this is a window which has this Steidl Sprite editor And here's thesis Ingle image. And let me zoom this image for you. And as you can see, this single image contains so many different sub images are smaller images. Now we're going to use the Sprite editor to extract or in technical terms spiced these images into individual images for us to be able to use in our game, OK, and how we're going to do that is very simple. You see this slice option year? Okay, it's actually a drop down. When you click on this, a sub window or a smaller window with these options will pop up. Okay, leave these options as they are in, Click the sliced button and let's see the magic. Okay, now, if you notice your small buttons now, have each of these buttons have any rectangular freeing here, K rectangular border. Now what unit he's done is Unity has identified each and every image in this one single image, and now it's actually showing us a sort of a preview. It wants us to check if everything is all right, and once we're okay that all of the images have been spliced or selected for us, we can hit the apply button, and then Unity is going to go ahead and create sub images out of this entire single image. And we'll see that in just a moment. Um, and here's a question. How do you get to know that these changes have been applied? Well, look at these two options. They've been great out, right? And that's the indication that now the changes have been applied, and now this one image is actually divided into multiple images. Okay, like we indicated Sprite. More multiple. Let's close the Sprite editor and say thank you to unity for helping us out. And here when you click this drop down. See, you have so many buttons now, all right, And you can actually drag and drop these buttons, Like so Here. Okay, in the scene panel. And when you drag and drop images like this game objects off, those images are created here, like so in the hierarchy panel, okay?
5. 4 Generate Game Title: So now, since these buttons are available to us, let's go ahead and download the game title. Let's head back to our browser and let's type in cool text. Okay? And as the name says, Cool text. This is really a cool site which allows us to create these kind of text based title. And for this demonstration, let me select the second template here, and it's very easy to use. You have this text area where you can type anything I'm typing in super platformer. Just for an example, you can use any name here and here while we're talking your game title is ready. Yeah, it's that simple. And you can right click on this image and select Save us and, uh, you've been downloaded anywhere on and let me name this s game title and let's save the image. We're going to drag and drop this image inside the text folder here. OK, we just grab this image here and ah, let me go to unity and right here. And so we just drag and drop the image. It's it's the same as importing an asset. Okay, when you right click and you select important you'll asset And if you were to go to desktop and select this and imported, that's the same as dragging and dropping an image here. OK, so it's just the same thing. So we now have game title and we have the buttons. OK? Our player is right here. If you look here in the players in the cat folder, you can take one of these images from here. Okay. And the only thing that remains is the background and the background is right here, okay?
6. 5 Adding Background: Let's begin by dragging the background right here. Okay, let me show you a small trick here. First, let's go ahead and save the whole thing. Now let's go to scenes. Let's go to game play and we already have a background here, right? And we want the same values, position, rotation and scale off this BG image. So how do we actually copy all of these? Is that possible? Yes, that's very easy. All you need to do is click the Gear icon select copy component and let's head back to the menu seen here and highlight the BG game object and in the inspector panel here, select the gear icon and paste component values. And that's it. You did not have to worry about trying to figure out the height and the width off your background image, right? I think this will be a useful technique for you in your future games in projects
7. 6 Multiple Resolutions: So now once we have the background, we need to have the two buttons also right. So let's right click inside the hierarchy panel and under you, I Let's select button and Unity is going to create a canvas, a button under the button, a text component on an event system. So for this to troll, I'm going to show you how you can overcome a common problem when you're developing for multiple screens and devices. And the problem is your gooey elements or your game design might not look the same when you change between devices. Okay, how do you overcome that? First, let's have a look. You have a can wish you have a button, but in this scene view, you see the button anywhere the button is invisible. Okay, but why is that so? All right, First, when you initiate or when you initialize a canvas or when you right click and select u I. And for the first time you add any of these button elements or any of these gui elements, unity adds a canvas to the scene view, and the canvas is really huge. Let me show you, Let's zoom out. And if you start to notice. There is a rectangular of white border K This rectangle Let me introduce you to the canvas . This is what a canvas looks like. And you can visualize a canvas in your mind like a thin plastic sheet on mid. You're going to arrange your goody elements like the button. Okay, if I want this button to be placed right here, like so you know, this is how the canvas looks like. And this is how you can arrange your gooey elements on it. However, by default canvases really huge. Okay. And if you notice this tiny little green thing here, this is the background. But we don't want this kind of configuration, right? So here's the trick. While the canvases highlighted, let's have a look here in the inspector panel and under the canvas properties or the canvas component, you see that you have a render mod property OK, which is a drop down with these three options. So I want you to select screen space camera and these two more properties will appear for render camera. Let's go ahead and select the main camera. And by the way, this is the same camera, which is year in your hierarchy panel. Okay, Now, if you notice the moment you selected the main camera, everything just vanished. Right? But it's actually there in the system. Now, it's the same size as that off your current camera. Okay. Your canvas has been resized to the size off your main camera. Okay, so this is the first step. The second step. Look inside the canvas scaler script, you'll see that you have a US scale mod property, which is also a drop down. And currently, if you have constant pixel size, I want you to change this to scale with screen size. And after doing that, look at reference resolution and it's gonna have a X and Y component. And what Artie's X and y okay, when you look at the camera here, the white rectangular frame or the border, the vertical is why, and the horizontal is X. Okay, let me write 10 to 4 here and 600 here. If you look inside your game panel or the game view here, you're going to notice. Or you might have already noticed or you might be working with this. There is a drop down here and which has to these couple of values. OK, you might not have this particular value because I created it. Using this plus button here, you can click the plus year at in a label. Maybe give it a test, keep a fixed resolution and maybe add in one old to four for the X and 600 here and click. OK, you're going to have your custom value. Okay? And since I'm using a galaxy top three in the landscape mode so 1024 by 600 is the resolution of galaxy Tab tree and that's light version the seven inch version. So that's the reason I have one or 24 here for ex. Always remember X is the horizontal and why is thieve vertical? Okay, this green is why this red is x k. The arrow in this direction is extra. The arrow in the upward direction is why the total vertical length is 600 units and the total horizontal length is 102 For now, this resolution year corresponds to the camera, the camera he follows this particular resolution you contested quickly by changing its who may be a portrait, you notice the camera changes. Right now it's more off a vertical rectangle, then a horizontal. And if you change this to maybe ah landscape, this thing here it again expands. So you see the camera acute corresponds to values here, and so it's good practice to develop it to a specific resolution. And then the Canvas Scaler script is going to help you scale to different resolutions. Once you specified your X and Y, you need to look here screen match mode. And if you have match with our height selected, keep it that way or change this to match with the light. And here change this 2.5. OK, now you might wondering, Where did I get this straight from right? It's very easy, actually. It's there on the unity documentation. And if you remember from my previous tutorials, any time you have some doubt or question about this particular component you're working with, you can click this blue book icon here, and it'll open the Unity manual, which is stored locally, as you can see here. And it's going to display all of the information about the selected component. In this case, it's camera scaler. Now, when you look at canvas. Cater. First of all, you'll see all the properties. Okay? These are all properties to drop down on all of us. The information off them. And when you scroll down, you start to see some details, okay? And in the details. When you come here, you see hints, right? So there is a particular page about designing you life or multiple resolutions. Okay, so sounds good. We're gonna click on this link, and it brings us to this page here designing you, I for multiple resolutions. You may wanna have a look at it because this will definitely be off help to you. The thing that I want to show you is right at the bottom here. Okay? The reason I selected 0.5 is so when you're working with scaling with screen size and let me show you, if you scroll down to this particular part in this to troll, the component has a property called match. We can be 01 or a value in between by default. It's set to zero. And this does this right now. If the match Properties said to 0.5 instead, it's going to compare both the current with and the height and scale accordingly. You can read this in detail if you want to. This is very helpful information, but this is the clue. OK, this is the information that I use here. The reason I put 0.5 year is this is a normalized value. Just going to tell the candle scaler script that Hey, what I want to do is I want you to increase the width by 50% and increase the height by 50% . All right, that's going to do the magic for you.
8. 7 Sorting Layers: So once that's done, you wouldn't want to say Hey, but I could see a button here in the hierarchy. But where is it? I don't see anybody. Year, Okay? And again, that's because if you highlight the canvas, okay, the canvas has a property here. It's called Sorting layer and the new layer number. The order in layer. It's currently set to zero. Okay, that's a clue here because if you look at your BG game, object the background. You see, the sorting Lear is here and the order air zero. Now, if you remember from my previous tutorials, I told you that starting layers are like a cute Okay, like in real life, people stand in a queue and somebody can be behind you. Somebody can be ahead a few. Somebody's right at the front. Somebody's right at the back at the bottom. So this canvas and this BG are both standing right next to one another, and BG somehow stays that because BG was created first, BG has proceedings. Okay, it's going to be above the canvas. So the simple way of bringing the canvas in front of the BG is to change this or earlier and assigning any value higher than zero. So in this case, let me use one. And that does the trick. The button is visible now.
9. 8 Adding Buttons: Okay. Now highlighting the button. Look inside the inspector panel and you have the image script component which has thes source emits property. We're going to change this. So for this, let's look inside the project Full Bert. In the U I section, we have a buttons fuller, and now so many buttons are available for you. So we're going to use but in Fife and but in six and I'll show you where you use Button six . Let's go back to the button highlighted. Look here in the source image. We're going to drag button five like so and drop her here in the source image. And what this does is it's going to assign the new Sprite, but it's still a little elongated, right? It doesn't look good. So they spotting here, this guy said native size. When you press this, that's it. The button resize is to a more acceptable, visually beautiful form. Okay, now, since you have a button the size of the button still looks a little big, right? And if you go to your game panel, you can see the visual representation or how the game would look like okay on an actual device and our reference resolution is Galaxy Tab three. Landscape wanted to four by 600. And let me just drag this guy here in the center and the other way of centering age. You can position this 20 And now let's change the width and the height. Okay, let's change this to 300 110. Okay, this is a predetermined value. I got this by trial and error while working on my other projects. This looks pretty OK, but you may want experiment according to your preferences for this demonstration. Let's use this value. And now this button has a text component. So let's name it play. And you see, it's got these properties that font the foreign style. I want to show you how you can actually apply a custom font and later on in the patrol. But for now, let's change this to 40 k so you can actually see that it's got a label play and we're going to leave these nasty fault. And you might want to further change this to maybe 40 maybe 50. This looks OK and we're going to name this button. Yes, button play. Okay, I always I have this naming convention where any time I create the U elements, I go ahead and rename canvas to you. I okay, and as you'll see you can have different types of you eyes one for mobile on for your desktop and so on and so forth said this is a good way of organizing your you I elements now the buttons. I always like to have a prefix b TN which which is and abbreviation work a shortened form for button. And this way, any person looks at your code or your design knows automatically that. Hey, you're referring to a button here and this text like to prefix it asked text underscore text play. Okay, it's not, you know, intuitively that Okay, this is a button, and this is maybe a text element which has the label plate. So now let's duplicate this button by hitting command D on Mac and Control D on windows, and you're going to have a copy of the previous button. Let's call this new copy as characters, okay? And you may change this to care Richters and also changed this to characters, right? And also let's bring this bun right down here. You have play in your characters
10. 9 Button Animations: Now let's hit the play button and you see these two buttons play and characters. And when you see now, when I click the button, you see that there's some sort of an animation. When I click the button, graze out or the color, and technically, the tent off the button changes. Okay, so I'll show you This is no mystery. And let me reveal the mystery to you. It's very simple, actually. Every button has a bun script. The button script has a transition property. Okay, Now, if you look this transition property has thes options, none color. Tend spy swap and animation. Okay, okay. I know you're excited. So let's get started Transition where color tint allows you to specify a normal color. Okay, a highlighted color and a pressed color. So if you remember when we were in the play mode when you when I click the button, the button changed its color. Right? So that color can be specified from here. Let's change it to read and see what happens. Okay. Here, color. There we go. You see? So just by doing a simple change in the transition drop down there, you can actually now have this sort of an animation. Okay, you changed the press cutter. You can change it to whatever you want. Maybe orange. And, uh, you're going to have an orange effect. Okay, this can be very handy when you want to design some sort of interactivity. You don't want any static images for your buttons. You want the buttons to be responsive. The other thing is Sprite swap and which I'll be using in this tutorial. And this particular feature allows you to specify a pressed Sprite, a highlight sprite. And obviously the target graphic is thesis a mask, this button here and also a disabled sprites. First, let's look at the pressed spray here for this. I'm going to drag button six here, like so and in Button six actually looks like this. The orange. So let's get back to characters. And now you have specified a press, right? Let's plus play and see what happens. And there we go. We have this nice little animation. Now when you press the button, you have the strikes sprite swapping going on, and this gives you this nice little animation. Okay, you can apply the same to the play button, so let's quickly do that click button play. Go to transition, change to spray swap and, ah, drag and drop button. Six to the press to spray. And that's about it. That's about it. It's really very simple. And they're real. We have these nice little animations, okay?
11. 10 Custom Fonts: all righty. Now, the next thing that I want you to see is how can you change the font on your buttons? And that's also very easy. Select a particular button and then highlight its text component. And here in the inspector panel, you see the font field. Okay. Currently, it's a system defined phone called Ariel. We're going to change it to something that we have in our project. And I have already downloaded a font here called Kamikawa. For that let's go to Google. And in here let's type font Sperl. And this is another awesome site which allows you to use a lot of funds for almost 100% free for commercial use. Um, so let's type in comical am I K. And this is the one I'm using comic access and will bring you to this particular page here . Now you can simply go out and down a little the TDF version. But I'd like you to see a few more things and something very important. Any time you want to download a fond from Franz scroll, please pay attention to this particular part. Okay, you have these particular icons, and if you hover your mouse. The icon changes to or the most splinter changes to a question mark. And when you click on it, it tells you that okay, commercial desktop usage is allowed. So in short, when all of these icons are visible to you means you can use these icons on that particular platform. For example, this icon represents applications. That means you can use the font in APS and software and video games. And if you look at this one, this say's that you can use this icon for e books and pdf. This is a free license, and this one is for you can embed in your websites with your CSS and this one here when you want to print commercial graphics and documents. Okay, make sure that any time. If you see that a particular icon is not visible or is great out, that means you cannot use on that platform. So be very careful about this. The licensing policies okay, and also you can test drive a particular farm, for example, you might want to write play, and there you you have a feel of how it's going to look inside your game, and you can also change the sizes from here, and it's going to show you OK, so you can also have a look for characters. And this is how it's going to look like, right, so few for you to download an experiment. Farms. Just make sure that your affair off the licensing terms that's about it. And, uh, if at any point of time you have any questions about a particular license, you can always contact, okay? And this will be a great way to make sure that whatever you're using, your aware off all the licensing concerns, okay, that's about it.
12. 11 Player Image: So once you have your font, you can create a folder called Fonts and Dragon dropped a fond here. And after you have done that, I like the text element. Dragon drop this fond. Like so in their Rio. Even nice looking comic a font here we can do the same for the bottom characters as well drag and drop this phone dropping here. And for this, you might want to change this to 35. OK, all right. This looks about Okay, so you have a play button, you have the characters button. Okay. And now the only two things remaining are how you can use a game title and a player character. And both of thes are very easy for the game character. Click your you. I select U I I and select an image. It's going to immediately. Instead, she ate or create an image for you and for the image. My naming convention is I m g. And since this will be a player so let's call it I m g underscore player. And with this button, I can move this player image a little up, And if you look you have the source image. Let's go ahead and grab one of the player images. And for that let's go. The Sprites folder. Let's look inside players and the cat and let me see. I think run seven is pretty good to go. So let's drag and drop her on seven drag and drop it here and said its native size. OK, and with this we're going to reduce the size off the with it to 200 hi to 200. And let's have a look in the game panel already. It looks pretty OK, and let's bring this player a little up. Okay, the last thing that's remaining is your game title. So just the same weight go to you I and select an image. And let's call it I m g game title titled and in the same way, let's strive this title right here at the top and in the u I. You have a text where you've downloaded the game title. Now all that remains is you're going to drag it like so, and there we go, OK, and you want to set its native size and it's going to look something like this end. Now let's change the with 2 701 124 The height and let's have a look at what we have just created, and that's about it. This is the full screen view off your menu screen. OK, it's very simple. There are only two buttons when you click the buttons, then they have the animations. You have an image of the player, and you have a game title and a background.
13. 12 Scripting Part 1: Now let's go ahead and write a small script, which will respond to these button clicks and change the screen to a gameplay screen exit display mode. Let's go to the project panel and inside the scripts folder here. Now this script will be attached to buttons, right? So the way to do that is, let's create an empty game object and let's call it menu Ctrl, which is an abbreviation off menu controller. OK, since this is a menu screen, let's assign a manager or let's hire a controller or a manager for this screen, right? Like in real world, you have a certain task. So what you want to do is you want to hire a specialist and designate or delegate all of your tasks to this particular specialist. So in this case, this menu controller will be in charge off changing or responding to these button clicks and then changing the scene. As for the instructions and you see how easy it is, let's go ahead and attach a new script called Menu Ctrl and like So okay, we're going to select C sharp, create an ad. This is another way of creating your scripts and by default. When you use this way, the scripts are created inside the assets for like this, and then you can drag and drop it in any particular folder under the scripts folder Floor. Better organization. OK, so we're going to do that later. First, let's double click the menu controller or Menu Ctrl script, and it's going to open it in mono develop and let's quickly do some coding. And for this particular part, we're not going to use the start and the update methods. And I like to keep the brackets, like so for better code organization. But that's just a guideline. Please feel free to use your own quoting convention. Okay, so let's create a public method called load Scene, which takes in a string parameter called seen name. Okay, like so. And, uh, it's very simple. Now this is unity 5.3 point two F one. Okay, let me show you the version of Unity. Amusing is 53 to F one personal edition, and with 5.3, Unity introduced a different scene management system. First, we're going to import a names based called Unity Engine Dot seen management the first step and then in here. We're going to write, seen manager dot load scene and then load in this parameter C name. So, like so And that's the only piece of code that you need to write in this script, right? That was easy. Right? So seeing manager dot load seen. Okay, if you need to figure out what seen manager does, you can copy this from here and then paste it in your unity scripting mantle, which is a local file. And you can invoke its using the blue Book icon. So when you paste in, seen manager in here, they're right at the top. You have right at the top. You have seen manager information, K. And it tells you that this is a class which belongs to the unity engine, not seen management name space. Okay, Um, name spaces are like folders. Okay. They used for organization off code, so there are no conflicts off names, Okay. Like, yeah, folder a folder B. And both these folders can have a class called human beings. Right. If there were no name spaces, it wouldn't have been possible to create two classes with the same names. But since you have name spaces, okay, you can store the same named class, but in two different names basis. So there's no conflict. And you can always tell unity that I want to use a particular name space to call a particular class. Okay, here these are the variables, the static functions and a lot more information. And the method be used was load seen. So if you click load seeing here, you see this information, okay, and then you see that the load seen loads the scene by its name or index and belt bill settings. So at this point of time, let's also do an important step. Okay, when you check your scene's folder, you have two of these the gameplay and many of these are scenes. However, anytime you create a new scene, you also need to goto bill settings by clicking file and build settings, and you want to add the name of the scene here. There are two ways of doing that. One is dragon. Drop it like so, and it gets added. Or if the scene is open here in the Unity editor, you might just wanna click on add open scenes, and that's it. And when you add a scene in the bill settings. The scene is allocated an index number like the 1st 1 Gameplay has index zero, which means it's going to be the first seem to be loaded. And then you have menu, which is the 2nd 1 that's going to be loaded. But however, in traditional games you see the menu first, right? So we're going toe drag and drop the menu above the gameplay, and that rearranges the indexes. Okay, and having done this, we're good to go.
14. 13 Scripting Part 2: And now let's add in the methods to the button play. So when you highlight the button play and look inside the inspector panel here in the on click block, the list should be empty and you can populated using this plus button and you get a field like this, We're going to drag and drop this menu control game object here. Okay? The reason why we did it is we want to invoke or even call some method. Okay, when this button is clicked. All right. Now there is a script called Menu Control OK, which has a function called load scene. How do you involve that function? And the simple process is you take a game object, okay, which has the script. You click the plus button and you drag and drop that object here, OK? And when you click this drop down, you're going to have access to the menu control script, all right? And you have to load seen method here. And since the load scene takes in a string parameter here string seen name. That's the reason why you see a text box here where you can enter some information, and in this case, we're going to enter the name off the scene that is gameplay. So let's call gameplay from here and you're done, which means when you press this button, the method inside the menu control script is going to check. If there's a string parameter are a scene name mentioned here, and if it finds a C name, it's going check if the sea name exists, and if everything's fine, it's going to go ahead and load the gameplay seen. So let's go out and test it. Okay, so here's the menu screen and when we click the play button and that said, it just took about one line of code in your script to change between the scenes, Okay, and now you have this round little green button and I press this button, but nothing happens. Can you figure out why this is not doing anything? Okay, that's absolutely perfect. There's no script attached to this button, or there is no method responding to this button Click, so we can quickly do that. Let's go to the game play seeing here we have a game manager like we had a menu manager. We have a game manager. You can also call it a game. Ctrl That's the abbreviated form for game controller, OK, because the scene name is gameplay, So I just named at game controller. OK, you can call it anything that you want. It really doesn't matter. All you need to do is add the component call menu control and, uh, because the menu control script has a method, Okay, which is public needs. Any scene can call it. Okay. And this is common. I created this method in a manner that it can be reused across different scenes, So we're going to see how. Okay, since you have the menu control script attached to the game control Now let's have a look in the u y and the button home. Okay, The same weight. This on click block is empty. So we're going to populated, like, leaking this plus button, and then we're going to drag game control here, OK? And when you cleave this drop down menu control is right here, and you have to load scene. Okay. All right, now, here's a question. What would I feel here in this particular text field? That's right. Okay, because we want to go back to the menu. We're going to put in the name menu groups by Catholic was on. We are going to add in menu right here, and that's about it, so we can quickly go ahead and test it. When we click this button. That's it. That said, the scene is changing, and when you could click play the scene changes to the game play. We have your familiar cat, and it's able to jump in dual kind of things. And when you press this home button, the scene changes to this menu.
15. 14 Create a Package: in this video, I'll show you how to create a package for your start menu. Now you may ask me, Why would I need to do that? How is it going to help me? And that's a very good question. To answer that, let's head over to the Unity Assets Store. This is the Unity Assets Store. This is a marketplace where unity developers can buy and sell assets, and these assets help you in speeding up the development process. Well, at some point of time, for example, you decide to create an asset and sell it on the acid store. So what would be the first step that you would need to take? This video will show you exactly the first step that you would have to take. The first step is to create a package and how you do that. Let's have a look. That's how to order unity. Please have a look in the project window, Left, click and Select Assets folder, right click and select Export Package Thief Exporting Package Dialog box shows you a list of items that you can select four D package. Now, since we're going to export the start menu, right, have a look first, make sure dat de start menu scene is open. Okay? And quickly do the scene. Pro Platt pneumonic that I taught you. And tell me the name of the scene that's open right now. Go ahead and do it. Perfect. Okay, If you all answered menu dot unity, you've got the basic concept. Okay, so the menu dot unity seen is open right now in the scene. We have a couple of came objects that we want include in the package. Let's have a look at what they are. We want the background. We won the game title, the player, the buttons and the custom font. And not to forget there is a menu controller script attached. So we also one demon. You control her script. Okay. How can you do that? It's simple. First, I want you to make sure that including dependencies is checked. This helps you in selecting dependencies and what they are. I'll show you in just moment. The second step is click the none button. All of these items should get unchecked. No, by referencing or by looking into this scene, let's start selecting items one by one. Okay, let's have a Look, there's a background. So let's figure out. Here's Thebe g Put a check for BG this one selected. We see a game title so game title is right at the bottom here. Game title. Then we see the player. Let's head over to the images for the player. This is the folder for players. We have a cat. And let me tell you, this was run seven. The name of the image So run seven needs a check. This is done remaining two buttons, the custom font and the script. So let's figure out the button images. They are under the folder buttons and button, trendy dot p and G. This is a spreadsheet. Now we need the custom font. So look for a foreign Spoder here. And the font name is Konica. So this one stunned Looks good. The last thing that remains is de script. Let's have a look at the script here. Menu controller Got CS also an important thing because we're exporting a scene. Make sure that you select the name of the scene. Okay, so you've got the sea name. We have a font. We had the menu controller script. We have to background we have the player image and we have the buttons. We have the custom font. OK, Looks good to go now include dependencies is a helpful option. For example, just imagine that you have this script here. Menu controller dot CS, which depends on code from clear manager dot CS and you forget to put a check for player manager dot CS. If this is checked, include dependencies. When you export, all the dependencies will be exported along with the I mean items. Okay, Now I want you to click Export, select a folder. Let's call this guy. Start menu, click Save and we're done. Congratulations. You have just learned how to create a unity package. And how can you tell that this is a unity package? Have a look. Every package in unity has an extension dot unity package. Once you start creating more complex and useful projects, simply select the components or the items you want in the asset package and using the way that I showed you go ahead and explored them. You'll have a doc package file like this which you can upload to the Unity Assets Store or be able to use in your existing projects.
AbleGamesDev .
