Unity® 2D Mobile Platformer Course: Part 3 - Building Mobile Buttons and Controller (4 Videos) | AbleGamesDev . | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Unity® 2D Mobile Platformer Course: Part 3 - Building Mobile Buttons and Controller (4 Videos)

teacher avatar AbleGamesDev .

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

4 Lessons (26m)
    • 1. Creating Mobile Buttons For Controlling The Player

      6:05
    • 2. Creating the Mobile UI Controller

      3:34
    • 3. Scripting Mobile Left And Right Buttons

      11:40
    • 4. Scripting Mobile Fire And Jump Buttons

      4:38
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

62

Students

--

Projects

About This Class

  • learn step by step process of designing and developing mobile UI controls using Unity® game engine
  • add mobile buttons for common gameplay behaviors like jump, run, walk, fire bullets etc
  • covers helpful tips and tricks
  • Scripting is done in C#

If you want the sprites and assets used in this course, you can download them for FREE here

Meet Your Teacher

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Creating Mobile Buttons For Controlling The Player: in this video, I'm gonna show you how to make buttons for making the player move left and right and for firing bullets and for making a player jump. Okay, The mobile buttons. So it's very easy. Let's get started. The hierarchy, right? Click and select U I canvas. And then I want you to rename this to Mobile. You I Okay, now, however looking the inspector, let's apply these settings. So this mobile you I looks good on all resolutions. So first, let's change screen space to camera And in here, let's say the main camera. Okay, this is the main camera in the scene here. Next, I want you to change the sorting leer. So let's add a sorting Lear called You weigh like So save the project. Go back to Mobile G y. And now we have a sorting Lear. You Why in the u I? I want you to change the order leered to next four camera scaler change this to scale led screen size and applied the reference resolution that you're working with. I'm working with 1024 and 600 and I want to match the with our height and this would be 0.5 . Okay. The sequence of steps will make sure that your mobile you I looks good on all resolutions. Next under mobile. You I right click and select U I panel and let's read in this to panel mobile. You Why? This panel will hold all the mobile. Give my buttons. Right now, the panel is of the same size as that of the canvas. So make sure the rectangle tool is selected. Then left click and hold the mouse and drag it down like so I have a predetermined value for 26. I'm going. Apply this value. Okay. Next, I want you to select the panel. Right click and select U I button. So here's the button. Okay. This is how the default button looks like. I want you to rename this button a button, move left and then expand the button and delete the text component like so next. Let's lead the sprite for the button. So in here, let's type in button. And this is the left. So this is what we're going to choose. Then I want you to click set native size, and there we have it. We have a nice looking button. I want you to click the anchors in. Select this one so it gets anchored at this position. Now select the move tool and holding down the command. I want you to drag the X axis for the button and reposition the button somewhere here. Okay, now let's change the wits to 110 and the height to 110. So the button should start to look kind of like this with the anchor here at the lure bottom. Next, let's duplicate this button and rename it to, but move right and holding down the command dragged this button to the right like so now for source image, click this small icon in type in button and select the right button icon. Okay, kind of looks nice. Let's go to the play mode and test. If you click these buttons, you'll notice that the player is firing bullets. But that's just a simple issue. Click at it. Select project settings, Click input and here notice for fire. The alternate positive button is Mouse zero. This is the left click. I want you to delete this, save the project, and now when you go to the play mode. We have two buttons, the left and right and your tap on them, and nothing is happening. But don't worry. In the next video, we will write some script and Makesem player movement. For now, let's carry on creating the buttons. Duplicate the move right button, and I want you to name it button fire, using the move tool. Drag it to the right like so this looks about right and for source image. Let's select button fire and now click the anchors and select the lure. Right bottom anchor. So the anchor for the fire button will appear here at the lure right bottom. Next, duplicate the button fire and call it button jump and holding down the command drag D jump button to the right, like so. And this button will be above the rest of the buttons, kind of like So now for source image, type in button jump, and this is the one we want. This looks about right, so you also want to make sure the anchor for the jump button is here at the lure bottom right? Also, you may notice that the panel is kind of translucent. It's not completely transferred. So click the panel mobile view. I click on color and I wanted to change this to observe. And that's it. Another thing you may notice. The buttons are way too bright, so we can do something real quick. Select all the buttons, select color and change the opacity percentage to about a 50%. And they're now the buttons look a bit better. Okay, You may have played games where the mobile controls look kind of like So also, you may want to experiment with the settings for the positions on the jump and the fire button. Usually the settings that I'm showing you worked pretty well for most of the players. Alrighty. So we have the mobile buttons now, but these buttons are not doing anything. So let me show you in the next video how to get started with the scripting 2. Creating the Mobile UI Controller: in this quick video, I'm going to introduce you to a best practice off how to capture mobile input and how to route it to the appropriate methods in the player controller script. Okay, so let's get started in the hierarchy. Right? Click and select. Create empty. Now I want you to rename this to controllers all in capital letters. This game object will help you in organizing all the controllers you're going to create from now. OK? Selected right. Click and click. Create mt to create a child object and rename this new child object mobile You I ctrl Okay , this will be the controller for managing input from the mobile Goodbye buttons Let's out a script to it. Select add component and type In mobile You I ctrl hit returned two times And the mobile your controller script is added Double click to edit the script. Let's begin by writing these summary This script routes the mobile input to the right methods in the player controller script. So we need a reference to the player controller script. Now, let me ask you a question. Where is the player controller script attached to to the game object player, right So we need a public game object variable called player because we want the reference to the player controller script. Let's call the variable Player Ctrl Like so. And in these start method, let's say clear controller equals player dot get component and passing player controller like So don't worry if you're getting confused, let me explain this player controller with a Capital C and a Capital P. This is a class. Okay, Any script that you make in seizure, like so public class mobile Nikolai controller, this becomes a class. So this is a class which you created and this is a script attached with the game object player. So we declared a variable called player controller because we wanted to get a reference off the player controller script Attash with the player game object. Let me show you in unity. This is the player cat, and this is deeply Air Controller script. We need a reference to this so this piece of code is going to get you that reference. Now before you test a script. Always remember if there are public variables in your script like this, you need to assign a value to them in the Inspector, let me show you. Here's the mobile, your controller game object and the script and noticed there's a player came Object Field. If you don't assign a value and you go to the play mode, you'll get an error. Like so okay. And looking at the consul, you learn that you probably need to sign the player variable off the mobile. Yeah, Controller script. So this is a good thing to remember always. So let's drag the cat and drop it onto this field, and it's done. Now. If you click the play button there, you're not seeing the error anymore, and we're good to go. All right. So far, so good. In the next video, I'll show you how to make the left and right buttons work. 3. Scripting Mobile Left And Right Buttons: By the end of this video, you learn how to make this player cat move left and right, using the mobile left and the mobile right buttons like soap. And the process is very easy once you understand the steps behind it. So let's get you started. So let's begin by deleting the update method. And instead, let's declare three public methods called mobile move left. And let's copy this from here and paste it two times and simply changed the method names to mobile Move right. And this guy is going to be named mobile. Stop. All right, so you can figure out that these three methods are going to move and stop the player now in player controller script. First of all, this player controller is the reference to the player controller script. Okay, so using this variable, you can call methods in the player controller script notice you have delayed for double jump. These are all fuse and methods from the player controller script. So we're going to say something. What we're going to say, controller doubt mobile move left like so. But this guy will be in red. And that is because we haven't declared mobile move left inside Player controller, which we're going to do in just a few moments for now. I copied this from here. Patient here and here, and we're going to change this toe move right, And this will be named Stop. Okay, this is the first step. Let's copy these three from here first and in the player controller where you have fire bullets. Let's paste the three methods to lead these three lines from here and now, in year, mobile move left will be called when you press the left mobile button mobile move right is called when you pressed the right mobile button. And when you raise any of those buttons mobile stop us going to be called. All right, So how can you make the their move using the mobile buttons were going to use a boolean variable. First, let me write the variable than real declared its left pressed, and we're going to say this is true. Let's copy this from here. Paste it here and it is Ted off left. It's gonna be right. And let's copy it from here and paste in here and that's copied from here and paste in here . I'm gonna tell you why I first turned this two. False. Also lets copy it from here. And let's declare these two variables bullion left pressed and right pressed there. Now let's go back to mobile move left. So any time you pressed the left mobile button, this Boolean variable left pressed will be true. And for right button, the right press will be true. And when you release the buttons left, Preston right press will be false and stop moving will be called OK and stop moving is a mess it in play controller that stops the player from moving. All right now, the last piece of code that's required is in the update and below show falling. Let's write in if statement If left pressed, then you want to call the move horizontal, and this takes in a float parameter. So let's pass in negative speed boost and copied this from here and patient here. If you notice I have changed this to write pressed, these two statements will check with every update whether the left mobile button or right mobile button has been pressed or not. And if any of these buttons are pressed, move our zonal will be called with the appropriate value for speed boost. Now, you may be wondering where did I get this speed boost from? Well, it's from here. You're getting the value using input dot Get access raw, and the value is gonna be either one or a negative one or your. So we're going to multiply one with a speed boost. This is a public float variable that you set. Let's do a bit of math. If you multiply anything with one, you get the same number, right? So, for example, 10 into one is 10. Okay, so speed boost. Imagine if you have a value of six, so six into one will be six, right? And if you multiply it by negative one, so it's gonna be speed. Boost into negative one is negative. Speed boost. Also, remember I told you that if the velocity off the player is negative, in that case, it's gonna move left. And if the velocity is positive, it's gonna move right. If you pass in a negative velocity because this is left press, the player will move left and for right movement passing a positive velocity. And that's the only piece of code. Now I'm gonna show you how to attach these methods or call these methods when these buttons are pressed and released. First, I want you to select the button, move left and have a look. You'll notice you have something called on click and with this plus and minus icon and it reads, List is empty. Well, this looks kind of the thing that we could use. But for this example or for our purpose, this will not solve your need. Why? Because on Click will call the Method Onley. After you release the button, I imagine you press and hold the button and you want the player to move left or right. But as long as you're holding the button, it's not gonna move the player. You have to release the button to start moving the player. That's not what we want, right, So instead, we will use something called on Pointer Down and let me show you how to add it. Click Add component type in event trigger and now you load issue. Have event trigger script click Add new event type and you'll get a pop up from here. I wonder to select pointer down. All right, this is the first step now on pointer Down is very similar to this gray box here. Instead, off the on click you loaders pointer down and you'll orders list is empty. So the second step is click this plus icon and you'll get this field this drop down and this drop down, which is not active right now. Now here's the formula or the important step that you need to remember or understand. You know, what is this field here? If you drag and drop a game, object onto this field and that game object has a script attached to it, you'll be able to access the script and it's public methods from this drop down. Okay, so let's start you notice this game Object Mobile. You're controller. It's got a script mobile. You I controller. And this create has deep public methods. Move left, move, rate and to stop. So going back to move left, I'm gonna drag. This came object from here onto this field. And like I told you, when this happens, you, lord, is that this drop down will start to show you the mobile your controller script along with the public methods here. Mobile move left move right and mobile Stop! Here's a question. Because this is the left button. Which of the three methods should I select? Coke? A move left perfect. When you press and hold the button. Okay. On pointer down will let you call a certain method. Let's verify. So if I press and hold the left arrow What? What happens there? I release, But hey, the player did not stop. Why did this happen? I release the button by the player did not stop. Can you figure out why it's got something to do with this part here? Okay, that is because we have an on Poinar down logic on pointer down. You want to call this method move left. But where are we calling the method to stop the player. Right. So another event to the rescue. It's called Pointer up. You can add it using new event and select on pointer up like so. And you're gonna get something very similar to this this portion here, and simply change this move left to mobile Stop. So when you press and hold a button, this method is called. And when you release the button because of pointer up the mobile stop will be called and ah , in the script. If you notice Mobile Stop is assigning the two Boolean variables to falls and calls to stop moving that effectively stops the player. Let's verify. So here's the left button and I release it there. The player started moving, and when I released the but in the player stops the hair, the player almost fell off the cliff. Right? Well, so let's exit the play mode. And now your button move right does not have those method calls. Okay, It's simply got the on click. So instead of clicking, add component and you event triggered there's a simpler way. Okay, let me show you. You already have all of this configured right, and much of the things are same. So let's copy it. Let's copy this component from here. Go back to move right. And you see this button script clicked the gear icon and pays component as new. And there you see the magic. You've got everything pre configured for you. All you need to do is because this button should move the player right. So instead of mobile, move left, simply select mobile. Move right, Okay. And long pointer up Mobile stop should stop the player. Let's verify. And this is the right button. I'm holding it and I stop it Perfect holding the left button and I release it. And perfect. So you've got deep right and left buttons working now. Okay. And now here's a quick test to show you why I did not use on click. So I'm gonna use the button fire for this test, and it's gonna be a quick one. So hang along. So on click, let's click the plus icon Annual lotus This field Let's drag and drop the mobile Your controller like so And I'm gonna select Move left mobile Move left. So you may be thinking that when you click the button mobile move left will be called All right, that's good. But then I have a question. What about when I released a button? New pointing up and let's select the game Object and mobile Stop. Well, on first. Look, all of this looks good to go because you haven't on click and then caused the mobile move left. And with pointer up, you're saying I want you to stop d player, but this will not work. Why? Because When on Click is called, it's only going to call the mobile. Move left when you release the button and let me show you. Now with these two buttons, the woman I press and hold the player starts to move. Okay, there's no delay, but with this fire button, I have a mobile move left here. I'm gonna press and hold it. Now watch there. I'm pressing and holding this button now, but nothing's happening in mobile platforms. You on a press and hold the button. The player should start moving. But that's where on Click is not helping you. I release the button and the player starts to move also. Whoa, this on pointer up was not called. So mobile Stop did not get executed and the player just fell down into the value. Well, that's not good. That's not what we wanted, right? So let's exit the play mode. So you just saw through this quick test? The reason I did not use on click if you try to use on clinical half influential on logic, to check when the player is pressing the button when the players releasing the button and it gets complicated, right, so unity made it very easy for us. They provided us with this pointer up, pointed down events. And there are a couple of more events you can have a look like, Pointer, drag, drop and stuff like this is all good stuff. So for now, we selected two of them pointer up and pointed down, and we used them for it. Left, right movement. Now let me delete the on click from here, like so and from here. Ok, in this video you saw how to make the left and right button moves. So join me in the next video. We'll show you how to quickly configure the fire and the jump button. 4. Scripting Mobile Fire And Jump Buttons: By the end of this video, you would have learned how to make the player fire bullets, like so in both the directions and also make the player jump. Like so. All right, so all of this is pretty easy. Let's dive right in and get it. Implement. So let's get started with the button fire. Now I'm gonna show you two ways. The 1st 1 I'm gonna copy the components and paste it like I did in the previous video. So from But move right, I'm gonna click this care icon and copy the component and come back to bottom fire and four buttons Script, Click the gear icon and paste component as new, so you'll have the familiar pointed down. In this case, we don't want the pointer up so you can click this negative or minus icon and there we simply have the pointer down. Now here's the thing. If you have a game object here and the game object has thes script with public methods, you're going to have access to the scripts here with the public methods. Okay, because we copied the component from the button. Move right. The message is mobile. Move right. We're going to change this method to maybe fire bullets because we want to fire bullets. Okay, so let's head over to the mobile unit controller script and we're going to declare or just copy and paste a method called mobile fire bullets. And in the player controller, we're going to invoke the mobile fire bullets method. And what is this guy's in red? Don't worry. Copy this from here. Go back to player controller script and below Mobile Stop! Let's a public void. Mobile fire bullets. Now when you save the script and go back to mobile unit controller, you Lotus Mobile fire bullets is no longer in red. The only thing you need to do now is go to player controller and in here one line of code That's fire bullets and that's it. You're good to go. That was easy, right? Firing bullets was simple once you understood the process. And in fact, this entire thing is easy. Once you understand these steps, find it and now simply changed this method from mobile move right to mobile fire bullets like so And that's it. You notice the player started the fire bullets using the mobile fire button that was easy, right? And four button jump. I'm gonna show you the manual process so the process is clear to you when you click. Add component. You select event trigger like so this adds a event sugar script. Then you add a new event type, and you can select from one of these. I want you to select on Pointer Down there, you'll see the list is empty. I want you to click the plus icon. You'll see this field. I want you to drag Mobile your controller onto this field. And because of this mobile, yeah, Controller has t script Mobile, your controller, so you'll have access to the script and the public methods. Here are the public methods for firing bullets We used fire bullets for jump. We don't have any method as yet. Okay, so let's get back to the mobile unit controller script. You can copy this from here like so and paste it here and let's change this toe mobile jump and let's copy from here and paste it in here and you'll notice again. This isn't red, and I'm sure by now you understand why this happens when you go back to play controller you can create another public void mobile jump like so and call the jump method in here and that's about it. You'll notice. Mobile jump is no longer in red, and we're only one step away from testing that IHS assigning the mobile jump to the pointer down event. That's about it. Let's click the play button and notice when you click the up or the jump button. The player is jumping. You can tap it two times and the player does a double jump. All right, so years the right button. Here's the left button and the player can fire bullets, like so in both directions and the Peric in do the jumps and double jumps. Right, so there you have it. Now you know how to easily configure mobile buttons to control the players behavior inside the game. So I guess this is the right time to test your game on an actual android device. If you haven't already done so, watch the video on how to deploy toe an android device and go ahead and test these buttons , the design and everything that we've done so far. And once you're comfortable, I can't wait to show you more mobile performer actions, so I look forward to joining you in the next videos