 Okay, this is the first video in a series on I'm just gonna go over the very basics of making a minimal game using Phaser 2d library. This is for creating games in HTML5 with JavaScript Which is a great way to make games because regardless of what platform you are We're regardless of what hardware you're on as long as you have a modern web browser You can play this game. You don't even need to install anything You can make the games playable offline so you don't need an internet connection once you've run it and You know you can reboot as many times as you want and the game is still playable without an internet connection Might get into that later on in the series right now. We're just gonna work on the basic game and So as I said, we're gonna be using Phaser, which is a library Phaser.io is their website looks like this and it is a great resource You can go to github and fork their project with all their examples and click on examples And they have all these examples broken down as different categories over 600 all together right now But for you guys, I've also set up a github repository. It's called phaser minimal setup My username is metalx1000. So if you go to github.com forward slash metalx1000 or go to my website filmsbychrist.com That's Chris at the K There is an option to go to my github account there And then you can search for phaser minimal setup or I'll put a link in the description of this video for you and what this is it's just has the basic files for you to get you going and Let's just do that and get going. So I'm github, you know, you can choose to use This to clone it, which is how I would normally do it But for people who aren't familiar with github There is a download button here and you can go ahead and click that I'm actually going to copy that and I'm going to go into the folder where I have my web server running And I'm going to type in wget and I'm going to download that you don't have to do this part. You can just Click the download button if you don't know how to use wget And now I'm going to unzip the master zip and that creates a folder for me called phaser minimal setup dash master now I can go over to my web browser here and Navigate to where my web server is running on local host or remotely and I can then click on Phaser minimal setup and here we go. I have a blank game for you already to go So let's go ahead and start creating a game So I'm going to move into that folder and again, I'm going to be using Vim as my text editor use whatever text editor you like just make sure it's not a word document editor It's very different than a text editor and it won't work, but you know You can use g edit Kate or whatever Word text document editor you want to use so I'm going to come in here and let's quickly look I've created an index.html file for you here very very simple HTML layout I have the title of the game which will show up on the tab in the web browser Then I'm loading the phaser Library here, which I've already downloaded the latest version into this repository for you So it's already there and I'll probably keep this repository You'll try to keep it up to date in the future and then I'm also linking to a main JS file Which is where we are going to actually write our game, but this is your basic HTML file I'm not gonna type this out bit by bit because hopefully you know basic HTML tags Now I'm going to Vim into my JS folder and Go into my main JS file where I've created a blank template for you here In fact, I should have removed that That and that I don't know why I left those in there. I'll probably remove that before you download that file So when you go in it will look like this and what this is saying is we're creating an object here called game And we're going to use our phaser library so anytime you see phaser like this It's using that phaser library and in this case we're going to create a game So we're creating an object called game and we're using the phaser game function We're going to give it some parameters here We are going to give it a size and I'm just going to go 1080 by 720 But you know do whatever you like you know if you want a long game or a wide game portrait or or landscape game You know depending on whether you're going to be doing this. How are you going to make your game? You know and this phaser auto if I remember correctly I always type that but I'm pretty sure that that phaser will check and see if you have hardware acceleration Available in which case it will use WebGL for your game if not it will default back to canvas now You can tell it to use WebGL or tell it to use canvas But if you put auto phasual see which is available and use the best option next option here I left blank but I'm pretty sure that's where you put the scene that's for larger games again I have multiple scenes. I'm just leaving that blank for now Now here's the most important part here is we have three functions that we're defining here our preload function our create function and our update function, so we're saying For this game there are these functions and it's in JSON here But basically we say preload and we're going to then the second half is saying use this preload function Next for this game the create function is called create Which is this function here and we're saying for this game the update option is the update function Which we're going to create right here Okay, so what are these three things? Well when you're creating a game you don't want your game to start before all your resources have loaded into RAM so Any characters images sounds music you want to make sure that they're all loaded before the game starts And that's what the preload function is for after that stuff is loaded the next thing it's going to run is the create option the create function where you're going to create your basic level and Anything you want that loads when the game starts and then the update is what happens when the game updates There's actually another option put in here called render Which is something it's like the update, but it happens not just on the update cycle But on each frame that's rendered. I mainly stick with the update There's probably instances where you want to use the render, but we're not going to get into that in this series Let's start with our Preload function so we're going to go ahead and load an image now if you look at our The repositories that you downloaded from github. You see there's a RES folder that I created For resources and in here I have two images. I have a brick PNG, which is just a little thing I made a repeating pattern I made that in GIMP and then there's an image of tux that I downloaded from the internet, which I Actually don't know if I have the rights to use this But there it is so so those are just two images I put in there to get you started But you can load any images you want you can even load them remotely if they're on another server But it's usually a good idea to put them on your server to make sure that they load and they don't get moved so let's go ahead and Load up that image of tux. So I'm gonna say here's I'm gonna say game Which is the object we created up here So if you call it something else up here, you're gonna call it something else here But we're gonna call it game. This is our game object We're gonna say use the load function and what are we loading? You have different options. We're gonna load an image Okay, and then we're gonna pass two parameters to this function We're going to say what we're gonna call this image in the rest of our script So anytime we want to load this image of tux, what are we gonna call it? We'll call it tux in this case. You can call it player if it's your player But whatever you want to name it there obviously keep it short avoid special characters But whatever you want so that you know what it is next inside Quotations either single or double we are going to load that image. So where's the image? Well, it's in the same folder So we're just gonna say in the subdirectory So we're gonna say r. Yes So the folder inside our folder and the image was called tux dot PNG but of course you would label it whatever your image is labeled and Possibly later on the series if you have lots of things you need to load I'm gonna show you how to create a simple little loop that can grab all that stuff Of course, you might you will gonna probably use server side scripts might get a little out of the realm of these series But I might show you that later on so now what's happening is this game load so I can save this I'll come over here to my game I'll hit f5 Doesn't look like anything happened, right? We still have our blank game because we loaded our image of tux into RAM If we downloaded it and made sure it's RAM and ready to go But we didn't actually put it into our game yet. I'm gonna go ahead and hit f12 here I'm in Chrome f12 is very common key, but open up your developers tab Whatever the key combination is for your web browser f12 is fairly common And if we go to network here and I hit refresh You'll see it loads some things and you see that it did download the image of tux You can even look at the preview here and there he is so we did download it the computer It's loaded on our computer now locally but It hasn't been added. I'm very sorry that my phone rang The we haven't put it into our game yet, so let's go ahead and do that So we preloaded it so it's ready to be used There should be no delay in adding it to our game now So I'm going to go into our create Option here our create function now there are different ways to load images and I'm going to show you Not necessarily the simplest way right now because what I want to do here is I want to actually Create a Group so it's kind of like an array So the reason I'm doing this I could just add the image there but since this is going to be our player character and Theoretically later on you might want to add more than one player So you could have a static one image or an animated sprite That is a player, but if you later on you think you might want to add multiple players You're going to want to have any group so we're going to go ahead and do that now So I'm going to say players. I'm going to call this players and it's going to be my group We're going to say game. So again, let me make this full screen here. We have Our game object and create at the top. So we're going to say create group From that object and we're going to add the group so This side saying we're creating a new group and what are we calling this group? We're calling it players So this way we can now Start creating our player But instead of creating our player in the create function itself because if you create everything in there Like put all the code for the player and then all the code for everything else in the create You create function gets kind of big so I'm going to split it off into another function And I'm going to call that create player. You can call it whatever you'd like but I'm calling create players. So now we're going to create that function function create Player So now we're going to put everything we need to create our player in here So let's go ahead and do that What we're going to do is we're going to say Var so this is a local variable. So it's only going to work inside this function I'm going to call player now. No, we have players up here and player here. They're two different things I call this one players because that's where all our players are going to go each individual player so we're gonna say we're gonna create a a new object in here and Basically, we're gonna say players create and then give it some parameters here. So here. We're saying Okay, we're creating a new object and we're gonna put it basically we're creating something inside our players group And we need to give at least three things inside this create function We need to give it XY quartets So where this image where this image is going to be placed and then what image we want to load So I'm just going to go I'm going to go 0 comma 0 comma and then side parentheses. I'm going to say tux and That tux is this tux here. So this knows that we're it's looking for image So it's gonna look through our list of images that we've preloaded and find the one that we labeled tux So this should be placed in the top left corner of our game So let's go ahead save that and Go back to our game here and refresh and there is our tux Now it's kind of hard to see because the background is black. So real quick. Let's hear it Let's add in a different background colors by default. It's going to be black So let's come up here to our create function. Let's have the first thing we do. We're just gonna say take our game Take this stage that we're in because again, you can have different stages I can say background and remember this is all case sensitive. So write it like I'm writing it only spell things properly background color with a capital C equals and I think we could probably just do something like blue And I think it will understand that let's see Apparently not so the way the proper way to do it is To give it some hex code and I already have a hex code down here written for a light blue now You can go into gimp and get these values, but I'm just gonna do a light Blue here if I do that and I refresh there we go. We have a light blue background. You can see our tux much better Now we're almost done with this this trial one thing. I'm gonna change in our create player function. Okay So Right here. We're creating a player, but anytime we create a player. It's always gonna place it in that top left corner this way Maybe you want that maybe you want players always stopping in top left corner Even if you you um create more than one player, but let's go ahead and pass it the variable each time that we want to load it So what I'm gonna do here is gonna say x comma y and here I'm gonna place the values of x comma y and then up here when we create the player I'm going to say Zero comma zero So here in the actual game, we're not going to notice any difference You can see our players still up there, but if I was to change the variable here You'll see he'll move over a little bit over and down see So now I can go and copy this line of create player and let's go ahead and go 200 and leave That's at 10 so the both be the same distance down Whoops save that and now if I refresh we've created two separate players at two different locations Now in reality, we should put Options in here to check if those are undefined if they're undefined fine give them default values We're not gonna do that in this in this video. In fact, we're done for this video I'm gonna hit 11 here so you can quickly look at all the code Not a whole lot. We're doing great. We're we're creating our game here. We're pre loading an image We're changing the color of our background and then here we're creating a group and then we're using this function to create two different players and And you might go Hey, why don't you just put this line there because we're gonna be adding more because that player needs other Values you might want to issue the player, you know, how much life do they have? Might want to issue different images for different players You might we're gonna give them some physics. So you want to say, you know, how heavy they are how fast they move Whether they bounce or not how much they bounce we're gonna get on to that in coming videos so I thank you for watching this video and I hope that you continue watching this series someone's gonna ask Where's the next video? There's gonna be one out every week So be sure to just subscribe so that you see the next week's video unless you're watching this at a later date In which case there will be a playlist hopefully in the description of this video to where you can watch all the videos in The series, so I thank you for watching if you like these the series go ahead and give it a thumbs up Now that we got a character loader, we're gonna start having some fun adding some more things and as always I thank you for watching Please visit films by Chris calm. That's Chris the cake. There should be a link in the description There's also a link in the description to my patreon account patreon.com forward slash metal x 1000 If you'd like to come and financially support me there with as little as a dollar a month I would appreciate it if you can't do that which I understand that everyone can be sure to like Subscribe share and comment that really does help it gets me more views and although I don't I'm not a millionaire I do make a little bit of money on ad revenue ad revenue I thank you for watching and thank you for sharing and as always I hope that you have a great day