trollwarrior1
|
 |
«
Posted
2014-04-12 09:43:07 » |
|
I'm pretty sure there hasn't been a topic like this lately, so might as well post it for discussion, because some people might find this helpful. What I want to achieve is menus popping in from the center of the screen. I can do it just find, but the problem is, it is very linear. Would be awesome if people who have some experience could share some equations to make the popping out very fast at start, and slow down once the menu gets bigger. Here is gif animation (Hope it works properly on first time)
|
|
|
|
LiquidNitrogen
|
 |
«
Reply #1 - Posted
2014-04-12 09:47:57 » |
|
try something like this perhaps. or multiply the speed by some value each loop. 1 2 3 4 5 6 7
| size = 0; speed = 20; while (size < maxSize){ size += speed; speed -= 1; updateScreen(); } |
|
|
|
|
matheus23
|
 |
«
Reply #2 - Posted
2014-04-12 09:49:50 » |
|
You could try a universal system like bezier curves, or something like a cubic spline (I think thats how it's called, but I'm not sure...): 1 2 3 4 5 6 7 8 9
| public float cubicSpline (float t) { return (t * t) * (3f - 2f*t); }
public float cubicSpline (float begin, float end, float t) { return begin + (cubicSpline(t) * (end-begin)); }
|
Edit: Be careful with LiquidNitrogen's example. can maximally be 100 for the speed 20. Else speed will start to get negative and everything'll fail.
|
|
|
|
Games published by our own members! Check 'em out!
|
|
trollwarrior1
|
 |
«
Reply #3 - Posted
2014-04-12 10:20:23 » |
|
try something like this perhaps. or multiply the speed by some value each loop. 1 2 3 4 5 6 7
| size = 0; speed = 20; while (size < maxSize){ size += speed; speed -= 1; updateScreen(); } |
I think I would much rather prefer mathematical equation if I find one, because right now all I have is time that the menu has been popping out. I don't have any speed values of anything and I would like it to keep it that way 
|
|
|
|
pjt33
|
 |
«
Reply #4 - Posted
2014-04-12 10:22:05 » |
|
The key word is "easing". Armed with that I easily found these links:
|
|
|
|
trollwarrior1
|
 |
«
Reply #5 - Posted
2014-04-12 10:40:54 » |
|
The key word is "easing". Armed with that I easily found these links: Thanks so much!  I have already implemented some of this 
|
|
|
|
CodeHead
|
 |
«
Reply #6 - Posted
2014-04-12 16:16:46 » |
|
Robert Penner seems to be the big cheese when it comes to easing equations. His page has links to both of the pages posted by pjt33 as well as a few others. This one is a rather good presentation (space bar advances the slides). I think it was the biggest help when implementing my easing library in Java. One tip: Easing functions become a lot simpler when you realize that they only need one passed parameter ( as illustrated here) to make the easings work, namely percentage complete. Something along the lines of: 1 2 3 4 5 6 7 8 9
| ... public float myEaseOut(float percentcomplete) { return (1.0f - (percentcomplete * percentcomplete)); }
public float myEaseIn(float percentcomplete) { return percentcomplete * percentcomplete; } ... |
It takes a bit of deduction at times, but pretty much any easing formula can be made to fit the same basic method signature. From there it's fairly straightforward to construct a modular easing library.
|
Arthur: Are all men from the future loud-mouthed braggarts? Ash: Nope. Just me baby...Just me.
|
|
|
Drenius
|
 |
«
Reply #7 - Posted
2014-04-12 19:01:33 » |
|
Used sine curves for this lately since they are so easy to use...
|
|
|
|
lcass
|
 |
«
Reply #8 - Posted
2014-04-12 20:56:47 » |
|
You could use the cubic root of an increasing value, the value given by the cubic root plateus fairly quickly. you could have a simple for loop for(int i= 0; i < 50;i++) {pos = Math.cbrt(i); update();}
|
|
|
|
DrZoidberg
|
 |
«
Reply #9 - Posted
2014-04-12 22:13:58 » |
|
If you want to play around with lots of different easing functions it makes things easier if you define yourself a function class that you can then scale, shift and combine with other functions. Here is an example. Func.java http://pastebin.com/mFexrzMHGraph.java http://pastebin.com/2bPFcahzbtw. if you use Java 8 you can make your function definitions a lot shorter then in that example. Of course this will make the calculation slower, but that shouldn't matter for easing animations.
|
|
|
|
Games published by our own members! Check 'em out!
|
|
matheus23
|
 |
«
Reply #10 - Posted
2014-04-13 17:40:30 » |
|
the value given by the cubic root plateus fairly quickly No it doesn't. It tends to infinity, as does its first and second derivative. Not really useful information here, but are you sure they do? http://www.wolframalpha.com/input/?i=derivate+of+cubic+rootI think what you wanted to say is: They tend towards zero, but never approach it (and therefore the Cubic Root is never going to be flat at some point).
|
|
|
|
pjt33
|
 |
