Jump to content

Animating actions using the ticker


Recommended Posts

I have trouble understanding how to correctly animate my game using the ticker. I created a black bar which I would like to change it's size when a method is called, this is how the code:

class HitBar extends PIXI.Sprite {
    private bar = new PIXI.Sprite(PIXI.Texture.WHITE);
    private cellWidth: number;
    private radius: number;

    constructor(cellWidth: number, cellHeight: number) {
        super();
        PIXI.Ticker.shared.add(this.changeSize());

        this.cellWidth = cellWidth;
        this.bar.tint = 0x000000;
        this.bar.height = cellHeight;

        this.addChild(this.bar);
        this.setRadius(1);
    }

    public setRadius(r: number) {
        this.radius = r;
    }

    private changeSize() {
        const rate = 1 / 10;
        var completed = 0;
        var currRad = this.radius;
        return () => {
            if (currRad == this.radius)
                return;

            completed += rate;
            var r: number;
            if (completed >= 1) { // >= to avoid floating point problems
                r = this.radius;
                completed = 0;
                currRad = r;
            }
            else {
                r = currRad + completed * (this.radius - currRad);
            }

            this.bar.width = this.cellWidth * 2 * r;
        }
    }
}

As you can see the ticker continually runs the function inside changeSize and when setRadius is invoked it will start working.

What I am looking forward is to have a function which will activate an animation but it seems to me that my design is bad, mostly because every animation would require adding multiple members to the class.

Link to post
Share on other sites

PixiJS doesnt have animation manager on its own , and pushing all anims to ticker is good only if there are few ) you have to remove them too, right?  And somehow track if element was removed from stage and you have to stop animation...

If you have no idea how to make animation manager, you can use GSAP, there are examples: https://pixijs.io/examples/#/gsap3-interaction/gsap3-basic.js

However, nor PixiJS nor GSAP have a thing that tracks whether animation item was removed from stage, you have to do it no your own.

Edited by ivan.popelyshev
Link to post
Share on other sites
2 hours ago, ivan.popelyshev said:

PixiJS doesnt have animation manager on its own , and pushing all anims to ticker is good only if there are few ) you have to remove them too, right?  And somehow track if element was removed from stage and you have to stop animation...

If you have no idea how to make animation manager, you can use GSAP, there are examples: https://pixijs.io/examples/#/gsap3-interaction/gsap3-basic.js

However, nor PixiJS nor GSAP have a thing that tracks whether animation item was removed from stage, you have to do it no your own.

thanks, that's exactly what I needed.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...