Godot 3 Tutorial - Mobile RPG - Basic Attacking

good morning afternoon or evening wherever and whenever you are my name is Benjamin and welcome to part 1 for my mobile turn-based RPG Godot tutorial series in this series I will be showing you how to make a simple mobile turn-based RPG we'll cover the basics of UI theming how to theme your UI so that all looks good turn-based battle systems you can attack tell your action points run out and the enemy will attack you back and that's what that's what we'll be covering if you're interested in learning more about Godot and learning more from me check out my Kickstarter there will be a link in the description and probably a card as well if you're on mobile you can look at those and learn more about my Kickstarter let's get started so first you're going to need Godot 3.1 so download it if you don't have it also you'll need these resources mobile RPG resources so you can download these as well there will be a link in the description for those let's open up Godot let's create a new project because we're targeting mobile devices we'll want this to be OpenGL ES 2.0 right here and we'll select a folder that we want to create this in I'd recommend creating a Godot folder godo 3 or something we'll name this mobile RPG tutorial and we'll do create folder create and edit okay here's Godot right here let's switch to a 2d scene because we're not making a 3d game we'll need to create a root node you can see over here so we'll do a custom node and we'll call this well if you double-click on it slowly or fast actually we'll call this battle and then we need to import in the resources here so we can I think we can drag and drop them in where'd my folder go ah there we go let's see drag and drop mmm I don't think that worked was worth a try so let's just open up documents come into Godot and mobile RPG tutorial oops actually before we import these in we'll want to set our import settings on textures if we do this real quick it will make it a lot easier because you can see currently if we drag over a texture it's going to add some blur around the edge of that and that's not what we want so if we click on if we click on this icon right here and we click on import we come to presets and we do 2d pixel and then do re-import we can see we've got it's nice and it's not blurred anymore it's the pixels so we'll click on preset make sure we're select 2d pixel and then do set as default for texture now I think if we import let's minimize this if we import all of our resources in since we're making a pixel art game we'll just drag over these two right here this folder in this font it should import those properly if I did my job right images yep you can see they're all representative pick select now select them all and delete oops didn't quite get that one okay now click back on scene and we're going to need to make that we can save Duke with ctrl s and I'll save our battle scene and then we can run by pressing this up here or doing f5 and it says we need to select a main scene this is the scene that will be run when the game is first started and we'll just do battle for now that's fine now you can see it's running but this won't work for our mobile game so we're gonna need to set up some project settings to make it work properly for a mobile game so let's come into project project settings under window down here and display we're gonna set our width to 90 and our height to 160 I think I think that's what we need I'm gonna check my reference project here just to make sure yeah that's right and then we'll do test width as 360 and our test height as 640 so what do these numbers mean the width and height is the actual width of width and height of our game so this is how many pixels our game is wide and how many pixels our game is tall test width and test what test white test height are how many pixels our game will take up inside of inside of windows so if we run the game you can see this is actually 640 pixels high and 360 pixels wide and so it's scaling our game up because if you don't set those then it will be tiny so come back to project settings we also need to set a few things down here so for for our mode we're going to want to do 2d for stretch mode and for aspect ratio we're going to want to keep so what that does is this make sure that it does actually scale up our images so actually let me show you what that does let's turn both these off real quick and let's not set our test width and height let's leave this alone this way I can show you exactly what each thing does so um first let's turn on snap turn off snap to grid and turn on use pixel snip and then I'm going to turn off all of smart snapping because we won't be using it okay there now if we drag over our mobile RPG mock-up right here this is just a mock-up for the game let's get it exactly where we want it if we run the game like this you can see that this is not what we want first of all it's tiny Hey and second of all since these buttons take up so much space it's actually kind of not working properly that's interesting and if we scale this up the image stays the same size so let's come into our project settings and let's set our test width and height like we did before test with 360 test height 640 so like I said before this determines how much the window will actually take up so now our window is the right size but our our game inside the window isn't prizant correct it's still tiny right but if we come into here and set our stretch mode to 2d then that will stretch the view to match the size of the window so now we're stretching properly and this is looking a lot better if we scale it though it continues to stretch right and this isn't what we want let's say they're playing it on an iPad or whatever and they get this this is this is gonna be ugly right so if we come into our project settings again and we set our aspect ratio to keep this we'll add black bars on the side so that means no matter what size of phone screen they have it will just add a black bar on the side of the game to accommodate and that looks much better if they're playing on a phone that has a slightly wider screen like this they'll just get these little black bars on the side which will look fine it'll look good and so much better than stretching it so now we've got our project all set up properly it's it's looking good so let's see what else we can do in this video because we're there's not going to be very many of these videos probably five or six or so so we want to get a lot done in each one let's start by adding our enemy to the game so let's add a new node and we're gonna do a node 2d this blue one right here and make sure you have battle selected or else it'll add it as a child of your mobile mock-up right here you know you don't want to do that actually yeah that'll be fine and we'll call this enemy now on our enemy we're going to want to attach the RESP right so we can actually click down here well if you have enemy selected you can click down here and drag the rap sprite over to there and then check to make sure that it's transform is set to zero zero right here while your rap node is selected and our enemy rat now has a sprite and we'll call this sprite so we've got enemy and it has a child note of sprite now if we try to move this it will move the sprite and not the enemy and that's not what we want so I'm going to click undo ctrl Z to undo that so what we can do instead is click this little button right here make sure the objects children are not selectable when your enemy note is selected now if we try and select this it will move enemy and not not their sprite not just the sprite it actually moves the whole enemy and we can place our enemy right here somewhere and if we click on our mobile RPG mock-up and then come into visibility we can click on this color right here the modulate property and lower the Alpha and look at that now we can have that as a reference for when we're adding in the elements of our game but it will be slightly transparent so let's add our dungeon make sure battle is selected drag over the dungeon doot make sure it's positioned properly and uh-oh our rats gone so the order that things are drawn in affects the depth and so we want to move our dungeon up above to the very top so you can just drag drag the sprite up to the very top now you can see our dungeon is there and our rat is here and I mock up we can hide and show the mock-up using this eye and we're getting this is looking pretty good so now on our enemy we're also going to want to attach a label and that will represent the enemy's health up here so if we just do click on the enemy then attach a new node search label it will give us this oops we can't select it we're gonna have to change that so click on this right here to make it so we can select the children we'll drag the label up here and we'll put 25 HP now this looks terror right because we don't have the proper font but we'll be fixing that shortly so just leave it like that for now and we'll rename this HP label like that okay if we hide our mock-up and run the game we've got our route it's got 25 HP we've got a good start now let's create a UI so click on battle let's add a new node and we'll use ctrl this will be like our base a UI node that will hold all of our UI elements inside of it you can see we've got a size here we just want to select layout up here while our control node is selected and do full rect that will mean it takes up the entire screen that gives us a good start and we'll rename this UI save now let's add as a child of this we'll add a new button node so add a new node and to make sure you're adding it as a child make sure you eye is selected button and we'll oops grab this drag it out bring it down here somewhere that should be good and then we'll call this sword perfect can save the game and run we've got a button we can press but it doesn't do anything and we can attack the enemy so let's write our first bit of code here we're going to click on battle and we're going to click on attach script right here that will attach a new script to our battle node we can choose what this script is named battle GD looks good and what language will be using GD script so we'll just create it fills in some default stuff that you might need but we're not gonna need any of that so let's just get rid of it and save with ctrl s now how can we the question here is how do we get our our button right here our sword button let's actually named it that sword button how do we get our sword button to tell the battle script when it's been clicked and the solution is what is called signals now a signal allows two nodes to talk to each other and of course you can have one node call a function from another node instead of using a signal and my general rule I somebody on reddit posted this somewhere said it was their rule I think it's a pretty good rule generally when you're using Godot I when I'm using Godot I signal up and call down so you can see that the sword button is a child of battle and so in order to talk to battle it has to go up the tree and so I would use a signal to tell battle when I've been pressed however if I wanted battle to talk to sword button I wouldn't use a signal I would just get access to the node directly in battle and then call the function directly and of course that's not a hard rule because sometimes you're going to have elements that don't really go well together but like stuff with like our enemy has a sprite if my enemy ever wanted to change sprites I wouldn't use a signal I would just have the enemy access sprite directly and then alter the sprite the texture on the sprite directly from enemy so let's use a signal for this because we're going up if you click on sword button come over to node you can see the signals available here and there's a lot of them the only one we need for now is pressed so double-click on pressed now we get to choose what node we want to talk with well we want to talk with battle and we get to choose whether or not we're going to make a function and generally you do want to make a function the only time you don't is when you already have a function when you very made one but we want to make one so we're gonna do and this is the name of the function it will create so we can just do connect and you can see it automatically makes a function for us called on sword button pressed so we know that this will happen when the sword button has been pressed and it opens us up into battle G D so we're opened up into battle G D so inside of here we're just going to print attack and this will just display this code will display here in the output so we can run our game and click this and you can see each time we click sword it prints attack down here so let's try something better let's try getting access to our health label right here and updating its text so we can we can get access to another node if it's a child so this is the opposite right remember how I said you signal up call down well now we're calling down but in order to do that we need direct access to this node and to do that we'll create a variable call it HP label and we can get access to that node by typing the dollar sign and you can see it lists all of the children of the battle and we have Mobile RPG mock-up and HP label and everything here that's a child so we'll do HP label like that and now we have access however we're getting an error message and this is because we're trying to get access to this node but when the game runs if the node might not be actually in the scene yet because right when you start the game it has to initialize and create everything in the game right um but this piece of code will be run before everything's been initialized so it might not be ready but there's a shortcut you can do to make sure that it's ready called on ready var it's a special keyword that you put before variables that need to get access to other nodes in the scene as the only time you use it we need to get access to this node in the scene it might not be ready the node might not be there when the scene when this code runs so we can wait this just make sure that we wait until it for sure is ready and then get access now instead of printing attack we can do HP label dot text and we can set it to whatever we want let's set it to 15 equals 15 HP and this is a bit silly because obviously um the first time we attack it will look like we dealt damage but then it won't ever work again but that's okay because we've got the very basics so this is what I mean signal up so we're signaling up to battle but then when battle needs to alter the label here we call down and this is a very simplified example of that because because this won't be how its set up when we when we get farther in this this isn't really the best system to go with especially if you want to have lots of different buttons that can attack and stuff we're gonna get a little bit fancier later in this series but this is this is the very basics for you and this is going to be it for today this is all we're going to do so thank you all so much for watching this if you enjoyed this video be sure and give it a like if you have any questions comment down in the comments I'll try my best to help answer your questions and once again check out my Kickstarter check out if you're interested in learning Godot I'm doing a Kickstarter for a Godot course go watch it see if it's something you would be interested in and if it is then pledge your support and in the next video we will be doing theming so we will start creating our default theme that will allow us well basically it will make our text and buttons not look like they're terrible and so we'll be doing that in the next video thank you all for watching and I will talk to you all later

Channel: HeartBeast

Views: 78,611

Keywords: Godot Engine, Godot 3, Godot Tutorial, Godot Game Engine, Godot 3 Engine, Godot Engine 3, Tutorial, Make Games, gdscript, Open Source, godot, game development, game engine, godot tutorial, godot 3, open source, godot engine 3, pixelart, pixel-art, lets pixel, pixel art, Pixelart

Id: f6RiWi32oO0

Length: 21min 49sec (1309 seconds)

Published: Thu Aug 01 2019

Reddit Comments

[u/uheartbeast]

Also, here is the GitHub repository for the project: https://github.com/uheartbeast/mobile-rpg-tutorial

[u/BeelzenefTV]

I was waiting for it, congrats!

[u/Highfive_Machine]

Just in time for the weekend!

This is such an awesome series! Thank you for offering so many great videos and tutorials for free (your paid courses are hear too). I've taken some of your game maker courses and went through the first three videos in this playlist to try and transition to Godot. Can't wait to finish it up.

Seriously, your work is very much appreciated. I hope you continue to support the indie dev community and hopefully we can support you as well :)

High five!

[u/n0f00l]

Thank you! love listening to your tutorials

[u/metareal]

Bookmarked! Will go through it soon, thanks! :)