How to make a top down 2D ball rolling

Started by
15 comments, last by Alberth 3 years, 11 months ago

I am developing a top down game similar to 8 pool billard with libgdx and box2d. How do i make a 2d ball texture look like its rolling when force is applied like this:

cLdg6.gif

So it feels actually 3d ?

For example if this is our ball texture:

q9UMP.png

 

Do i have to add actually 3 d models( sphere ) or is there another easy way

Advertisement

Maybe you've already thought of this, but if you just apply your texture to a circle, it's not going to look correct, irrespective of rolling. You might be able to get the desired effect with a circle-shaped mesh that's basically half a sphere mesh projected onto a plane. Maybe a rolling effect could then be achieved by scrolling the texture appropriately. Of course at this point you're getting pretty close to an actual sphere mesh, so perhaps just using a 3-d mesh to begin with would be easier.

Where is the GIF you posted from? Those graphics are nice - it'd be interesting to know how they were implemented.

@Zakwayda  I made the gif to ask this question. Its from a flash  game http://www.poolmaniac.net/en/billiard-solo/

there are many games  implemented this effect but i couldnt find any code examples on web. Isnt this a very common problem  ?  If someone can write an example i guess it will be very helpfull for all devs

There do seem to be a lot of games of that type, implemented using various technologies (Flash, HTML, etc.). I looked around a bit and couldn't find any clear answers, but I wonder if perhaps this is generally done using 2-d graphics with large sprite sheets used for the ball animations.

Here are a couple threads that touch on the topic:

1

2

The first thread includes an example of what such a sprite sheet might look like.

In some of the games I checked I saw some hints that the graphics might be 2-d, such as a little quantization in the rolling, and sunk balls just fading out rather than behaving in a natural 3-d manner. Also, if the graphics are 3-d, that would be some very nice rendering for e.g. an HTML or Flash game.

So I don't know the answer for sure, but I suspect the graphics are 2-d and sprite-based. Maybe someone else knows and can jump in.

For a pool or soccer game, you can probably get away with a sprite sheet line in Zakwayda's first link, but limit it to just one row.  You can rotate the sprite when you render it to get the rolling effect to follow the direction of movement.  It's unlikely that players would notice the inaccuracy.

I actually stole this ball texture from a game which already implements this effect.There was no sprite sheet just this texture

12 minutes ago, lifesuxtr said:

I actually stole this ball texture from a game which already implements this effect.There was no sprite sheet just this texture

That would suggest a 3-d mesh. However, unless you actually know how the various games you're looking at are implemented (like the pool game, for example), I wouldn't assume they're all implemented in the same way. Just because the game with the soccer ball texture appears to use 3-d graphics doesn't mean other games aren't using animated sprites.

5 hours ago, Nypyren said:

For a pool or soccer game, you can probably get away with a sprite sheet line in Zakwayda's first link, but limit it to just one row.  You can rotate the sprite when you render it to get the rolling effect to follow the direction of movement.  It's unlikely that players would notice the inaccuracy.

That technique is probably used in the example. The purple striped ball bounces 3 times but always rolls on the same axis.

@Zakwayda This confuses me even more. Even if i manage to add 3d model of ball to my 2d game , i dont know how to attach it to my box2d circle body :)) I guess sprite sheet method is simpler ? i still need some code examples maybe i should check open source

Just now, lifesuxtr said:

@Zakwayda This confuses me even more. Even if i manage to add 3d model of ball to my 2d game , i dont know how to attach it to my box2d circle body :))

I think the takeaway from the thread so far is more that you don't have to use a 3-d mesh. There seems to be good evidence that the pool game you posted uses 2-d sprites (and uses a shortcut, as others have pointed out, to reduce the number of individual images that are needed). The soccer texture you have appears to be for a mesh, but that doesn't mean you have to use a mesh. I think what you probably need is an animated 'soccer ball' sprite sheet or whatever.

You'll likely encounter some of the same issues integrating this with Box2D whether you use a 3-d mesh or an animated sprite (determining roll speed, getting the orientation right, etc.), but once you have a good animated sprite available, I imagine the 2-d approach will be the easier of the two.

This topic is closed to new replies.

Advertisement