Tag Archives: Diablo 2

Hey, I'm Simon and I made a game!! :)
Support me: BUY & Demo 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: