Feb 032012
 

How to make an awesome, yet simple bounce animation in Corona SDK

(*This is a guest post from my good friend Chris, known as xxxfanta on Twitter and the Ansca Mobile forums. – Peach)


Hey!
My name is Chris and I’m from Germany.
I’m 24 and study communication design in one of Germany’s most beautiful cities – Hamburg! ;)

I’ve been using Corona for quite some time now and have always taught myself everything I needed – and now I want to share some stuff with the _greatest developer community_! (Damn straight! – Peach)

I’m currently creating my own blog which will feature tutorials (programming AND designing), weekly freebies, and much more! :)

So enough about me, let’s check out the example!

mushroom

I’ve quickly designed a little mushroom to demonstrate this effect.
Once you click it, it will make a squeezy-bounce-move.

So why do you need this?
- To give your game a bit more animation instead of the static look

What are the cons/pros compared to premade animations?
- You can easily customize these, i.e. change the squeeze amount depending on the collision-force
- You don’t need all the extra amount of TextureMemory AND your App will be smaller in filesize
- Premade animations can look better and they have more control in how it will look.

You have to choose what works best for your project!

Now let’s take a look at the code!
It’s rather simple:

Lines 1-30:
We create the basic environment: the background, the mushroom bottom and top

Lines 35-40:
Now we put those into a group (since we want to whole mushroom to bounce!)
Also we need to change the ReferencePoint and give him a property called _.isBouncing_
This will make sure, that it doesn’t start a new bounce animation when the other one is still running!

Lines 45-65:
Now that’s the most important function – called _bounce_.

It has 4 parameters that can be applied:
- obj – that’s the object you want to bounce. You MUST specify this one!
- minScale, maxScale – the min and max squeeze values. Don’t make them too high. If there aren’t specified, they’ll be 0.8 and 1.2
- time – the amount of time it takes to do every transition. Default is 100ms

Line 68:
Last but not least the EventListener for the group.
It will directly call the bounce-Function with some custom parameters!

If you have any problems or ideas, just let me know! :)

So grab yourself a copy of the code AND the mushroom vector for free to use it in your projects!

My Blog is still in production, but make sure to follow me on Twitter for new Tutorials, Freebies and other stuff.

Chris aka xxxfanta :)

Download Corona Mushroom Bounce Sample
Like this post? Subscribe to the monthly newsletter!

 

  11 Responses to “Easy, Awesome Bounce Animations in Corona SDK”

  1. @Conor are you the owner of Apptoonz?

  2. Don’t use twitter. Don’t want to start. Can I have it anyway?

    • Hey Conor, am traveling and only have my Air, which doesn’t have the project. Remind me in a week or get in touch with xxxfanta.

  3. Hi,
    thanks for the explanation but I looked everywhere i couldn’t find the code for this tutorial.

  4. Can email to me as well? cshaopin@yahoo.com
    Because I don’t tweet, hehe.

  5. Thanks. That is a great one.

  6. Aww… You have to tweet to get the file? Damn…

    I’m currently in China and it doesn’t allow twitter…. Is there any other way I can download the file?

  7. It’s great that the Corona community are so helpful, really makes a difference when learning. Thanks!

  8. This is pretty awesome! Thanks!

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notify me of followup comments via e-mail. You can also subscribe without commenting.