# Isometric video game graphics

Last updated

Isometric video game graphics are graphics employed in video games and pixel art that use a parallel projection, but which angle the viewpoint to reveal facets of the environment that would otherwise not be visible from a top-down perspective or side view, thereby producing a three-dimensional (3D) effect. Despite the name, isometric computer graphics are not necessarily truly isometric i.e., the x, y, and z axes are not necessarily oriented 120° to each other. Instead, a variety of angles are used, with dimetric projection and a 2:1 pixel ratio being the most common. The terms "3/4 perspective", "3/4 view", "2.5D", and "pseudo 3D" are also sometimes used, although these terms can bear slightly different meanings in other contexts.

## Contents

Once common, isometric projection became less so with the advent of more powerful 3D graphics systems, and as video games began to focus more on action and individual characters. [1] However, video games using isometric projectionespecially computer role-playing games have seen a resurgence in recent years within the indie gaming scene. [1] [2]

## Overview

Corresponding 3D camera rotation angles for true isometric projection (at left) and the form of dimetric projection commonly found in video games and pixel art (at right). [3] The expression arctan(sin(45°)) is equal to ≈35.264°.
True isometric drawing of a cube. Note the 120° angles separating the x, y and z axes, as well as the equal lengths of each of the cube's edges. The expression arctan(sin(≈35.264°)) or arctan(sin(arctan(sin(45°)))) is equal to 30° and forms a pixel ratio of ≈1.732:1.
The form of dimetric projection commonly used in video games and pixel art. Only two of the angles separating the x, y and z axes are the same, and only some of the lengths of the cube's edges are equal. The expression arctan(sin(30°)) is equal to ≈26.565° and forms a 2:1 pixel ratio.

A well-executed isometric system should never have the player thinking about the camera. You should be able to quickly and intuitively move the view to what you need to look at and never consider the camera mechanics. Trying to run a full-3D camera while playing out a real-time tactical battle is certain to cause a helmet fire in new players as they are quickly overwhelmed by the mechanics.

Trent Oster, co-founder of BioWare and founder of Beamdog [1]

In the fields of computer and video games and pixel art, the technique has become popular because of the ease with which 2D sprite- and tile-based graphics can be made to represent 3D gaming environments. Because parallelly projected objects do not change in size as they move about an area, there is no need for the computer to scale sprites or do the complex calculations necessary to simulate visual perspective. This allowed 8-bit and 16-bit game systems (and, more recently, handheld and mobile systems) to portray large game areas quickly and easily. And, while the depth confusion problems of parallel projection can sometimes be a problem, good game and level design can alleviate this.

Further, though not limited strictly to isometric video game graphics, pre-rendered 2D graphics can possess a higher fidelity and use more advanced graphical techniques than may be possible on commonly available computer hardware, even with 3D hardware acceleration. [4] Similarly to modern CGI used in motion pictures, graphics can be rendered one time on a powerful super computer or render farm, and then displayed many times on less powerful consumer hardware, such as on television sets, tablet computers and smartphones. This means that static pre-rendered isometric graphics often look better compared to their contemporary real-time-rendered counterparts, and may age better over time compared to their peers. [2] However, this advantage may be less pronounced today than it was in the past, as developments in graphical technology equalize or produce diminishing returns, and current levels of graphical fidelity become "good enough" for many people.[ citation needed ]

Lastly, there are also gameplay advantages to using an isometric or near-isometric perspective in video games. For instance, compared to a purely top-down game, they add a third dimension, opening up new avenues for aiming and platforming. [1] Secondly, compared to a first- or third-person video game, they allow you to more easily field and control a large number of units, such as a full party of characters in a computer role-playing game, or an army of minions in a real-time strategy game. [1] Further, they may alleviate situations where a player may become distracted from a game's core mechanics by having to constantly manage an unwieldy 3D camera. [1] I.e., the player can focus on playing the game itself, and not on manipulating the game's camera. [1]

In the present day, rather than being purely a source of nostalgia, the revival of isometric projection is the result of real, tangible design benefits. [1]

