thomf00
|
|
« on: January 02, 2017, 08:03:38 PM » |
|
I'm thinking about writing some software to make working with easing functions a little sexier. The useful software I can find online is all geared toward webpages and CSS. Mine would be focused on game development and maybe animation, and allow you to export C#, javascript, etc, and whatever else people want. A usual use case is that you want to transition position or alpha, so one usually start with a linear transition. (LERP in Unity) Then to spice it up I usually find a easing function that fits the feel that I want. Then what would be great if is if I could edit the splines using a GUI and export that. For those not familiar, an easing function looks like this. function(t:Number, b:Number, c:Number, d:Number):Number { t/=d; return b+c*(t); }
- t = current Time
- b = Beginning value
- c = total Change in value
- d = total Duration
Another use case... Say you used an ease-in and then your designer comes along and decides you REALLY need a bounce at the end of the ease. It would be nice you could load up the original ease-in in the editor, add the bounce to the end of the first ease, and then export that as compound function, no extra callback/complete handler required. Anyways, I hope to use this thread as a software devlog. Would love some early feedback!
|
|
« Last Edit: January 02, 2017, 11:33:49 PM by thomf00 »
|
Logged
|
|
|
|
snackycactus
|
|
« Reply #1 on: January 02, 2017, 08:28:13 PM » |
|
Sweet! *Follows this threat* :D If it would be helpful, here's the easing parabola I made for Blood Moon. It only uses x and y (takes in elapsed time, and outputs distance %) so for me it was easier to grasp and implement. // made this a variable so I could easily change how strong the easing curve is public float ease = 0.01f; // call this to get the appropriate easing float ThrowEase(float timePercent) { if (!toPlayer) return -1 * Mathf.Pow (ease, timePercent) + 1; return 1 / (Mathf.Pow (ease, timePercent - 1)); }
// Here's the snippet of code that calls it: elapsedTime += Time.deltaTime; timePercent = elapsedTime / timeToApex; ThrowEase(timePercent);
Good luck with this thread, I'm excited to see what you do!
|
|
|
Logged
|
|
|
|
pmprog
|
|
« Reply #2 on: January 03, 2017, 07:54:43 AM » |
|
Sounds pretty neat
|
|
|
Logged
|
|
|
|
thomf00
|
|
« Reply #3 on: January 03, 2017, 11:30:44 AM » |
|
I received some great feedback from Alec McEachran and Robert Penner on twitter which matched the style that @snackycactus showed. The gist of the feedback... "Don't use four parameters, just use one!" Penner linked Zeh Fernando's AS3 class which has easing functions that look like this. public static function quadIn(t:Number):Number { return t*t; }
Pretty straightforward! This also caught my eye. public static function combined(t:Number, __equations:Array):Number { var l:int = __equations.length; var eq:int = int(t * l); if (eq == __equations.length) eq = l - 1; //trace (t, eq, t * l - eq); return Number(__equations[eq](t * l - eq)); }
Which looks like a uniform way to link them together. So the real questions now are, does this get the job done? Should I support both t,b,c,d and just t for export options? Is customizing the eases or having non uniform combinations in a visual editor going to make your game rock? I'm not sure... Anyways I got a hello world mac window up and running with a curve and two control points. No interaction yet...
|
|
|
Logged
|
|
|
|
thomf00
|
|
« Reply #4 on: January 04, 2017, 12:15:27 PM » |
|
Some gif-able progress! The library I'm using, NME, has only quadratic curve drawing so next step will have to be writing a cubic curve drawer, that's why I can only move the left handle. I started trying to add the control interaction with the built in 'addEventHandler' stuff but it seemed to get messy quickly. So I reverted and took some time to make a basic Entity Component System which made adding the behavior much cleaner. The project itself now has a dependency on minject, a dependency injection framework I used in past projects, but the mini ECS I created does not have the dependency, keeping the ECS very simple and clean for now. It currently looks like this.
|
|
|
Logged
|
|
|
|
snackycactus
|
|
« Reply #5 on: January 08, 2017, 04:56:53 PM » |
|
Hey, this looks great!
I had another thought: It would be very nice if this could give sin wave equations as well- Im not sure how you'd have to visually represent them as far as anchor points go, but it's just similar enough to maybe make since to do, while different enough to be helpful to folks.
Keep up the great work!
|
|
|
Logged
|
|
|
|
thomf00
|
|
« Reply #6 on: March 03, 2017, 06:35:15 PM » |
|
Some progress! * New Name! (Ease Factory) * Cubic Bezier drawing * Code generation & copying * Fresh coat of alpha blue paint
|
|
|
Logged
|
|
|
|
Endurion
|
|
« Reply #7 on: March 03, 2017, 10:22:53 PM » |
|
Nice! Feels like some code I wrote in C++ whence I called them math::Iterators. They have the same parameters and can also be chained.
Ideas for ease-lets: Single bounce, Slowing to target, accelerating to target, single sine swing (+ and -), null (stay at a certain value over the given time)
|
|
|
Logged
|
|
|
|
thomf00
|
|
« Reply #8 on: March 06, 2017, 10:51:47 AM » |
|
Good ideas! Thanks Endurion!
|
|
|
Logged
|
|
|
|
thomf00
|
|
« Reply #9 on: March 07, 2017, 01:04:52 PM » |
|
So I think it's time to kill it! The major value I think a tool like this had is generating custom curves that you could use in your game and/or easing library. One of the best tools I could find online for this was http://cubic-bezier.com/#.17,.67,.72,.33. The major problem with this is that what it was exporting was purely CSS, which the browser somehow magically turned into an ease. I had thought that what was under the browser's hood was fairly close to a cubic bezier equation. It turns out this 4 point ease function is a lot more complex! GORY DETAILS... The major difference between a cubic bezier curve and this was that it was allowing you to change the X coordinate, or shall I say the T coordinate of the two control points. As soon as you allow someone to change more than just the Y values it changes the equation from a 1 liner to a 60+ liner. So the good news... Someone's already published a nice open source version of the code that does this. So you can actually use one of these online tools to make your own ease and then use his library, or port it. So I ported a version of it for haxe. So for now I think I'm done working on the Easing Editor. If you think me adding more to the Easing Editor would be worthwhile please let me know what you think would make it unique. One major thing I could do is make an ease combinations visual editor, but for now I'm a little unsure how much value this would add. Well, if you use haxe, enjoy the port! https://github.com/thomasuster/cubic-bezier
|
|
|
Logged
|
|
|
|
bauer
Level 1
Codes games & makes music
|
|
« Reply #10 on: March 16, 2017, 02:51:21 AM » |
|
This wanted to say that this is an awesome tool, great job!
|
|
|
Logged
|
|
|
|
thomf00
|
|
« Reply #11 on: March 16, 2017, 08:15:54 AM » |
|
Thanks man! I think the biggest problem is letting people know how to do it and where to find it, please share (tweet, FB, whatevs). Would hate for someone to have to rediscover the wheel like I did.
|
|
|
Logged
|
|
|
|
Polly
Level 6
|
|
« Reply #12 on: March 16, 2017, 09:03:27 AM » |
|
In case someone needs a better performing solution, i suggest forcing your curve to be linear on the x-axis .. at which point you don't have to estimate T from X anymore ( since T and X are equal ). Autodesk Maya uses this approach by default for animations ( referred to as a "Non Weighted" curves ). Basically what you need to do is ensure that the x-coordinate of tangent A is at 1/3 between A-and-B while tangent B is at 2/3 between A-and-B.
|
|
|
Logged
|
|
|
|
thomf00
|
|
« Reply #13 on: March 16, 2017, 11:37:06 AM » |
|
@Polly So locking the x values in my original program would allow it to be a one liner, but that didn't seem super useful for me (Maybe I'm wrong?). Or are you talking about where like... If I move control point x right 1 pixel, control point 2 would move left 1 pixel? Or something else?
|
|
|
Logged
|
|
|
|
Polly
Level 6
|
|
« Reply #14 on: March 16, 2017, 03:20:58 PM » |
|
@Polly So locking the x values in my original program would allow it to be a one liner, but that didn't seem super useful for me (Maybe I'm wrong?). I mean like this .. Sure you lose a bit of flexibility, but it's significantly faster / lighter to compute. Both solutions have their place & time of course ( which is why you can switch between weighted and non-weighted in Maya ).
|
|
|
Logged
|
|
|
|
thomf00
|
|
« Reply #15 on: March 17, 2017, 09:09:57 AM » |
|
Oh interesting, didn't know that that worked. Do you have the equation for it?
|
|
|
Logged
|
|
|
|
Polly
Level 6
|
|
« Reply #16 on: March 17, 2017, 09:46:03 AM » |
|
Do you have the equation for it? As mentioned in my first reply, you can use the cubic bezier equation directly instead of having to estimate T from X. So all you need to do is use X for T in ( with a & b being the tangent y-coordinates ) .. float calcBezier(float t, float a, float b) { return (((1f-3f*b+3f*a)*t+(3f*b-6f*a))*t+(3f*a))*t; }
|
|
|
Logged
|
|
|
|
|
|