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

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.