Some disadvantages of pre-rendered isometric graphics are that, as display resolutions and display aspect ratios continue to evolve, static 2D images need to be re-rendered each time in order to keep pace, or potentially suffer from the effects of pixelation and require anti-aliasing. Re-rendering a game's graphics is not always possible, however; as was the case in 2012, when Beamdog remade BioWare's Baldur's Gate (1998). Beamdog were lacking the original developers' creative art assets (the original data was lost in a flood [5] ) and opted for simple 2D graphics scaling with "smoothing", without re-rendering the game's sprites. The results were a certain "fuzziness", or lack of "crispness", compared to the original game's graphics.[ citation needed ] This does not affect real-time rendered polygonal isometric video games, however, as changing their display resolutions or aspect ratios is trivial, in comparison.

### Differences from "true" isometric projection

The projection commonly used in video games deviates slightly from "true" isometric due to the limitations of raster graphics. Lines in the x and y directions would not follow a neat pixel pattern if drawn in the required 30° to the horizontal. While modern computers can eliminate this problem using anti-aliasing, earlier computer graphics did not support enough colors or possess enough CPU power to accomplish this. Instead, a 2:1 pixel pattern ratio would be used to draw the x and y axis lines, resulting in these axes following a ≈26.565° (arctan(1/2)) angle to the horizontal. (Game systems that do not use square pixels could, however, yield different angles, including "true" isometric.) Therefore, this form of projection is more accurately described as a variation of dimetric projection, since only two of the three angles between the axes are equal to each other, i.e., (≈116.565°, ≈116.565°, ≈126.870°).

## History of isometric video games

Some three-dimensional games were released as early as the 1970s, but the first video games to use the distinct visual style of isometric projection in the meaning described above were arcade games in the early 1980s.

### 1980s

The use of isometric graphics in video games began with Data East's DECO Cassette System arcade game Treasure Island , [6] released in Japan in September 1981, [7] but it was not released internationally until June 1982. [8] The first isometric game to be released internationally was Sega's Zaxxon , which was significantly more popular and influential; [9] [10] it was released in Japan in December 1981 [11] and internationally in April 1982. [8] Zaxxon is an isometric shooter where the player flies a space plane through scrolling levels. It is also one of the first video games to display shadows. [9]

Another early isometric game is Q*bert . [12] Warren Davis and Jeff Lee began programming the concept around April 1982. The game's production began in the summer and then released in October or November 1982. [13] Q*bert shows a static pyramid in an isometric perspective, with the player controlling a character which can jump around on the pyramid. [9]

In February 1983, [8] the isometric platform game arcade game Congo Bongo was released, running on the same hardware as Zaxxon. [14] It allows the player character to traverse non-scrolling isometric levels, including three-dimensional climbing and falling. The same is possible in the arcade title Marble Madness , released in 1984.

2D (at left) and 3D (at right) coordinates of a typical dimetric video game sprite

In 1983, isometric games were no longer exclusive to the arcade market and also entered home computers, with the release of Blue Max for the Atari 8-bit family and Ant Attack for the ZX Spectrum. In Ant Attack, the player could move forward in any direction of the scrolling game, offering complete free movement rather than fixed to one axis as with Zaxxon. The views could also be changed around a 90 degrees axis. [15] The ZX Spectrum magazine, Crash , consequently awarded it 100% in the graphics category for this new technique, known as "Soft Solid 3-D". [16]

A year later, the ZX Spectrum game Knight Lore was released. It was generally regarded as a revolutionary title [17] that defined the subsequent genre of isometric adventure games. [18] Following Knight Lore, many isometric titles were seen on home computers – to an extent that it once was regarded as being the second most cloned piece of software after WordStar , according to researcher Jan Krikke. [19] Other examples out of those were Highway Encounter (1985), Batman (1986), Head Over Heels (1987) [20] and La Abadía del Crimen (1987). Isometric perspective was not limited to arcade/adventure games, though; for example, the 1989 strategy game Populous used isometric perspective.

### 1990s

A television set drawn in near-isometric 2:1 pixel art. (Enlarged to show the pixel structure.) [21]
3D rendering mimicking the video game Fallout's use of trimetric projection and a hexagonal grid

