beanz Magazine

3D in 2D Games

Konstantinos Mavroudis on Flickr

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/

Also In The October 2019 Issue

Bring out your virtual carving knives — it’s time to give your digital pumpkins some spooky faces!

30+ ideas for STEAM-theme gifts for kids of all ages!

Teach kids basic coding skills by letting them program Botley to zoom around the room, draw shapes, and even avoid obstacles!

How 3D printing could help us get to Mars, and create new tools, homes, spacecrafts — even organs!

No discussion of design is complete without the history of lorem ipsum. It's more than placeholder text you stuff into a visual design.

"Hello World!" is one of the first programs you learn how to code. Here's the phrase in 4 languages with links to 100 more examples.

Learn the delicious-sounding secrets that websites use to keep your passwords safe from hackers.

A simple, quirky theorem with big applications, from picking socks to counting hairs.

Are you ready to create your virtual own solar system? With a little Python code and a little math, the sky’s the limit!

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

How scammers can trick you into downloading malware onto your own computer.

There are pros and cons to networking all the “smart” devices in your home. What surprises does the future hold?

Sometimes, even the most dynamic languages need to classify and check data. Now, you can add your own types to any language!

Is it possible to steal software? And how do we know who owns code?

Check out this nifty feature that helps programs distinguish between variables with different scopes.

Create a simple electronic game with CircuitPython and Adafruit, and test your reflexes against friends and family!

Links from the bottom of all the October 2019 articles, collected in one place for you to print, share, or bookmark.