I made a game! Buy on Steam

In the 1990s, games started to move from 2D to 3D and if an alien would have landed on earth back then, it surely would have thought that nobody needs these low-res polygon-models without any filtering. Then it would destroy the earth.

Later his mother would teach him what made humans special: Even during the 2D-Era they had enormous willpower to render 3D – even if it wasn’t yet possible! It started with implementing a parallax effect (depending on the “distance” some elements move faster than others). This parallax effect blew people away back in 1982:

Game: Moon Patrol Source: manatsea

It’s really interesting that a bunch of (differently) moving “planes” have such a strong effect. But it’s a bit flat, right? A perspective camera above the ground would be cool but isn’t possible without “real” 3D? Well, let’s have a look through a time machine to the SNES-Era:

Game: Moon Patrol Source: Bluekirby22

This looks 3D but it’s not! It is SNES tech and is called “Mode 7“. To render it, Nintendo manipulated textures (trading height for depth) with some coder magic. Here’s someone who knows the recipe (he talks about the Gameboy Advance but as far as i know it’s true for the SNES either):

“The GBA doesn’t have any real 3D hardware capabilities, but you can fake it by cleverly manipulating the scaling and translation REG_BGxX-REG_BGxPD for every scanline.”
-Cearn

By the way: even today some people are crazy about the Mode 7 and use it for some projects with the RPG Maker. Impressive!

Nowadays we could render every asset in “real” 3D to give them volume but there are examples where this is just not needed. In fact, it’s sometimes even better to do it old-schoolish:

All the bushes, trees and enemies in Don’t Starve are flat. And i think it looks awesome!

For me, Diablo 2 (2D ARPG from year 2000) was the first game which brought the “Moon Patrol”-parallax effect and something like the “Mode 7”-floor-rendering together.

Let’s look at the game with standard settings. Pure 2D. No perspective. No parallax effects:

Source: Diablo 2

But the game had a “Perspective Mode”. Let’s turn it on! Pay attention, how the pales don’t cover the same floor-pixels all the time:

Source: Diablo 2

It looks like in Don’t Starve, but remember: Diablo 2 is a 2D game! There’s no official information about this mode. All what you read now, was only possible by using the awesome tools/documentation by Tom Amigo and Paul Siramy – special thanks to Paul, which answered all my questions and supported me a lot!

It might seem, that Blizzards coders only move the sprites somehow but if you compare the game with perspective mode on and off while standing still, it gets better visible, that they actually “tilt” everything towards the horizon.

Source: Diablo 2

This gets even better visible when i add a beautiful checker pattern to the floor textures:

Source: Diablo 2

I mean, think of it: every asset has to be transformed somehow, to look perspectively without any gaps at the sprite-borders. This is even more impressive if you see of how much sprites the scene consists (a lot chances for gaps…):

Source: Diablo 2

Source: Diablo 2

And game-tech can’t be complicated enough! So please consider that Blizzard subdivides the sprites into 32x32px parts. This seems to be an optimization to only load necessary parts of an image. Additionally it becomes handy when the transformation is happening. Here you see how an ingame sprite is subdivided:

For every 32px I painted a line on the pale-texture to show a faked wireframe. The result was more interesting than i expected! Like the vertical lines indicate, the sprite got a “real” vanishing point deep in the ground (which you would expect when it comes to perspective):

Source: Diablo 2

However, I don’t know why the lower edge of the sprite is bent that way. For the perspective it wouldn’t be necessary (below is a 3Ds Max scene to show that the horizontal lines are straight if the camera isn’t rotated around its front axis):

Anyway, Blizzards wizards will know why they do that. It may be worth noting, that this deformation is depended on the “angle” you’re looking at the sprite (or the position of the player/camera). Here you can see how the lower edge is straightened up:

Source: Diablo 2

For those who are interested in seeing the deformation on a checker pattern, here’s a screenshot:

Source: Diablo 2

