Part 1 - Introduction
This guide is for Phaser 3. If you're using Phaser 2 / CE then please go here.
Phaser is an HTML5 game framework designed specifically for web browsers. It is built using, and relying on, web technologies. And the games it creates are meant to be played in desktop or mobile browsers, or apps capable of running web games, such as Discord, SnapChat, Facebook and more. There are ways to convert browser games to native mobile or desktop apps using 3rd party tools, and many Phaser developers have done this successfully. However, Phasers primary focus is, and always will be, the web.
Phaser is a 2D game framework. This means that both its features and internal design are based entirely around creating lightning fast 2D games. It does not include 3D rendering or 3D physics as built-in features. Again, there are ways to integreate 3rd party libraries to provide this, but Phaser itself is 2D and our documentation and examples reflect this.
Setting up a Dev Environment
In this tutorial we're going to cover setting-up a development environment with which you can build your Phaser games. This will include running a local web server, picking an IDE, getting the latest version of Phaser and checking it all works together.
If you trust us that you do need a local web server for development, then you can skip the explanation below and head directly to part 2.
If you'd like to know the reasoning why, please read on ...
A web server? But I want to make games!
"Why do I need a local web server? Can't I just drag the html files onto my browser?"A. Sane, Developer
Not these days, no. I appreciate that it's a bit confusing, even contradictory at times, but it all boils down to browser security. If you're making a static html web page then you can happily drag this file into your browser and see the end results. You can also "Save As" entire web pages locally and re-open them with most the contents intact. If both of these things work why can't you drag an HTML5 game into a browser and run it?
It's to do with the protocol used to access the files. When you request anything over the web you're using
http, and the server level security is enough to ensure you can only access files you're meant to. But when you drag a file in it's loaded via the local file system (technically
file://) and that is massively restricted, for obvious reasons. Under
file:// there's no concept of domains, no server level security, just a raw file system.
file:// there would be nothing stopping it loading pretty much any file, and sending it off who knows where.
Because this is so dangerous browsers lock themselves down tighter than Alcatraz when running under
file://. Every single page becomes treated as a unique local domain. That is why "Save Web page" works, to a degree. It opens under the same cross-site restrictions as if they were on a live server.
There's a detailed post about it on the Chromium blog that is well worth a read if you'd like to learn more.
http:// access to the game files. And for that we need a web server.