Making a balloon physics

[newbie1377]

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 (https://youtu.be/6ZJjCIiq-Yg?t=78). 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?

Thanks!

[Exca]

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.

[newbie1377]

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.

[Exca]

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.

 

[newbie1377]

Thanks for the answer, Exca.

Will try to figure out your suggestion. Hope it can help me much!

Wish you a nice day!