Electron Projects

Rendering a sprite

Let's learn how to can render a sprite:

1. Find an image of a spaceship and upload it to the assets folder. In my example, I'm using the phaser-ship.png file.
2. Now, load the image into the game as a ship asset:

      function preload() {        this.load.setBaseURL('.');        this.load.image('background', 'assets/background.jpg');        this.load.image('ship', 'assets/phaser-ship.png');      }

3. Next, create a global variable called ship. This is going to contain our spaceship sprite:

      const game = new Phaser.Game(config);      let ship;

4. Now, assign the ship variable from within the create function. We need to reuse the variable inside the update function:

      // Create ship      ship = this.add.sprite(100, 100, 'ship');

Notice how we passed the initial coordinates ...