Add an image to the scene

Let’s add an image to the Level.scene file created by the Basic JavaScript project template.

1. To upload an image to the project. Rich-click on the assets folder and press the Upload Files option of the context menu.

2. It opens the Upload Files dialog. Click on the Browse button and select the image file in your computer.

3. Press the Upload button. The image is uploaded to the assets folder and shown in the Files view.

4. Check the new image is selected in the Files view. Look in the Inspector view, there are the properties of the image file. In the section Asset Pack File, there two buttons to import the image into an Asset Pack file. Click on the Import image button and select Add To /assets/asset-pack.json.

The assets/asset-pack.json is a Phaser file with the configuration of all the files you can load in a game. The Scene Editor uses it to get the images or any other file information.

You can add the image files to the Asset Pack file using the previous method or opening the assets-pack.json file in the Asset Pack Editor.

5. Click on the Scene Editor that is open, it will refresh the Blocks view and the new image will be shown in the view.

6. Drag the image from the Blocks view and drop it in the middle of the scene. Press the End key to move the image to the bottom of the scene. Or right click in the image and select the Depth → Move Objects To Bottom option.

Save the editor and play the project (F12).

Note

There are a couple of initial steps you have to follow to add an image to the scene. 1) Upload. 2) Add the image to the Asset Pack file. 3) Drag the image from the Blocks view and drop it into the scene.

This workflow may be simplified in the future, but for us it is important to make that process transparent, with no custom API or file formats, and make it full compatible with any other third-party tool you can use.