Let’s turn your computer into a web development workstation with no cost thanks to Phaser and some other free software. In order to start making games with Phaser, you’ll first need a software to write code. There is a lot of free offers. I personally use PSPad on my Windows computer and TextWrangler on my Mac. Another alternative is Brackets but you can use your favorite text editor, I’d only suggest you choose one capable to highlight JavaScript syntax.
Choosing a web server
To test your Phaser games, and more in general to test most web applications, you will need to install a web server on your computer to override browsers security limits when running your project locally. I am using WAMP on my Windows machine, and MAMP on the Mac. Recently, MAMP also released a Windows version. Just like the text editors, both WAMP and MAMP are free to use as you won’t need the PRO version, which is also available for MAMP. If you prefer, if you have a FTP space you can test your projects directly online by uploading and calling them directly from the web. In this case, you won’t need to have a web server installed on your computer, but I highly recommend using WAMP or MAMP instead. Most FTP spaces requires a paid account, and you can only use them when you have an internet connection available.
REALLY choosing a web server, rather than closing this article
I know at this time most of you may think “come on, it’s just JavaScript, what’s this server stuff, I quit!”. This is the same thing I said when I first had to install and configure a web server just to run a JavaScript page. Let me explain why you should really choose a web server, rather than quit reading: browsers do not simply allow you to properly display web pages and HTML5 games. They also take care of your security. When you load a page locally in your browser, you won’t have problems until it’s just a static HTML web page. But when you launch more complex scripts which load and handle resources from your hard disk such as images, audio files and every other kind of data, to prevent malicious scripts to access to virtually any file on your computer, browsers have a series of security measures which stop files to be accessed and unfortunately this causes your games not to work.
With a web server, browsers will know they are running in a small, safe environment where only some files – the ones you placed in a given project folder can be accessed, and they will give your scripts green light to work properly. Believe me, it’s necessary and way easier than you may think.
Choosing a web browser
Since your game will run on all modern browsers, you will also need a web browser to make your games run into and test them. I am using Google Chrome but you are free to use the one you prefer as long as it supports HTML5 canvas element. Having the latest version of your web browser installed on your computer should be enough. Refer to your browser support page to see if it supports canvas element.
Other software you may need
Games basically are a collection of images and sounds which are moved and played accordingly to player and scripting logic, so during the creation of the game you will be asked to edit and create both images and sounds. Audacity is a great free software to work with sounds, while I would suggest GIMP to work with images, which is also free. You can also use the trial version of Photoshop which allows you to use all features for free for a limited amount of time.
Next Tutorial →
The structure of your Phaser project