Jump to content
  • Advertisement
Sign in to follow this  
  • entries
  • comments
  • views

How Tuss Toss does 2D in 3D

Sign in to follow this  


Alright so I haven't posted in a short while, and I feel like I should post something so today I'm going to do a quick tutorial on how to do some basic 2D drawing in a 3D environment, so if that's something you are interested in, read on.

In Tuss Toss I use a 3D API (Managed Direct3D) to do 2D graphics. This means I utilize a 3D coordinate space to represent my 'world' and a camera to capture the image of my world. The reason why I chose to do this, is because you can get some really neat effects by using a 3D that you cannot get in a pure 2D environment.

My basic approach was to place the camera in such a way so that I would be dealing with a normal 2D environment. This means that I could refer to things with just x and y coordinates while projecting them onto the 0 z plane. For a visual representation check out the image below.

Now as you can see the camera is placed in such a way so that the 640x480 backgrounds will fit exactly within the camera's viewing space. Now the trick is where how I figured out the calculations. Logically, you could probably imagine that you want the camera looking at the dead center of the background, and also be aligned in the dead center in the background. The major question is: "how far back does the camera have to be?" This calculation took some number crunching, but with a little basic trig I was able to work through it. Consider the following image.

What you are looking at here is a side view of our scene. Basically the distance from the background to the camera's position is represented by the variable d. Because the camera is aligned with the center of the background, and the line from the camera to the backgrounds center is straight, we can assume that line is perpendicular to the background. This forms some right triangles for us. Now my particular camera uses a standard viewing angle of 45 degrees or 1/4 PI radians. So we can assume that the angle for either of those two triangles is one half that amount. This means that angle between the longside and the hypotenous (sp?) is 22.5 degrees or 1/8 PI radians. We also know that the length of the short side is 240, since the center lies halfway down the background.

Now think back to your high school calculus. SOH CAH TOA is your friend! This is a little memory device for remembering the sin, cos and tangent definitions. The one we want here is TOA, which is short for tan of theta is equal to the length of the opposite side divided by the length of the adjacent side. The length of the adjacent side for our sake is the variable d. that leaves us with the current formula of:

tan(22.5) = 240 / d.

Now we do some basic algebra to get isolate our unknown. That leaves us with the formula:

d = 240 / tan(22.5).

Crunch those numbers and you should find that you have the same camera distance supplied in the first diagram. It is important to realize that I am using a LEFT-HANDED coordinate system so this z value is positive.

Well there you have it. This technique should serve you well for using a variety or resolutions for a background in a 2D game. This technique could also be the basis of using a scaleable hud in a 3D game as well by setting your projection plane a short distance from your camera. Hope I didn't bore/confuse too many people.
Sign in to follow this  


Recommended Comments

There are no comments to display.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!