Set-up the Phaser 3 Examples Runner
Now you can build Phaser 3 it's time to run the Examples.
Please note: Not all examples run! The API is changing frequently and not all Examples have been updated or are deprecated. We will tidy them all up before release.
1. Examples Runner
Make sure you can access the Phaser 3 Examples Runner in your browser. If your local server is running on 127.0.0.1 then try to load http://127.0.0.1/phaser3-examples/public/ and make sure the page displays. It should look something like this:
2. Pick a folder
Pick any folder to enter that section of the examples. You'll see a list of icons with the example title below them.
Click the icon to load the example into the runner.
Click the text to load it into the sandbox editor.
Try picking a folder such as 'Animation' and then click the text below the 'Single Sprite Sheet' icon. The Phaser 3 Sandbox editor should appear with the code on the left and a blank window on the right. You likely do this already, but I strongly suggest you perform all testing with the browsers Dev Tools open. In Chrome this will ensure the cache doesn't mess things up, and that you see errors and debug info.
3. Run Code
Click 'Run Code'. The example should load in the right-pane (in this example below you can see a selection of sprites from a texture atlas)
If it doesn't run, check the console for errors, check your paths, and see if anything is missing.
IMPORTANT Not all examples run!
4. Tweak the Code
Using the editor in the browser, tweak the code. For example change this line:
this.add.image(0, 0, 'atlas', 'aya_touhou_teng_soldier');
to
this.add.image(0, 200, 'atlas', 'aya_touhou_teng_soldier');
.. and click 'Run Code' again. The right-hand iFrame should reload, the dev tools console should clear, and the changes should be reflected instantly.
The Phaser 3 Examples runner is now working properly. Woohoo!
How to create a new Example
There are two ways to create a new Phaser 3 Example:
Saving a Local Example
When using the Examples Runner you'll notice a 'Save' button at the top. If you edit the code of an example, and click 'Save', it will store that example to Local Storage. This is local to your machine, and cannot be checked into git. Use it for quick local tests, or messing around, things you don't ever want pushed to the repo.
Having said that, there is a 'Download' button in the top-right as well. If you do create an example that you really like, and want to save it, give it a file name and hit Download. It will then prompt you to save the JS file locally, so you can then check it into the repo.
Creating a New Example
All the Phaser 3 examples can be found in the phaser3-examples/public/src folder. There are folders, such as 'gameobjects' that in turn have lots of sub-folders within them.
To create a new example just save it into a folder, giving it a non-conflicting file name.
You then need to rebuild the index list to get it to appear. New examples don't appear on the Phaser 3 Examples index list by default. They are read from the examples.json file in the public folder of the repo when the page loads. To add your new example to the JSON you can use the provided node script:
node build
This will parse the src folder, and write everything it finds in there to the json file. Refresh the examples index to see yours appear.