Jump to content

Multiple animations with ticker


Recommended Posts

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.

Link to post
Share on other sites
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

Link to post
Share on other sites

@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

Link to post
Share on other sites

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

 

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...