2.5D AND PSEUDO 3D GRAPHICS

​ABSTRACT

This article explores the concept of pseudo 3D in video games, which involves creating the illusion of three-dimensional graphics within a two-dimensional space. The article discusses the history of pseudo 3D in games, from early examples like Pole Position to modern titles like Super Mario 3D World. It also examines the various techniques used to achieve pseudo 3D effects, such as parallax scrolling, sprite scaling, and mode 7 graphics. The article concludes by discussing the continued relevance of pseudo 3D in contemporary game design and its potential for future innovation.

Keywords: 2.5D, pseudo 3D, parallax, ray casting, projection.

What exactly are pseudo 3D and 2.5D graphics?

Long time ago computers weren’t powerful enough to be capable of rendering even the simplest 3d models in real time while keeping the smooth framerate. Yet, some aspects of 3d environment made it through hardware limitations, allowing games to cause images or scenes to simulate the appearance of being three-dimensional (pseudo 3D) when in fact they are not or enhance their 2D visuals by transferring on the image some of the 3d features otherwise possible only in 3D environment, which is called 2.5D. These techniques are used not only in video games but also in animation, graphic design, Virtual Reality, Photography and Videography.

Pseudo-3D is sometimes used in graphic design to create the appearance of three-dimensional shapes and objects, without using 3D modeling software.

Virtual Reality: 2.5D and pseudo-3D techniques can be used in virtual reality applications to make the virtual environment feel more immersive.

Photography and Videography: Pseudo-3D is sometimes used in photography and videography to create the appearance of three-dimensional space.

Overall, 2.5D and pseudo-3D techniques can be used in a variety of contexts to create the illusion of depth and perspective, without requiring the use of true 3D graphics.

Techniques for creating 2.5D and pseudo 3D graphics

Layers

One is the most basic yet nearly ever-present feature 2D games had for a while is layering. Layers allow developers to add depth to the game by providing them with an opportunity to construct the image player would see on the screen little by little via plastering new layers on top of previous ones. This allows developers to give their games a bit of depth which would not be possible otherwise. It also allows for a bunch of a more advanced features we will talk about later.

Nearly all 2D game consoles have layering feature. In fact, even NES developed by Nintendo in 1983 had computing capabilities of displaying up to 2 layers on screen at once!

Figure 1. Background and Foreground layers

As you can see on this picture, Mario most clearly looks like he is “closer” to camera than the hill on the background is, cause it’s clear to us that the part of the hill is blocked by his body.

In more modern games the number of layers used is greatly increased yet the concept is still more or less the same. Incorporating even more layers to the picture greatly increases presumable depth of the image, making us believe that there is indeed some staff happening on the foreground “closer” to us and on the background “far away” from us. In fact, since Hollow Knight is written on Unity we can switch camera to the 3D mode, showing how layers look like from another perspective.

Parallax scrolling

Now that we understand layers, it will be quite easy for us to understand what parallax scrolling is.

This technique allows as to further convince player that he is, in fact, playing not a purely 2D game by moving layers present on the screen with a different speed. By moving “foreground” layers with a faster speed than a more “background” ones we easily create a believable sense of depth, which further improves immersion.

 This type of graphical effect was first used in the 1982 arcade game Moon Patrol, some NES games, including Super Mario Bros we talked about earlier also made use of parallax effects from time to time despite having just 2 layers total.

While executing this effect is an easy and a rather straightforward task when you have infinite layers, like in Unity game engine, it was a rather complicated affect for NES developers to achieve.

To bypass the limitation of NES having just two layers (one of which being a sprite layer, reserved for characters, items and stuff) devs abused the fact that image drawing process on TV screen is not instant and in fact happens slowly, line by line. Which allows developers to assemble the image while it’s being drown on screen, thus allowing them to simulate parallax effect on one layer, by moving different parts of this one layer with different speeds.

All these times we were talking about techniques which help developers give their 2D games some sense of depth. But pseudo 3D is not just about that, because it’s aim is to make player believe that he is, in fact, placed in a real 3D environment, while in fact it’s most certainly not.

Axonometric and oblique projection