If you think that all this is interesting enough, than be amazed by reading more. Paul writes that Sprites can have an orientation value. Depending on this value the sprites are deformed differently (yeah…more complexity)! Here’s an example of some wall which have directions defined like (Left Wall, Upper Wall, Lower-Left corner, etc.)

Let me demonstrate what (i assume) has to be done. On the next picture you can see a standard ISO view. Below that, there are the steps which i had to make to “fit” the sprites to a “perspective” ground. I had to re-position, re-scale and deform twice to fit them to the floor-grid.

As you see, this sprite-transformation (as i imagine it) is kind of complicated. Let’s have a look how it actually was made in the game:

Source: Diablo 2

This sprite is oriented in a different way than the example i mentioned before. And as you see, the deformation is very different! No bending of the upper/lower edges but instead it looks like the edges “point” to a vanishing point to the left. Again an example how it looks in 3Ds Max:

It’s seems that the game exaggerates the deformation to avoid any gaps between the sprites and i think it’s very successful with that because every sprite of the fence fits perfectly. Pay attention how the edge-orientation (upper edges, lower edges) changes depending on their position:

Source: Diablo 2

How important the sprite-orientation values is, shows the next example. If i just tell the game that this isn’t a “right” but a “left” oriented wall, it’s gap-time:

Source: Diablo 2

This mode was only activatable with D3D in fullscreen (Diablo 2 also supported Glide and Software Rendering) what made me trying to get my hands on old DirectX-Documentation to get more information. But i wasn’t successful.

So…here ends our trip and i hope you are amazed as I am by this crazy example of the will to make 2D look more 3D. The lack of official information or statements of the government (search your government website for “Diablo 2 perspective mode” … you’ll find nothing!) leads me to one inevitable conclusion:

All this is alien technology!

Tools/Tutorials used for this article

Update 1
Thanks hans wurst for this link about image aberration which really looks like what we see in Diablo 2 (with activated perspective mode). I don’t know, if this is what the D2-Coders used but at least it looks very similar.
Update 2
Paul Simary just mentioned this article on Gamasutra where more details about the perspective mode where revealed. Thanks Paul! That’s awesome!

A 3D graphics card was required to enable Diablo 2’s Perspective Mode. (Lord of Destruction expansion shown.)

A solution occurred to him late one morning. Like the original game, Diablo IIunfolds on a grid, with one major difference. Each diamond-shaped tile is composed of several smaller diamond tiles that allow for some overlap. This meant that objects such as player-characters, monsters, treasure chests, and items can occupy the same squares on a grid by standing in smaller squares within each larger square, an impossibility in the first Diablo. A more granular layout facilitated Dave’s pseudo-3D solution, which he called Perspective Mode.

His idea was to take the texture stored in every miniature tile and rotate it just a smidge, so that it wasn’t quite orthogonal, as players moved around the screen. The game passed those textures to the video card, which painted them onto two polygons and then stretched them vertically and horizontally so that they appeared larger or smaller depending on the player-character’s position. Trees and buildings, for example, seemed larger or smaller as players moved closer or further away, and scrolled by at a different speed than other objects in the foreground and background, creating a parallax effect. Objects shimmered slightly, the result of bilinear filtering, a process baked into graphics cards that smooths out textures when objects are rendered larger or smaller than their native resolutions.

Everything, from characters and items to structures such as the cabins and towers in Act I, expanded and shrank in Perspective Mode, an option only available to users running 3D cards that the game supported. “It was doing real, 3D math, and making this grid scale slightly, stretch slightly,” Dave explained. “It gave a real sense of depth to the world.”

In an impressively short span of time, Perspective Mode was finished and rolled into the latest build of the game. “There were a bunch of things I had to do to make sure walls lined up properly, and the lighting, but I think I wrote that fairly quickly,” Dave continued. “I think it only took me a week or two to get it working. People loved the way it looked, and it really was awesome, but the artists weren’t super happy they had to go back and chop up things and render them differently. We did feel it was worth it in the end, and added a lot to the game.”

