Multiple animations with ticker

[David Higuita]

Hello, I am developing a game, and in a parte o this I need move and sprite and after some events move many sprites, but using app.tocker.add doesn't work

In a first part I used this code to move a box

 

 

appearBoxOrigin() {
    let counter = 0;
    this.app.ticker.add(() => {
      if (counter === 35) {
        counter = 0;
        this.app.ticker.stop();
        this.addInteractiveImagesToOriginBox();
        this.appearBoxHighLow();
      } else {
        this.Boxes.origin.sprite.x -= 10;
        counter += 1;
      }
    });
  }

Afer I used this another code to move another sprite, but code doesn't work, doesn't show error, only doesn't run, I don't know if is because I use stop function to stop the animation. I'd like know How can I use ticker to make animation, how can I start and stop, and really I don't understand how make animations, so I use this counter but making essay and error but I'm not sure.
 

this.app.ticker.add(() => {
      if (counter === 0) this.app.ticker.start();
      if (counter === 35) {
        counter = 0;
        this.app.ticker.stop();
        this.appearLoftSoftBoxes();
      } else {
        this.Boxes.targetHigh.sprite.x -= 10;
        this.Boxes.targetLow.sprite.x -= 10;
        /* this.interactiveImages.map((image, index) => {
          this.interactiveImages[index].setPosition(
            { x: this.interactiveImages[index].x - 1, y: this.interactiveImages[index].y },
          );
          return null;
        }); */
        counter += 1;
      }
      console.log('ticker move images');
    });

 

But my variable this.interactiveImages (a class) seem like render again and show me an error on the constructor of these variables.

[ivan.popelyshev]

var myTween = () => {
   if (counter == 0) this.app.ticker.remove(myTween);
   //...
}

this.app.ticker.add(myTween, PIXI.UPDATE_PRIORITY.NORMAL);

You can omit update priority, its NORMAL by default, i just want you to know that you can specify order of animation handlers.

Please clone pixijs from github and explore it when you find something you dont understand in docs. Sources are your best friend. For example, Application: https://github.com/pixijs/pixi.js/blob/dev/src/core/Application.js

[David Higuita]

@ivan.popelyshev  Thank you for the answer, I'll test it on a moment, so I have reviewed the source, but I don't understand somethings but is great.

[David Higuita]

@ivan.popelyshev  I made what you tell me and if I want when finish current animation (myTween) start another animation doesn't start, and I don't know if is for the remove, and I have tried removing that function and only call another animation and it fails.

 

initFrogAnimation() {
    let counter = 0;
    let frames = 0;
    const animation = () => {
      if (frames === 12) {
        this.app.ticker.remove(animation);
        this.moveFrog();
      }
      if (counter === 20 && frames < 13) {
        counter = 0;
        frames += 1;
        this.Frog.choose(frames);
      } else {
        counter += 1;
      }
    };
    this.app.ticker.add(animation, Pixi.UPDATE_PRIORITY.NORMAL);
  }

  moveFrog() {
    let counter = 0;
    let motion = 0;
    const animation = () => {
      if (motion === 20) {
        this.app.ticker.remove(animation);
      } else if (counter === 5) {
        this.Frog.sprite.x -= 5;
        this.Frog.sprite.y += 1;
        counter = 0;
        motion += 1;
      } else {
        counter += 1;
      }
    };
    this.app.ticker.add(animation, Pixi.UPDATE_PRIORITY.NORMAL);
  }

 

What is wrong? I have readed source but I can't solve my questions. Thanks again

[ivan.popelyshev]

this should work.If it doesnt, try "let" instead of const may be?

[David Higuita]

I changed const to let and doesnt work, I don't know why

Thanks for help

[ivan.popelyshev]

It looks correct. I cant debug it, well, because, i dont have your demo

[David Higuita]

Perfect, so like this is a thing of the job I can't share it, but I don't know if you know where is an example with one of these cases to watch how are many animations on an app.
I'll make a similar demo like the job code and share it with you. Thank you.

[David Higuita]

@ivan.popelyshev

Thanks for all, I tried with next code and worked fine, but in my game structure doesn't work fine.I want to ask you, What is the best way to make the game using classes?
I mean, separate sprites by classes and that each one get on its constructor another sprites to use them and apply on them animations.

 

import * as Pixi from 'pixi.js';
import './styles.scss';

const initConfig = {
  antialias: false,
  transparent: true,
  resolution: 1,
};

const app = new Pixi.Application(window.innerWidth, window.innerHeight, initConfig);
document.querySelector('.pixi-container').appendChild(app.view);

// sprites
let Frog;

const rotateAnimation = () => {
  let counter = 0;
  let motion = 0;
  const animation = () => {
    if (motion === 25) {
      app.ticker.remove(animation);
    } else if (counter === 5) {
      Frog.rotation += 0.1 * 0.005;
      motion += 1;
      counter = 0;
    } else {
      counter += 1;
    }
  };
  app.ticker.add(animation, Pixi.UPDATE_PRIORITY.NORMAL);
};

const randomMotion = () => {
  let counter = 0;
  let motion = 0;
  const animation = () => {
    if (motion === 20) {
      app.ticker.remove(animation);
      rotateAnimation();
    } else if (counter === 5) {
      Frog.x += 10;
      Frog.y += 5;
      motion += 1;
      counter = 0;
    } else {
      counter += 1;
    }
  };
  app.ticker.add(animation, Pixi.UPDATE_PRIORITY.NORMAL);
};

Pixi.loader
  .add('frog', './assets/Images/frog.jpg')
  .load(() => {
    Frog = new Pixi.Sprite(Pixi.loader.resources.frog.texture);
    app.stage.addChild(Frog);
    app.renderer.render(app.stage);

    // animations
    randomMotion();
  });

 

[ivan.popelyshev]

Are there any errors in console?

[David Higuita]

With this new structure works fine.

I changed my structure, and now is working, now I must solve how can I add to an animation fileset, so that was a real problem

Thank you

[ivan.popelyshev]

I advice you to use https://greensock.com/1-20-0 , however i dont know how to make it work with pixi ticker, it works in it sown independent loop, I havent look into it yet.