Isometric video game graphics

Isometric video game graphics are graphics employed in video games and pixel art which angle the viewpoint to reveal facets of the environment that would not be visible from a top-down perspective or side view, thereby producing a three-dimensional 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 occur; some form of parallel projection, such as dimetric projection with a 2:1 pixel ratio, is the most common. The terms "3/4 perspective", "2.5D", and "pseudo-3D" are also sometimes used, although these terms can possess slightly different meanings in other contexts.

Part of a series on:
Video game graphics
Types
Topics
Lists

Once common, isometric projection became rarer with the advent of more powerful 3D graphics systems, and as games began to focus more on action and individual characters.[1] However, video games using isometric projection have seen a resurgence since the early 2010s, especially on Kickstarter.[1][2]

Overview
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.
Common form of dimetric projection used in video games and pixel art. The angle 26.565° forms a 2:1 pixel ratio, and is equal to .

Advantages
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 a 3D gaming environment. Because parallelly projected objects do not change size as they move about the game field, 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 3D areas quickly and easily. And, while the depth confusion problems of parallel projection can sometimes be a problem, good game design can alleviate this.

There are also gameplay advantages to using an isometric or pseudo-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 game, they allow you to more easily field and control a larger number of additional units, such as a full party of characters in a role-playing 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 moving and rotating the camera.[1]

Lastly, there is an artistic advantage. Though not limited strictly to isometric video games, pre-rendered 2D graphics can possess a higher fidelity and use more advanced techniques than may be possible on commonly available computer hardware, even with 3D hardware acceleration enabled.[3] Similarly to modern CGI used in motion pictures, graphics can be rendered once on a powerful super computer or render farm, and then displayed on less powerful consumer hardware, such as tablet computers and Web browsers. This means that static pre-rendered isometric graphics often look better compared to their real-time rendered counterparts, and may age better over time compared to their peers.[2] However, this advantage may be less pronounced now than it was in the past.

One disadvantage of pre-rendered graphics is that, as display resolutions continue to increase, the static 2D images need to ideally be re-rendered to keep pace, or otherwise suffer from pixelation. This is not always possible, however; as was the case in 2012, when BioWare's Baldur's Gate (1998) was remade into Baldur's Gate: Enhanced Edition by the studio Beamdog. The new developer opted for simple 2D graphics scaling, or "zooming", without re-rendering the game's sprites, as they were lacking the game's original creative art assets. (The original data was lost in a flood.[4]) Changing the resolution of a real-time rendered game is trivial, in comparison.

Differences from "true" isometric projection
Corresponding 3D camera rotation angles for true isometric projection (at left) and the form of dimetric perspective commonly found in video games and pixel art (at right).[5] The angle 35.264° is equal to .

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° () 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 (116.565°, 116.565°, 126.870°).

History of isometric video games

While the history of computer games saw some true 3D games as soon as the early 1970s, 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 the appearance of Sega's Zaxxon,[6][7] released as an arcade game in January 1982.[8] It 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.[6] Data East's Treasure Island used isometric visuals in 1981, but may not have been released worldwide.[9]

Another early isometric game is Q*bert,[10] which Warren Davis and Jeff Lee began programming in April 1982 and released in October/November 1982.[11] Q*bert shows a static pyramid in an isometric perspective, with the player controlling a character which can jump around on the pyramid.[6]

The following year in March 1983, the isometric platformer arcade game Congo Bongo was released, running on the same hardware as Zaxxon.[12] It allows the player character to move around in bigger isometric levels, including true 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.

At this time, 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 1983. 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.[13] The ZX Crash magazine consequently awarded it 100% in the graphics category for this new technique, known as "Soft Solid 3-D".[14]

A year later the ZX Spectrum saw the release of Knight Lore, which is generally regarded as a revolutionary title[15] that defined the subsequent genre of isometric adventure games.[16] 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.[17] Other examples out of those were Highway Encounter (1985), Batman (1986), Head Over Heels (1987)[18] 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.)[19]
3D rendering mimicking Fallout's use of trimetric projection and a hexagonal grid.

