Building Simple Custom Gravity Effect In Your PIXI Game

 

What we will cover:

  • How to create a simple gravity effect on a sprite in pixi

What we will not cover:
– Advanced gravity
– Other physics properties

To note I am using TypeScript for this project, however it should conform easily to regular written javascript as well. I am also using a custom PIXI project that I use for personal use, so some syntax may need to be adjusted to work for how your project is set up.

Stay tuned for later tutorials where we will cover more advanced custom written physics properties.

Setting Up Our Variables:

  • We begin by defining some variables to hold our information.


private _texture:PIXI.Texture;
private _sprite:PIXI.Sprite;
private _gravityY:number;
private _gravityX:number;

Lets Break This Down:

  • Here we start by declaring the necessary variables we need to begin the project.
  • We declare variables to hold our texture, sprite, and our gravity values for both x and y.

Simple enough right? On to the next part!

Setting Up Our Create Function:

In this section we will set some values to our previously defined variables.


public create() {

this._texture = PIXI.Texture.fromImage('./../assets/basic/button.png');

this._sprite = new PIXI.Sprite(this._texture);
this._sprite.x = this.game.width * 0.5;
this._sprite.y = this.game.height * 0.5;
this._sprite.anchor.x = 0.5;
this._sprite.anchor.y = 0.5;
this.add(this._sprite);
}

 

Let’s Break This Down:

  • First we set our previously defind texture variable to the image that we want in the directory we have saved it in
  • Next we create our sprite from our desired texture, following that we define certain properties of our sprite,
    for this example and with my project build I set it x and y to game width and height * 0.5 which will be directly in  the center of our game. We also set our x and y anchor for our sprite to be centered.

  • Lastly we add this sprite to our game. Once again your project build may be different to add the sprite to the stage it will most likely look something like app.stage.addChild(this._sprite). If you are following the PIXI examples and how they build their projects.

 

Setting Up Our Physics Get Function:

Here we will create a GET function to set up our gravity.


get physics() {
return {
gravity: {
x: this._gravityX,
y: this._gravityY
    }
  }
}

Let’s Break This Down:

  • We defined a GET function and called it physics
  • This function returns an object called gravity
  • Gravity contains both x and y with a value of the variable this._gravityY, this._gravityX.

Now we just make a small adjustment to our previously defined variables.


private _gravityY:number;
private _gravityX:number;

private _gravityY:number = this.physics.gravity.y;
private _gravityX:number = this.physics.gravity.x;

Here we have changed the value of our gravity variables to be equal to what our physics GET function returns.

We also have to add the gravity to our create function!


public create() {

this._texture = PIXI.Texture.fromImage('./../assets/basic/button.png');

this._sprite = new PIXI.Sprite(this._texture);
this._sprite.x = this.game.width * 0.5;
this._sprite.y = this.game.height * 0.5;
this._sprite.anchor.x = 0.5;
this._sprite.anchor.y = 0.5;
this.add(this._sprite);
this._gravityY = 2;

}

You can set the gravity to whatever value you would like here for different results.

 

Setup Update Function:

Now we have to set up our update function to see the gravity effect actually take place.

Once again this is using my custom project build where I already have a predefined update loop, your project may be different or you may have to custom write an update loop.


update() {
this._sprite.y += this._gravityY;
if(this._sprite.y >= this.game.height) {
this.resetSprite();
  }
}
  • Here we set our variable this._sprite to increment its y position by the value set in this._gravityY.
  • We then have an IF statement declaring if our sprites y is greater or equal to our game height to call function resetSprite.

resetSprite() {
this._sprite.y = this.game.height * 0.5;
}
  • This function is simply resetting the sprites y to its original position declared in our create function.

If all was done correctly you should see something like this in your game!

 

Conclusion:

  • We learned how to setup and structure our project to use custom gravity effect
  • We implemented the custom gravity effect to see desired effect.

Thank you very much for reading. Please stay tuned for upcoming tutorials on how to write simple custom physics for your games.


Twitter

Error code 89: Invalid or expired token.

Stay Updated