Shri May 18th, 2014 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
OkieDokie May 18th, 2014 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 May 18th, 2014 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 May 19th, 2014 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 May 19th, 2014 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 May 20th, 2014 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 May 20th, 2014 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 May 21st, 2014 Hi
it's looking very good. I will try to do the vec2 thing tonight
tijuinem October 27th, 2014 very interesting. thks for sharing
rambo October 29th, 2014 yes, thank you. I hadnt seen this before, it will be useful! What happened to the vec2 optimization? Is it necessary anyway?