Jump to content

AnimatedSprite + custom ticker - how to update texture


Recommended Posts

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) {

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.


   Iliya Iliev

Link to comment
Share on other sites

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 by ivan.popelyshev
Link to comment
Share on other sites

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();


            //registering PIXI Plugins

            PIXI.Ticker.shared.autoStart = false;
            PIXI.spine.Spine.globalAutoUpdate = false;


            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() {



Edited by IliyaIliev
Link to comment
Share on other sites

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.



Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...