39
\$\begingroup\$

In 2D top down soccer games, sometimes a ball is given the illusion of being in the air, like below:

example

How can I achieve this?

\$\endgroup\$
80
\$\begingroup\$

Give the ball a height value. Draw a shadow at the ball's actual 2D position; the shadow will help spatially orient the ball for the player.

When you draw the ball itself, offset the Y position by the "height" of the ball. If you want to implement more than just an illusion, use this height value in computations as well -- for example, you can implement the ability for the ball to go over a player's head in a game like you showed by checking if the height is geater than than a player's height.

\$\endgroup\$
  • 40
    \$\begingroup\$ Also, scale the ball as it goes up on the Y axis for added effect (while shrinking the shadow if you wish) \$\endgroup\$ – jgallant Jun 8 '16 at 20:05
  • \$\begingroup\$ @Jon 's idea is really clever. Depending on what sort of game, and the level of 'action' you want to put in it it's a really good idea (also easy to implement) \$\endgroup\$ – tfrascaroli Jun 9 '16 at 8:38
  • 1
    \$\begingroup\$ You can also scale the ball (or in the case of sprites, change the sprite to progressively bigger/smaller images) so it mimics being closer to the camera. This may exaggerate the height, or may be subtle, depending on how much size difference is used. \$\endgroup\$ – Draco18s Jun 10 '16 at 18:29
  • 1
    \$\begingroup\$ @Jon shrinking the shadow wouldn't be realistic. Making it more diffuse would, if it's within the tech level of the game. \$\endgroup\$ – hobbs Jun 11 '16 at 3:20
  • 1
    \$\begingroup\$ @Kramii that's effectively what you get when you "offset the Y position by the "height" of the ball" as described in the answer. \$\endgroup\$ – osvein Jun 11 '16 at 22:21
79
\$\begingroup\$

Shadow and texture.

Texturize the ball to show it rotating. This helps give the illusion of rotation of a sphere, which is more than 2 dimensions.

enter image description here

A shadow can trick your brain into believing all sorts of things. Making flat things look like they have a third dimension.

enter image description here

You don't even have to change the height of the ball, you just need to change the location of the shadow.

enter image description here

This video is an excellent example of what shadow can do. You'll notice that the ball moves exactly the same in each sequence, only the shadow changes: https://www.youtube.com/watch?v=5fgOK0odA1o

\$\endgroup\$
  • 6
    \$\begingroup\$ I'm sorry for the awful gifs... I wish we could embed video. \$\endgroup\$ – MichaelHouse Jun 8 '16 at 21:31
  • 18
    \$\begingroup\$ those gifs are perfect and they are embeddable. In video case I would need to manually play each one of them \$\endgroup\$ – lukas.pukenis Jun 9 '16 at 14:18
  • \$\begingroup\$ Also the videos will be externally linked. AFAIK even StackOverflow do not download the youtube videos and store them... but GIFs they can store. \$\endgroup\$ – Nelson Jun 10 '16 at 6:06
  • \$\begingroup\$ some network sites can embed youtube \$\endgroup\$ – joojaa Jun 10 '16 at 17:19
  • \$\begingroup\$ Nice suggestions, but offsetting the shadow seems weird. The shadow is a projection of a ball to the ground plane. It travels in a straight line (not a parabola, like the 3d ball) and when the ball is on ground, the positions of the ball and the shadow must match. If we offset the shadow instead of the ball, it may be very confusing. We will have to either make the shadow have parabolic trajectory to move it to the ball, or make it suddenly disappear when the ball lands. Both options will look very strange. \$\endgroup\$ – interphx Jun 11 '16 at 6:46
1
\$\begingroup\$

Shadow and Ball are key aspects. Shadow size and distence between Ball and shadow should increase when height increase. Also, Ball size should increase when Ball height increase. Shadow position represents position of ball in 2d and when Ball height increase you have to change Ball position (I m assuming that light source is homogen and it is not single point like a lamp. Light source changes everything about shadow). Finally you can add some animation like air flow.

\$\endgroup\$
  • 3
    \$\begingroup\$ Ball size should increase... only if they have a perspective projection. If it's isometric, like the image, ball size should stay the same. \$\endgroup\$ – Arturo Torres Sánchez Jun 9 '16 at 0:24
0
\$\begingroup\$

I would do what the above posters suggested, Shadow and size increase when ball is higher. A thing I remember from playing tennis on old TV games is that the ball also slowed down the higher it went and bigger it became. When it reached it's zenith and started "coming down" it would start going faster again as it became smaller.

\$\endgroup\$
-1
\$\begingroup\$

You draw a shadow below the ball, like it's done in the gif. The higher the ball, the longer the distance between the ball and the shadow.

\$\endgroup\$

protected by Josh Jun 11 '16 at 16:12

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.