rknDA1337 Posted August 3, 2016 Share Posted August 3, 2016 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. Quote Link to comment Share on other sites More sharing options...
Exca Posted August 9, 2016 Share Posted August 9, 2016 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). Quote Link to comment Share on other sites More sharing options...
rknDA1337 Posted August 9, 2016 Author Share Posted August 9, 2016 That's CreateJS' TweenJS, I don't think it's the exact same (but similar) as the Tween.js ( https://github.com/tweenjs/tween.js/ ) I've been running! But thanks for the info, it's good to know that the alternative still works fine. Perhaps it's an issue with Tween.js. Quote Link to comment Share on other sites More sharing options...
Exca Posted August 9, 2016 Share Posted August 9, 2016 Oh, my bad. I assumed it was the same as createjs tweenjs. Quote Link to comment Share on other sites More sharing options...
rknDA1337 Posted August 9, 2016 Author Share Posted August 9, 2016 Not a problem, your post provided valuable information! Perhaps the wise choice would be to switch to the CreateJS' version. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted August 9, 2016 Share Posted August 9, 2016 createjs version works for me in v4 Quote Link to comment Share on other sites More sharing options...
labrat.mobi Posted November 21, 2016 Share Posted November 21, 2016 tweenjs/Tween.js doesn't play well with v4, any ideas? created github issue, https://github.com/pixijs/pixi.js/issues/3339 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.