Sign in to follow this  
David Higuita

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.

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

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.

Share this post


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

 

Share this post


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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.