Throughout the 1990s several successful games such as Syndicate (1993), SimCity 2000 (1994), Civilization II (1996), X-COM (1994), and Diablo (1996) used a fixed isometric perspective. But with the advent of 3D acceleration on personal computers and gaming consoles, games previously using a 2D perspective generally started switching to true 3D (and perspective projection) instead. This can be seen in the successors to the above games: for instance SimCity (2013), Civilization VI (2016), XCOM: Enemy Unknown (2012) and Diablo III (2012) all use 3D polygonal graphics; and while Diablo II (2000) used fixed-perspective 2D perspective like its predecessor, it optionally allowed for perspective scaling of the sprites in the distance to lend it a "pseudo-3D" appearance. [22]

Also during the 1990s, isometric graphics began being used for Japanese role-playing video games (JRPGs) on console systems, particularly tactical role-playing games, many of which still use isometric graphics today. Examples include Front Mission (1995), Tactics Ogre (1995) and Final Fantasy Tactics (1997)the latter of which used 3D graphics to create an environment where the player could freely rotate the camera. Other titles such as Vandal Hearts (1996) and Breath of Fire III (1997) carefully emulated an isometric or parallel view, but actually used perspective projection.

Isometric, or similar, perspectives become popular in role-playing video games, such as Fallout and Baldur's Gate . In some cases, these role-playing games became defined by their isometric perspective, which allows larger scale battles. [1]

### Kickstarter

Isometric projection has seen continued relevance in the new millennium with the release of several newly-crowdfunded role-playing games on Kickstarter. [1] These include the Shadowrun Returns series (2013-2015) by Harebrained Schemes; the Pillars of Eternity series (2015-2018) and Tyranny (2016) by Obsidian Entertainment; and Torment: Tides of Numenera (2017) by inXile Entertainment.[ citation needed ] Both Obsidian Entertainment and inXile Entertainment have employed, or were founded by, former members of Black Isle Studios and Interplay Entertainment. Obsidian Entertainment in particular wanted to "bring back the look and feel of the Infinity Engine games like Baldur's Gate, Icewind Dale , and Planescape: Torment ". [1] Lastly, several pseudo-isometric 3D RPGs, such as Divinity: Original Sin (2014), Wasteland 2 (2014) and Dead State (2014), have been crowdfunded using Kickstarter. These titles differ from the above games, however, in that they use perspective projection instead of parallel projection.[ citation needed ]

The term "isometric perspective" is frequently misapplied to any game with anusually fixedangled, overhead view that appears at first to be "isometric". These include the aforementioned dimetrically projected video games; games that use trimetric projection, such as Fallout (1997) [23] and SimCity 4 (2003); [24] games that use oblique projection, such as Ultima Online (1997) [25] and Divine Divinity (2002); [26] and games that use a combination of perspective projection and a bird's eye view, such as Silent Storm (2003), [27] Torchlight (2009) [28] and Divinity: Original Sin (2014). [29]

Also, not all "isometric" video games rely solely on pre-rendered 2D sprites. There are, for instance, titles which use polygonal 3D graphics completely, but render their graphics using parallel projection instead of perspective projection, such as Syndicate Wars (1996), Dungeon Keeper (1997) and Depths of Peril (2007); games which use a combination of pre-rendered 2D backgrounds and real-time rendered 3D character models, such as The Temple of Elemental Evil (2003) and Torment: Tides of Numenera (2017); and games which combine real-time rendered 3D backgrounds with hand-drawn 2D character sprites, such as Final Fantasy Tactics (1997) and Disgaea: Hour of Darkness (2003).

One advantage of top-down oblique projection over other near-isometric perspectives, is that objects fit more snugly within non-overlapping square graphical tiles, thereby potentially eliminating the need for an additional Z-order in calculations, and requiring fewer pixels.

## Mapping screen to world coordinates

One of the most common problems with programming games that use isometric (or more likely dimetric) projections is the ability to map between events that happen on the 2d plane of the screen and the actual location in the isometric space, called world space. A common example is picking the tile that lies right under the cursor when a user clicks. One such method is using the same rotation matrices that originally produced the isometric view in reverse to turn a point in screen coordinates into a point that would lie on the game board surface before it was rotated. Then, the world x and y values can be calculated by dividing by the tile width and height.

