Welcome, Guest. Please login or register.

Login with username, password and session length

 
Advanced search

1411283 Posts in 69325 Topics- by 58380 Members - Latest Member: bob1029

March 29, 2024, 03:42:19 AM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsDeveloperTechnical (Moderator: ThemsAllTook)Easing Editor: Software Devlog
Pages: [1]
Print
Author Topic: Easing Editor: Software Devlog  (Read 2698 times)
thomf00
Level 0
***



View Profile WWW
« 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.
Code:
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! Wizard
« Last Edit: January 02, 2017, 11:33:49 PM by thomf00 » Logged

Twitter @thomasuster
snackycactus
Level 1
*


YO! Game Design!


View Profile WWW
« 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.

Code:

// 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!  Beer!
Logged

pmprog
Level 1
*


View Profile WWW
« Reply #2 on: January 03, 2017, 07:54:43 AM »

Sounds pretty neat
Logged
thomf00
Level 0
***



View Profile WWW
« 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.

Code:
public static function quadIn(t:Number):Number {
    return t*t;
}

Pretty straightforward! This also caught my eye.

Code:
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

Twitter @thomasuster
thomf00
Level 0
***



View Profile WWW
« 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

Twitter @thomasuster
snackycactus
Level 1
*


YO! Game Design!


View Profile WWW
« 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
Level 0
***



View Profile WWW
« 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

Twitter @thomasuster
Endurion
Level 2
**



View Profile WWW
« 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
Level 0
***



View Profile WWW
« Reply #8 on: March 06, 2017, 10:51:47 AM »

Good ideas! Thanks Endurion!
Logged

Twitter @thomasuster
thomf00
Level 0
***



View Profile WWW
« Reply #9 on: March 07, 2017, 01:04:52 PM »

So I think it's time to kill it!  Cry

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

Twitter @thomasuster
bauer
Level 1
*


Codes games & makes music


View Profile WWW
« Reply #10 on: March 16, 2017, 02:51:21 AM »

This wanted to say that this is an awesome tool, great job! Beer!
Logged

thomf00
Level 0
***



View Profile WWW
« 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.  Smiley
Logged

Twitter @thomasuster
Polly
Level 6
*



View Profile
« 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
Level 0
***



View Profile WWW
« 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

Twitter @thomasuster
Polly
Level 6
*



View Profile
« 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 Wink ).
Logged
thomf00
Level 0
***



View Profile WWW
« 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

Twitter @thomasuster
Polly
Level 6
*



View Profile
« 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 ) ..

Code:
float calcBezier(float t, float a, float b)
{
return (((1f-3f*b+3f*a)*t+(3f*b-6f*a))*t+(3f*a))*t;
}
Logged
ferreiradaselva
Level 3
***



View Profile
« Reply #17 on: March 29, 2017, 08:15:20 AM »

You problably know easings.net, but here are the implementations (in C):

https://github.com/warrenm/AHEasing/blob/master/AHEasing/easing.c

Maybe it's useful for you.
Logged

Pages: [1]
Print
Jump to:  

Theme orange-lt created by panic