In axonometric projection and oblique projection, two forms of parallel projection, the viewpoint is rotated slightly to reveal other facets of the environment than what are visible in a top-down perspective or side view, thereby producing a three-dimensional effect. An object is "considered to be in an inclined position resulting in foreshortening of all three axes", and the image is a "representation on a single plane (as a drawing surface) of a three-dimensional object placed at an angle to the plane of projection." Lines perpendicular to the plane become points, lines parallel to the plane have true length, and lines inclined to the plane are foreshortened.

Additionally, with the help of layers described before and usage of these design practises, developers can easily create believable pseudo-3D worlds adding a real sense of depth to the buildings, items, and other stuff.

Nowadays this style is particularly prominent in a JRPG subgenre, especially thanks to tools, such as RPG Maker MZ (released in 2020, first version made in 1992!)

Ray casting

Ray casting is a first-person pseudo-3D technique in which a ray for every vertical slice of the screen is sent from the position of the camera. These rays shoot out until they hit an object or wall, and that part of the wall is rendered in that vertical screen slice.

Figure 2. Ray casting scheme

This approach was extremely popular in early 90-s, featuring games such as Doom and Wolfenstein 3d and is still sometimes used by a variety of developers, wanting reminiscent on a good old day. Spooky's Jump Scare Mansion being one of the most prominent examples.

Usage of 2.5D and Pseudo-3D in real 3D games

Bump mapping is a technique applied to textures in 3D rendering applications such as video games to simulate bumps and wrinkles on the surface of an object without using more polygons. To the end user, this means that textures such as stone walls will have more apparent depth and thus greater realism with less of an influence on the performance of the simulation.

Bump mapping is achieved by perturbing the surface normals of an object and using a grayscale image and the perturbed normal during illumination calculations. The result is an apparently bumpy surface rather than a perfectly smooth surface although the surface of the underlying object is not actually changed.

The primary limitation with bump mapping is that it perturbs only the surface normals without changing the underlying surface itself. Silhouettes and shadows therefore remain unaffected, which is especially noticeable for larger simulated displacements.

In the legend of Zelda BOTW objects from far away loaded with special low polygon models. Yet it’s not enough for trees – there are a lot of them. Thus, special 2D textures known as Impostors are used. Yet it’s not enough to make 2D texture look realistic, thus a normal map is present, allowing texture to look more whole by changing it accordingly depending on lightning throughout the day, basically sun position.

Also, each polygon has so called vertex normals. These normal represent the direction polygon is facing, such it’s not always obvious. By checking how much these directions correlate with light direction we can determine how bright polygon should be.

We don’t even need 3D image for that. We just need screenshot of the game with no lighting applied and 3 different pictures, each representing by different shades of black/white how much each vector faces corresponding axes.

We can further optimize that by making each of these 3 images RGB colored and combining them into one, called Normal Buffer.

Normal buffer and screenshot of the game is basically all we need to do some basic scene lightning completely in 2D! Furthermore, creating even more of these buffers can allow as to add different effect to the game at ease at the stage called post processing, which happening after all 3D engine is already done.

Perceptual effects of 2.5D and pseudo 3D graphics

2.5D and pseudo 3D graphics are techniques that use a combination of 2D and 3D elements to create an illusion of depth. These techniques are often used in video games, animation, and other forms of digital media.

There are a number of psychological and perceptual effects that can be caused by 2.5D and pseudo 3D graphics. One of the most common effects is an increased sense of immersion. When viewers see objects that appear to have depth, they are more likely to feel like they are part of the scene. This can lead to a more engaging and realistic experience.

Another effect of 2.5D and pseudo 3D graphics is an improved sense of depth perception. When viewers see objects that appear to be at different distances, they are better able to judge the distance between those objects. This can be helpful for tasks such as driving or playing sports.

Finally, 2.5D and pseudo 3D graphics can also improve the realism of a scene. When objects appear to have depth and texture, they look more realistic to viewers. This can make a scene more believable and engaging.

There have been a number of studies and experiments conducted on the perceptual effects of 2.5D and pseudo 3D graphics. One study found that 2.5D graphics can improve the sense of immersion in a virtual environment. Another study found that pseudo 3D graphics can improve the depth perception of viewers.