Another way that is less computationally intensive and can have good results if the method is called on every frame, rests on the assumption that a square board was rotated by 45 degrees and then squashed to be half its original height. A virtual grid is overlaid on the projection as shown on the diagram, with axes virtual-x and virtual-y. Clicking any tile on the central axis of the board where (x, y) = (tileMapWidth / 2, y), will produce the same tile value for both world-x and world-y which in this example is 3 (0 indexed). Selecting the tile that lies one position on the right on the virtual grid, actually moves one tile less on the world-y and one tile more on the world-x. This is the formula that calculates world-x by taking the virtual-y and adding the virtual-x from the center of the board. Likewise world-y is calculated by taking virtual-y and subtracting virtual-x. These calculations measure from the central axis, as shown, so the results must be translated by half the board. For example, in the C programming language:

`floatvirtualTileX=screenx/virtualTileWidth;floatvirtualTileY=screeny/virtualTileHeight;// some display systems have their origin at the bottom left while the tile map at the top left, so we need to reverse yfloatinverseTileY=numberOfTilesInY-virtualTileY;floatisoTileX=inverseTileY+(virtualTileX-numberOfTilesInX/2);floatisoTileY=inverseTileY-(virtualTileX-numberOfTilesInY/2);`

This method might seem counter intuitive at first since the coordinates of a virtual grid are taken, rather than the original isometric world, and there is no one-to-one correspondence between virtual tiles and isometric tiles. A tile on the grid will contain more than one isometric tile, and depending on where it is clicked it should map to different coordinates. The key in this method is that the virtual coordinates are floating point numbers rather than integers. A virtual-x and y value can be (3.5, 3.5) which means the center of the third tile. In the diagram on the left, this falls in the 3rd tile on the y in detail. When the virtual-x and y must add up to 4, the world x will also be 4.

## Related Research Articles

Rendering or image synthesis is the process of generating a photorealistic or non-photorealistic image from a 2D or 3D model by means of a computer program. The resulting image is referred to as the render. Multiple models can be defined in a scene file containing objects in a strictly defined language or data structure. The scene file contains geometry, viewpoint, texture, lighting, and shading information describing the virtual scene. The data contained in the scene file is then passed to a rendering program to be processed and output to a digital image or raster graphics image file. The term "rendering" is analogous to the concept of an artist's impression of a scene. The term "rendering" is also used to describe the process of calculating effects in a video editing program to produce the final video output.

Parallax scrolling is a technique in computer graphics where background images move past the camera more slowly than foreground images, creating an illusion of depth in a 2D scene of distance. The technique grew out of the multiplane camera technique used in traditional animation since the 1930s.

Isometric projection is a method for visually representing three-dimensional objects in two dimensions in technical and engineering drawings. It is an axonometric projection in which the three coordinate axes appear equally foreshortened and the angle between any two of them is 120 degrees.

Orthographic projection is a means of representing three-dimensional objects in two dimensions. Orthographic projection is a form of parallel projection in which all the projection lines are orthogonal to the projection plane, resulting in every plane of the scene appearing in affine transformation on the viewing surface. The obverse of an orthographic projection is an oblique projection, which is a parallel projection in which the projection lines are not orthogonal to the projection plane.

Zaxxon is an isometric shooter arcade video game, developed and released by Sega in 1982, in which the player pilots a ship through heavily defended space fortresses. Japanese electronics company Ikegami Tsushinki is also credited for having worked on the development of the game.

A 3D projection is a design technique used to display a three-dimensional (3D) object on a two-dimensional (2D) surface. These projections rely on visual perspective and aspect analysis to project a complex object for viewing capability on a simpler plane.

Ray casting is the methodological basis for 3D CAD/CAM solid modeling and image rendering. It is essentially the same as ray tracing for computer graphics where virtual light rays are "cast" or "traced" on their path from the focal point of a camera through each pixel in the camera sensor to determine what is visible along the ray in the 3D scene. The term "Ray Casting" was introduced by Scott Roth while at the General Motors Research Labs from 1978–1980. His paper, "Ray Casting for Modeling Solids", describes modeled solid objects by combining primitive solids, such as blocks and cylinders, using the set operators union (+), intersection (&), and difference (-). The general idea of using these binary operators for solid modeling is largely due to Voelcker and Requicha's geometric modelling group at the University of Rochester. See solid modeling for a broad overview of solid modeling methods. This figure on the right shows a U-Joint modeled from cylinders and blocks in a binary tree using Roth's ray casting system in 1979.

