41
\$\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\$
5

5 Answers 5

79
\$\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\$
7
  • 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
    Commented Jun 8, 2016 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\$ Commented Jun 9, 2016 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\$ Commented Jun 10, 2016 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
    Commented Jun 11, 2016 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
    Commented Jun 11, 2016 at 22:21
77
\$\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\$
8
  • 6
    \$\begingroup\$ I'm sorry for the awful gifs... I wish we could embed video. \$\endgroup\$
    – House
    Commented Jun 8, 2016 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\$ Commented Jun 9, 2016 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
    Commented Jun 10, 2016 at 6:06
  • \$\begingroup\$ some network sites can embed youtube \$\endgroup\$
    – joojaa
    Commented Jun 10, 2016 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
    Commented Jun 11, 2016 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\$
1
  • 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\$ Commented Jun 9, 2016 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\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .