AnimatedSprite + custom ticker - how to update texture

[IliyaIliev]

Hello there, 

   I used to do some basic games in Pixi a couple of years ago and I really enjoyed it. Now I started a new project and am trying to use GSAP ticker to be the only one in my game. That's why I want to animate all the sprites with that ticker - however when I look back at my previous project I can see that I was for some reason able to do this:

let animatedSprite = new PIXI.AnimatedSprite(textures, false);

gsapUpdate(deltaTime) {
   if(animatedSprite.playing) {
       animatedSprite.update(deltaTime);
   }
}

Or something like this.

Now that I try this with the new PIXI - I can't find 'update' as method on the AnimatedSprite class - or for that matter I cannot find anywhere in the documentation or online info on how to update the textures.

Property 'update' does not exist on type 'AnimatedSprite'.

So am I being dumb or really missing something?

Thanks in advance.

Regards,

   Iliya Iliev

[ivan.popelyshev]

Hello and Welcome to the forums!

I dont know how do you guys manage not find it. Its still there: https://github.com/pixijs/pixi.js/blob/dev/packages/sprite-animated/src/AnimatedSprite.ts#L227 

People dont find: "AnimatedSprite.update" , "Text.updateText" and some other things.

Maybe you use TS and you are afraid of "private" field? Use cast to "any" in that case.

Alternatively, copy all the sources of AnimatedSrite and use your own, its supposed to be baseline class, not production stuff. It has no magic, people always need more from their animations.

Alternatively, one guy made it to separate class that can be applied to anything: sprite, mesh, rope, bevcause that's just texture animation. I have it here: https://github.com/gameofbombs/pixi-heaven/blob/master/src/animation/AnimationState.ts , in pixi-heaven plugin. Requires reading pixi-heaven SpriteHeaven sources.

 

Edited March 5, 2020 by ivan.popelyshev

[ivan.popelyshev]

Just in case, here's how to use pixi ticker inside GSAP one: https://pixijs.io/examples/#/gsap3-interaction/gsap3-tick.js

People use this approach because its easy to hack pixi ticker and not gsap

[jonforum]

for gsap i think it 

gsap.ticker.remove(gsap.updateRoot); // remove autoticks

gsap.updateRoot(time);// manually and feed in the time you want

look easy but the name updateRoot was weird !

[IliyaIliev]

10 hours ago, ivan.popelyshev said:

Just in case, here's how to use pixi ticker inside GSAP one: https://pixijs.io/examples/#/gsap3-interaction/gsap3-tick.js

People use this approach because its easy to hack pixi ticker and not gsap

Thanks, Ivan, for the instant reply. I will look later today in the update remarks you provided.

I actually did this, but found out that the Shared ticker should also be stopped as it is on by default and performance is not as good if using gsap simultaneously.

Here is how I do it - let me know if you think it needs improvement:

 public async initGame() {

        if (!this.gameApp) {

            this.gameApp = new PIXI.Application({
                width: window.innerWidth,
                height: window.innerHeight,
                resolution: window.devicePixelRatio || 1,
                sharedTicker: true
            });

            this.renderer = this.gameApp.renderer;

            //giving id to the renderer
            this.renderer.view.id = 'pixi-canvas';

            this.stats = new Stats();
            this.stats.showPanel(0);

            document.body.append(this.gameApp.view);
            document.body.append(this.stats.dom);

            //registering PIXI Plugins
            PixiPlugin.registerPIXI(PIXI);
            gsap.registerPlugin(PixiPlugin);

            PIXI.Ticker.shared.autoStart = false;
            PIXI.spine.Spine.globalAutoUpdate = false;
            PIXI.Ticker.shared.stop();
            PIXI.Ticker.system.stop();

            gsap.ticker.add(this.update.bind(this));

            gsap.ticker.add(() => {
                this.previous_time = this.current_time;
                this.current_time = gsap.ticker.time;
                this.dt = (this.current_time - this.previous_time) * 1000;
            });

        }
    }

    private update() {
        this.stats.begin();
        this.gameApp.renderer.render(this.gameApp.stage);
        this.stats.end();
    }

 

 

Edited March 6, 2020 by IliyaIliev

[ivan.popelyshev]

Yes, that should work. except im not sure if "update" in this case is executed after you set "dt".

[IliyaIliev]

Hello again

      So, yes - basically - turned out it is trully TS just whining about the private method. Thanks, Ivan - I feel quite dumb now :D. But anyways - it will be really nice for if in the documentation under the false param (to not use Shared Ticker)  for AnimatedSprite there is a brief explanation on how to update exactly the texture for the newbies like me.

     Thanks again.

     Have a nice evening.

Regards,

    Iliya