Ever since computers became capable of running actual videogames, developers were drawn to try and break free from the limitations of 2D graphics. This became possible with the advent of microcomputers, which were powerful enough to render wireframe 3D and even flat-shaded polygons. But for the most part they’d make do with tricks, simulating depth with the traditional sprites and some optical illusions.
How 2.5D works
Simply put, 2.5D is the generic name for faking 3D computer graphics with 2D. It usually comes in the form of isometric graphics. But there is another technique, that allows for perspective and even polygons, with extremely easy programming, as long as you accept a few limitations.
How easy?
This easy:
var TwoPointFive = {
Camera: function (x, y, z, f) {
this.x = x || 0;
this.y = y || 0;
this.z = z || 0;
this.f = f || 200;
},
project: function (x, y, z, camera) {
x -= camera.x;
y -= camera.y;
z -= camera.z;
var scale = camera.f / z;
var px = x * scale;
var py = y * scale;
return [px, py, scale];
}
}
Believe it or not, these 18 lines of code are all you need to draw things in perspective. It is based on the mathematics of similar triangles they taught you in middle school and never told you what it was good for.
The rest is ordinary <canvas> programming — you may want to skim a tutorial if you’ve never seen that before. Of particular interest is this line:
var cam = new TwoPointFive.Camera(0, 1.65, 0, 500);
Note how the focal length is set equal to one side of my canvas element in pixels. See, what we have here is effectively a virtual pinhole camera; shorten the focal distance too much, and the perspective becomes exagerrated, as if we used wide-angle lens; lengthen it too much, and the field of view becomes impractically small.
All other measurements are in meters, which is a good convention to use in 3D; but whatever you choose, make sure to use the same unit everywhere.
What you can and can’t do with 2.5D
The astute reader may have noticed this is the same technique used to implement parallax scrolling in otherwise 2D videogames. But you can just as well create fancy dioramas or games with depth, as long as the camera doesn’t need to rotate or tilt. The whole point of this technique is to require as few calculations as possible; the moment you start churning sines and cosines, you might as well switch to OpenGL.
Advantages:
- Nicer than isometric view — easier to code, and it gives you actual perspective.
- You’re still working with good old 2D graphics. But you can also use wireframe or polygons if you want to.
Disadvatages:
- It can’t match the flexibility of actual 3D.
- You need large graphics, possibly pre-rendered in multiple sizes. (Resizing raster images on the fly is too much for e.g. mobile platforms.)
- Not really worth it — nowadays even feature phones have 3D grahics acceleration.
Is this particular flavor of 2.5D just a gimmick, then? Nope. I’ve already used it successfully in one game (unfortunately unpublished), and with so much unexplored territory between 2D and 3D there is still a lot of potential in it.
Comments
Don’t forget that you can still easily do 2.5D stuff with a GPU as well. Also, these days 2.5D refers just as much to something that is done using a full 3D render pipeline but only provides (essentially) 2D gameplay, such as LittleBigPlanet or New Super Mario Bros.
fluffy
Yes, the term is somewhat loaded, and the Wikipedia article gives several definitions, including yours. I’ll think about squeezing this into the main text.
Felix