Phaser, also known as Phaser 3 is a 2D JavaScript based games engine. It allows you to create 2D games to run in the web browser powered by Canvas and WebGL. Phaser is open source so therefore is free to use. As well as game creation you are encouraged to look under the hood and make changes.
The make up of Phaser
Phaser 3 is a JavaScript games engine and so requires only a few basic elements to start development and create games. Firstly, you need to clone or download the engine which is very lightweight. Then if you want to work locally rather than online live (which I would recommend) then you will need to setup a local web server (which is straight forward).
Once you have everything setup then you can start using Phaser by simply including it within your standard web page. All the functions, configuration and building blocks for your game are all created in JavaScript. This can either be written directly in the main HTML file or separated out into JavaScript (js) files.
Which IDE?
As Phaser is purely a JavaScript library you will need to pick your favourite IDE which supports JavaScript. There are a lot of options out there but in my opinion the best out there is Visual Studio Code. It is light weight and supports lots of programming languages (not just JavaScript) and has lots of useful extensions. New to Visual Studio Code? Take a look at our Git, GitHub and Visual Studio Code post.
With a web server running if you are using Visual Studio Code you can simply open the folder for your game and start editing files. Other IDEs worth a mention are Visual Studio, Atom and Notepad++.
Microsoft Visual Studio tends to be quite heavyweight for developing JavaScript and I would deem it overkill but if you already have it installed and don’t want to download anything new then it works perfectly well.
Atom is a code editor from the creators of GitHub. It is straight forward to use and is highly customisable (like Visual Studio Code). The current version works well but it is worth noting that GitHub have confirmed that it is going to be sunsetted towards the end of 2022.
Notepad++, so this gives you a very basic option when it comes to development. Seen as the next step up from Windows Notepad then you can probably understand why. There are a few benefits around syntax highlighting and clever multi-line editing which are useful. Unless you are a fan of building everything from the ground up and reading documentation then this one probably isn’t for you.
JavaScript vs. TypeScript
Phaser supports both JavaScript and TypeScript which provides flexibility to use either a weakly typed or strongly typed language. There are benefits of but if you want to make development easier then TypeScript is an easier option.
The main benefit of using TypeScript is that you unlock simple auto-complete in most IDEs. If you are new to programming or even a veteran this comes in very useful when working on something new. Phaser provides a TypeScript version you can download for use, so all of the built-in types are present.
Most people have heard of JavaScript and know that you can add it to websites to make interactive elements which run on the user’s browser client-side (I’m oversimplifying here) but you may wonder what TypeScript even is. TypeScript is a language which is like JavaScript, in fact under the hood is generated JavaScript with its transpiler.
So you may now be wondering what is a Transpiler? Put simply it takes code written in one language (in this case TypeScript) and translates it to another (JavaScript). This allows a language like TypeScript to be strongly typed compared to JavaScript but when executed runs in the same way. TypeScript also has some other useful features such as enums which don’t exist in JavaScript.
I started off with JavaScript as it was more familiar to me but after looking at TypeScript development with Phaser I wouldn’t switch back.
Features of Phaser
Phaser is packed full of useful features from games physics, animations, camera controls, tilemaps, sound and mobile scaling (just to name a few). For developing games to run in the browser or on Facebook it is the ideal engine.
Learning Phaser
If you have any experience in web development or JavaScript, you should find Phaser reasonably easy to pick up. There are lots of tutorials online from beginner to advanced topics as well as a wealth of JavaScript and TypeScript tutorials.
The best place to start is in the learn section on the Phaser IO website which has various tutorials. It is also the place you can find the full documentation and getting started guide.
Future of Phaser
Phaser is under constant community lead development. Being open-source and driven by the needs of developers then new features are being added all the time. Currently the production release of Phaser is version 3 but version 4 is already being heavily worked on.
The complexity of the games being developed is also gaining momentum. Going from a simple platformer to a few gamed in the Idle game series. A few of our favourites we have seen are Idle Zoo, fishing.io and Deadswitch 3. If you have spotted any of your favourites then we would love to hear about them, or maybe you have created your own game in Phaser and want to spread the word? Just drop us your suggestions and creations in a comment.
The icons in this page come from icons8.com which is a great source of icons for many purposes.
Leave a Reply