Advertisement Jump to content


This topic is now archived and is closed to further replies.


Simple 2D Environment

This topic is 5485 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, for one of my classes this semester we''re required to design and create a video game. My group has decided that we will be doing a game similiar to Dodgeball on the old 8 bit NES, though sinifigantly updating the AI and some other aspects of the game. At the moment I''ve decided that we will likely be using ClanLib for our foundation because of all the advantages it offers. So, that said, my question: We''ve decided to use 2D graphics, as only one of us has any artistic talent at all, and he''s better with cartoon style graphics than 3D models. Our base will be a court of some kind, and we hope to simulate X Y and Z planes in just 2D by making objects appear to shrink as they go into the screen and grow as they come toward the screen. Problem is, I can''t seem to find any articles on doing this and its likely because I don''t know exactly what to call it. Could some one point me in the right direction? Thanks,

Share this post

Link to post
Share on other sites
I don''t know of any tutorials on the subject but maybe I can confuse you with my own crap advice.

I think the first thing you''ll want to do is look at the court like it''s a 3D space, even if it''s only a 2D game. The ball will have an x, y, and a z value as it bounces around. The only difference is how it is displayed.

In a 3D game you would just set up the camera on the sidelines and have the ball bounce around the screen, and let the 3D API handle how it looks. With 2D, you have to fake it, as you already know.

So give the ball an x, y, and z coordinate and program all your physics functions as if the ball were bouncing around a 3D space.

Once it comes time to render the image, do the following:

1. Take the x value of the ball and use it to determine where it appears along the horizontal axis of the screen. A negative value would be to the left of the midpoint, and a positive value would be to the right of the midpoint.

2. Take the z value of the ball and use it to determine where it appears along the vertical axis of the screen. Usually y determines where it would appear vertically, but if you think about it, the farther away the ball is, the "higher up" on the screen it would appear.

3. If y = 0 then the ball is resting on the ground, and so it is not necessary to modify the position of the ball since the z value already determines where the ball would be vertically when at rest. However, if y > 0, then you should add a small vertical offset so that the ball appears a little higher up than it normally would when at rest.

It is important that, when doing this, that the y value does not affect the position of the shadow. The shadow should appear in the same place no matter what the y value is, and should only be determined by x and z. Does that makes sense?

If you''d like, you can make it so that the larger the y value, the smaller the shadow. I like that effect.

This is also optional, but awesome: scale the motion of the ball according to the z value. An object moving at 2m/sec looks a lot faster from 4m away than it does from 16m away, right? Therefore, the closer object should move more pixels in the same amount of time even though they are moving at the same speed.

All you would have to do for this is to alter the x and y screen coordinates of the ball based on what the z value is.

Let''s say that 1 pixel = 1 meter. I know that''s silly since a 400-pixel court would be 400 meters, but just pretend.

So if the ball''s position is 26, 0, 0 then we know that the ball is at rest and is as close to the "camera" as possible (because y and z are both 0). The value for x (26) tells us that the ball should be 26 pixels from the midpoint to the right (-26 would be 26 pixels from the midpoint to the left).

Let''s change the z value to 10, so the ball is now 10 meters away from the camera. Well you should come up with some algorythm that first determines how far "up" the screen the ball should appear at any given z distance, because the meters appear smaller and smaller as you move away.

In my arbitrary example, let''s say that 10 meters is about 6 pixels up, and at that distance each meter looks like a half of a pixel. Well not instead of having the ball 26 pixels from the center, it should appear only 13 pixels away from the center because each meter = .5 pixels.

How you scale it depends on how much perspective distortion you want. Using my numbers here it will probably look way too distorted but you get the idea. You probably don''t want too much perspective distortion on a game like this, but a little could be a nice effect if you have the time.

I wouldn''t worry about scaling the size of the actualy objects though unless you REALLY want to. Most games like this don''t do it, and scaled sprites can look crappy. However it''s your game!

Share this post

Link to post
Share on other sites

  • Advertisement

Important Information

By using, you agree to our community Guidelines, Terms of Use, and Privacy Policy. 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!