How to make a top down 2D ball rolling

Started by
15 comments, last by Alberth 3 years, 11 months ago
14 hours ago, lifesuxtr said:

For example if this is our ball texture:

q9UMP.png

 

That doesn't look like any billiards ball I've ever seen :) 

But also note that you cannot map a rectangular texture to a sphere. However in the case of billiards balls you might be able to get away with cylindrical projection because at the poles it's just one color. You then likely want to use orthographic projection which maps easily to screen coordinates and matches the 2D playing field.


There's also the problem of aliasing. In 3D you get jagged edges by default - especially visible on small objects - where sprites offer you full control over the alpha channel.

In the end I don't think it's really worth the effort.

Advertisement

Can you draw your sprites using a shader? There is a trick you can use to take a 2D image map and make it look like it's mapped on a sphere. It's detailed here as relating to drawing the resource bubble graphics in Diablo 3. (I have a demo of that in a github repo here). The gist of it is that you use a texture like this:

normaltex.png

Then use that to distort the UV coordinates mapped across the sprite, then use these distorted coordinates to sample the ball texture. So your ball texture then might look something like this:

KllJGXW.png

If the texture is seamless, then you can animate the UV coordinates linearly to make it appear the ball is rolling in a given direction; change the direction of the UV scroll to change the apparent direction of the roll.

43X7dDj.gif

@JTippetts this looks like the best solution i guess. Now i need to find how to scroll texture on libGDX  :D

1 hour ago, lifesuxtr said:

@JTippetts this looks like the best solution i guess. Now i need to find how to scroll texture on libGDX  :D

The scrolling should just happen inside the shader, by adding an offset based on time and speed to the UV coordinates. The offset is a vec2, and you would calculate it outside the shader based on the negative of the ball's movement direction. You could also specify a 'spin' speed as well, and apply a rotation of the UV coordinate in the vertex shader to simulate balls that are spinning around the vertical axis in addition to rolling.

I'm new to game dev with Unity and I'm trying to achieve this effect on a 2D game. Unfortunately it seems like unity doesn't allow shaders on 2D sprite renderers. So I do have the 2D basketball bouncing, but it just rotates like a wheel (left-to-right and vice-versa). I'd like it to also rotate on other axes depending on the direction of the force that collisioned with it. However, I can't seem to find a way to do it purely with the 2D sprite renderer. Seems like I will have to do it with a 3D sphere and basically change my game to 3D if I use Unity…

Has anyone seen any example of this behavior (like the billiards game OP showed) in a 2D game made with Unity? I saw Unity was mentioned in this website (cited by @jtippetts) in this thread as-well, but the only Unity example available is a GIF with no info on how to achieve it, and the other one is a .unity3d file, that doesn't run anywhere nowadays.

My goal is to achieve something by the looks of the video below. You can see the ball and environment is 2D, however the ball rolls naturally on all axes. Also we can see it rolling in different directions on the main menu. It looks like the game is still 3D though . This is what I want to achieve in Unity.


This is what I currently have with Unity:

2D Basketballs with only left-to-right and right-to-left rotation


None

Perhaps a ray tracer could work?

I mean, make a model with a sphere, add a texture around it, and render the sphere in all orientations, which gives you lots of sprites for different angles. Never done that, but I see no reason why it wouldn't work.

It would at least fix the position of the sun on the ball :p

This topic is closed to new replies.

Advertisement