Jump to content

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 (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?


Link to comment
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.

Link to comment
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.

Link to comment
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.


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...