Kuboid Posted July 23, 2013 Share Posted July 23, 2013 Hello there, I searched the net for a class to easily tween a PIXI.Sprite but didnt find - So I wrote something for this case. Example: http://kuboid.net/games/tween/ Download:http://kuboid.net/games/tween/tween.zip Usage:// Create a Tween to make your Sprite move to position.x = 100 within 60 frames, starting instantlyvar tween = new Tween(sprite, "position.x", 100, 60, true);// Optional add bouncing, easing..tween.easing = Tween.outElastic;// Optional add a callbacktween.setOnComplete(alert, "done"); You also can also create a queue for multiple Tweens:// Difference in creating Tweens: last parameter must be set to false.var tween1 = new Tween(sprite, "position.x", 100, 60, false);var tween2 = new Tween(sprite, "position.x", 0, 60, false);// Just pass an Array with your tweens.new ChainedTween([tween1, tween2]); If you find this useful to use in a PIXI.js-project, feedback would be awesome! ponk and Rex Rhino 2 Quote Link to comment Share on other sites More sharing options...
enpu Posted July 23, 2013 Share Posted July 23, 2013 Nice!Im using this one with Impact:https://github.com/nefD/impact-tween P.Uri.Tanner 1 Quote Link to comment Share on other sites More sharing options...
alex_h Posted July 23, 2013 Share Posted July 23, 2013 I've been using this one and found it really nice: https://github.com/sole/tween.js/ although I had to add my own pause tweens function to it. ponk 1 Quote Link to comment Share on other sites More sharing options...
P.Uri.Tanner Posted July 23, 2013 Share Posted July 23, 2013 i have used the greensock animation library (has a tween component) http://www.greensock.com/gsap-js/. It's animation feature is really powerful - but i disliked the API. Chris and skeddles 2 Quote Link to comment Share on other sites More sharing options...
Mat Groves Posted July 23, 2013 Share Posted July 23, 2013 i have used the greensock animation library (has a tween component) http://www.greensock.com/gsap-js/. It's animation feature is really powerful - but i disliked the API. that one pretty much all of my html sites / games have used greensock tweening in some way. Its rad! xdiepx 1 Quote Link to comment Share on other sites More sharing options...
rich Posted July 24, 2013 Share Posted July 24, 2013 Most ex-Flash devs will use Greensock, although I'm still not a fan of the magic object syntax approach I use a heavily customised version of Sole's tweenjs. Quote Link to comment Share on other sites More sharing options...
sureshvs Posted July 25, 2013 Share Posted July 25, 2013 How did you get Greensock to work with pixi? I've used it with Kinetic JS without any problems, but I can't get it to work with Pixi. I've set a very simple timeline, but it doesn't update.var t1 = new TimelineMax({onUpdate:stageUpdate, onUpdateScope:stage});t1.to(bunny, 2, {x:400}); //if I use position.x instead, then nothing renders on screen I also tried to add a method to the prototype to use that in t1.to, but still nothing.PIXI.Sprite.prototype.setX = function (vNewX) { this.position.x = vNewX;}...t1.to(bunny, 2, {setX:400});Any ideas? Here's the code, based on the initial bunny example<!DOCTYPE HTML><html><head> <script src="pixi.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script></head><body> <script> var stage = new PIXI.Stage(0xFFFFFF, true); var renderer = PIXI.autoDetectRenderer(1200, 500); renderer.view.style.display = "block"; document.body.appendChild(renderer.view); requestAnimFrame( animate ); var texture = PIXI.Texture.fromImage("bunny.jpg"); var bunny = new PIXI.Sprite(texture); bunny.position.x = 20; bunny.position.y = 15; stage.addChild(bunny); //Setting up a greensock timeline var t1 = new TimelineMax({onUpdate:animate, onUpdateScope:stage}); t1.to(bunny, 2, {x:400}); function animate() { requestAnimFrame( animate ); renderer.render(stage); } </script> </body></html> Quote Link to comment Share on other sites More sharing options...
Mat Groves Posted July 25, 2013 Share Posted July 25, 2013 Hello! this wont work:t1.to(bunny, 2, {x:400}); as x is not a property of bunny. You need to tween the position: t1.to(bunny.position, 2, {x:400}); hope that helps! GourmetGorilla 1 Quote Link to comment Share on other sites More sharing options...
sureshvs Posted July 25, 2013 Share Posted July 25, 2013 Wow, thanks!!! It works! I had tried t1.to(bunny, 2, {position.x:400}) , but didn't think of doing what you suggested. Thank you again. And my apologies to the OP for digressing. Quote Link to comment Share on other sites More sharing options...
cristianduro Posted July 26, 2013 Share Posted July 26, 2013 Hello! this wont work:t1.to(bunny, 2, {x:400}); as x is not a property of bunny. You need to tween the position: t1.to(bunny.position, 2, {x:400}); hope that helps! Great! I was having the same issues. After some test though...Now I need to use TweenMax property 'scaleX'. I tried this without luck:TweenMax.to(clicked_tile.scale.x, 0.5, {scaleX:2});TweenMax.to(clicked_tile.scale, 0.5, {scaleX:2, scaleY:2, ease:"Linear.easeOut"});Any suggestions? Thanks in advice, Pixi is absolutely amazing! Cristian. Quote Link to comment Share on other sites More sharing options...
rich Posted July 26, 2013 Share Posted July 26, 2013 Just do:TweenMax.to(clicked_tile.scale, 0.5, {x:2, y:2, ease:"Linear.easeOut"}); Quote Link to comment Share on other sites More sharing options...
IvanK Posted July 27, 2013 Share Posted July 27, 2013 Hello,I use my own tweener, which is a port of "caurina Tweener". It is very fast. Here it is: http://tweener.ivank.net/ ponk 1 Quote Link to comment Share on other sites More sharing options...
Ousaf Posted February 7, 2015 Share Posted February 7, 2015 Looking very great going to test with pixi.js Quote Link to comment Share on other sites More sharing options...
Marwane2185 Posted April 9, 2015 Share Posted April 9, 2015 Hi, Thanks for the file, it really help.Can you please provide the definition file d.ts for tween.js in order to be used in typescript modules ? Thanks again Quote Link to comment Share on other sites More sharing options...
GourmetGorilla Posted May 19, 2015 Share Posted May 19, 2015 So, a tween usually is triggered, it runs for it's duration and stops. but how do you tie a tween to the moving y position of a pixi.point tied to the mousescroll for instance? Not that it's triggered and executes till it's complete, but that the tween moves with the y of the mousescroll. Let say I have something like: TweenLite.to(element, 2, {scale:1.5, x:10, y:0, alpha:0});I could say if y == 400 run tween but it would just execute and be finished. But I want this tween to run from pixi.point.y 400 to 450, so not use a time element (currently 2sec), but two pixipoint y positions instead. So then if I moved the pixipoint with my mousescroll to 410, 20% of the the tween would run in sync with my mouse scroll, if I moved the mouse back to 400, the tween would reverse back to the beginning, if I moved it to 403, a tiny amount of the tween would happen, etc, etc so the tween events always stay in sync with the mouse scroll Y (pixi,point). Does this make sense? How would I do this? Can I do this with greensock, impact or tween.js ?basically the tween would be constantly updating every 24sec or more, with input from the pixi.point's (mousescroll) Y position and moving in sync with it. 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.