«
Reply #11 - Posted
2014-04-13 21:56:31 » |
|
I think what you wanted to say is: They tend towards zero, but never approach it (and therefore the Cubic Root is never going to be flat at some point).
I blame a lack of coffee for my ability to read that more than once without mentally processing the word "root". You are quite correct.
|
|
|
|
matheus23
|
 |
«
Reply #12 - Posted
2014-04-14 08:44:57 » |
|
I blame a lack of coffee for my ability to read that more than once without mentally processing the word "root". You are quite correct.
Fun Fact: I posted that after a LAN-Party where I didn't sleep. Haven't slept for about 35 hours at the time I posted it...  But, well, the same mistake could have happened made even when I had slept 
|
|
|
|
|
DrZoidberg
|
 |
«
Reply #14 - Posted
2014-04-20 20:47:54 » |
|
|
|
|
|
|
Longarmx
|
 |
«
Reply #16 - Posted
2014-04-22 02:29:37 » |
|
That's a cool tool  I would also just go onto desmos and mess around to find an equation that fits your needs. It may not be the fastest, but I think it's sort of fun to see what you can come up with.
|
|
|
|
BurntPizza
|
 |
«
Reply #17 - Posted
2014-04-22 02:32:24 » |
|
That's a cool tool  I would also just go onto desmos and mess around to find an equation that fits your needs. It may not be the fastest, but I think it's sort of fun to see what you can come up with. Indeed, I immediately go to Desmos whenever I have a graph I need to make. Or Wolfram Alpha if it involves regression and my TI-84 is out of reach. And thanks for the medal!
|
|
|
|
trollwarrior1
|
 |
«
Reply #18 - Posted
2014-04-22 05:19:20 » |
|
I'm sorry to be asking again, but, I need some kind of equation for explosion. I basically want an equation that would explode at its peak in the first few moments and would gradually increase slow down speed until 0. Any ideas which one I should use? 
|
|
|
|
|
CodeHead
|
 |
«
Reply #20 - Posted
2014-04-22 14:07:35 » |
|
I basically want an equation that would explode at its peak in the first few moments and would gradually increase slow down speed until 0. Any ideas which one I should use?  Try looking at ease out functions. They give the deceleration over time effect that you want. The only catch is that they start out at full speed. For example: 1
| 1.0f - (percent_complete*percent_complete*percent_complete) |
|
Arthur: Are all men from the future loud-mouthed braggarts? Ash: Nope. Just me baby...Just me.
|
|
|
BurntPizza
|
 |
«
Reply #21 - Posted
2014-04-22 14:31:18 » |
|
I'm sorry to be asking again, but, I need some kind of equation for explosion. I basically want an equation that would explode at its peak in the first few moments and would gradually increase slow down speed until 0. Any ideas which one I should use?  Maybe something like this? Try changing parameters and exponents if it's not quite right.  Via this graph: https://www.desmos.com/calculator/n7f2j3qynj
|
|
|
|
Riven
|
 |
«
Reply #22 - Posted
2014-04-22 14:39:51 » |
|
I don't think curves are suitable for explosions.
You just give particles a 'random' acceleration away from an origin (or apply a force, from an origin) and then simulate drag and gravity.
|
Hi, appreciate more people! Σ ♥ = ¾ Learn how to award medals... and work your way up the social rankings!
|
|
|
BurntPizza
|
 |
«
Reply #23 - Posted
2014-04-22 14:49:47 » |
|
I don't think curves are suitable for explosions.
You just give particles a 'random' acceleration away from an origin (or apply a force, from an origin) and then simulate drag and gravity.
I agree that particle systems are generally better, but he might be using some kind of single sprite, tweening size/color or something. I guess you could simulate the drag on the expanding edge of the sprite, but at that point... I don't know what he's trying to accomplish exactly, so I figure I'd go along with the existing conceptual inertia.
|
|
|
|
trollwarrior1
|
 |
«
Reply #24 - Posted
2014-04-22 16:17:42 » |
|
I don't think curves are suitable for explosions.
You just give particles a 'random' acceleration away from an origin (or apply a force, from an origin) and then simulate drag and gravity.
It would be used for more like light pulse. So it appears really quickly and slowly fades out. Wouldn't be used for the particles themselves. EDIT----------- Thanks for the replies, for for now I will just stick with hard coded values, since I only have 16 frames to animate. I just coded each value by hand. That looked pretty nicely. I mean, the light goes so fast that you can't really see much. Probably even linear interpolation would be enough.
|
|
|
|
|