In Phaser Editor we encourage to use the Asset Pack JSON Format to load the assets of your games, there are many features around this file, and in the future we will add more.

Watch a demo video

Known issues

The JSON Asset Pack file

In the Phaser repository there is the file resources/Asset Pack JSON Format/assetPack.json. It is an example of how the assets can be loaded via the asset pack. We reproduce here the Phaser's authors explanation of that file:

An Asset Pack is a means to control the loading of assets into Phaser via a JSON file. Use Phaser.Loader.pack() to load your data file.
The file is split into sections (...) Sections are a way for you to control the splitting-up of asset loading, so you don't have to load everything at once.
The key you use for the sections is entirely up to you and is passed to the Phaser.Loader.pack call.
Within each section is an Array of objects. Each object corresponds to a single file to be loaded. The "type" property controls the type of file. Note that lots of the file properties are optional. See the Phaser.Loader API Documentation to find out which ones, as they match the API calls exactly.
Where a file type has a callback, such as "script", the context in which the callback is run should be passed to the Phaser.Loader.pack method. See the examples for further details.

Create the asset pack file

If you create a project based on the built-in Phaser Editor templates then this file is created automatically. You can find it in the WebContent/assets/assets-pack.json path.

To create the pack file manually, go toFile > New > Asset Pack File , or in the New button of the toolbar, in the drop-down menu.

Asset pack file menu

It opens the Asset Pack File wizard. In this wizard you should write the name of the file and select the folder where to create the pack. By default, it selects the assets folder, but you can select any folder in any project. Press Finish to create the file and it opens in the Asset Pack editor.

Asset pack dialog

The Asset Pack File editor

The Asset Pack file is a JSON file that you can edit manually, but in Phaser Editor this file can be modified using a dedicated editor with a graphical interface.

The editor has two panels: the assets tree and the asset details.

In the assets tree you add, remove and rename the sections and the entries. The asset details panel shows the properties of the object selected in the tree.

To modify an asset entry, you select it in the tree and change the values in the details panel.

The details panel also shows the JSDoc of the different parameters, it is the same doc of the parameters of the loader method.

For example, if you select an "image" object in the tree, the details panel shows the parameters of the Phaser.Loader.image() method. You can modify the values of the parameters and you can see the documentation of it (hover the mouse in the parameter's name).

Asset pack editor

Load the assets from the pack file

In Phaser the asstes are loaded in the preload method of the game state. The code to load them looks like this:

game.load.image("dino", "path/to/dino.png");            
game.load.image("montain", "path/to/montain.png");
game.load.spritesheet("girl", "path/to/mujer-trotando.png", 64, 64);
game.load.audio("music", "path/to/guajira.ogg");
...

For each asset to load you have to write a loader's method call.

When you use an asset pack you only have to write a line to load a section from the asset pack:

game.load.pack("level", "path/to/assets-pack.json");

It automatically loads all the assets defined in the "level" section of the pack assets-pack.json.

Assets explorer

From the Assets explorer the user can preview the different assets, opening it in the Preview or with a mouse hover.

Assets explorer

To open the Assets view type Ctrl+3 and write assets. It shows you a list of elements related to the word assets, just click the one that says Assets View.