wijesijp

How to tween with Pixi

Recommended Posts

I am new to Pixi development. 

I am trying to tween a image. But it does not seems to work. 

The image is getting loaded and there are no errors. But the card image does not move.

Can anyone point out what I am doing wrong?

 

var app = new PIXI.Application({
  width: 1024,
  height: 800,
  antialias: true,
  backgroundColor: 0xced6e2
});

var cardImg;
var gameScene;
var position;
var tween;

document.body.appendChild(app.view);

function setup() {
  cardImg = new PIXI.Sprite(
    PIXI.loader.resources["images/Hearts_Q.png"].texture
  );
  cardImg.scale.set(0.5);

  gameScene.addChild(cardImg);

  position = { x: 0, y: 0, rotation: 0 };
  tween = new TWEEN.Tween(position)
    .to({ x: 700, y: 200, rotation: 359 }, 2000)
    .delay(1000)
    .easing(TWEEN.Easing.Elastic.InOut)
    .onUpdate(update);

  tween.start();

  app.ticker.add(dt => gameLoop(dt));
}

function init() {
  gameScene = new PIXI.Container();

  app.stage.addChild(gameScene);

  PIXI.loader.add("images/Hearts_Q.png").load(setup);
}

function gameLoop() {
  var dt = app.ticker.elapsedMS / 1000;

  var result = TWEEN.update(app.ticker.elapsedMS);
}

function update() {
  cardImg.position.set(position.x, position.y);
}

init();

 

Share this post


Link to post
Share on other sites
5 hours ago, wijesijp said:

 

Is there a better one to use with Pixi?

on my side i use, GSAP
and you also have a super community work with PIXI.
So if you work with this tween engine, you will get a lot of more tips and help on this forum for start with the API.

https://greensock.com/forums/topic/18391-mouse-intelligent-focus-helper/?tab=comments#comment-85085

It also free for the light libs.

Search tag: pixi

https://greensock.com/forums/tags/pixi/

Share this post


Link to post
Share on other sites
7 hours ago, ivan.popelyshev said:

the library isfine. 

What is "position.x" in the update? There's no such variable :) Check your js

it is declared at the top

var position;

Then;

position = { x: 0, y: 0, rotation: 0 };

  tween = new TWEEN.Tween(position)
    .to({ x: 700, y: 200, rotation: 359 }, 2000)
    .delay(1000)
    .easing(TWEEN.Easing.Elastic.InOut)
    .onUpdate(update);

 

Share this post


Link to post
Share on other sites

I don't see you update TweenJS in your code, most likely your problem.  See their github, in the update loop - 

  TWEEN.update(time);

GSAP runs on its own ticker, Tweenjs doesn't, which is preferable is up for debate.  Also no need to tween a plain object and then set the sprites position, pixi accesses x,y with a getter so you can just tween a sprite directly. Or otherwise you could just tween mySprite.position 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.