Easing Behavior Demo
Shri

All,

 

I put together a little demo of easing behavior for wade.

Not sure why this type of motion isn't built into the engine already ?

Is it too resource intensive for mobile apps ?

Maybe it is and I have missed it ?

 

This uses the  new wade 1.2 engine.
You will have to modify the html file to point to wherever you are getting the wade engine from.
Besides modifying the html, it should run out of the box.

This is based on the formulas of Robert Penner. Please read the notice at tha bottom of the

easing.js file if you plan on reuseing the code.

 

There are lots of other easing motion routines. But most can be implemented by changing the

values of the exponents in the exponential motion routines.

 

If you set the x power and the y power to different values, you get some pretty cool swooping motion.

 

Not sure about the performance in an actual game, seems pretty math

intensive, but the demo runs smoothly.

 

anyway, enjoy

 

Attached Files

All 9 Comments
OkieDokie

Wow, really cool.

 

I am happy that there you make these behaviors that we can use so easily. Thank you!

 

I have one question: can we combine two (or much more) behaviors? For example this plus the slider behavior that you posted some days ago? How can we do that, do we have to merge the js files?

Gio

Nice job there Shri. I'm sure this is going to be useful to lots of people... I would like to add it to the Market, in the same category as the minimap, if that's OK with you.

 

I only had a quick look at the code (I'll have a closer look tomorrow), I thought it may be a little bit more concise if you used wade.vec2 for vector operations. Other than that, it looks really good, it's very clear and easy to follow.

 

OkieDokie: Yes, you can have more behaviors per object. Just use an array of behaviors in your SceneObject constructor like this:

var myObject = new SceneObject(mySprite, [Behavior1, Behavior2]);
Shri

Gio,

 

It's ok with me to put the easing behavior in the Market. I already included the MIT license stuff in the header of the easing.js file.

I 'borrowed' the equations from the work of robert penner. His bsd license is at the bottom of the easing.js file.

Not sure if/how  that effects putting the code into your Market ?

 

There are at least a dozen other easing motion routines, i.e. easeInSine, easeOutSine, etc.

I'm not sure if you think more should be added ?

Once you can program one easing function, others just involve moving some variables around if you have the equations as a reference.

 

 

I would be interested in any optimization you could make with vec2.

Please feel free to 'chilify' the demo

 

cheers,

Shri

hermes

Hey

 

This looks useful! I can think of several places where I'd like to use it.

 

Of course if you can add more functions, then it's better, giving users more options, provided that it remains easy to use for those users that don't want to spend a lot of time to think about all the options. So if there are default values for everything, that's ideal.

 

Another improvement I would like to suggest, is the options to pass an (optional) callback as the last parameter of those functions. So when the motion is complete, if a callback was specified, it gets called. This way you could "chain" several motions and it'd be even more useful.

 

I think you are doing a really good thing sharing these behaviors with us Shri, so thank you.

Gio

I don't think the demo needs chillifying, it's nice and simple as it is, it makes it clear how you are supposed to set up and interact with the behavior. Adding more elements may be distracting.

 

BSD licensing shouldn't be a problem - I understand the license applies to the source code only, so keeping that comment in the source should be enough.

 

I agree with hermes about callbacks. I am unable to find some time to add them myself (with the vec2 stuff) in the immediate future, but I'd like to encourage some contributions :)

Shri

All,

 

Made some minor modifications to the easing behavior.

- the selected easing is now in red on the menu

- added public method setCompletionCallback - call this before you call easeTo. On move completion, this callback function is called by the easing behavior. In the demo, if you select exponentialInOut and run with the debug window open, you should see a console message  "easing completion callback into app " on motion completion.

- added public method resetCompletionCallback - helper function to reset the easing behavior completion callback to null

- included a easing.pdf file in the zip to provide a brief explanation of what is going on

 

The behavior still needs to be optimized via the vector 2 stuff.

 

I have pulled down the zip file posted above and included it here so there is no confusion.

 

cheers

Elliot
Hi

it's looking very good. I will try to do the vec2 thing tonight
tijuinem

very interesting. thks for sharing

rambo

yes, thank you. I hadnt seen this before, it will be useful! What happened to the vec2 optimization? Is it necessary anyway?

Post a reply
Add Attachment
Submit Reply
Login to Reply