Make HTML5 games with Phaser - Introduction. This post is the first one in a series of tutorials about how to make games in HTML5.
Note: to follow this tutorial you should already be familiar with web development in HTML and Javascript. How to make HTML5 games? You can make HTML5 games in lots of different ways, there are even websites dedicated to list all the different framework available like this one. So which one should you choose? I've spend a whole week looking into the different solutions, and I finally picked Phaser. So my tutorials will be focused on Phaser, a Javascript framework for 2D games. Getting started with Phaser Getting started with Phaser is easy, here's how to do it in four simple steps. 1) Important links First things first, here’s a list of links you should bookmark. 2) Download Phaser You should download the latest version of phaser-master, and also get my empty project that we will use in this tutorial. Install a local web server on your computer. First project: Hello World And that's it! What's next? MAMP PRO.
Phaser with RequireJS and Bower. Not sure how much use this will be to anyone, but I thought I would share it all the same… I recently found myself working with Phaser without the comforts of my friend TypeScript.
One of the great things TypeScript brings to the table is a built in package system, something Javascript is sorely lacking ( at least until ECMAScript 6 arrives ). Of course, you don’t need a modular package system, but it certainly makes things cleaner, especially as project scope increases. In the land of module loaders, there are two commonly used front runners. RequireJS and Browserify. I believe RequireJS is by far the more popular option, so that’s the route I pursued. So, let’s take a look at how you use that template.
Anyways, as the line above might hint, the template is available in the Phaser Git repository. This will download the contents of that folder on github to the local directory . Now that we have the template, what exactly do we do with it? Npm install -g bower bower install. Javascript game development with Node.js, Grunt and Texture Packer. I have used MAMP for javascript game development for a few years, and it has worked fine except for a few issues I find cumbersome, like updating MAMP.
I wanted to see if I would benefit from switching to Node.js and use Grunt to automate some of the more tedious tasks I usually do manually. It turned out I was right. Grunt is a task runner that enables you to automate tasks and define your own workflows. You write your tasks in javascript and use Node.js to run them. For instance you could have a task that packs your sprites into a sprite sheet, or concatenates your javascript files into a single file and then minify it. As for defining workflows, you can tie the tasks together in series and have different sets of task run for different cases.
If you want to know more about Grunt, head over to gruntjs.com and check out the documentation. Mandarinx/GameDevTemplateJS. Phaser Project Template. The other week I wrote an introduction to Phaser and I wanted to follow up with a short walk through on how to get a project up and running with Phaser, TypeScript, NodeJS and Grunt.
I have talked about a similar workflow in the past as well but figured I should come up with a basic Phaser Project Template to help get others started. Here are some instructions on how to use it. You can download the Phaser Project Template from my Github repo here. What is the Phaser Project Template? This is a simple project template I created to help add a structure to your next Phaser game.
A package.json for installing npm dependencies GruntFile.js for automating build tasks and compiling your game src folder where you can put your game code. To get started all you need to do is download a copy of this template, the latest version of Phaser and make sure you have NodeJS and Grunt installed. Javascript game development with Node.js, Grunt and Texture Packer.