 Hello and welcome in this video. We're going to create this simple little game It's not really game because there's no way to win. There's no objective it But basically we're just gonna create this little interface that has a spaceship that follows the cursor And we have another spaceship that follows the first spaceship. We're gonna do this in about 50 lines of code So let's go ahead and get started but to get started Let's go ahead and if you head over to get lab comm for it slash me likes 1,000 You can find this project called the very long name basic phaser top-down space shooter example It's just an example. I created for this video I'll put a link in the description of this video and when you get here You can clone the repository if you don't know what cloning is just go ahead and click and download the zip file instead Extract it to a directory on your web server if you're not running a web server You're going to have to set your browser up to allow the splitting of local files It's just easier to set up a web server Whatever web server you want, but I'm not going into details on that. We're just gonna go ahead and create something So let's go ahead and get started. This is the basic HTML Oh, when you download this package what it's gonna have is well read me a license And that's gonna have your HTML index index file and then the main JS is our main Code and then assets. What's inside assets? We're gonna have Two images in here basically the enemy spaceship and the player spaceship. So that's all that's really in there Now as I'm saying here is the HTML. Let's put this up here So you can see all the way across half these lines aren't really necessary, but they should be in there So it's just basic HTML Header we got a title here. We got some things that are basically for the sizing of mobile devices This styling is just CSS that basically gets the border away from around the game So the we're gonna have the game fill up the whole screen Which you may or may not want to do it depending on your style of game Then the most important two lines here are these script lines This one's loading phaser, which you can download locally, but we're just gonna link to it From a server and then our main JS file, which is where basically our all our code is going to go So let's go ahead and look at our main JS file Let's see Main JS and this is the code for our game and If you come down here, you can see total lines is actually exactly 50 lines of code right now But really this top line here. This is these top 17 lines is just basically it's the configuration for the game It's Jason and could all be put on one line We're gonna break down. So this is this I'm gonna do is I'm going to delete this and create it from scratch So let's go ahead and do that Okay, so now our game code is blank So let's start creating it first thing we're going to create is that thing I was talking about at the top of the screen is our configuration for our phaser game We're using phaser 3 here and this configuration just helps tell phaser You know what settings you want. So we're just gonna call this config We're gonna say equal and then we're gonna have it curly brackets They're gonna say type and with phase you have a few different options Remember case sensitive here capital P phaser web GL this is telling it to use web GL to render which will hopefully use hardware Acceleration next we're gonna give a width of our game. We'll just start with 800 But we're gonna change that a little bit and we're gonna give it a height which will give it. We'll say 600 so it's gonna be a Landscape type game in this particular case. Next we're gonna give it physics We're gonna barely use any physics in this example But if you were to continue developing this game, you're gonna want physics for collision detection and stuff like that so we're just gonna say Of course, you want spell stuff, right physics and In here, we're gonna give brackets and here there's different types of physics and For gaming and the most basic that phaser allows is going to be Arcade type physics, which is all we need for a type of game like this gonna be less system-hungry And for just very basic on the collision detection with bounding boxes And then here for that arcade physics, we're gonna give it some configuration We're going to say gravity and really we can leave this blank because we're not gonna have a gravity in our game But that's why I'm gonna set gravity set to Why you can have gravity pull left or right we're gonna pull up and down But we're just gonna say zero so really I don't even know if we need to put this line in here But I'm going to and we're also gonna set debugging to false I think it's on by default It's set to false by default But for some reason you wanted to turn it on it's right there You just change that to true and it will be on next We're going to close out our physics brackets here And move on to our scene so in a game you'll in many cases have multiple scenes They can be levels or menu screens stuff like that, but we're just gonna have one scene And we got to tell it functions so in a phaser game You're gonna have different type of functions some functions might have our and Initializing function which we're not going to need for this We're gonna have a preload where you load up all your assets any sprites images sounds that sort of thing So they all load before the game starts and Then you have to create where it creates everything and then you're gonna have an update that's going to run the update on As the game loops telling things what to do basically that's gonna be your main ongoing thing and here we're gonna say for our preload We're gonna call the function preload and we'll create that function it for our create. We're gonna call it create so basically the Right side of each of these columns you can call it whatever you want because they're gonna be the functions You're gonna create but in most cases you're gonna call the update update create create function function Or function function preload preload let's go ahead and close that out and I think we're good if I put all my brackets properly and let me do auto indentation everything looks good Okay, now that we have that we're going to actually create our game and we're gonna give it a name called game that way we can You know use it whenever we want by calling game Now we're gonna say it's a new phaser remember case sensitive here game and Here we're gonna put in all that configuration so you could type all that JSON That we just loaded up into here But it's easier to put it into a variable called in this case config and then load that into here Next we're gonna create those three functions the preload the create and the update Of course you want to spell things properly. It's usually helpful Okay, now that we have those now, I think we're gonna create two main objects in this game We're gonna create a player and an enemy and being on your scenario in most cases Especially with the enemies you're gonna want to create groups We're just gonna create any little individual objects here so it would be a good idea to either Set those as global variables in this particular case so we could do something like var player comma enemy like that Phaser three allows you to actually throw stuff like that into the configuration here, and it's not something I've read the documentation on but the way you would do that So I'm not sure the benefits of it is basically I'm saying as opposed to doing it the other way But we're going to say extend and we're gonna say player null because it isn't created yet and Enemy is set to know in our particular example right here if you didn't have that in there It's gonna work fine, but later on if your great game grows. It's a good idea to have them here that way It's not looking for something that doesn't exist at least here. They're they're declared even though they have no values So now the preload We're just gonna preload two assets our player and our enemy and so we're gonna say this referring to our current game Load and we're gonna say image Now in here we're gonna give the image a name and then point it to the file so here I'm gonna say player Comma and then here we're gonna link to the file I put both those images in a folder subfolder of the current folder in called assets So assets player dot PNG and again spelling things correctly is helpful. Let's go ahead and copy that line and just Change these to say enemy And we'll change this to say enemy as well because it's any PNG and player PNG and So now these images are loaded. They're loading up before the game starts that way they're there and ready to go on the system running in your RAM and The game doesn't you know try to use them, but they're not ready and so the player PNG will be able to call the call as an image called player and enemy will be called enemy So let's go ahead and use Those right now. Let's go ahead and create our player and again This is a very simple example a lot of this stuff like as far as loading assets I usually put in a for loop and just have an array of the Images or sounds that way I don't have to write out that line every single time and also like when I'm creating a player here Usually I create a whole other function called create player or create enemy and then call those in the create from the create function But here we're just gonna put everything because we're being so basic here There's only gonna be a few lines inside our create like maybe Five four or five. So let's go ahead and just say player So here we're creating the player. So that's just a comment for us. Let's forward says comment and here We're gonna say player equals this so our current game. We're gonna add physics and again We're gonna barely use physics. We're gonna use those physics to Follow the mouse cursor. I think I might need those on to follow each other or at least When you're having the player follow the mouse or the other enemy follow the player You're gonna want physics on especially for when they collide We're not gonna do anything with collision in this particular video But you would want when the player got to the cursor to stop when the enemy crashes into the player You know what death occurs or something along those lines So let's go ahead and just say Player equals this physics. So we're creating an object called player from this game. We're going to add it We're gonna say here that it has physics You can add a sprite and then later on add the physics at least in phaser 2 you could But at least in the examples I've seen for phaser 3 this the way it's done now We need to give it three things into this function the location of where we want the player to be loaded to start And then the image in this case we've called this image. We've already loaded it and called it player So I just kind of put kind of put them up near the top left of the screen We'll just say 80 pixels over and 60 pixels down and we will say to use The player image that we've loaded Let's go ahead and run that and now Right here. This is the game. I'm going to refresh now and Not sure let's go ahead and look at our developer console Main unexpected identifier on line five Uh-huh. I forgot a comma here. So that's useful So again in a chrome browser you hit f12. I think most web browsers f12 will open up Your developer console here if you're on a machine that doesn't have an f12 key Control shift I will also open up this so let's go ahead and refresh this now and there we go We've loaded up our scene. I have another error on line 32. It's saying add is not an option and It's because this should be physics not physics Now let's try again. There we go He's kind of big. Let's go ahead and make him a little bit smaller. So I'm just gonna say now that he's loaded I'm gonna say player dot and it's set capital S for scale and here We're gonna give it what size wants be you can do zero point five. I just do point five So we're gonna scale them down to half the size perfect so we've loaded our player and We've scaled them down. Now. Let's go to our update function for our player here So we'll come down here. So the update again, this is going to as your game loops It's going to run this update function each time. So first things first. Let's grab our whatever pointer we're using and phaser helps with this because a pointer might be a mouse cursor It might be a touchscreen finger you might have multiple fingers on the touchscreen and those will all be considered different inputs phaser helps us Here with the thing called active pointer So but let's go ahead instead of typing out. So it would be this for this current game input dot active capital P pointer is The active pointer, but we don't want to type that each time. So we're just gonna say If I could type pointer equals so now Anytime we call this pointer and really that's something that we should put either in a global variable or up here Technically putting it in that function without the var is making it a global variable. Oops Let's just say Pointer I think it's appropriate to have it there not putting that up there Wouldn't give us an error, but it's helpful just to have that stuff up there So people know of these global variables at least at the very minimum. So now we have our Active pointer and so every time the game updates gonna check was the active pointer put into an object called pointer Now we can use that so in here. Let's go ahead and center this up. We're going to say player Dot rotation So our player rotation we can set to where we want we can set it to a number So let's just you know set it to like 10 and see here if we reload this you can see he's turned 10 It's not 10 degrees But or yeah, because if we did angle which we're going to use here in a moment would be Basically in degrees, but here the rotation. I think one is a full rotation. So putting in 10 One whatever doesn't matter. We're going to use some math. We're gonna say phaser We're gonna use phaser to do our math dot math dot angle dot Between and so we're going to find the angle between two objects or two Coordinates really so we need the players x and y and our pointers x and y so here I'm going to say player dot x comma player dot y So that's our first location now comma and we've created our pointer Otherwise if we didn't create this pointer object here, we'd have to type this input active pointer For each one of these so we're just going to say now pointer dot x comma pointer dot y And if we did everything right this is going to try to turn our players and they're refreshed over here You can see it's trying to follow my cursor, but he's he's looking so when I'm at over here He's looking up. That's because it doesn't know which way our image is facing which is front-end phaser It seems to be defaulting to whatever is at the right side of the image is the the front is what it's considering so if you were in a Side scroller that side would be front now. I don't know there's probably a better way to do this But the way I fix it in this particular example, I'm gonna say player dot angle And I take the current angle so every time the game updates it's going to Calculate the angle between the player and the cursor and then I'm going to add 90 degrees to that again There's probably a better way to do that, but that is the way I'm doing it this time So refresh this and you can see now the player is constantly following my cursor as long as he's in that window Once he goes out of the window it stops following it. There we go Now let's do one more thing. We want the player to follow The pointer at a certain speed, so let's go ahead and save this for again this current game We're going to use the physics in this game and then we're going to say move to the capital T Object So now we got to give it what object we want to move What object we want to move it to and the speed we want to move that so I'm gonna say player So we're gonna move our player we're gonna move it to well where our pointer is which is updating each time we loop That's why you put this in the update function here And the speed now I'm gonna say 600 and again I'm giving it a static number here Normally I would put that number that 600 or whatever speed I want to be into the player object and that way It's linked to that player especially when it comes to enemies might want to have different enemies at different speeds But I would create a variable I would create object dot speed or something like that and that would be the player speed But now that we've done that if everything is correct. We can refresh this and now it's following My cursor perfect Okay, let's come back over here now. Let's go ahead and load our player That's a little annoying that he flickers like that That's so it's happening here as he's hitting my cursor He's still trying to follow it and that's why I said we're not gonna go over in this tutorial But you want to hit set up a collision detection that when it reaches the cursor He stops following it until it goes outside of the cursor. Anyway let's go ahead and add in our enemy now and In reality what we can do is we can just say, you know Copy these two lines and paste them in here change this to be enemy Change the image that we're loading to enemy Changes location. We'll move them to a 400 by 300 would be the middle of the screen Although you can use math to figure that out And we'll say scale the enemy down. So he's not huge to half size. There we go. There he is We can fly around him all we want. He doesn't move because we haven't given him any update functions So let's come down here. Let's just add in a comment here player Just divide up the sections make it easier to read another comment enemy and So let's go ahead and see what do we want the enemy to do? We want him to rotate basically the same things that the player is doing but To the player not the cursor. So I'm going to do is I'm just going to copy these three lines And paste them in here and change this from player to Enemy and again in reality the I put this in a function for the enemy and Say this for itself and Also enemies would be in a group or an array of some sort so you can loop through them all because you want all the enemies Doing this but we're just creating one enemy here. We're saying Enemy the location of enemy and we want it to move to where the location of the player is And now we're going to say enemy now If you look at the assets for these by default the players pointing up the enemy sprite is facing down so here instead of Positive 90 we want to move him negative 90 degrees or yeah angle and then here we're going to want to have him move So that we're moving the enemy to the player and we don't want the enemy to be as Fast as the player want the player to be a little bit faster. So we'll say 400 and now we'll do this And now he is following the player. We have no errors. Let's go ahead and close our console here our window is 800 pixels by 600 pixels. Let's make that a little bit bigger What we can do is up here at the top of this Instead of 800 and there's different ways to do this with phaser You had different ways to go full screen where whether it stretches the this the image stays Proportionate here. I'm not going to go full screen as far as making it full screen full screen But I'm going to fill up the whole window. So what I'm going to say is window dot inner width with a capital W For width and the height will say the window dot inner height so now The game will fill up the screen no matter the size of screen now if I was to make this full screen or this Window at least fit the full window, you notice it doesn't go all the way over here but if I refresh it will and We can create a resize function that detects when the windows resize and then resize the canvas It's not that hard to do. We're not going to go over that in the world. We are pretty much done This is what we wanted to accomplish in this video And I just wanted to go through from beginning to end something simple so again He's following the cursor and the enemy is following the player and that is pretty much it now I am currently working on a game. That's basically this concept. This is what I have so far I have the player he can shoot He moves he stops me hits the cursor and so the enemy also stops when he hits the player But then he's pushing him into my cursor. That's still something I need to fix I need to hide my regular cursor I have an X here for where we're shooting to the player can shoot I haven't set any collision detection for the shooting yet We have that he has three lives There's no way of losing lives. It's something that I'm trying to do a half an hour to 45 minutes of just just add I want to add some sort of functionality almost every day So it's just a little bit each day just to keep me working each day if you want to Participate in this project. You can get the code again at get lab.com forward slash mail X 1000 The game is called obler space mission. What does obler mean? It is the word. I just made up I don't think it has a meaning. I just said what's a spacey sounding word obler. Well, there it is you can clone this and You know push changes up and so if you wanted to you could help with this too And it's just I try to it's been a while But I try to try to do some sort of project like this where I'm just doing a little bit every day It keeps me up on my skills and I've done a lot with phaser 2. This is the first real thing I'm doing with phaser 3 so a lot of the templates I've created for Vim are either outdated a lot of them still work But there's newer ways doing it that might be easier or they just don't work at all So I'm just trying to learn it so I can start creating new templates here if you want to learn phaser if you go to phaser.io is where you can find out phaser phaser 3 is still being developed So if you come here and you go to examples It's going to bring you to the phaser 2 examples, which there are plenty of you know You click come in here you click on one of these are listed by categories you can click on one of these and loads it right up and Here right here. I'm clicking it's counting how many times I click on Einstein's face there and and there's the code again, not very much But for phaser 3 what you want to do is go to labs.phaser.io. I also think I saw a link back here somewhere whoops Oh too far right. Where did it say? That phaser somewhere maybe it was under the examples Yeah, right here phaser 3 labs and in here. There's a lot of examples for phaser 3 So like I can come in here and I can say Animation then I can click on one of these And there we go. We got Mummy pooping and then you can click edit and it will actually bring you to I don't know why it doesn't just bring you straight to this This this previous little interface that we were just at It's kind of useless. I always just click straight to here and click run code It will run it over here and this is the entire code for this particular Example and you can download it and whatnot So I'll look through those examples if you haven't played with phaser if you want to see more examples of phaser I can do that for you is great Simple to use and of course, you know cross-platform once you create something you throw up on a server and Regardless of your operating system or your device as long as you have a relatively new web browser That game will run pretty much anywhere Do thank you for watching as always pleases it films by Chris calm That's Chris the K There's a link in the description of the video to that along with the code and the project and the examples from This video I do thank you for watching and as always I hope that you have a great day