Jump to content

v4 and Tween.js position/scale/pivot issues - any easier fix?


rknDA1337
 Share

Recommended Posts

Recently discovered that there's a v4 of the wonderful PIXI.js. An hour or so of font- & generateTexture-refacturing and I'm in the clear, except for the tweens.

The tweening library that I'm using is Tween.js ( https://github.com/tweenjs/tween.js/ ) which has been working great for me so far. Apparently, in v4 there's been some changes to how the position, scale, pivot and probably some more values are being set, rendering most of my tweens unable to ...tween. Tweening the alpha works fine, as it seems to be unchanged.

According to the v4 source, the affected values all have this comment in common: * Assignment by value since pixi-v4. ( https://github.com/pixijs/pixi.js/blob/dev/src/core/display/DisplayObject.js ), which is what prompted my current, albeit unsatisfactory, solution.

To illustrate I'll show two examples of code, first one that works in v3 but not in v4 and then my current solution.

This code example is no longer able to set the x position in v4:

new TWEEN.Tween(stage.position)
 .to({
  x: value
 }, 500)
 .start();

However, a solution is to use the onUpdate()-function of Tween.js and set the position manually with a temporary object acting as the target.

This code example using onUpdate() works with v4:

var temporaryObject = { x: stage.position.x };

new TWEEN.Tween(temporaryObject)
 .to({
  x: value
 }, 500)
 .onUpdate(function() {
  stage.position.x = this.x;
 })
 .start();

Which is a relief (been a rough day), but it also means that I have a lot of tweens to refactor in a tedious manner. 

My question is if there's a better way to refactor these old tweens that requires less change? I'm not super experienced with the high level of code that's in the source.

Link to comment
Share on other sites

Tween.js works for me with pixi.js v4. Though I use it little bit differently than you:

var sprite = PIXI.Sprite.fromImage("test.png");
stage.addChild(sprite);
createjs.Tween.get(sprite).to({ x:100},500);

Works also with get(sprite.position).

Link to comment
Share on other sites

  • 3 months later...

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

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...