How to achieve a bounce/squish animation?

[viking]

How would I achieve the animation like in this example with Love2D?

http://dl.dropbox.com/u/38791214/platformer.swf (From Ludumdare Keynote)

The animation of the box, I'm struggling to make it animate like it does in that flash game. How would I go about this? Right now the Love2D game is just a square being drawn, how would I animate it like that?

Here's the code so far for the square and everything: https://gist.github.com/2463428
or alternatively, a .love file: http://dl.dropbox.com/u/38791214/main.love

If somebody could steer me in the right direction or provide an example that would be great!

[iemfi]

One way to do it would be for collision with the floor trigger the animation to start and a simple counter to count how many frames into the animation you are.

Code: Select all

if (collision with floor) then
     squashCounter=animationLength
end

love.update(dt)
   if squashCounter>=0 then
      squashCounter=squashCounter-dt
      width=boxWidth-math.sin(squashCounter/animationLength*math.pi)*constantValueWhichDeterminesHowMuchToSquashWidth
      height=boxHeight+math.sin(squashCounter/animationLength*math.pi)*constantValueWhichDeterminesHowMuchToSquashHeight      
   end
end

love.draw()
   love.graphics.rectangle('fill',x,y-height,width,height)
end

[Alex22]

Damn. Just wrote like half an hour the post and Firefox crashed.

Well anyway I made it for you: (Only the jump->stand animation the other one you have to do yourself)
http://dl.dropbox.com/u/1519805/Springwabbel.love
I'm going to write the description again, but I'm kinda fucked right now.

[Alex22]

Okay so here we go again:

I think the two hardest lines to understand are the following:

Code: Select all

additionalWidth = (math.cos(((love.timer.getTime() - jumpTime) / (animationLength / 2) + 1) * math.pi) + 1) * animationWidthChange
additionalHeight = (math.cos(((love.timer.getTime() - jumpTime) / (animationLength / 2)) * math.pi) - 1) * animationHeightChange

This may seem quite a bit complicated, but if you just take the basic formula they are quite easy:
cos((x+1)* pi) + 1) For the Width and
cos(((x)* pi)) - 1 for the Height

The screenshot below shows the two graphs in WolframAlpha:

The purple graph is the Width and the blue the Height change.
It should be pretty self explanatory, I hope

So now on to the code:
In lua, the x is "(love.timer.getTime() - jumpTime)" that's the time that has passed since he landed. The division that follows: "/ (animationLength / 2)" just gives us the option to increase or decrease the duration of the animation.
The last difference is at the end: "* animationWidth|HeightChange" . This gives us the opportunity to change the size that the Width and Height increase or decrease.


As for the line player drawing line I changed the in love.draw function:
I drawed this fancy, HD picture in MSPaint
I hope it will help understanding it: (click on it, to view full picture)


If you still have any questions regarding my code, ask <3

[viking]

Thank you, works well and the explanation makes it that much better, appreciate the effort!