Boilerplate project to get up and running with Typescript and Phaser in VS Code.
Derived from: http://divillysausages.com/2015/06/09/using-phaser-with-visual-studio-code/
NOTE: This boilerplate is setup to use Phaser Community Edition (Phaser-CE). This is Phaser 2, not Phaser 3 or beyond.
-
Install Node.
-
Use NPM (comes with Node) to install Typescript from the command line.
npm install -g typescript
-
Install VS Code.
-
Download and extract this repository to desired destination. Rename the folder as desired.
-
Open this folder using VS Code. You can do this by right-clicking the folder and selecting 'Open with Code' from your desktop, or from File > Open Folder from within VS Code.
-
Press Ctrl+Shift+P to bring up the command palette and select 'Tasks: Run Test Task'. This will install required node modules.
-
Press Ctrl+Shift+B to compile the typescript files in src/ to bin/js/.
-
Press F5 to start the webserver.
-
Open localhost:5858 in your favorite web browser. To modify this port update the port number in .vscode/launch.json and server/server.js.
NOTE: Steps 1-3 only need to be done once per machine.
Contains VS Code project setup to handle compiling typescript code and running the webserver. Only needed if you are using VS Code for these purposes. If you're just using the project structure, this folder can be deleted.
Directory of all output files that can be directly uploaded to host your game files.
Directory of all assets that the game/site/webpage will use. Feel free to make more directories for better organization.
Directory of compiled javascript as well as Phaser. Any additional javascript libraries can be placed here as well.
Contains Node specific setup and packages. Currently the only package used is node-static to allow VS Code to run a server.
Contains server setup for the packaged node-static web server.
Contains all your source Typescript files. These compile into /bin/js. Feel free to make more directories for better organization. This is where you will mainly be working.
Contains Typescript definition files. This is what the typescript compiler uses to add types to objects/functions.
This setup uses the node.js package node-static to handle the hosting of files. While we will attempt to keep this up to date, if your project needs to update this package, run the following command in the command line if the project folder:
npm update node-static
Current Version Phaser-CE v2.19.0
To update Phaser, run /update_phaser.sh or /pdate_phaser.bat on Windows machines.
If something is out of date, please make an Issue or a Pull Request and I'll update it.