Kids Code & Computer Science

Learn some of the tricks game developers use to simulate an extra dimension.

If you’re an avid gamer, you’ll know that games come in one of two graphical styles; a flat 2D game, or a larger 3D game. Sometimes, there are “2.5D” games, which use 3D graphics but only allow the characters to move as if they were in a 2D game.

Did you know, however, that 3D games weren’t always around? There was a period where consoles and computers struggled very hard to render 3D games, to the point where it was best to stick with 2D graphics instead.

This is because 2D games only need two methods of movement in order to function properly. They only need to handle moving up and down (when your character jumps) and left and right (when your character walks to the left or right).

3D games, however, require another plane which handles movement going toward and back (when your character runs towards or away from you). Really smart people call these the “X-axis,” “Y-axis,” and “Z-axis,” respectively.

The thing is, while old consoles and computers weren’t powerful enough to use a Z-axis, developers had ways to play with the X and Y-axis to make it look like there was one. This gave the illusion of a 3D image, even though it was still only in 2D.

One trick is called parallax scrolling. It’s a lot easier than it sounds!

Usually, 2D games would have one background image that would move as your character moved. A parallax scrolling background would have one background on top of another. The ‘top’ background would then scroll faster than the ‘bottom’ one. This gives the illusion of 3D, as the foreground elements move faster than the back.

2D artists could also get smart with how they drew their images to make them appear 3D. For example, one of the early Sonic the Hedgehog games, Sonic 3, featured a bonus level called “Blue Sphere.”

To the players, it appeared as if Sonic was walking on a 3D sphere. In actual fact, the sphere was 2D and drawn in a way where the perspective was skewed, giving the appearance of 3D. The game then looped the graphics so it appeared as if Sonic was walking across a rolling plane when in actual fact it was repeating seamlessly.

Some games even performed live calculations for the 3D effect! This was the case for the old game Mickey Mania, where one scene has Mickey fleeing from a moose on a “3D” plane.

What was actually happening was the game drew an image of the floor in a distorted perspective, so it looked like the floor was wrapped around the cylinder. Then, the game moved the colors upward and looped it, so it looked like the cylinder was rolling. Then they just had to put Mickey Mouse on the top, and tada — a pseudo-3D effect!

If you’d like a blast from the past, take a look at some old games and see how they provide 3D effects before “real” 3D was possible. Just because the developers were limited in their scope, doesn’t mean they could be smart with their tricks!

Learn More

3-dimensional space

https://www.intmath.com/vectors/6-3-dimensional-space.php

Tutorial: adding depth to 2D game

https://gamedevelopment.tutsplus.com/tutorials/parallax-scrolling-a-simple-effective-way-to-add-depth-to-a-2d-game–cms-21510

Mickey Mania’s 3D Chase

https://www.youtube.com/watch?v=nt-AxAqlrOo

3D Modeling Overview

https://www.cadcrowd.com/blog/3d-modeling-overview-history-industry-applications/

3D Modeling History

https://ufo3d.com/history-of-3d-modeling

3D Hand-drawn pictures

https://tyeeoutdoorexperience.com/2018/06/13/diy-3d-hand-drawn-pictures-functional-steam/

How to: parallax

https://www.w3schools.com/howto/howto_css_parallax.asp

Parallax scrolling

https://www.tynker.com/programming-for-kids/explore/tynker-labs/parallax-scrolling-1tvd.html

Parallax scrolling

http://encyclopedia.kids.net.au/page/pa/Parallax_scroll

2D to 3D Cyberchase

https://www.pbslearningmedia.org/resource/kids-lab-video-cyberchase-2d-3d/from-2d-to-3d-cyberchase/