Axonometric projection is a type of orthographic projection used for creating a pictorial drawing of an object, where the object is rotated around one or more of its axes to reveal multiple sides.

Pixel art is a form of digital art drawn with graphical software where images are built using pixels as the only building block. It is widely associated with the low-resolution graphics from 8-bit and 16-bit era computers and arcade video game consoles, in addition to other limited systems such as LED displays and graphing calculators, which have a limited number of pixels and colors available. The art form is still employed to this day by pixel artists and game studios, even though the technological limitations have since been surpassed.

2.5D perspective refers to gameplay or movement in a video game or virtual reality environment that is restricted to a two-dimensional (2D) plane with little to no access to a third dimension in a space that otherwise appears to be three-dimensional and is often simulated and rendered in a 3D digital environment.

The X68000 is a home computer created by Sharp Corporation. It was first released in 1987 and sold only in Japan.

Knight Lore is a 1984 action-adventure game developed and published by Ultimate Play the Game, and written by company founders Chris and Tim Stamper. The game is known for its use of isometric graphics, which it further popularized in video games. In Knight Lore, the player character Sabreman has forty days to collect objects throughout a castle and brew a cure to his werewolf curse. Each castle room is depicted in monochrome on its own screen and consists of blocks to climb, obstacles to avoid, and puzzles to solve.

Real-time computer graphics or real-time rendering is the sub-field of computer graphics focused on producing and analyzing images in real time. The term can refer to anything from rendering an application's graphical user interface (GUI) to real-time image analysis, but is most often used in reference to interactive 3D computer graphics, typically using a graphics processing unit (GPU). One example of this concept is a video game that rapidly renders changing 3D environments to produce an illusion of motion.

Pre-rendering is the process in which video footage is not rendered in real-time by the hardware that is outputting or playing back the video. Instead, the video is a recording of footage that was previously rendered on different equipment. Pre-rendered assets may also be outsourced by the developer to an outside production company. Such assets usually have a level of complexity that is too great for the target platform to render in real-time.

3D computer graphics, sometimes called CGI, 3D-CGI or three-dimensional computer graphics are graphics that use a three-dimensional representation of geometric data that is stored in the computer for the purposes of performing calculations and rendering digital images, usually 2D images but sometimes 3D images. The resulting images may be stored for viewing later or displayed in real time.

A tile-based video game is a type of video or video game where the playing area consists of small square graphic images referred to as tiles laid out in a grid. That the screen is made of such tiles is a technical distinction, and may not be obvious to people playing the game. The complete set of tiles available for use in a playing area is called a tileset. Tile-based games usually simulate a top-down, side view, or 2.5D view of the playing area, and are almost always two-dimensional.

Isolated Warrior is a 1991 video game developed by KID and published in Japan by Vap, in North America by NTVIC, and Europe by Nintendo. It falls in the shooter genre, although its gameplay also includes elements reminiscent of platforming, while it features isometric projection, similar to Sega's Zaxxon.

Computer graphics deals with generating images and art with the aid of computers. Today, computer graphics is a core technology in digital photography, film, video games, digital art, cell phone and computer displays, and many specialized applications. A great deal of specialized hardware and software has been developed, with the displays of most devices being driven by computer graphics hardware. It is a vast and recently developed area of computer science. The phrase was coined in 1960 by computer graphics researchers Verne Hudson and William Fetter of Boeing. It is often abbreviated as CG, or typically in the context of film as computer generated imagery (CGI). The non-artistic aspects of computer graphics are the subject of computer science research.

A variety of computer graphic techniques have been used to display video game content throughout the history of video games. The predominance of individual techniques have evolved over time, primarily due to hardware advances and restrictions such as the processing power of central or graphics processing units.

## References

