Creating a Simple Mobile Game Tutorial

so you have a mobile and you wish you could make a game there your search is over as in this video I'll be showing you how to create this amazing game I know it may seem quite simple but you'll learn a lot of things by creating it for example how to move the player create a simple AI for the enemy and so much other stuff you don't need any previous knowledge as I'm gonna be explaining everything I do however if you already have some experience in game development nice are you ready to create your first game in your mobile let's start okay so the first thing I would really like to clarify is that I'm gonna mirror my screen device to my PC so that I can record it and also so that I can use my mouse and my keyboard to actually make the game because as you may understand creating a whole game in a mobile um by using the touch input is super uncomfortable and the tutorial would last ages but okay you can see here this is my phone screen okay so the first thing we're gonna do is to go to the Play Store and we're gonna look for a good job and as you can see we have here both versions so I will really encourage you and to use the fourth version of the engine so let's click right here on click install it's very important to remember that this version is an early access version so you may counter some books and errors but overall it works very fine okay so once this is installed let's click here where it says open and as you can see as soon as you open the application it's gonna ask you to give it all file access uh this is mandatory and as in game development we are gonna be creating a lot of scripts images Etc so that's why this step is mandatory so here in the list of apps uh you know you're gonna look for the engine and you're gonna check it then you're gonna click on this Arrow right here and everything will start loading okay now that we are here we are gonna click here cancel because we don't want to open any library or something like that and okay so here is um the the first screen of the engine and we have here some buttons that are the most important one we can create a new project import and existing project and edit the project run a project with a lot of stuff but but just to keep it very simple I'm gonna click here new project and I'm gonna give it a name so in this case my project will be called um tutorial I am mobile for example but you can give it any name that you want okay after you give it a name here you can select a your path but in my case I'm just gonna leave the default path and there I'm gonna create a new folder finally here you can select your renderer I really recommend you to just leave the default option which is mobile and then finally we just we just have to click here create and edit now the project will be loading and we will have to wait a couple of seconds it may take a while but when your project is open we are now gonna to be setting up our project but before doing so I like to explain to you uh some very basic stuff about the interface in this engine so firstly on the top right here we have the 2D environment that is the one that we're gonna be using on this case then we have the 3D environment the script environment and the asset Library okay but let's now just go to the 2D one because it's um the environment that you are gonna be using here we can do some gestures with our finger in order to stretch and as soon as you can see and also with these bars right here as you can see I can also move around on the bottom left um we have the file system here as you can see we have all the files um on our the project because for example here I only have the icon but here when I create for example a scene or something like that will appear here okay then we have um the scene a window where we will have all of our game objects we also have here the inspector the inspector is the window in which we will be able to modify and these game objects well actually in good job the game objects are called notes okay but we're gonna be talking about that later so those are the most important things about the interface that you should know okay so now that you should understand the basic interface of the engine we're gonna create our first scene so we're gonna click here on our scene to the scene because we want to actually create it to the scene not a 3D scene and we're gonna rename this scene to something called like Main then we are gonna click here at the top scene and here save sing us okay and here we're just gonna click save and as I told you right here on our file system as you can see I see the main scene I've just created now it's time to create the walls for our game so let's click on our main node here and click here the add icon now I'm gonna be using my keyboard and my mouse but you could be doing the same things but in your phone okay so here I'm gonna look for static body 2D I'm gonna click here the the check and here I have my static body on my project but as you can see as soon as I have created it I'm receiving this warning so let's click here and it says this node has no shape so it can Collide or interact with other objects consider adding a collision shape to the orglish polygon to be as a child to Define its shape so that's exactly what we are gonna do as this body has no Collision it won't be able to actually behave as a wall so let's rename it to wall actually to top wall okay and then right here we are gonna add another node called Collision shape to the okay this one okay and here again we're receiving another warning a shape must be provided for Collision shape to D2 function please create the shape resource for it so we are gonna select the Collision shape to the and over here in the inspector we can create a shape so remember what I told you at the beginning the inspector is a window with which we can modify and also we want to modify the Collision shape and create an actual shape so let's create here what it says empty and here as you can see we have a lot of collision shapes that we can use we have for example Circle rectangle capsule Etc in this case as I'm gonna create just some walls I leave the best shape that we could use is actually a rectangle so let's click that then I want to zoom in a little bit if you are in your phone to zoom in remember you just do like this with your fingers okay so I'm assuming a little bit more okay so here we also have um this a blue lines right here this is the viewport so this is what we are actually gonna see when we start playing so for our Collision shape as you can see when I select it here on my scene we have all these points here that are gonna be useful in order to resize our Collision so for example and if I draw right here as you can see the size changes so what I want to be doing is just making my Collision a little bit larger like this so that as you can see it covers the top part of my screen so when I add a volt and it will collides with this Collision shape it should bounce and it shouldn't the wall I mean continue this way so this is our top wall we're gonna duplicate it in order to duplicate it it's quite simple we just have to hold the click there in our mobile or if we are using a keyword Ctrl D okay and here and we're gonna look for duplicate right here [Music] so let's rename it to bottom wool [Music] okay and now I'm gonna move this bottom wall and to the bottom part actually so in order to do that I'm gonna be using the move tool is this tool right here and as you can see these two Arrow appear the the red arrow is to move it horizontally but we don't want to move it horizontally we want to move it vertically so with the green line with the green arrow we can do that so let's just click here and drag it right here it doesn't have to be perfect remember to save your changes so that you don't lose your progress okay so now that we have our walls it's time to create the player so and select the main null then click here add and this time we're gonna be adding a rich body to D also here we have a very small description about what this node does so for example here Richard body to the 2D physics body that is moved by a physics simulation so this body is gonna be um affected by physics um but well it's one of the most used type of notes to create any kind of player movement for example here you have the mass the inertia the gravity scale and lots of other stuff that you can modify so again here we're receiving the same error as we had at the last time that this note has no shape that we need to add a collision shape 2D but before doing that we are gonna download any kind of white image and that you can find on the internet so literally any any anything that is white it's gonna be useful so you're just gonna save a white image to your gallery once that will have our image we're gonna go to scene and then we're gonna go to wait right here at the bottom so this is actually gonna close and the engine so that's actually what we are looking for so let's enter again a good job and wait a couple of seconds then right here we're gonna find your project but the important thing that we want here um is to click that folder icon because this should open our file explorer in our project path but for some reason it's not working as you can see so what I really recommend you to do is to just take a screenshot of your path by doing so you can write it down or anything you should have in your phone uh some kind of app called my files okay and right here you're gonna go to the category called images okay and right here and you will have your white image so and we will just have to click here move and we're gonna look for in the path that we have taken a screenshot off so and as you can see in this case it's in storage emulated zero documents tutorial mobile or a faster way of doing this is to just go here to this icon and here look for a your project name in my case it is tutorial mobile so to tutorial as you can see I can see here um tutorial mobile and you can see here I have my main scene and also I have my icon for example so let's move the image here and now let's come back to gujot okay so now as you can see right here in our file system we have the white image so now we're gonna need to add on our rigid body we're gonna add again a collision shape as we have done before position shape 2D okay we're gonna create a new shape as we wanna create the player again the first shape is going to be the rectangle then we're gonna select our Richard body again and not in this case a Sprite okay and Sprite is a type of note that allows uh to render images okay so here as you can see it has an argument called texture and we can load here our white image okay as you can see it's a little bit big so in this case you can just resize it using this small dots right here okay something like that I believe would be okay and then using the move tool we can reposition it okay right here now we will have to create the Collision shape so um I'm gonna move it firstly right here and we could actually modify the order here I mean we can drag and drop this Sprite right here so that we can see now we have the Collision shape and more visible and now we can start modifying its size so it's the most similar as possible to the player as you can see right here should be okay now our reset body we could rename it to layer okay that's perfect okay and now we're gonna need to create a script into this player in order to make the player movement so let's select uh the player create a script with this button and the hero will you have some options that you can modify firstly you can modify the language of the script the default language of gujot is GD script okay and I really recommend you using this because it's very simple so you shouldn't modify it then inherit in this case you can see it's from rigid body to D and that's correct because as you can see our player game object is actually a rigid body so again you shouldn't touch that then glass name you don't touch that and the template I really recommend you to select empty so that your script is completely empty of course you can use the default simply that as you can see here it will create a base symbol for node with default good job cycle method so this will create the script with some things written then built-in script we are not gonna check that and the path that you can of course modify it so now let's click create a new as you can see and now we are on our script window okay remember we have the 2D 3D and the script window okay so here we have here some functions that I'm just gonna delete here okay so now to actually move the player uh as we're in a mobile we shouldn't be able to move with the keyboard as in some desktop games so instead of doing that and something that we could actually do is to select here our main node and add a new node called control node this is a use for user interface and then inside this control node well we are going to add a button okay so we're gonna create two buttons with one button and you're gonna go up and with the other you're gonna go down okay okay so as you can see if we zoom in a little bit we can find our button but it's super small so with this and other tool the scale tool as you can see we can make it a little bit bigger so I'm just gonna make it a little bit bigger okay maybe something like that will be okay a little bit bigger like this of course you can resize it as you want but maybe something like this um let's see this is a little bit bigger right okay something like this should be okay and now with the move tool I'm just gonna move it down a little bit and a little bit to the right okay something like that so this is gonna be our up button button okay and then again I'm gonna duplicate it with Ctrl D or remember you hold the click well for a little bit and in this case it's gonna be our down button okay and add this down button I'm gonna select it and move it a little bit to the right now I'm gonna click here play and we need a main scene a main scene is the scene that's gonna be launched as soon as we start playing so in this case as we are just gonna have one scene creative we want this to be the main one so let's just select the current scene and you will have to wait a couple of seconds I will as you can see this is how the game would be looking once we play it and in order to go back you should just click the go back arrow in your device in my case I don't have that option I do this okay and I go back and as you can see here I have electric a black screen and now I I'm again in the editor and we could for example and move the buttons resize them and everything you want but this is just an example and then of course you can do it better than me so okay once you have all your buttons created we're gonna select the app button go here to the node and here we have a a signal a pressed signal okay and when we connect this to our player script what is gonna happen is that when our button is pressed the code that we write here is gonna be run so in this case for example right here we write print print is a function that is gonna show a message okay and pressing actually going up okay so now we're gonna do the exact same thing but with the down button okay so here select down button rest we connect it to the correct script and then here we print print okay going down you must use all these symbols okay now and let's click play the things that actually would use mobile I think that you can't see these messages by using a print but well then we're gonna check them so let's click firstly a two times up and one time down then we're gonna go back okay and as you can see here I have two messages of going up and two and one message of going down so that's correct now that we have checked that it's very important that in our player we disabled the gravity because now if you remember our player is like in the center of our screen or result vertically I mean so if you really pay attention what's what's happening when I play is that the player falls down until it reaches the Collision shape we created before so let's play it and you're gonna see how the player falls down it's super quick so let's just wait and as you can see it's falling down and of course we know how to do here so you just said gravity scale to zero like this now in our script we're gonna create a variable a variable basically stores any kind of value okay so uh to the to create a variable we are gonna write a bar this is the keyword to create a variable then we give it a name in this case in this case movement and we assign it a value of vector2 dot zero okay vectors just start two values Annex value and a y value okay and by saying Vector 2.0 is creating a vector 2 with values 0 and 0 0 both in X and in y so now when we press the on button we want to modify this um this variable to be in this case as we are pressing the button up Vector 2 dot up okay y up because vector2 dot up is the same as saying this stero index and one in y something quite weird about gujot is that positives num positive numbers of the wide value are actually um on the bottom I mean for example if we want to move it down the the most logical would be that the Y value should be negative but as you can see it's positive whereas if we want to move it up the value is negative so it's actually the opposite of Common Sense let's say so if we press at the up button we want to actually set it to vector2 dot down because we want to modify the position with a negative number so that it goes up and the same thing will happen when we press the down button but will be the opposite so it's gonna be vector2 dot up okay vector2 dot up I know it's quite confusing but you're gonna see that when I write some code this will take so much sense then we're also gonna need a speed variable so you are also gonna create it right here and you're gonna assign any value you want in my case for example let's set it to something like 400 then we're gonna create a function that is called physics process Delta and this function is used to modify V6 bodies or to create behavors related to physics so in this case we're gonna modify our linear velocity two our movement variable times our speed also here in our rigid body settings we're gonna check this box here lock rotation I will now as you can see when we press the buttons our player is moving however um the buttons aren't correct as you can see I haven't set a correctly Vector because this is the up button as you can see it doesn't go up it goes down whereas this goes down so and they aren't correct but it's quite simple to correct it we just have to modify here in our code this is gonna be Vector 2 up and this is just gonna be Vector 2 down okay mixer two down now when we click play we're gonna check that in fact if we click here it goes down and here goes down so this player movement is working now we need to create our balls so let's select our main node click add and in this case we're gonna be using a character body to the so we're gonna drag and drop it right here and as you can see here we have the same warning that we have had a lot of times so um let's attach it a collision shape Collision shape like this okay and also we're gonna use a Sprites okay Sprite in order to render images so we are going to create a new shape in this case the ball is going to be a rectangle because I'm gonna be using again the white rectangle okay like this and in our Sprite I'm gonna load um the the white square so we can also use this quick load so that you can quickly load it and then again we are we're gonna have to modify its size okay so let's modify it right here right here or if it is too difficult you can actually use here the scale on your transform so as you can see it's a bit more easier I'd say okay so there we have our ball and let's move it right here and then we're gonna select our Collision shape and we're gonna firstly move it okay where our ball is okay right here okay let's reorder our notes so that we can clearly see our Collision shape nice and perfect okay and let's resize the Collision shape properly and now we rename the object to ball so actually here I would like you to show how you can quickly change the type of the of the node if for some reason you want to change it so our wool actually should be a rigid body as we want it to be affected by physics so we're just gonna hold the click right there and here we click on change type okay and here we now type the correct type of node in this case reached body to them change okay so we didn't have to delete everything and start from scratch okay so now here in our bowl and we're gonna modify uh some things for example here the contact monitor uh we are gonna enable it and the max contacts and we're gonna set it to two then the gravity scale will be zero so with these options basically we disable the gravity and then with this contact to monitor enable and the max contacts what we are trying to do is to detect the collisions between the wall the walls and the players okay so now in our world war one attach a new script in this case I want to select the object empty so that as you can see my script is completely empty okay so now here I will need two barrels and the first one is gonna be a direction and the second one is my speed okay so I'm gonna set it to something like 300. our Direction and will be used to for example when the ball is going this way and it collides with a player we're gonna multiply this by minus one so that it starts going the other way so firstly I on our ready function okay the array function is called as soon as we start playing our game we're gonna set our linear velocity linear uh velocity dot X 2 speed times Direction so when we start playing and you're gonna see that the pull actually starts going right okay so let's check it as you can see the ball goes right and now in the physics process uh physics process and what I want to actually repeat the same line that we have written here so I'm just gonna copy and paste it here okay and like this okay once I have my bolt and I'm gonna select here my player and I'm gonna move it down a little bit something like that will be okay and then I'm gonna duplicate my player and then rename this uh to enemy okay and then this enemy I'm gonna move it to the right okay now when we play You're Gonna realize that when the ball collides with the Enemy actually nothing happens the ball doesn't bounce or literally anything it just stops but it continues uh like the track so firstly we're gonna select um our enemy okay and we're gonna go to the um to the node a window groups and um what wanna hear create a new a new group that is gonna be enemy or player okay Al and it's right here and in the player we're gonna do the same thing check that the spelling is exactly the same one so enemy or player right here any enemy or layer okay so we want to actually do this because now on our ball and in the node signals and we can hear is say that if our rigid body enters a new body it means that if it is colliding with for example a player or an enemy or something like that we are gonna connect this one okay so if the body with which we are colliding okay so this is gonna be if body okay Dodge is in a group let's see if we can auto complete it is in group and the name of the group was enemy or player enemy or player [Music] what we're gonna do right here is to multiply our Direction die Direction okay oh but right here I connected it to the player okay so this is not such a big problem so I'm just gonna just delete these lines um here in my signals I'm gonna disconnect it and actually connect it to my uh ball air object okay so as I was telling you if the body with which I'm colliding um if body dot is in group enemy or player okay what we're gonna do is to multiply our Direction by minus one okay so now in our game as you can see um the direction of the voltages but as you can see the player and the enemy are a little bit like pushed back when they go live so we could just set the rigid body mass of both the enemy and the player to a hundred for example okay like this and like this so now when we play again you're gonna see that in fact when the ball equalizer you can see the player doesn't change its position now in our Bowl we're gonna select it and we're gonna make it bounce so in order to do this in our thesis material fill when I create a new physics material click it and then here in our bounce we're gonna set it to one okay so now when we click play we're gonna wait and well as you can see here it seems that nothing is happening but actually you're gonna see that when I collide with the ball okay I need to collectible as you can see it starts bouncing but will the rotation is well a little bit weird so we just here lock the rotation and now when we play the ball shouldn't be rotated or something like that it should just be moved so let's hear collide with it and as you can see it starts bouncing okay and the same thing happens when it collides with the player now well the following thing that we should do is that you can realize that when we play the game in our enemy as you can see uh we can't see it in the right of our screen and that's because a gujot is automatically resizing our screen okay so let's try to fix that so we're gonna go to project project settings and then here under our display uh settings we're gonna find this window all right here well you can modify for example the viewport width and height if you want but here the important thing is that you check that the aspect is set to keep and the mode is set to viewport okay so now when we close it and play you're gonna see that and the engine will create some black bars over here and over here in order to in fact keep the aspect of the game now in order to create the enemy script I don't know why I already have a script in the enemy but it's actually the player script so let's just delete this connection which is between the player script and the enemy and in fact we are going to create a new script so let's uh just create here a new script with an object empty template and create and click here create okay make sure that this is script is actually attached to the enemy node okay now here we can program the logic then we'll hear in our enemy gold is just very very simple in our physics process and we're gonna get our ball position dot y by using this code getpardon.gets notable and then inside our ball game object we just get the position dot y then once we have that position y we assign it to our current position Y which is our enemy position y so once we play the game what we are gonna realize is it following okay at the beginning the enemy will be right there but as soon as we touch the ball as you can see it also starts moving because it's currently following the Y position okay so uh there we will have our enemy but something a little bit weird that happens is that for example they will now collide with it as you can see okay some things real really weird happen so firstly check that the bounce of the wall is set to one and then here in the max contacts set it to three okay so now when we start playing again you don't want to notice that actually everything should be working just fine and actually I like most basic stuff should be made should be made I believe because as you can see the enemy moves also the player moves and well the only thing that should be uh left is to actually create um the score points okay I would also recommend you to um firstly here is set the bounce to 0.5 because I leave one and it's a bit too high another thing we should do is increase the mass of both the enemy and the player two for example a thousand okay here a thousand here also if this kind of yellow line appears when you touch your screen just click here on the alt button and that should disappear so on the player again we're gonna set it to a hundred okay perfect okay now to create um a way of actually finishing the game what you're gonna do um is to in our bowl and we are gonna add here another node that is called a visibility Notifier visible on screens visible on screen Notifier to the and here it says it detects when the node X extends are visible on screen so we can see that it is much like another Collision so let's select here the move tool and then we are gonna move it and right here on our ball you can also resize it if you want but it's not really necessary I think you will have two signals we can connect screen enter and Screen exited so I'm gonna connect this screen executive to my bold script okay and right here once my ball exits the screen I'm just gonna hear print and ball execute for example so now uh when I played the game I'm I'm just gonna leave and evolve left the screen okay like this as you can see here in my console I have the message so what I want to do is once my ball exits the screen I want to restart the scene so in order to do this you're gonna write get three Dot reload re load current scene this is basically gonna reload or restart our currency and that's exactly what we need okay so now here I am and as you can see when I uh when the ball exits the game really starts okay and this is gonna happen um also if we score a goal okay also if you're having some problems when it comes to Collision detection and you choose uh just increase the variable called um max contacts I believe was called let me check this one a Max contacts both and I mean in the ball and also you could change it in the enemy and any player if you want but um fortunately if you only change in the wall to four or five it should be working perfectly fine so this is the final result of the game I know there are a lot of things that we could improve for example the player movement doesn't work perfectly fine the Collision isn't always perfect and we could um here creates a score system there are a lot of things that we could always improve but this is just like a quick test about how you like this video if you like it a lot if you leave a lot of likes subscriptions comments Etc of course I will create a second part or just create this game from scratch but with a lot of improvements so again if you would really like to see more tutorials about with jlt mobile leave your like comment and subscription now we'll see you in the next one and bye bye [Music]

