Creating Sprite From Config And Randomly Spawning It In Game View

 

Creating Sprite From Config And Randomly Spawning It In Game View

What we will cover:

  • How to create a normal sprite in Phaser 3 at random position in game view
  • How to increase the sprites Y property until it is out of our game view and once out of view destroy the sprite

  • How to create a function to fire each time the sprite is out of view to create a new sprite.

To note this tutorial is being written based on a boilerplate project which can be found here

https://github.com/nkholski/phaser3-es6-webpack

This is the best boilerplate project that I have found thus far so definitely check it out. Go to the github and follow the readme to get started with this project.

This tutorial is using a project boilerplate of a previous tutorial found here https://sprite-storm.com/tutorial/creating-physics-sprite-phaser-3-beta/ please check this for project setup.

Please follow that tutorial for project setup :D.

Setting Up Our Create Function:



create() {
    
        this.createMushroom();

    }

 

Lets Break This Down:

  • The only thing we are doing in our create function for this project is calling a function which handles our sprites creation.

 

Defining Our Sprite Creation Function:



createMushroom() {
            let config = {
                key: 'mushroom',
                x: { randFloat: [0, this.game.config.width] },
                y: { randFloat: [0, this.game.config.height * 0.5] }
            };
            this.mushroom = this.make.sprite(config)
    }

Lets Break This Down:

  • Here we define a function to house our config object for our sprite as well as the creation of our sprite
  • We defind a variable which contains an object, we list the key with the string ‘mushroom’ to tell config what image we want to use, next we set our X and Y properties which is this case they are objects which call randFloat(which is built in functionality with Phaser 3 to choose a random fload between two set floats). We use 0 for our start on both, for X our max is going to be our games width which is defined in our game config. Y will be our game config height multiplied by 0.5 which will have our sprites spawn in the top half our our game view.

Defining Our Update Loop:



update() {
        this.mushroom.y += 5;
        if (this.mushroom.y >= this.game.config.height) {
            this.mushroom.destroy();
            this.createMushroom();
        }
    }

Lets Break This Down:

  • To start off in our update loop we will increase our sprites Y position by 5 pixels each tick of our update loop, which will slowly move the sprite down the screen.

  • We then setup our if statement to handle when the sprite is no longer visible in our game view basically stating if our sprites Y value is greater than or equal to our game configs height then trigger our code in the if statement.

  • Once the if statement is triggered the first thing that is fired is our destroy method on our sprite which will destroy it from our game. Next we simply call our sprite creation function to spawn a new sprite.

 

That’s all! Pretty simple, and if you have followed and done everything correctly you should see this in your game!

Conclusion:

  • We learned how to create a sprite using a config object inside a self contained function
  • We learned how to increase this sprites Y position until it is no longer visible, destroy that sprite, and spawn a new one.

Thank you very much for reading. Please stay tuned for upcoming tutorials.

Twitter

Error code 89: Invalid or expired token.

Stay Updated