HTML5 build series pt 6. – Final episode

Hello readers!
Unfortunately this will be the last episode for the build series for the HTML5 game. 🙁 Although the game is far finished, I do have to end it. You can see in my posting dates that it took me weeks between each episode. This is caused by multiple factor which one of is being busy at work. I love my day to day job. But because I love it so much I’d also do some over work quite often.

I will not stop writing on my blog! But I just felt I put a bit too much pressure on my self with this build series. I keep pushing myself to work on it even though I do need some rest.
That’s why I will finish this build series now but I feel I owe everyone the implementation of Tweening & Easing in the game. 😀

For the future I will post more small tips and tricks for programming. I already have a few in mind I’d like to point out and explain on my blog. Also I will dev log all games I will create in my spare time and providing all technical information in the dev logs.

---

Implementation Tweening & Easing

As in the last episode I made a few new classes named Tween, Tweener and Easing.
These classes should be duplicated and moved into this project. (Make sure you move them to the exact same folders as in the previous episode. 🙂 )

Make sure the Tweener is set up in Main.js and has been added to the update loop.

Since we made the Tweener in previous episode a static class listening to objects with x and y properties. It is actually very simple to implement! 🙂
All we have to do is change our MoveLeft and MoveRight methods to listen to the tweener instead of moving by itself.

The methods will look like this:

// characters/playerBase.js 
...
import Tweener from '../helpers/tweener.js';

export default class PlayerBase{
    constructor(scene, playerAnimation, xPos, yPos){
        
        this.power = 30; // will move 30 pixels to left/right
        ...
    }
    
    // added ease to be controllable from child classes
    MoveLeft(ease){
        this.desiredPosition = this.player.x - this.power;
        //tweening this player to desiredPosition
        Tweener.startTweenX(this.player, this.desiredPosition, 0.5, ease);
    }
    
    // added ease to be controllable from child classes
    MoveRight(ease){
        this.desiredPosition = this.player.x + this.power;
        //tweening this player to desiredPosition
        Tweener.startTweenX(this.player, this.desiredPosition, 0.5, ease);
    }
    
    update(delta){
        this.player.update(delta);
    }
    
    destroy(){
        this.player.destroy();
    }
}

Now we’ve added easing parameter so the Player.js can say which ease type it likes to use to move. I like the sineOut because it will make it look very smooth.

Code:

// characters/player.js 
...
import Ease from '../helpers/ease.js';

export default class Player extends PlayerBase{
    constructor(scene, playerAnimation, xPos, yPos){
        super(scene, playerAnimation, xPos, yPos);
        this.buttonLeft = new Button(scene, uiAssets.smallPinkButtons);
        this.buttonRight = new Button(scene, uiAssets.smallPinkButtons);
        this.buttonLeft.setPosition(xPos - 75, yPos - 75);
        this.buttonLeft.setText("<");
        var player = this;
        this.buttonLeft.setOnPointerClick(function(){
            player.MoveLeft(Ease.sineOut); // applied ease
        });
        this.buttonRight.setPosition(xPos + 75, yPos - 75);
        this.buttonRight.setText(">");
        this.buttonRight.setOnPointerClick(function(){
            player.MoveRight(Ease.sineOut); // applied ease
        });

        
        this.power = 60; // move 60 pixels to left/right
        ...
    }
    
    ...
}

And now our player moves to the left and right using tweens 🙂

You can play around with which ease type to use. For example the out bounce is also quite fun to use! 😉

End

I hope this short series helped someone getting around with PixiJs!
I will make some more PixiJs related posts in the nearby future, but for now I do need to have some focus on work and getting rest.

I’ve pushed this final episode to the git repository which you can find here: https://github.com/jscotty/html5_buildserie/tree/EP6_FinalEpisode.

I am sad it has to end like this but I hope everyone will understand.
You are always free to send me a message if you have any questions regarding this build series and I will for sure create some more helpful posts in the future!

As always, thank you very much for reading! 😀

Greetings,

-Justin Scott