Throughout the 1990s some successful games like 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 turning to true 3D (e.g. 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 full 3D; and while Diablo II (2000) used a fixed perspective like its predecessor, it optionally allowed for perspective scaling of the sprites in the distance to lend it a "pseudo-3D" appearance.[20]

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 view, but actually used perspective projection.

Infinity Engine

Black Isle Studios and BioWare helped popularize the use of isometric projection in role-playing games in the late 1990s and early 2000s. These studios utilized the Infinity Engine game engine in several of their titles, developed by BioWare for Baldur's Gate (1998). This engine gained significant traction among players, and many developers since then have tried to emulate and improve upon it in various ways.[1] The Infinity Engine itself was also revamped and modernized by Beamdog in preparation for Baldur's Gate: Enhanced Edition (2012), as well as their remakes of several other classic Infinity Engine titles.

Two other titles by Black Isle Studios, Fallout (1997) and Fallout 2 (1998), used trimetric projection.

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. 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 in recent years. These titles differ from the above games, however, in that they use perspective projection instead of parallel projection.

Rather than being based purely on nostalgia, the revival of isometric projection is the result of real, tangible design benefits.[1]

Similar projections

The term "isometric perspective" is often misapplied to any game with an—usually fixed—angled, overhead view that appears at first to be "isometric". These include games that utilize trimetric projection, such as Fallout (1997)[21] and SimCity 4 (2003);[22] games that utilize oblique projection, such as Divine Divinity (2002)[23] and Ultima Online (1997);[24] and games that utilize a combination of perspective projection and a bird's eye view, such as Silent Storm (2003),[25] Torchlight (2009)[26] and Divinity: Original Sin (2014).[27] There are also titles that utilize polygonal 3D graphics, but render their graphics to the screen using parallel projection instead of perspective projection. These include Syndicate Wars (1996), Dungeon Keeper (1997) and Depths of Peril (2007). And, there are a number of games that use a combination of pre-rendered and real-time rendered isometric graphics, such as The Temple of Elemental Evil (2003) and Torment: Tides of Numenera (2017), which use pre-rendered 2D backgrounds and real-time rendered 3D character models; and Final Fantasy Tactics (1997) and Disgaea: Hour of Darkness (2003), which use real-time rendered 3D backgrounds and hand-drawn 2D character sprites.

One additional advantage of top-down oblique projection is that images fit more snugly within a square graphical tile, thereby using less memory.

Mapping screen to world coordinates
Finding world coordinates
Comparison of several types of graphical projection. The presence of one or more 90° angles is often a good indicator that the perspective used is oblique projection.

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 our 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:

float virtualTileX = screenx / virtualTileWidth;
float virtualTileY = 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 y
float inverseTileY = numberOfTilesInY - virtualTileY;

float isoTileX = inverseTileY + (virtualTileX - numberOfTilesInX / 2);
float isoTileY = 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.

Examples

Dimetric projection

Oblique projection

Perspective projection

See also

References
  1. Signor, Jeremy (2014-12-19). "Retronauts: The Continued Relevance of Isometric Games". usgamer.net. Gamer Network. 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. Vas, Gergo (2013-05-10). "Video Games With The Most Memorable Pre-Rendered Backgrounds". Kotaku.com. Gizmodo Media Group. Retrieved 2017-04-01.
  4. 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.
  5. 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.
  6. Bernard Perron & Mark J. P. Wolf (2008), Video game theory reader two, p. 158, Taylor & Francis, ISBN 0-415-96282-X
  7. Zaxxon at the Killer List of Videogames
  8. "Zaxxon". Arcade History. October 17, 2010. Retrieved 26 September 2011.
  9. Treasure Island at the Killer List of Videogames
  10. Q*bert at the Killer List of Videogames
  11. Davis, Warren. "The Creation of Q*Bert". Coinop.org. Retrieved 26 September 2011.
  12. Congo Bongo at the Killer List of Videogames
  13. "Sculptin the new shape of Spectrum games". Sinclair User (21). December 1983. Retrieved 2009-03-02.
  14. "Soft Solid 3D Ant Attack". CRASH (1). February 1984. Retrieved 2008-09-29.
  15. "Ultimate Play the Game – Company Lookback". Retro Micro Games Action – The Best of gamesTM Retro Volume 1. Highbury Entertainment. 2006. p. 25.
  16. 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.
  17. 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."
  18. "Looking for an old angle". CRASH (51). April 1988. Retrieved 2008-09-29.
  19. Note: The 2:1 pixel pattern in the near-isometric image allows smoother lines than in the isometric one.
  20. "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.
  21. Green, Jeff (2000-02-29). "GameSpot Preview: Arcanum". GameSpot. CNET Networks, Inc. Retrieved 2008-01-10.
  22. Butts, Steve (2003-09-09). "SimCity 4: Rush Hour Preview". IGN PC. IGN Entertainment, Inc. Retrieved 2008-01-10.
  23. Walker, Trey (2002-07-12). "Divine Divinity goes gold". GameSpot. CBS Interactive. Retrieved 2017-04-11.
  24. Greely, Dave; Ben Sawyer (1997-08-19). "Has Origin Created the First True Online Game World?". Gamasutra. CMP Media LLC. Retrieved 2007-12-17.
  25. O'Hagan, Steve (2008-08-07). "PC Previews: Silent Storm". ComputerAndVideoGames.com. Future Publishing Limited. Retrieved 2007-12-13.
  26. McDougall, Jaz (November 4, 2009). "Torchlight Review". Games Radar. Retrieved 2009-11-06.
  27. 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.
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.