1. Signor, Jeremy (2014-12-19). "Retronauts: The Continued Relevance of Isometric Games". usgamer.net. Gamer Network. Archived from the original on 2015-08-09. Retrieved 2017-04-01.
2. Vas, Gergo (2013-03-18). "The Best-Looking Isometric Games". kotaku.com. Gizmodo Media Group. Retrieved 2017-04-01.
3. Note: the blue vectors point towards the camera positions. The red arcs represent the rotations around the horizontal and vertical axes. The white boxes match the ones shown in the images at the top of the article. Notice how in the left image the camera vector passes through the two opposing vertices of the cube.
4. Vas, Gergo (2013-05-10). "Video Games With The Most Memorable Pre-Rendered Backgrounds". Kotaku.com. Gizmodo Media Group. Retrieved 2017-04-01.
5. Grayson, Nathan (2016-04-01). "The Struggle To Bring Back Baldur's Gate After 17 Years". Kotaku.com. Gizmodo Media Group. Retrieved 2017-04-11. It was a big challenge because all of the Baldur's Gate original assets like the 3D models that make up these sprites, the 3D models for the levels in the original game, these archives were lost.
6. "Treasure Island (Registration Number PA0000187784)". United States Copyright Office . Retrieved 5 May 2021.
7. Akagi, Masumi (October 13, 2006). アーケードTVゲームリスト国内•海外編(1971-2005) [Arcade TV Game List: Domestic • Overseas Edition (1971-2005)] (in Japanese). Japan: Amusement News Agency. pp. 35, 115, 131. ISBN   978-4990251215.
8. Perron, Bernard; Wolf, Mark J. P. (12 November 2008). The Video Game Theory Reader 2. Taylor & Francis. p. 158. ISBN   0-415-96282-X . Retrieved 13 November 2022.
9. "Zaxxon (Registration Number PA0000135301)". United States Copyright Office. Retrieved 5 May 2021.
10. Davis, Warren. "The Creation of Q*Bert". Coinop.org. Retrieved 26 September 2011.
11. "Sculptin the new shape of Spectrum games". Sinclair User (21). December 1983. Retrieved 2009-03-02.
12. "Soft Solid 3D Ant Attack". CRASH (1). February 1984. Retrieved 2008-09-29.
13. "Ultimate Play the Game – Company Lookback". Retro Micro Games Action – The Best of gamesTM Retro Volume 1. Highbury Entertainment. 2006. p. 25.
14. Steven Collins. "Game Graphics During the 8-bit Computer Era". Computer Graphics Newsletters. SIGGRAPH. Archived from the original on 2012-09-09. Retrieved 2007-08-16.
15. Krikke, J. (July–August 2000). "Axonometry: a matter of perspective". Computer Graphics and Applications. IEEE. 20 (4): 7–11. doi:10.1109/38.851742. "Knight Lore was said to be the second most cloned piece of software after the word- processing program Word Star."
16. "Looking for an old angle". CRASH (51). April 1988. Retrieved 2008-09-29.
17. Note: The 2:1 pixel pattern in the near-isometric image allows smoother lines than in the isometric one.
18. "Diablo II Nears Completion As Blizzard Prepares For Final Phase Of Beta Testing". FindArticles . BNET Business Network. Marketwire. May 2000. Archived from the original on 2012-07-10. Retrieved 2008-09-29.
19. Green, Jeff (2000-02-29). "GameSpot Preview: Arcanum". GameSpot . CNET Networks, Inc . Retrieved 2008-01-10.
20. Butts, Steve (2003-09-09). "SimCity 4: Rush Hour Preview". IGN PC. IGN Entertainment, Inc. Archived from the original on September 20, 2003. Retrieved 2008-01-10.
21. Greely, Dave; Ben Sawyer (1997-08-19). "Has Origin Created the First True Online Game World?". Gamasutra . CMP Media LLC. Retrieved 2007-12-17.
22. Walker, Trey (2002-07-12). "Divine Divinity goes gold". GameSpot. CBS Interactive. Retrieved 2017-04-11.
23. O'Hagan, Steve (2008-08-07). "PC Previews: Silent Storm". ComputerAndVideoGames.com . Future Publishing Limited . Retrieved 2007-12-13.
24. McDougall, Jaz (November 4, 2009). "Torchlight Review". Games Radar . Retrieved 2009-11-06.
25. Hamilton, Kirk (2014-07-03). "I'm Glad They're Still Making Games Like Divinity: Original Sin". Kotaku. Gizmodo Media Group. Retrieved 2017-04-11.