Setting up Phaser for Games

setting up phaser for games

I’ve been using phaser a lot for games lately. I’m going to be posting and showing a lot of how to build games in Phaser, this video will show you how get set up!

All you need is a code editor. Anyone will do. I use dreamweaver, but some I’ve been using Brackets. It is a nice FREE alternative.
You’ll need some web space, or a free local server like xampp will do. and you need some code.

I’ve been building some snippets to make it easier.

To get started:

  1. Free Code editor
  2. Local server(or web space)
  3. Some Code Snippets
  4. This Video

Text of the video:

Setup Phaser for Games

I have been working a lot lately with something called Phaser and I want to show you how to do all sorts of cools things in it. But first we have to do the steps of setting up Phaser for games in the first place. And it’s not that hard to do. First you go to phaser.io, you click the Download to Get Started button, download Phaser from GitHub and then we need only one file, and it’s that one in the middle, the minimized js; and save that to the desktop. And I got one earlier just to save some time. And I’m going to make a folder up here called Phaser. And I’m using Dreamweaver but you can use any editor. And we either need some web space to run this in or a local server. And I’m just going to use my main williamclarkson.net site.

So you make a folder called Phaser then we make a js folder. And let’s go back to the desktop and grab that phaser.min.js and we’re just going to stick it right there in the JavaScript folder. There it is. So now let’s make a new file; and this is going to be our index.html and that will launch our games. We’ll change the title to Phaser game and let’s bring in the phaser.min.js. Great.

Now we need a file that will launch the Phaser game and that’s going to called main.js. Now to save some time, I’ve come up with a collection of snippets. So let me just finish including the main.js here and I’ll show you where to find those and correct that spelling there.

So if you go to my website, williamclarkson.net, under toolbox you’ll find Phaser snippets. And this is just a collection of snippets I put together for my personal use because I couldn’t find anything with auto-complete in it in regards to Phaser. So I just threw these together but I’m hoping somebody will find them useful. And I want to make it for both desktop and mobile. So grab that snippet there, the startup for desktop mobile, put it into main.js. Now let me go over what it’s talking about here. It’s declaring a variable called game and game, for all intents and purposes, will be global. Game is a new Phaser game and it’s 400 x 640 pixels wide, that’s if the screen width is greater than 1500. Because if it’s greater than 1500, I’m assuming that it’s either a desktop or a laptop. If it’s not, I’m going to assume that it’s a mobile device. In that case, instead of using the 480 x 640, I’m going to use window innerWidth and window innerHeight to make it a full screen mobile game.

Now Phaser Auto, there are three modes: Phaser Auto; Phaser WEBGL, which uses the web graphics library; and there’s Phaser Canvass, which is just a normal html5 canvass. If I use Auto, then it will try to use WEBGL first. Otherwise, it will fall back gracefully onto Canvass, so I let Phaser choose what’s best. And the fourth parameter there is a div tag. And it will create that automatically in the body of your HTML file, unless you already placed it there. And if you place it there, then it will simply replace it. So div ID equals Phaser game. And the reason you might want go ahead and put it in yourself is because when it replaces it or puts the game inside that tag, then you can control what goes on outside of it. For example, I’ll put this div within a line center around it and now it will center the game in the middle of the screen.

The next part is to add a state and a state for our purposes is simply a screen. So let’s make that first screen called StateMain and that’s where all the main game action will go. We might also have a state title which should be the title screen or Game Over screen, so let’s bring that in to our index HTML file.

So we’ve got our Phaser minimized, our main.js and our StateMain, its .js. So next, let’s fill in that state because there’s nothing in there right now and up at the top of the Phaser starboard snippets is what’s called blank state and you paste that in there. It’s already called StateMain but if you paste it into a state title or game over, you have to change the name at the top.

The first thing is a preload and that’s where we set up a library of images and sounds and sprite sheets and all sorts of things like that. The create function is where we declare the variables and we position things and we just instantiate everything here in the create function. And then the update function is a constantly running loop. So any code that you put in here will run over and over and over. So it’s especially great for checking collisions in games, different things such as that.

I’m going to upload all of these. You see there’s our blank game. So that is ready to setup and take more interesting code and I’m going to do one more thing here. I’m going to make a new folder, I’m going to call it Phaser template. I’m going to drag all the JavaScript and all the index HTML into the Phaser template. In that way, I can copy that whole folder every time I want to start a new game and give it the title of the new game and I don’t have to do all that work over again, and don’t have to go through the process of setting up phaser for games again. I hope this has been helpful for you, please let me know if you have any questions.