In this guide, we will be taking a look at how to load images with Phaser 3. Hopefully you have a scene already setup. If you don’t have a scene setup already, please visit my tutorial on writing boilerplate code.
In your scene, define a preload function if you haven’t already. To define an image, the syntax is the following:
this.load.image(, );
Actual code could look like so:
this.load.image("myimage", "my-path/to-image/myimage.png");In our method call, key is the name you want to reference your image with in your code. The second argument should be the path to locate the image, and it should include the file extension.
Try loading an image. If you have a create method in your scene, you can add an image referencing the key you defined. For example, to draw an image at x: 0 and y: 0, which is the corner of the screen, you can write:
this.add.image(0, 0, "myimage");Of course, you can assign the return value of the method call to a variable or property like this:
this.myImage = this.add.image(0, 0, "myimage");With that, you now know how to load and draw a basic image with Phaser 3! If you found this guide helpful, you can find other tutorials in this series here. The goal of these articles is to provide you with basic information on learning Phaser without having to follow the steps in any specific order. If you like the series so far, and would like to receive news on my future tutorials and courses, please fill out the form. Sharing this guide on social media would also be much appreciated if you found this guide valuable.