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.

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

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

Upload image.
  1. 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.

Add image.

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.

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

Add image.
  1. 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 EditMove Bottom option.

Save the editor and play the project (F12).

Add image.


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.