How to tween with Pixi

[wijesijp]

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

 

[ivan.popelyshev]

which library do you use? Unfortunately, by default, Pixi uses radians, not grads. you have to multiply it by Math.PI/180

[wijesijp]

I tried the library here

https://github.com/tweenjs/tween.js/

Is there a better one to use with Pixi?

The problem is I am not sure how to use the library within pixi. I noticed the my "update" function does not get a call.

Also the position variable does not get updated.

[ivan.popelyshev]

the library isfine. 

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

[jonforum]

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/

[wijesijp]

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

 

[Owlzy]

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 

[ivan.popelyshev]

he calls it in gameloop() function. Can you remove "/1000" from it? also, try make a fiddle, that way i wont have to use telepathy to help you.

[wijesijp]

i add the project to fiddle

https://jsfiddle.net/wijesijp/85xavjrs/10/

I remove the image add a rectangle to the code.

I expected it to move but it is not moving. There are no errors on the console out also.

Can you please advice how to fix this issue?

 

Found what was wrong, i was passing elapsedMS to update function. I should have set the time.

[jonforum]

https://codepen.io/djmisterjon/pen/BPwpvq?editors=0010