Forums » Code » Tween plugin

I've created a plugin which allows you to assign tweens to entities. If you're familiar with flash, you'll know exactly what these are. Basically, a tween allows you to define a set of properties and target values for those properties as well as a duration, and the tween takes care of animating those properties over the period of time you specified. With this plugin, you can assign any number of tweens to an entity, each modifying any number of numeric properties of that entity. You can also set a range of options such as looping and loop behavior, delay, and easing (over 30 easing functions included). You can also Pause, resume and stop individual tweens or all tweens for an entity, as well as chain tweens to occur one after the other.

I tried to be pretty detailed in the docs, but as of yet, I haven't put together a nice demo.

Link: https://github.com/nefD/impact-tween

Looks fantastic nefD! Looking forward to trying it out. This plugin really expands the utility of Impact.

I just forked nefD's tween plugin and merged in the code from the one I created (http://impactjs.com/forums/impact-engine/addition-ideas-for-impact-plugin-requests/page/1#post824) . It's now available on githhub: http://github.com/xdissent/impact-tween

My modifications add Weltmeister support in the form of a tween editor and various support entities. Check it out if you get a chance!

Hi and thanx for the great plugin!
Is it possible to change current animation for an entity by using a tween?
I was trying to write smth like this:

var myTween = this.getHero().tween( {currentAnim: {anims: hit}}, 5.0);
myTween.start();

But it does not work. Thank you!!

Hi there, sorry for bumping an old thread, but I just wanted to post an answer to the last question.
You can't create a tween that changes the current animation, because Tween works with numeric values only (also, what would a tween do with animations?).

Thx for the plugin. I've tried to use one of the tween effect (EasyOut) but without success getting a flip effect. eg. card flip like shown in below link:
http://files.riacodes.com/flash_3d-rotation/

I see there is a flip property in the currentAnim object which I can set to true or false but it just displayed it instantly . The bounce seems to work nicely. Any help is appreciated!

Nice work, thanks !

how do you use this?

myEntity.tween( {pos: {x: 30, y: 100}}, 2.5).start();

does nothing when i try it on my games init function.
is there any example around?
using this
https://github.com/xdissent/impact-tween

I want to post something because xdissent's wonderful tween plug had me confused for a minute about doing this particularly important item. Here's how you tell your entity to start a tween and then run another function from the same entity onComplete.

this.tween( { var : value }, duration, { onComplete :  function(){ this.function(); }.bind(this) }  ).start();

hope this helps someone else ;)

This is Brilliant. Thank you.

Like Mimik, I cant get this to work at all.

Nothing happens to an entity when calling a tween inside its init function.

Weltmeister integration throws up a: "Failed to load resource: the server responded with a status of 404 (Not Found)" because its looking for a file called weltmeister.css file in a directory called ...lib/plugins/tweening.

Creating this directory and putting the weltmeister.css file in there makes it work, but weltmeister then throws an error when saving the level.

Please can anyone who is using this potentially great little plugin tell me how they are doing it?

:-)

yeah i got your back bro :D
i got it working.

here's some really messy code but you get it :D

//Inside your Entity

// in your update
update: function() {

	// Do some logic that kicks of the tween once.
    if(somethingStartsYourTween && !this.TweenOnce){
      this.Tweenstuff();
      // i only want to run it once.
      this.this.TweenOnce = true;
    }
 },

// I just made a function for it.
Tweenstuff: function (){
	this.tween({ 
		pos: {x:340, y:80}}, 	// the new position
		0.75, {					// the time for tween
			easing:ig.Tween.Easing.Sinusoidal.EaseOut,	// the easing 
			delay:0, 									// the delay
			onComplete:function(){ 						// callback
				console.log('TWEEN DONE'); 				
				console.log(this.pos.x + ' ' + this.pos.y); 
		}.bind(this)
	}).start();		// yeah start now
},

Thanks for the reply Mimik!

this.this.TweenOnce = true;

Is this right? I got an error.

Running your code... the entity still doesnt do anything. I checked for Tweenstuff being called... it is getting called but im not getting the "TWEEN DONE" from the callback so im not sure if the tween is starting.

:-/

this.this must be some error sorry.

this.TweenOnce = true;

is just a entity variable i sat to run it once.

Did you require the tween plugin in your main?
show some code

Ok, calling this.parent() at the end of the tweened entity update function makes it work.

Should this.parent() be used on an entity being tweened? I thought that just updated the entity based on its physics properties.

Apologies if im being dumb - im new at this :-)

its just a Regular Entity update function.
So you just updates the data in the tween.


Check this out.
http://impactjs.com/documentation/class-reference/entity

Works now