• Advertisement
Sign in to follow this  

question on camera rotation on 2D billboard sprite, 3d level

This topic is 650 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

hi all,


we are planning to do similar rendering to ragnarok online where in the level is rendered in 3D but the characters are rendered in 2D sprite (billboard), we are still on R&D phase, how is camera rotation works on this scenario when the characters are in billboard 2D? when the camera rotates, i know that we should render specific angle on the billboard for ALL characters, but matching the rotation of angle of camera to the rotation of sprite is where i am confuse, how many sprites should i have?


who else have idea on how to do this efficiently?



 i captured a video and uploaded it here;




dont worry its safe :)

Edited by cebugdev

Share this post

Link to post
Share on other sites


I'm doing this on the game I'm working as well.

This is how it looks when the character have 4 directions



Not so smooth in my opinion, in Ragnarok they have at least 8 directions, and I think would look a lot better if my char had this much sprites.

Ok, now abou the technical part:

First, your game object must have an "facing angle", this is the angle he would be facing if he was not a sprite (North, South, West, East), Let's say that when this angle is 0º he is facing North;

Then you will map the sprites to ranges of this angle, for example in my case I mapped this way:

  • if angle is between 315º and 45º, then draw UP sprite
  • if angle is between 45º and 135º, then draw RIGHT sprite
  • if angle is between 135º and 225º then draw DOWN sprite
  • if angle is between 225º and 315º then draw LEFT sprite

Now you need to draw it on screen and you need to find the angle you will draw. This how I calculate that:

// Distance between camera and object, ignoring Y axis
var delta = new Vector2(obj.Position.X - camera.Position.X, obj.Position.Z - camera.Position.Z);
// Normalize the vector
delta = Vector2.Normalize(delta);
// Find which angle the character is, relative to the camera
var angle = facingAngle + MathHelper.TwoPi - ((float)Math.Atan2(-delta.X, delta.Y) + MathHelper.Pi); 
while (angle >= MathHelper.TwoPi)
                angle -= MathHelper.TwoPi;

In other words, Atan2 will find the angle of the distance Vector, and the value will be between -180º and 180º, I add 180º so now the value will be between 0º and 360º, since angles grow anti-clockwise and I mapped my sprite clockwise, I convert it by making 360º-angle, sum with the facingAngle and while the value is over or equal to 360º, I subtract 360º from it so it stays between 0º and 360º


I can draw up to 2500+ unique animated sprites without going under 60fps.




I assume that Atan2 is an expensive function, so I work with a cache:
If I find that the distance from the camera, camera angle or facing angle haven't changed from the last frame, I reuse the one I calculated before.


And this code works well with high perspective (objects closer to the borders of the screen are turned more than the ones in the center of it), you can make it go away if instead of using the angle of the distance, you use the Y angle from the camera View Matrix and you avoid Atan2 altogether.

Edited by Guilherme Amorim

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Advertisement