 Hey this video is part of a short little series just demonstrating some software I wrote and basically it's a template for creating 2D games using Phaser2D and HTML5 utilizing JavaScript. Now again this is part of a series there should be an annotation somewhere in this video hopefully that will bring you to the full playlist. I recommend watching the first video or two before this one to get a quick overview of what the project is before we dive into the code and this is not a step by step tutorial on creating games. I would love to do step by step tutorials and creating simple games using Phaser2D but the videos I make are decided by my Patreon supporters and what they want to see so if you want to see that consider becoming a Patreon supporter by going to patreon.com forward slash metal X 1000 there should be a link in the description and that way you have more of a say and a vote on what gets done. But again this will just be an overview and even if you decide to use this template I do recommend learning Phaser 2D beforehand and creating a very simple one-page games here and there. This template does a lot of stuff for you, creating a load screen, a menu screen, an info screen, a pre-level page, the level page, and an exit screen. So you don't wanna get into all that before you learn the basics, it's gonna be a lot. And again, we're just gonna go over a quick overview on what the template is here as far as the code. If you go to github.com forward slash metalx1000, my username is metalx1000, you should be able to click on repositories and search through my repositories. Right now it's at the top, but it may not when you go to find it, you'll have to search through my repositories. It's called Phaser Game Template. You can click on there, you can see the code, and as I showed in the previous video, you can get a live view of what it looks like by clicking on here, it's the latest versions always on my website. Now, you can click download to download the zip file, but I'm gonna use git to pull it down. So I'm gonna copy that URL, go into my shell here, and in my folder that my web server is hosting, I'm going to say git clone, and the name of that URL. It's under three megabytes at this point, and most of that size is due to music and images. The code itself is very small, you can see that it's not very big at all. Again, if I have mentioned this in previous videos, you don't need a web server to run this. If you try to run it just as a file in your web browser, most web browsers will block you and not let you run the game. You'll get files not found due to cross site, blah, blah, blah. There's options you can pass to Chrome, and I'm sure other browsers as well, to bypass that little security thing, but I do recommend running it on a web server. Setting up a web server takes, if you're on Linux, you probably have one installed, you just have to run a command. I've done series on that before in the past. If you're on Windows, you might have to, might take you five minutes to 10 minutes to get one set up. And if you're on Mac OS, you have Python installed, and probably other options as well, but as I showed in previous videos, if you look through my previous videos on setting up servers using, web servers using Python. So you should be set, be able to get a web server up and running in 10 seconds if you know what you're doing on most operating systems. But how we decide to do it, I'm using Apache here. I'm gonna go into the actual project here, and let's go back to our web browser. I'm gonna go to my local host and the folder that it's in, click here and the game starts up. By default, it's in vertical mode, you know, portrait mode here. If I click anywhere inside the game, it goes full screen, but still in vertical mode. I can mute the music if I need to. Let's go ahead and look at changing that so that in case you want to be, you know, wide. You know, I have it set up here kind of like for holding a tablet or a phone, which you can also do in landscape mode. Let's say you want your game mainly to be a wide screen game. Let's go ahead and go back into our code here. And if we go into our main directory here, there is an index HTML, which is a rather short HTML file with some basic header stuff here. You know, loading up a favorites icon, title of the page, some JavaScripts. These right here, all the scripts I wrote that are the actual template that we load up. They're different scenes, your boot screen, your preloader, game template, you know, the actual game and level, game over, info and all that stuff. Some basic CSS to allow it to go full screen without any borders. And then down here is a short little JavaScript and that load up functions from the JavaScripts that I wrote. But we're also going to see here, as you can see here, it's loading up the phaser game based on variables for height and width. And right here, if we want to change it to, hard as our landscape rather than vertical mode, we can comment out that line, uncomment this line, and you can change the resolutions to whatever you want. I'm going to save that and exit out of my text editor. By the way, I'm using Vim, but you can use whatever text editor you prefer. Now, if I was to go back here and press F5 to refresh this, you notice it's still in vertical mode here. That's because I do have a manifest file set up with this project. What a manifest file does is, it tells your browser here, save all these files, only update if this manifest file changes. This allows you to run the game in offline mode. You can close your browser, come back later. As long as you haven't cleared out your cache, the game can be played offline at any time once it's been loaded. Now, so here's the manifest file. We can have a quick look at that. I mean, that would be a topic for a whole another thing, is basically it's just caching any file you tell it to in here. And one of those files is the index file. So, it doesn't matter if I change, delete whatever that index file, if your browser has run it, it's already going to run it now. And it goes based on the version number here. Now, what I can do, you could go in there and change the version number, but I do have an update script, so you're going to have to be on a system that has a shell, a bash shell, for this little script to work. But basically, besides changing the manifest file, if you add other files, this script's going to search through all the directories and add any images and sounds and scripts that you add. So, what I'm going to do is I'm going to type in dot slash update SH, it's been updated. And now, if I go back here, I can hit F5 to refresh. There you go, I had to do it twice for some reason the first time it didn't take. That happens sometimes with manifest files. But now you can see the game is in a widescreen format. Again, mute that music. So, any changes you make, be sure to run that update script or manually update the manifest file. I just made that little script to make things easy on you. That's the whole point of a template. Let's go back here, Ctrl-L to clear the screen. And let's go ahead and look at our files here. If we go into the data folder, there's two files here, images and info.js. Let's have a look at the info.js. And if you look in here, it's a very simple JSON array with some text and URL. The text, let's first one says game template by Chris Acapinti. And then there's a URL of films by Chris. There's a license line and there's the GPL for that or the URL for that. And there's the source code and there's a URL for that. And if you haven't figured out yet, this is the info screen. If we go back to our browser here and click info, you can see it says game template by Chris Acapinti. The licenses, the source code is music by and more games. You don't see any of the URLs because they happen when you click. So if I click on that one, it brings me to films by Chris. So this allows you to not have to go in to the code and find all that. You just modify that JSON file. Let's go ahead and do that. We're gonna go in here. We'll just change this. Let's change it so instead of Chris Acapinti, I'll change it to my screen name, which is middle X 1000. Save that. And if we come in here, even if we refresh a few times info, you can still see it says Chris Acapinti and that's again because of that manifest file. So let's go back to our shell here. Go back to the main directory here and type in update.sh. It updates our manifest file. I'm gonna refresh the screen twice here just to be sure. You can see it now says metal X 1000. So remember any change you make, run that update script. Now, going back to our code here, let's go ahead and have a look around. Let's see. Now, most of our main code is going to be under our JSON, or JS, our JavaScript folder. So again, we have our boot. Let's go ahead and have a quick look at that. That's very simple. It's basically our load screen. It's gonna create a load animation here of a certain size. Basically, that's a rotating cube, which actually this point is actually a progress bar as well. That's something I need to change to where there's the rotating cube and a progress bar, but it's functional and there's something on the screen letting someone know that the game is running. And I do have a console output saying that the game is loading for, you know, checking that stuff. Now, next it's going to run the, well if you look at that again, you know, it's gonna start state, what state is gonna start the preload, which was called preload in our index file, if you remember. But if you go here, there's a preload JS. And this is gonna preload a lot of our images and a lot of our music and sounds so that they're ready to go. They're already downloaded and ready to go. It's not like you click on something that's supposed to make a sound and you gotta wait for it to download. So this is gonna preload everything here, which is already on your system thanks to the manifest file, but it's gonna load it from, you know, your hard drive from your storage into your RAM and have it ready to go. So something like this sound, there's only one sound listed there, but I'll give you an example of some sprites. I put some of the stuff in arrays so you don't have to. So like here, I'm loading two different player screens here, but let's say you have a couple of sprites, animated images that are each frame as a 64 by 64. That's why I set this loop up four. So I called it sprite 64 and created that array. If we exit out of here, let me start up my file browser here and go up and go to our RES file, which is our resource files. Click in here, you can see the, you know, the brick icon that's repeated for the ground level and a bunch of our text and animations here, but we have sprites here. We have a few, we have five. These two are larger, the front view of the character, which if I haven't already stated it is a character I created in Blender, so it's actually 3D, but I render out as a 2D character. But ones that each frame or 64 by 64 are our mute button, our player walking and our player two walking, which is the same thing, just tinted blue. So, which can actually be done in the code, but I think at this point you're better off doing it this way because some browsers have issues with that, trying to change the color stuff, plus you need to use bitmats for that to work, I believe. Anyway, looking back at our code, you can see those three sprite names right there. So we have mute player and player two, player, player two and mute doesn't matter the order. It's gonna loop through those and what it's doing here is gonna create a sprite sheet for each of those and it's gonna give it the name, which is the name and the variable. So the first one would be player and the next one would be player two and the next one would be mute. It's gonna say, okay, it's in the resource sprites folder. It's gonna be called that, so player, player two, player, or mute dot PNG, which is what they are named and each frame is 64 by 64. So I created loops like that for different things to help you streamline stuff. So let's say you added another player or another sprite that is 64 by 64 for each frame. You can just come in here and let's say it was a bad guy. You can say, comma, bad guy, if that's what you named the file, save that update and it will load that file. You don't have to create a line for each one. That's just something I did in there to move things along. You also see the music loading here and progress bar starting here. So that's just a quick look at that. I'm not gonna save any of that here. And again, this is a quick overview so I'm just gonna show you a little bit more but we'll go ahead and have a look at the title screen. So we'll go Vim into game title. You can see here that we're loading up the different sprites. This one's the game title, which if we go back into our game here and go to our main screen, that would be this My Fun Game here. And so for a lot of that, you don't have to worry about the code. If you're just gonna have a title screen like this and you want the title screen to look like that, you have three different things here. You have My Fun Game, Play, Info, and you just wanna change the title and change the font. You can just create new PNGs and replace the old ones. If you don't like the look of this mute button, you just create a new PNG and replace it. So a lot of that stuff on screens like this, it's just gonna be replacing the PNGs. I do have the character going here as an animation. That is also in this code here. So you can see, as far as updating, for each update it's moving the position of each player, player one or player two, whether they're going left or right, creating some buttons here, loading, I do wanna point out, if you do just change the image of this, this does link to the gentleman who made the music for the game. So that's a button there. You can change that here. You just change the URL if you want that to link to something else. Here is loading the players. To load the players, I create this function and you pass it a few different things, like the position, the x, y position and the direction and what type of player it is, whether it's player one or player two. And this is set up for those particular sprites, but you can just modify the number of frames here and how fast you want them to move and you're probably gonna want them to loop if they're gonna be walking like that. So that's that code. Again, there is a lot more to this entire game template, but I just wanna give you an overview of it. Again, something I would like, I would love to do more tutorials on, but again, all my tutorials are based on votes from my Patreon viewers and so far, this isn't a big interest for the few Patreon supporters I have. So, but I thought I would share this. If you already are familiar with Phaser 2D and if you're not, and you wanna make 2D games, I do recommend it. Lots of code out there, lots of... It's great, it's greatly documented. I've done videos talking about their documentation before. I recommend you check it out once you get past the basics and you feel comfortable creating a small game. Then you can utilize this template to get your basic game going so you don't have to write the same mind-numbing stuff that's done over and over again at the beginning of this game design. It's all set up for you here with simple scripts to update stuff. So, again, as always, I hope you enjoyed this series. I hope you're enjoying these videos. I hope that you have a great day. As always, please share, like, and subscribe if you enjoy these videos. And as always, visit filmsbychrist.com. That's Chris the K. There should be a link in the description. And I hope that you have a great day.