Creating A Physics Sprite In Phaser 3 Beta Part 2!

 

Creating A Physics Sprite In Phaser 3 Beta Part 2!

 

What we will cover:

  • How to create a physics sprite in Phaser 3 Beta on a mouse down event
  • How to detect collision on world bounds

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 a continuation of a previous tutorial found here https://sprite-storm.com/tutorial/creating-physics-sprite-phaser-3-beta/

Please follow that tutorial for project setup :D.

Setting Up Our Create Function:



create() {
        let that = this;

        that.input.events.on('POINTER_DOWN_EVENT', function (event) {
            let mushroom = that.physics.add.image(event.x, event.y, 'mushroom').setActive().setVelocity(0, 0);
        });

        that.physics.world.events.on('COLLIDE_EVENT', that.collide);

    }

 

Lets Break This Down:

  • We start by setting a variable defined as that equal to this, I have done this to avoid some scoping issues I have found with Phaser 3(this may be an issue with my particular build or the way Phaser 3 handles scoping… not entirely sure yet).
  • Next we call our input events method which is built into Phaser 3, it accepts two paramets the first being a key string for the mouse down event, the second being an anonymouse function which accepts one parameter which is event.

  • Inside this method for a mouse or pointer down event we declare a single variable called mushroom which will hold our physics sprite this method accepts three parameters, X, Y, which in our case will be wherever you click in your game, and our image string to be used. If you are not certain on what is happening here please refer to the first tutorial for creating a physics sprite in Phaser 3 Beta link at top of post.

  • We then chain a couple methods, setActive() to set the sprite to be active in our game, as well as setVelocity() which contains two parameters which is X, and Y velocity. We have set this to 0 since we will just be using the gravity defined in our config from the previous tutorial.

  • Finally we call another built in method in Phaser 3 for physics world events. It accepts two parameters a key string which is our case is a collision event, as well as a function to be called when that collision event occurs.

 

Defining Our Collision Function:



collide (event) {
   
    event.gameObjectA.tint = 0xff0000;
}

Lets Break This Down:

  • Here we define a function to house what we want to happen once a collision occurs it accepts one parameter which will be our event.
  • Next all we do is set the tint of our events game object to red when a collision occurs

That’s all! Pretty simple, and if you have followed and done everything correctly you should see this happen when the mushroom touches the floor of the world bounds.

Conclusion:

  • We learned how to create a physics sprite on a mouse down event.
  • We learned how to call a collision event and pass it a function to fire when collision happens

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

Twitter

Error code 89: Invalid or expired token.

Stay Updated