Sign in to follow this  

Making a balloon physics

Recommended Posts

Hello guys,

Need some help with creating a custom animation (currently using Tween.js, you can suggest any) that reproduces balloon physics, exactly like in the video ( Watch please in 0.25x speed in order to deeply understand its behavior.

Is it possible to make such an animation with only one sprite(one png image of a balloon, don't consider a bird inside right now) or should it be done via changing textures overtime (i.e. condition, when "top" point of texture "touches" top of container)?
If it's possible, can you please suggest solution or any literature (video, text, whatever) which can help me with my case?


Share this post

Link to post
Share on other sites

Do you mean the animation that comes after stage is complete where balloons move around behind the level complete popup? Or the balls inside the game area?  Or the balloons after you move tap move to next stage?

For the game area balls it seems that it's a combination of tweening and sprite animation.

For the balls moving behind the popup I'd say easiest would be to create somekind of fake physics that look real enough. For example give each ball an anchor and then apply some fake wind to it & negative gravity and then just on each tick calculate a position based on those values.

For the ending balloons, those look like they have been done with tweening scale, rotation & position.

Share this post

Link to post
Share on other sites

Well, probably every animation at once, from appearing in the bottom, moving to top, translating into "squarelike" object, pumping its bottom down and up again to fit into the final "squarelike" object.

So you think it's impossible to create such animation (imitiating physics) via only one sprite?

Thanks for the answer.

Share this post

Link to post
Share on other sites

Here's few rough examples for each of the states.

Balloons covering the whole screen (transition)
b.scale.x = b.scale.y = 0;
b.rotation = initial rotattion randomly;
b.x = initial x position;
b.y = initial y position;
var delay = random delay for each ball;
//Jump to view with scaling
Tween.get(b.scale).wait(delay).to({x:1,y:1}, 750, Ease.getBackOut(0.8);
//Small random movement
Tween.get(b).to({ x: b.x + (Math.random()-0.5)*20, y:b.y+(Math.random()-0.5)*20, rotation:b.rotation+(Math.random()-0.5)*0.2}, 5000, Ease.quadInOut).to({x:b.x,  y:b.x, rotation:b.rotation},5000, Ease.quadInOut);

Balloons leaving from the transition screen
var out = random point outside of the screen
Tween.get(b).to({x:out.x}, 1000, random ease);
Tween.get(b).to({y:out.y}, 1000, random ease);
Tween.get(b.scale).to({x:0.5, y:0.5}, Ease.backOut,1000);
These wont be flying back to screen, for that somekind of bezier curve solution might work better. For each tick update the rotation of the ball to align to current direction. (Math.atan2(dy,dx))

Ingame balloons initial appear
b.y = corret position + screenHeight; //Or mask height
Tween.get(b).to({y:correct position},1000, Ease.backOut); //Time here should be something related to dy.
Tween.get(b.scale).wait(850).to({y:0.8}, Ease.backOut), 250).to({y:1}, 250, Ease.quadIn); //This will require tweaking.
There's an additional sprite change in use also.

The popping of balloons
Tween.get(b.scale).to({x:1.2, y:1.2},150);
In addition sprite animation is used.


Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.