Creating A Physics Sprite In Phaser3 Beta

 

Creating A Physics Sprite In Phaser 3 Beta!

-In this tutorial we will go over how to create a Phaser 3 sprite with physics enabled.

What we will cover:

  • How to create a physics sprite in Phaser 3 Beta
  • How to set up our physics type and parameters in our config file

  • Go over different parameters on physics sprite creation

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.

We will be using this boilerplate as well as the assets that are included in its examples to write this tutorial.

To keep things simple for these new tutorials in Phaser 3 Beta we will be keeping most everything in a single Scene file(as we now know Phaser doesnt use ‘states’, but instead uses ‘scenes’);

Setting Up The Project(basics):

  • Since we are using this fantastic boilerplate we dont have to make many changes. We are going to simplify a bit.
  • First off we will begin by going into the main.js file and making some small edits to change how the scenes will behave and what will be loaded.



import 'phaser';
import BootScene from './scenes/Boot';
import GameScene from './scenes/examples/GameScene';


let config = {
    type: Phaser.AUTO,
    parent: 'content',
    width: 800,
    height: 600,
    scene: [
      BootScene,
      GameScene
    ]
};

let game = new Phaser.Game(config);

 

Lets Break This Down:

  • First off we will begin importing the things we will want to use in our project. We import Phaser of course for our game to use the Phaser 3 Beta version engine, we continue by importing our BootScene from where it is saved in our directory, followed by our GameScene which is where our game code will be written.
  • Next we set up the global config for our game(from my very minimal understanding this config can be overwritten on a scene by scene basis in their own configs). We set our type which is Phaser.Auto same as older Phaser projects, the parent which is content, width and height of our game. Next we add our scenes we will be using which we have already imported they are BootScene and GameScene.

  • We finally instantiate our game passing our config we have defined above.

 

Setting Up Our BootScene:

  • If you have downloaded and are using the boilerplate mentioned above you will not need to worry about preloading since it has already been done
    for their examples. If you however are not following this particular boilerplate you will need to preload these either in your boot state or preload state
    as you would have donw with previous Phaser builds.

  • We will simply we preloading our assets in our preload function in our GameScene to keep things simple for this tutorial

  • First off the only thing we will be changing in our BootScene is removing the preloaded assets there since we will be preloading all assets in our GameScene.


class BootScene extends Phaser.Scene {
  constructor () {
    super({ key: 'BootScene' })
    if (__DEV__) {
      console.log('BootScene created!')
    }
  }

  preload () {
  }

  create () {
    this.scene.start('GameScene')
  }
}

export default BootScene

Moving On To Our GameScene:

  • Here in the GameScene is where most of the magic happens! We will be preloading our asset we want to use, setting our scene config to use Impact JS physics, as well as creating our physics sprite.

 



class GameScene extends Phaser.Scene {
    constructor() {
        super({
            key: 'GameScene',
            physics: {
                system: 'impact',
                gravity: 100,
                setBounds: {
                    width: 800,
                    height: 600,
                }
            }
        });
    }

    preload() {
        this.load.image('mushroom', './assets/images/mushroom2.png')

    }

    create() {
        
        this.mushroom = this.physics.add.image(300, 300, 'mushroom').setActive().setVelocity(0, 0).setBounce(0);

    }
}

export default GameScene;

 

Lets Break This Down:

  • Firstly we create our GameScene class which also extends Phaser.Scene just like our BootScene
  • Next come our constructor followed by our super. Our super is going to have an object passed which is going to house our scene config. We start with key just like in BootScene which we pass GameScene as a string. Next we pass in our physics which uses the keyword physics and contains an object itself. First off in that physics object is the system we will be using which is Impact JS we pass impact as a string to signify this. We then pass in our gravity which we have set to 100 for this particular example. Then we have setBounds which contains an object that houses width and height which we have set to our games width and height defined in our main.js file.

  • Following our constructor we create our preload function, if you are a user of Phaser this should look quite familar to you we simply call the this.load.image() function and pass our key which is ‘mushroom’, then where that image can be found in our directory.

  • Next up we have our create function which if you are familar with Phaser you will be comfortable with this layout.

  • First off in our create we define a variable called this.mushroom which is equal to this.physics.add.image() a built in method for creating a physics sprite from an image(atleast as far as I can tell from my little beginning knowledge using Phaser 3 Beta). We go ahead and pass our parameters beginning with X and Y position of the sprite which we have set to 300 for each. Following that we pass our image we want to have for the physics sprite which is our preloaded mushroom image from our preload function.

  • So after the original method of this.physics.add.image it looks like now you can chain certain methods in Phaser 3(once again as far as I can tell from the little examples and with no documentations yet released). The first ‘chained’ method as I am going to call them is setActive() which as far as I can tell is what sets the physics body sprite to be active in our GameScene(if you have ever used Unity this will look familar to you). Next is setVelocity() which is quite self explainatory it accepts two parameters which is X and Y which will change the sprites X and Y velocity. Finally we have setBounce() this will be what sets our sprite restitution when it collides with our world bounds or with another body from what I can tell. It accepts one parameter which is a number to increase the restitution or if set to 0 will have no restitution.

  • The last thing we do in our GameScene is export the class that way it can be accessed from another scene if we ever want it to be.

If all have gone well while following this tutorial you should now see this when you run your code in the browser!

 

clip

Conclusion:

  • We set up a Phaser 3 Beta project using a boilerplate.
  • We created a physics sprite with gravity enable.

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