Before getting started, install and configure software as follows:
- Install Git for Windows and configure as follows
- Enable checking for updates: This option comes up early in the install wizard
- Choose the default editor used by git: Change to 'Use nano as the default editor'
- Configuring line endings: change to 'Check out as-is, commit unix style'
- WARNING: Installing Git for Windows to something other than the default directory may break integration with VS Code
- Install node.js LTS version (the even numbered version, NOT the odd one)
- Install Visual Studio Code
- At 'Additional Tasks', ENABLE the TWO 'Open with Code' options and the 'Create a Desktop Icon' option.
- Install recommended VS Code extensions (select 'extensions' at left or press ctrl+shift+x):
- Beautify
- Node.js Extension Pack
- vscode-icons
To retrieve the code and install dependencies:
- Click the 'clone or Download' button and download the zip file
- Extract the contents of the zip file to a local folder
- Open the repository folder in VS Code
- Right-click folder and say 'open in VS Code' or ...
- Run VS Code and select 'File -> Open Folder' from the menus
- Inside VS Code, press ctrl+` (same as tilde key) to open a terminal
- From the terminalthat opens, run 'npm install'
To serve the 'public' directory while DEVELOPING the code:
- From the terminal, run 'npm run dev'
- All changes to files under the 'public' directory will automatically reload the browser
- A global JavaScript variable __DEV__ will be set to true and debugging info will appear
To serve the 'public' directory for PLAYING or DEMOING the game:
- From the termainl, run 'npm start'
- All changes to files will still automatically reload the browser
- Debug info will NOT display and __DEV__ will be set to false
This project is really just a way to serve your Phaser files locally. It uses browser-sync: a simple web server that runs locally on your machine and simulates a real server. Without this, you would not be able to easily load the assets needed for your Phaser game. It also has some configuration to make editing in VS Code easier including configuration and installation of ESLint, a system to run in a 'dev' mode with extra debugging information, and some useful phaser 3 plugins loaded and pre-configured.
The needed phaser libraries and plugins are loaded from content delivery networks (CDNs) and your javascript code runs directly in the browser without translation, packaging, or minification. Most examples from the Phaser 3 labs should work in this framework. If you only run your project in a modern version of Chrome then most of ES6 IS supported but this will limit the ability to play your game in older browsers. For wider browser compatibility and better ES6 support, please use the full, heavyweight gdd325-web-base project available here on github.
When you are editing the JavaScript code, consider using multiple JavaScript files to separate concepts and enable working as a team without conflicts. If you add a new JavaScript file it must be MANUALLY added to the list of files at the end of the HTML <body> tag. Be sure to edit the index.html in the root folder of the project NOT the one in public which is automatically generated (see more below).
The index.html file located in the root of the project will have several lines of code injected into it depending on which mode you are running in ('dev' or just 'start'). You can edit it all you want but DO NOT REMOVE THE COMMENTS! These are used as automatically located flags for where to inject the needed script lines.
If you make changes to index.html while the server is running you MUST stop the server and restart it to see these changes.
If you have run the project previously, you will find an index.html under 'public'. DO NOT EDIT THIS FILE! It is automatically re-generated each time you run the project depending on what mode you are in so all changes will be lost.
It is NOT a good idea to add a text FPS meter to the game but you will find lots of code on the web that does exactly this. Any FPS meter you include will slow down the game itself (often significantly). In modern web browsers, you are better off using the built-in FPS meter. Here is a guide on enabling this in Chrome:
- Open the Developer Tools
- Press 'esc' to open the bottom drawer
- Click the three dots next to the word 'console' in the top bar of the drawer
- Select 'Rendering' and look for the 'FPS meter' option and check it
- Note: it will only display while the dev tools are left open
This project is now based on phaser 3 (NOT the 'community edition', sometimes called Phaser 2). It will setup and use the debug draw and scene update plugins by default. Debug draw is only enabled when running in dev mode.
The various folders in the project directory all serve specific purposes. Please try to adhere to the conventions listed below when adding new files to your project so that things stay organized and it is easier to work concurrently without stepping on each other's toes.
The project folders and files are structured as follows:
- index.html - HTML file used as the entry point of the game (edit to include extra js files if needed).
- public - All files under this directory are served by browsersync.
- public/src - All the JavaScript code for your game.
- public/assets - All data/assets go here (both binary and JSON encoded).
- package.json - Lists info about the project included the 'start' and 'dev' scripts and the dependencies.
The following folders and files are managed by the tools and are automatically generated (therefore KEEP OUT):
- public/index.html - This is a copy of the index.html in the root, modified with extra script tags.
- node_modules - These are packages installed by node when you run 'npm install' (lots of JS libraries).
- package-lock.json - Generated by npm when you run npm install (list of EVERYTHING it installs).
The included example is very similar to the Hello World example found in Phaser's own getting started guide. The example has been changed as follows:
- The
preload()andcreate()methods have been moved to a stage object in its own filesrc/GameStage.js. - An
init()method was added to the stage that shows the message "loading ..." while assets are loading. - The file
config.jswas added which contains some global configuration settings (like the game window size). - The file
utils.jswas added with some handy functions that might be useful in several places in your code. - The new
ScaleManagerwas added to the game config inmain.js(see the 'scale' property). - The scene is no longer loaded in the config but is loaded manually in the code at the end of
main.js. - Two plugins are installed and enabled by default: the
UpdatePluginand theDebugDrawPlugin(in dev mode). - The
UpdatePluginis very useful in Phaser 3 and you should read about it here.
- This project deliberately inclues options to support use of VS Code. It is the recommended code editor.
- Remember, you can and should use ES6 features in most browsers especially object oriented 'class' features.
This project was created as a lightweight version of the complex gdd325-web-base project. It abandons babel and webpack and does not use modular code like that project. All code is instead directly loaded in the browser and therefore it will only work in modern browsers that support the basics of ES6. It will allow for making much simpler experiences quickly but is not recommended for complex games with multiple levels and complex character movement.