Overall, the research suggests that 2.5D and pseudo 3D graphics can have a few positive perceptual effects. These techniques can improve the sense of immersion, depth perception, and realism of a scene. As a result, they can make a scene more engaging and believable for viewers.

Our study about video games

Game with ray casting

We talked about ray tracing approach earlier. Despite sounding complicated, it is surprisingly easy to implement. We were capable of doing our very own version of such game engine on Java in under 2 hours.

Figure 3. Game engine in run time

We just send a number of rays, coming from the point our players stands on a completely 2d map. Upon rays colliding with the other 2D objects, such as walls, we can calculate the length of it and then display a vertical line with a proportional length (the longer the line is, the sorter the distance between player and objects), ultimately resulting in a first-person pseudo 3D world.

The code of our little game engine is completely open source, and you can view it freely.

Game with RPG Maker

We also implemented a game by using RPG Maker to make you nderstand how this approach works. Here are some explanations.

You can see level representing market of a desert town I created. Upon opening the game, we can freely roam through our town, experiencing some 3D effects added to the picture. This is all thanks to the power of layers. Let’s look at our level a bit more thoroughly: as you can see, there are 4 different levels present in RPG maker.

Let’s look at barrels placed on level 3, then on metal pipe, placed at level 4. Transparency helps as understand how levels work. Since player is placed on a third level, we can easily make him walk “under” tent by simply placing its tip on level 4.

The game is available to everyone to freely look at.

Figure 4. RPG maker transparency

Conclusion

Nowadays, the revival of isometric projection is not just a source of nostalgia, but the result of real advantages of design. Nostalgia certainly plays a role in why you still see isometry, but to say that isometry is outdated, or its life is coming to an end is silly. Games that use isometry prove that it is a smart design element that passed the test of time.

Technologies do not stand still and the third dimension for us is already something ordinary, we are already slowly moving on to VR projects. However, this did not affect the existence of projects using isometry in any way, and even on the contrary, their number is growing every year. It finds new, sometimes unexpected uses, and the popularity of games with isometry beats many other games from the first or third person.

Isometry is an integral part of the video game industry. This situation shows us that isometric video games are not just a passing stage, they will continue to exist for many more years, and they have been played and will be played, no matter what.

References:

1. A History of Pseudo-3D Games – Using 2D Animation With 3D Gameplay [Electronic resource]. – Available at: https://www.fromdustscratch.com/2018/12/a-history-of-psuedo-3d-games-using-2d-animation-with-3d-gameplay-as-of-2018/ (Accessed: 21.06.2023).
2. CG101: What is a Bump Map?- YouTube [Electronic resource]. – Available at: https://www.youtube.com/watch?v=D7uK4WWW-Rk&t=86s (Accessed: 21.06.2023).
3. How The Wind Waker Redefined Cell Shading - YouTube [Electronic resource]. – Available at: https://www.youtube.com/watch?v=mnxs6CR6Zrk&t=430s&ab_channel=Jasper (Accessed: 17.06.2023).
4. Lou's Pseudo 3d Page [Electronic resource]. – Available at: http://www.extentofthejam.com/pseudo/ (Accessed: 20.06.2023).
5. Nintendo Entertainment System (NES) Architecture | A Practical Analysis [Electronic resource]. – Available at: https://megacatstudios.com/ru/blogs/retro-development/sprite-layering-on-the-nes (Accessed: 12.06.2023).
6. Sprite Layering on the NES – Mega Cat Studios, Inc. [Electronic resource]. – Available at: https://megacatstudios.com/ru/blogs/retro-development/sprite-layering-on-the-nes (Accessed: 12.06.2023).
7. The small detail behind Breath of the Wild's Thousands of Trees - Quick Answer #shorts - YouTube [Electronic resource]. – Available at: https://www.youtube.com/watch?v=sh6s17WnWBM&t=2s (Accessed: 12.06.2023).
8. Why Did Link's Cell Shading Disappear? - YouTube [Electronic resource]. – Available at: https://www.youtube.com/watch?v=By7qcgaqGI4&t=1872s (Accessed: 21.06.2023).
9. 2.5D – Wikipedia [Electronic resource]. – Available at: https://en.wikipedia.org/wiki/2.5D (Accessed: 12.06.2023).