Kuboid

Tweening

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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> 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. 

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.