In 2D top down soccer games, sometimes a ball is given the illusion of being in the air, like below:
How can I achieve this?
\$\begingroup\$ \$\endgroup\$
5 
- \$\begingroup\$ here your answer japantoday.com/category/lifestyle/view/… : shadow. \$\endgroup\$v.oddou– v.oddou2016-06-09 00:31:41 +00:00Commented Jun 9, 2016 at 0:31
- 1\$\begingroup\$ Citing image source: I originally cut that GIF out of this gameplay video of Tiki Taka Soccer for this question. \$\endgroup\$Anko– Anko2016-06-09 02:41:52 +00:00Commented Jun 9, 2016 at 2:41
- \$\begingroup\$ Strongly related: In a 2D top-down game, how can I create projectiles that have a height? \$\endgroup\$Anko– Anko2016-06-09 02:44:01 +00:00Commented Jun 9, 2016 at 2:44
- 1\$\begingroup\$ Depending on the view size of your game you could also use perspective by making the ball bigger \$\endgroup\$Wilf– Wilf2016-06-09 19:16:32 +00:00Commented Jun 9, 2016 at 19:16
- \$\begingroup\$ How far away the ball is from its own shadow!, \$\endgroup\$Bradman175– Bradman1752016-11-07 23:38:08 +00:00Commented Nov 7, 2016 at 23:38
Add a comment |
5 Answers
\$\begingroup\$ \$\endgroup\$
7 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.
- 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– jgallant2016-06-08 20:05:31 +00:00Commented 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\$tfrascaroli– tfrascaroli2016-06-09 08:38:17 +00:00Commented 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\$Draco18s no longer trusts SE– Draco18s no longer trusts SE2016-06-10 18:29:02 +00:00Commented 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– hobbs2016-06-11 03:20:09 +00:00Commented 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– osvein2016-06-11 22:21:45 +00:00Commented Jun 11, 2016 at 22:21
\$\begingroup\$ \$\endgroup\$
8 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.
A shadow can trick your brain into believing all sorts of things. Making flat things look like they have a third dimension.
You don't even have to change the height of the ball, you just need to change the location of the shadow.
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
- 6\$\begingroup\$ I'm sorry for the awful gifs... I wish we could embed video. \$\endgroup\$House– House2016-06-08 21:31:31 +00:00Commented 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\$lukas.pukenis– lukas.pukenis2016-06-09 14:18:51 +00:00Commented 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– Nelson2016-06-10 06:06:32 +00:00Commented Jun 10, 2016 at 6:06
- \$\begingroup\$ some network sites can embed youtube \$\endgroup\$joojaa– joojaa2016-06-10 17:19:31 +00:00Commented 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– interphx2016-06-11 06:46:37 +00:00Commented Jun 11, 2016 at 6:46
\$\begingroup\$ \$\endgroup\$
1 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.
- 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– Arturo Torres Sánchez2016-06-09 00:24:22 +00:00Commented Jun 9, 2016 at 0:24
\$\begingroup\$ \$\endgroup\$
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.
\$\begingroup\$ \$\endgroup\$
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.