so you have a mobile and you wish you could make a game there your search is over as in this video I&#39;ll be showing you how to create this amazing game I know it may seem quite simple but you&#39;ll learn a lot of things by creating it for example how to move the player create a simple AI for the enemy and so much other stuff you don&#39;t need any previous knowledge as I&#39;m gonna be explaining everything I do however if you already have some experience in game development nice are you ready to create your first game in your mobile let&#39;s start okay so the first thing I would really like to clarify is that I&#39;m gonna mirror my screen device to my PC so that I can record it and also so that I can use my mouse and my keyboard to actually make the game because as you may understand creating a whole game in a mobile um by using the touch input is super uncomfortable and the tutorial would last ages but okay you can see here this is my phone screen okay so the first thing we&#39;re gonna do is to go to the Play Store and we&#39;re gonna look for a good job and as you can see we have here both versions so I will really encourage you and to use the fourth version of the engine so let&#39;s click right here on click install it&#39;s very important to remember that this version is an early access version so you may counter some books and errors but overall it works very fine okay so once this is installed let&#39;s click here where it says open and as you can see as soon as you open the application it&#39;s gonna ask you to give it all file access uh this is mandatory and as in game development we are gonna be creating a lot of scripts images Etc so that&#39;s why this step is mandatory so here in the list of apps uh you know you&#39;re gonna look for the engine and you&#39;re gonna check it then you&#39;re gonna click on this Arrow right here and everything will start loading okay now that we are here we are gonna click here cancel because we don&#39;t want to open any library or something like that and okay so here is um the the first screen of the engine and we have here some buttons that are the most important one we can create a new project import and existing project and edit the project run a project with a lot of stuff but but just to keep it very simple I&#39;m gonna click here new project and I&#39;m gonna give it a name so in this case my project will be called um tutorial I am mobile for example but you can give it any name that you want okay after you give it a name here you can select a your path but in my case I&#39;m just gonna leave the default path and there I&#39;m gonna create a new folder finally here you can select your renderer I really recommend you to just leave the default option which is mobile and then finally we just we just have to click here create and edit now the project will be loading and we will have to wait a couple of seconds it may take a while but when your project is open we are now gonna to be setting up our project but before doing so I like to explain to you uh some very basic stuff about the interface in this engine so firstly on the top right here we have the 2D environment that is the one that we&#39;re gonna be using on this case then we have the 3D environment the script environment and the asset Library okay but let&#39;s now just go to the 2D one because it&#39;s um the environment that you are gonna be using here we can do some gestures with our finger in order to stretch and as soon as you can see and also with these bars right here as you can see I can also move around on the bottom left um we have the file system here as you can see we have all the files um on our the project because for example here I only have the icon but here when I create for example a scene or something like that will appear here okay then we have um the scene a window where we will have all of our game objects we also have here the inspector the inspector is the window in which we will be able to modify and these game objects well actually in good job the game objects are called notes okay but we&#39;re gonna be talking about that later so those are the most important things about the interface that you should know okay so now that you should understand the basic interface of the engine we&#39;re gonna create our first scene so we&#39;re gonna click here on our scene to the scene because we want to actually create it to the scene not a 3D scene and we&#39;re gonna rename this scene to something called like Main then we are gonna click here at the top scene and here save sing us okay and here we&#39;re just gonna click save and as I told you right here on our file system as you can see I see the main scene I&#39;ve just created now it&#39;s time to create the walls for our game so let&#39;s click on our main node here and click here the add icon now I&#39;m gonna be using my keyboard and my mouse but you could be doing the same things but in your phone okay so here I&#39;m gonna look for static body 2D I&#39;m gonna click here the the check and here I have my static body on my project but as you can see as soon as I have created it I&#39;m receiving this warning so let&#39;s click here and it says this node has no shape so it can Collide or interact with other objects consider adding a collision shape to the orglish polygon to be as a child to Define its shape so that&#39;s exactly what we are gonna do as this body has no Collision it won&#39;t be able to actually behave as a wall so let&#39;s rename it to wall actually to top wall okay and then right here we are gonna add another node called Collision shape to the okay this one okay and here again we&#39;re receiving another warning a shape must be provided for Collision shape to D2 function please create the shape resource for it so we are gonna select the Collision shape to the and over here in the inspector we can create a shape so remember what I told you at the beginning the inspector is a window with which we can modify and also we want to modify the Collision shape and create an actual shape so let&#39;s create here what it says empty and here as you can see we have a lot of collision shapes that we can use we have for example Circle rectangle capsule Etc in this case as I&#39;m gonna create just some walls I leave the best shape that we could use is actually a rectangle so let&#39;s click that then I want to zoom in a little bit if you are in your phone to zoom in remember you just do like this with your fingers okay so I&#39;m assuming a little bit more okay so here we also have um this a blue lines right here this is the viewport so this is what we are actually gonna see when we start playing so for our Collision shape as you can see when I select it here on my scene we have all these points here that are gonna be useful in order to resize our Collision so for example and if I draw right here as you can see the size changes so what I want to be doing is just making my Collision a little bit larger like this so that as you can see it covers the top part of my screen so when I add a volt and it will collides with this Collision shape it should bounce and it shouldn&#39;t the wall I mean continue this way so this is our top wall we&#39;re gonna duplicate it in order to duplicate it it&#39;s quite simple we just have to hold the click there in our mobile or if we are using a keyword Ctrl D okay and here and we&#39;re gonna look for duplicate right here [Music] so let&#39;s rename it to bottom wool [Music] okay and now I&#39;m gonna move this bottom wall and to the bottom part actually so in order to do that I&#39;m gonna be using the move tool is this tool right here and as you can see these two Arrow appear the the red arrow is to move it horizontally but we don&#39;t want to move it horizontally we want to move it vertically so with the green line with the green arrow we can do that so let&#39;s just click here and drag it right here it doesn&#39;t have to be perfect remember to save your changes so that you don&#39;t lose your progress okay so now that we have our walls it&#39;s time to create the player so and select the main null then click here add and this time we&#39;re gonna be adding a rich body to D also here we have a very small description about what this node does so for example here Richard body to the 2D physics body that is moved by a physics simulation so this body is gonna be um affected by physics um but well it&#39;s one of the most used type of notes to create any kind of player movement for example here you have the mass the inertia the gravity scale and lots of other stuff that you can modify so again here we&#39;re receiving the same error as we had at the last time that this note has no shape that we need to add a collision shape 2D but before doing that we are gonna download any kind of white image and that you can find on the internet so literally any any anything that is white it&#39;s gonna be useful so you&#39;re just gonna save a white image to your gallery once that will have our image we&#39;re gonna go to scene and then we&#39;re gonna go to wait right here at the bottom so this is actually gonna close and the engine so that&#39;s actually what we are looking for so let&#39;s enter again a good job and wait a couple of seconds then right here we&#39;re gonna find your project but the important thing that we want here um is to click that folder icon because this should open our file explorer in our project path but for some reason it&#39;s not working as you can see so what I really recommend you to do is to just take a screenshot of your path by doing so you can write it down or anything you should have in your phone uh some kind of app called my files okay and right here you&#39;re gonna go to the category called images okay and right here and you will have your white image so and we will just have to click here move and we&#39;re gonna look for in the path that we have taken a screenshot off so and as you can see in this case it&#39;s in storage emulated zero documents tutorial mobile or a faster way of doing this is to just go here to this icon and here look for a your project name in my case it is tutorial mobile so to tutorial as you can see I can see here um tutorial mobile and you can see here I have my main scene and also I have my icon for example so let&#39;s move the image here and now let&#39;s come back to gujot okay so now as you can see right here in our file system we have the white image so now we&#39;re gonna need to add on our rigid body we&#39;re gonna add again a collision shape as we have done before position shape 2D okay we&#39;re gonna create a new shape as we wanna create the player again the first shape is going to be the rectangle then we&#39;re gonna select our Richard body again and not in this case a Sprite okay and Sprite is a type of note that allows uh to render images okay so here as you can see it has an argument called texture and we can load here our white image okay as you can see it&#39;s a little bit big so in this case you can just resize it using this small dots right here okay something like that I believe would be okay and then using the move tool we can reposition it okay right here now we will have to create the Collision shape so um I&#39;m gonna move it firstly right here and we could actually modify the order here I mean we can drag and drop this Sprite right here so that we can see now we have the Collision shape and more visible and now we can start modifying its size so it&#39;s the most similar as possible to the player as you can see right here should be okay now our reset body we could rename it to layer okay that&#39;s perfect okay and now we&#39;re gonna need to create a script into this player in order to make the player movement so let&#39;s select uh the player create a script with this button and the hero will you have some options that you can modify firstly you can modify the language of the script the default language of gujot is GD script okay and I really recommend you using this because it&#39;s very simple so you shouldn&#39;t modify it then inherit in this case you can see it&#39;s from rigid body to D and that&#39;s correct because as you can see our player game object is actually a rigid body so again you shouldn&#39;t touch that then glass name you don&#39;t touch that and the template I really recommend you to select empty so that your script is completely empty of course you can use the default simply that as you can see here it will create a base symbol for node with default good job cycle method so this will create the script with some things written then built-in script we are not gonna check that and the path that you can of course modify it so now let&#39;s click create a new as you can see and now we are on our script window okay remember we have the 2D 3D and the script window okay so here we have here some functions that I&#39;m just gonna delete here okay so now to actually move the player uh as we&#39;re in a mobile we shouldn&#39;t be able to move with the keyboard as in some desktop games so instead of doing that and something that we could actually do is to select here our main node and add a new node called control node this is a use for user interface and then inside this control node well we are going to add a button okay so we&#39;re gonna create two buttons with one button and you&#39;re gonna go up and with the other you&#39;re gonna go down okay okay so as you can see if we zoom in a little bit we can find our button but it&#39;s super small so with this and other tool the scale tool as you can see we can make it a little bit bigger so I&#39;m just gonna make it a little bit bigger okay maybe something like that will be okay a little bit bigger like this of course you can resize it as you want but maybe something like this um let&#39;s see this is a little bit bigger right okay something like this should be okay and now with the move tool I&#39;m just gonna move it down a little bit and a little bit to the right okay something like that so this is gonna be our up button button okay and then again I&#39;m gonna duplicate it with Ctrl D or remember you hold the click well for a little bit and in this case it&#39;s gonna be our down button okay and add this down button I&#39;m gonna select it and move it a little bit to the right now I&#39;m gonna click here play and we need a main scene a main scene is the scene that&#39;s gonna be launched as soon as we start playing so in this case as we are just gonna have one scene creative we want this to be the main one so let&#39;s just select the current scene and you will have to wait a couple of seconds I will as you can see this is how the game would be looking once we play it and in order to go back you should just click the go back arrow in your device in my case I don&#39;t have that option I do this okay and I go back and as you can see here I have electric a black screen and now I I&#39;m again in the editor and we could for example and move the buttons resize them and everything you want but this is just an example and then of course you can do it better than me so okay once you have all your buttons created we&#39;re gonna select the app button go here to the node and here we have a a signal a pressed signal okay and when we connect this to our player script what is gonna happen is that when our button is pressed the code that we write here is gonna be run so in this case for example right here we write print print is a function that is gonna show a message okay and pressing actually going up okay so now we&#39;re gonna do the exact same thing but with the down button okay so here select down button rest we connect it to the correct script and then here we print print okay going down you must use all these symbols okay now and let&#39;s click play the things that actually would use mobile I think that you can&#39;t see these messages by using a print but well then we&#39;re gonna check them so let&#39;s click firstly a two times up and one time down then we&#39;re gonna go back okay and as you can see here I have two messages of going up and two and one message of going down so that&#39;s correct now that we have checked that it&#39;s very important that in our player we disabled the gravity because now if you remember our player is like in the center of our screen or result vertically I mean so if you really pay attention what&#39;s what&#39;s happening when I play is that the player falls down until it reaches the Collision shape we created before so let&#39;s play it and you&#39;re gonna see how the player falls down it&#39;s super quick so let&#39;s just wait and as you can see it&#39;s falling down and of course we know how to do here so you just said gravity scale to zero like this now in our script we&#39;re gonna create a variable a variable basically stores any kind of value okay so uh to the to create a variable we are gonna write a bar this is the keyword to create a variable then we give it a name in this case in this case movement and we assign it a value of vector2 dot zero okay vectors just start two values Annex value and a y value okay and by saying Vector 2.0 is creating a vector 2 with values 0 and 0 0 both in X and in y so now when we press the on button we want to modify this um this variable to be in this case as we are pressing the button up Vector 2 dot up okay y up because vector2 dot up is the same as saying this stero index and one in y something quite weird about gujot is that positives num positive numbers of the wide value are actually um on the bottom I mean for example if we want to move it down the the most logical would be that the Y value should be negative but as you can see it&#39;s positive whereas if we want to move it up the value is negative so it&#39;s actually the opposite of Common Sense let&#39;s say so if we press at the up button we want to actually set it to vector2 dot down because we want to modify the position with a negative number so that it goes up and the same thing will happen when we press the down button but will be the opposite so it&#39;s gonna be vector2 dot up okay vector2 dot up I know it&#39;s quite confusing but you&#39;re gonna see that when I write some code this will take so much sense then we&#39;re also gonna need a speed variable so you are also gonna create it right here and you&#39;re gonna assign any value you want in my case for example let&#39;s set it to something like 400 then we&#39;re gonna create a function that is called physics process Delta and this function is used to modify V6 bodies or to create behavors related to physics so in this case we&#39;re gonna modify our linear velocity two our movement variable times our speed also here in our rigid body settings we&#39;re gonna check this box here lock rotation I will now as you can see when we press the buttons our player is moving however um the buttons aren&#39;t correct as you can see I haven&#39;t set a correctly Vector because this is the up button as you can see it doesn&#39;t go up it goes down whereas this goes down so and they aren&#39;t correct but it&#39;s quite simple to correct it we just have to modify here in our code this is gonna be Vector 2 up and this is just gonna be Vector 2 down okay mixer two down now when we click play we&#39;re gonna check that in fact if we click here it goes down and here goes down so this player movement is working now we need to create our balls so let&#39;s select our main node click add and in this case we&#39;re gonna be using a character body to the so we&#39;re gonna drag and drop it right here and as you can see here we have the same warning that we have had a lot of times so um let&#39;s attach it a collision shape Collision shape like this okay and also we&#39;re gonna use a Sprites okay Sprite in order to render images so we are going to create a new shape in this case the ball is going to be a rectangle because I&#39;m gonna be using again the white rectangle okay like this and in our Sprite I&#39;m gonna load um the the white square so we can also use this quick load so that you can quickly load it and then again we are we&#39;re gonna have to modify its size okay so let&#39;s modify it right here right here or if it is too difficult you can actually use here the scale on your transform so as you can see it&#39;s a bit more easier I&#39;d say okay so there we have our ball and let&#39;s move it right here and then we&#39;re gonna select our Collision shape and we&#39;re gonna firstly move it okay where our ball is okay right here okay let&#39;s reorder our notes so that we can clearly see our Collision shape nice and perfect okay and let&#39;s resize the Collision shape properly and now we rename the object to ball so actually here I would like you to show how you can quickly change the type of the of the node if for some reason you want to change it so our wool actually should be a rigid body as we want it to be affected by physics so we&#39;re just gonna hold the click right there and here we click on change type okay and here we now type the correct type of node in this case reached body to them change okay so we didn&#39;t have to delete everything and start from scratch okay so now here in our bowl and we&#39;re gonna modify uh some things for example here the contact monitor uh we are gonna enable it and the max contacts and we&#39;re gonna set it to two then the gravity scale will be zero so with these options basically we disable the gravity and then with this contact to monitor enable and the max contacts what we are trying to do is to detect the collisions between the wall the walls and the players okay so now in our world war one attach a new script in this case I want to select the object empty so that as you can see my script is completely empty okay so now here I will need two barrels and the first one is gonna be a direction and the second one is my speed okay so I&#39;m gonna set it to something like 300. our Direction and will be used to for example when the ball is going this way and it collides with a player we&#39;re gonna multiply this by minus one so that it starts going the other way so firstly I on our ready function okay the array function is called as soon as we start playing our game we&#39;re gonna set our linear velocity linear uh velocity dot X 2 speed times Direction so when we start playing and you&#39;re gonna see that the pull actually starts going right okay so let&#39;s check it as you can see the ball goes right and now in the physics process uh physics process and what I want to actually repeat the same line that we have written here so I&#39;m just gonna copy and paste it here okay and like this okay once I have my bolt and I&#39;m gonna select here my player and I&#39;m gonna move it down a little bit something like that will be okay and then I&#39;m gonna duplicate my player and then rename this uh to enemy okay and then this enemy I&#39;m gonna move it to the right okay now when we play You&#39;re Gonna realize that when the ball collides with the Enemy actually nothing happens the ball doesn&#39;t bounce or literally anything it just stops but it continues uh like the track so firstly we&#39;re gonna select um our enemy okay and we&#39;re gonna go to the um to the node a window groups and um what wanna hear create a new a new group that is gonna be enemy or player okay Al and it&#39;s right here and in the player we&#39;re gonna do the same thing check that the spelling is exactly the same one so enemy or player right here any enemy or layer okay so we want to actually do this because now on our ball and in the node signals and we can hear is say that if our rigid body enters a new body it means that if it is colliding with for example a player or an enemy or something like that we are gonna connect this one okay so if the body with which we are colliding okay so this is gonna be if body okay Dodge is in a group let&#39;s see if we can auto complete it is in group and the name of the group was enemy or player enemy or player [Music] what we&#39;re gonna do right here is to multiply our Direction die Direction okay oh but right here I connected it to the player okay so this is not such a big problem so I&#39;m just gonna just delete these lines um here in my signals I&#39;m gonna disconnect it and actually connect it to my uh ball air object okay so as I was telling you if the body with which I&#39;m colliding um if body dot is in group enemy or player okay what we&#39;re gonna do is to multiply our Direction by minus one okay so now in our game as you can see um the direction of the voltages but as you can see the player and the enemy are a little bit like pushed back when they go live so we could just set the rigid body mass of both the enemy and the player to a hundred for example okay like this and like this so now when we play again you&#39;re gonna see that in fact when the ball equalizer you can see the player doesn&#39;t change its position now in our Bowl we&#39;re gonna select it and we&#39;re gonna make it bounce so in order to do this in our thesis material fill when I create a new physics material click it and then here in our bounce we&#39;re gonna set it to one okay so now when we click play we&#39;re gonna wait and well as you can see here it seems that nothing is happening but actually you&#39;re gonna see that when I collide with the ball okay I need to collectible as you can see it starts bouncing but will the rotation is well a little bit weird so we just here lock the rotation and now when we play the ball shouldn&#39;t be rotated or something like that it should just be moved so let&#39;s hear collide with it and as you can see it starts bouncing okay and the same thing happens when it collides with the player now well the following thing that we should do is that you can realize that when we play the game in our enemy as you can see uh we can&#39;t see it in the right of our screen and that&#39;s because a gujot is automatically resizing our screen okay so let&#39;s try to fix that so we&#39;re gonna go to project project settings and then here under our display uh settings we&#39;re gonna find this window all right here well you can modify for example the viewport width and height if you want but here the important thing is that you check that the aspect is set to keep and the mode is set to viewport okay so now when we close it and play you&#39;re gonna see that and the engine will create some black bars over here and over here in order to in fact keep the aspect of the game now in order to create the enemy script I don&#39;t know why I already have a script in the enemy but it&#39;s actually the player script so let&#39;s just delete this connection which is between the player script and the enemy and in fact we are going to create a new script so let&#39;s uh just create here a new script with an object empty template and create and click here create okay make sure that this is script is actually attached to the enemy node okay now here we can program the logic then we&#39;ll hear in our enemy gold is just very very simple in our physics process and we&#39;re gonna get our ball position dot y by using this code getpardon.gets notable and then inside our ball game object we just get the position dot y then once we have that position y we assign it to our current position Y which is our enemy position y so once we play the game what we are gonna realize is it following okay at the beginning the enemy will be right there but as soon as we touch the ball as you can see it also starts moving because it&#39;s currently following the Y position okay so uh there we will have our enemy but something a little bit weird that happens is that for example they will now collide with it as you can see okay some things real really weird happen so firstly check that the bounce of the wall is set to one and then here in the max contacts set it to three okay so now when we start playing again you don&#39;t want to notice that actually everything should be working just fine and actually I like most basic stuff should be made should be made I believe because as you can see the enemy moves also the player moves and well the only thing that should be uh left is to actually create um the score points okay I would also recommend you to um firstly here is set the bounce to 0.5 because I leave one and it&#39;s a bit too high another thing we should do is increase the mass of both the enemy and the player two for example a thousand okay here a thousand here also if this kind of yellow line appears when you touch your screen just click here on the alt button and that should disappear so on the player again we&#39;re gonna set it to a hundred okay perfect okay now to create um a way of actually finishing the game what you&#39;re gonna do um is to in our bowl and we are gonna add here another node that is called a visibility Notifier visible on screens visible on screen Notifier to the and here it says it detects when the node X extends are visible on screen so we can see that it is much like another Collision so let&#39;s select here the move tool and then we are gonna move it and right here on our ball you can also resize it if you want but it&#39;s not really necessary I think you will have two signals we can connect screen enter and Screen exited so I&#39;m gonna connect this screen executive to my bold script okay and right here once my ball exits the screen I&#39;m just gonna hear print and ball execute for example so now uh when I played the game I&#39;m I&#39;m just gonna leave and evolve left the screen okay like this as you can see here in my console I have the message so what I want to do is once my ball exits the screen I want to restart the scene so in order to do this you&#39;re gonna write get three Dot reload re load current scene this is basically gonna reload or restart our currency and that&#39;s exactly what we need okay so now here I am and as you can see when I uh when the ball exits the game really starts okay and this is gonna happen um also if we score a goal okay also if you&#39;re having some problems when it comes to Collision detection and you choose uh just increase the variable called um max contacts I believe was called let me check this one a Max contacts both and I mean in the ball and also you could change it in the enemy and any player if you want but um fortunately if you only change in the wall to four or five it should be working perfectly fine so this is the final result of the game I know there are a lot of things that we could improve for example the player movement doesn&#39;t work perfectly fine the Collision isn&#39;t always perfect and we could um here creates a score system there are a lot of things that we could always improve but this is just like a quick test about how you like this video if you like it a lot if you leave a lot of likes subscriptions comments Etc of course I will create a second part or just create this game from scratch but with a lot of improvements so again if you would really like to see more tutorials about with jlt mobile leave your like comment and subscription now we&#39;ll see you in the next one and bye bye [Music]

Transcript for:Creating a Simple Mobile Game Tutorial

Transcript for:
Creating a Simple Mobile Game Tutorial