Source: How StarCraft and Shower Epiphanies Influenced Diablo 2’s Design

Update 3
Thanks FFITD who mentioned in the comments, that Cultures had such a trick as well! Check out the video below:

15 thoughts on “Don’t starve, Diablo – Parallax 7

  1. Odious Repeater

    “However, I don’t know why the lower edge of the sprite is bent that way.”

    Does it have anything to do with the position of the piece in the middle. Even in the non-perspective version it’s positioned closer to the camera/lower than the other two. So maybe it’s to do with the fact that they don’t all stick out of the ground at the same height as each other. Just a thought.

    Reply
    1. Simon Post author

      Thanks for your comment :) I’m not sure because this bending has to work on all of the sprites of the same type (oriented to the camera direction). So if you paint something different on the texture, (e.g. three pales sticking at the same “height” in the ground) it has to work too…that would be my thought.

      Reply
      1. Dys

        I don’t know if it would be correct, but I’d conjecture it was done to simulate lens distortion, a la a fisheye effect. These sort of tricks, as I’m sure you know, are used to imply qualities of a photograph which itself implies reality. That might be a little misleading and it may simply have been to enhance the perceived perspective through the lens effect. In either case from what I’ve seen it does seem to follow.

        Reply
  2. Mister P

    What a wonderful site! It makes me want to replay those old games just to see these game tricks :)

    Reply
    1. Simon Post author

      Sorry for the late reply but thank you very much for the link! I don’t know if they thought about this lens-distortion but it looks very much like that. I’ll add this as an update to the artice. Maybe we’re lucky and a D2-Coder will see it and correct us, when we’re wrong. :)

      Reply
  3. Benedikt S. Vogler

    Thanks for sharing. Very interesting and useful.
    I hope I can use this knowledge to achieve some similar effect in my isometric game engine (http://wurfelengine.net)
    I am using three dimensions and transporting depth information to the player is very hard using orthographic projection.

    Reply
    1. Simon Post author

      Glad you find it useful :) The wurfel engine looks interesting :) Remembers me on Zomboid! Cool!

      Reply
  4. FFITD

    Another game that I know of that used perspective tricks to make 2D look more 3D is Cultures: https://youtu.be/okbIF5OmMg8?si=X80MSDL3mfiIUoXu

    In that one you can toggle it with the mousewheel. Thanks for the article, I’ll read it more carefully as soon as I have some free time, the effect in Cultures always confused my brain whenever I tried to understand it and it seems similar to the one you show here.

    Reply
    1. Simon Post author

      Wow, this is super cool! I need to add this example as update to the article later. Thanks for the hint!

      Reply
  5. John Kaniarz

    Glide was the original API and D3D was tacked on late in development. Glide wasn’t full 3D acceleration, you had to manually rotate and project the triangles into screen space before giving them to the API. D3D does the math for you and due to API differences, the perspective in D3D wasn’t water tight. I remember this being noticeable as you leave the Act IV town. The D3D port also had lower texture resolution.

    I don’t know how much it affects your analysis but you should check out D2 using a Glide wrapper. I used http://www.svenswrapper.de/english/ back in the day.

    I’m also curious how much wireframe distortion there is on the onion bulb tower in the Act II town. It’s the most prominent perspective effect in the game that I remember.

    Reply
    1. PBT

      Absolutely, the differences between Glide and D3D in Diablo 2 are quite striking. The hands-on approach with Glide, as opposed to D3D’s automated process, definitely changed how things looked and felt in-game. And you’re right about the texture resolution in D3D – it wasn’t as sharp. Exploring the game with a Glide wrapper could really highlight these contrasts, especially in areas like the Act II onion bulb tower. It’d be interesting to see the level of distortion there. Thanks for the nostalgic trip! ;-)

      Reply
    2. JPK

      D3D is also missing the Glide renderer’s colored lighting, which has a big impact on the atmosphere of the game’s caves and dungeons.

      The go-to D2 glide wrapper these days is D2DX. Sven’s is not so great with Win10/11.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *