Welcome, Guest. Please login or register.

Login with username, password and session length

 
Advanced search

1411512 Posts in 69376 Topics- by 58430 Members - Latest Member: Jesse Webb

April 27, 2024, 03:52:53 AM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsDeveloperTechnical (Moderator: ThemsAllTook)How do I juice up my games?
Pages: [1]
Print
Author Topic: How do I juice up my games?  (Read 1543 times)
ProgramGamer
Administrator
Level 10
******


aka Mireille


View Profile
« on: July 16, 2015, 07:11:30 AM »




The functions seen in the video above seem very useful, but I don't know how to create them. I know how to apply them to an interpolation between two points/inclinations/whatever else but I don't know how they're actually programmed. How do I?
Logged

kamac
Level 10
*****


Notoriously edits his posts


View Profile
« Reply #1 on: July 16, 2015, 08:12:21 AM »

Define easing functions. Here you can find them already implemented in many different programming languages: http://robertpenner.com/easing/

Then use these functions to get desired easing effect. For example:

Code:
player.y = easeInOutCubic(startTime - currTime, beginY, endY - beginY, duration)

Here you can preview each effect a function brings: http://gizma.com/easing/
Logged

ProgramGamer
Administrator
Level 10
******


aka Mireille


View Profile
« Reply #2 on: July 16, 2015, 08:32:44 AM »

Thanks, this is going to be very helpful! One more thing though, how do I do the one that kind of goes a little too far and comes back? I'm not sure how to program that one in...
Logged

kamac
Level 10
*****


Notoriously edits his posts


View Profile
« Reply #3 on: July 16, 2015, 08:45:37 AM »

Use easeInBounce / easeOutBounce / easeInOutBounce
Logged

Polly
Level 6
*



View Profile
« Reply #4 on: July 16, 2015, 09:32:37 AM »

how do I do the one that kind of goes a little too far and comes back?

Interactive cheat sheet
Logged
ProgramGamer
Administrator
Level 10
******


aka Mireille


View Profile
« Reply #5 on: July 16, 2015, 09:39:07 AM »

Ooooooh! Thanks :D!

I'm going to use this cheat sheet a lot, you've made a happy man today!
Logged

Zorg
Level 9
****



View Profile
« Reply #6 on: July 17, 2015, 07:02:07 AM »

Thanks for posting the video, it was fun to watch! Smiley

I loved the line of code they showed at the start: x += (target - x) * 0.1; because i used it a lot, long ago in Macromedia Flash 4.

It is not possible to create that beautiful overshoot wobble animation with that line of code. Making objects following objects creates sort of an ease in.

Meh.

In my opinion, EaseOutBack looks best, because it's very natural, it occurs everywhere in nature where a damped harmonic oscillator is present.

Newton's second law leads to this formula: y(t) + 2 * D * T0 * dy(t)/dt + T0² * d²y(t)/dt² = e(t).
With x(t) = T0 * dy(t)/dt and y(t)/dt = (y(k)- y(k-1))/T (sampling) follows:

x(k) = x(k-1) + T/T0 * [ e(k) - y(k-1) - 2 * D * x(k-1) ]
and y(k) = y(k-1) + T/T0 * x(k-1)

Code:
x += TT0 * (e - y - 2f * D * x);
y += TT0 * x; // Note: x and y are not the axes!
// e is the input, target coordinates
// y are output coordinates.
transform.position = y;

If you chose a good TT0 and D, these two lines result in these curves:


TL;DR: EaseOutBack looks cool. And it's programmable with merely those lines.
No Lerp or Libraries/Assets required.

Using Vector3 for e, x and y results in this example:
http://zachau.info/krams/unity/ease/
« Last Edit: July 17, 2015, 12:53:53 PM by zorg » Logged
Pages: [1]
Print
Jump to:  

Theme orange-lt created by panic