Difference between revisions of "Isometric 3D"

Latest revision as of 03:41, 21 November 2023

Projections, courtesy from wikipedia

samples courtesy from www.olivierleborgne.com games :Head Over Heels, Batman, Super Hero, Sweevo’s World and Hydrofool.

This page is intended to complete the Category:Isometric 3D, check the categories at the bottom of this page to get more related links.

It will feature techniques in creating Isometric 3D and graphics.

Isometric 3D is a representation of 3D with a total lack of perspective.

The proper concept is actually Parallel Projection, as some games are are sometime using other parallel projections than isometric.

Pac-Mania for example is not really "isometric" but actually "Oblique".

Yet the term Isometric is the most commonly used, as it suit for most of those 3D-looking games, so we'll use it as a whole, despite sometimes un-properly.

Inaccuracy with old school Computers

The isometric and most parallel projection originate from engineering, Architecture, design and technical drawing.

As such, they have a theory and precise specifications, and own a lot to the work of Gaspard Monge, a French Mathematician from the French revolution era.

However due to the pixelised nature of bitmap graphics and Cathode Ray Tube display, also due to the un-regular aspect ratio of pixels (which depend on the videomode, the screen/Monitor used, but also the colour displayed), Parallel projection's types can't be really accurate due to variation and approximation in axis' scales.

Those term's use are then mostly indicative.

The global term is parallel projection. But in common language we often talk indistinctly about Isometric...

Types of pseudo 3D "Isometric"

As a 3D environment, we have 3 axis.

X,Y, Z.

Y is always vertical on screen.

There are 2 kind of projections : symmetric and asymmetric parallel projections.

Asymmetric :

X and Z axis form different angles with Y axis.

• "Horizontal" Oblique/Trimetric projection : Pac-Mania obviously, yet "Beat Them Up" games (like Double dragon or Renegade) or even few "Shoot them Up"s (Mag Max) do use some kind of this.

• • In those case, we can talk about Cavalier perspective (E) / Perspective Cavalière (F) / Kavalierperspektive (D) / Perspectiva caballera (E) which is a perspective with unchanged 2D vertical and horizontal and a 3rd Axis in oblique. This specific projection enable to keep the 2D gameplay based on vertical and horizontal movement of sprites on screen.

• • As told, the scale of each axis can vary greatly, hence exact actual terms can vary.

• In rare case, the X axis is not "horizontal" on screen (no 90° angle with Y axis).

• • as seen in Crystal castles (US Gold)

Symmetric :

X and Z axis form an equal angle with Y axis

• Isometric projection : Head Over Heels is the most well known. it may not be real isometric because it is quite difficult to get the Y axis on the right scale, and those are probably more Bimetric projection actually close to isometric.

• • Backgrounds or graphics in such projection are easily obtained in Mode0 as it need an oblique matrix with a scale of 1vertical for 2 horizontal. Sadly the blocky pixels of Mode0 don't enable to do finely detailed sprites
  • Sadly this kind of projection bring some problems concerning the diagonals and control as we'll see later.

• pseudo isometric : those are symmetric parallel projections with angles for the X and Z axis which suit the Pixel ratios, hence producing harmonious and regularly shaped lines.

Some "Mode1" isometric, X and Z having 45° angle with Y.

the diagonal ratio is X1 for Y1. This was sometimes used in some Speccy originated games as this enable to put more tiles or elements on the horizontally limited Speccy resolution .

• • Example : W*H*B, a modern Bloxorz' Clone on ZXSpectrum.
  • A More CPC oriented example game is probably Frontiers (Zafiro Software (1988)).

on the other hand you can also flatten this with a 4x1 ratio, more often seen on CPC (and in Mode0).

1x1 or 4x1 are way to reduced the needed screen dimension to display the same number of elements...

• 1x1 is better for horizontally limited display.

• 4x1 is better for vertically limited display.

Masked Sprites and Elements

A proper isometric render always need to get masked sprites so they may appear upon or behind other elements.

Also some Scenery Elements which are to be put in front of sprites also have to be masked.

A heavy job is needed to define the masks and sprites "priority" so the 3D effect works : the background elements being obscured by the foreground elements.

As such, a proper "3D" parallel projection engine can be quite difficult to get running smoothly and fast as a lot of work may be needed for the Z80 CPU.

Amstrad Plus

Concerning the Amstrad Plus range, the extra features may be difficult to use in such an environment.

• Hardware sprites :

Due to them being always above the normal bitmap screen. They still can be easily used to add extra visual effects or extra HUD elements, or even to patch some foreground only elements/tiles.

Proper isometric can be hard to mix with Hardsprites, but cavalier perspective games may be easier with those.

In turn based GUI like games (like Hero Quest) the sprites are obviously a clever way to get a proper "Mouse cursor" with additional extra colours and ready to use mask.

• Raster Interrupts :

The diagonal graphics are not easy to mix with horizontal rasters interrupts or video Mode changes...

But it can still be used for some HUD or windows which may not cross the play field (with a vertical 256 pixels sized screen).

Or in Mode0 games : with a "lot" of existing inks, so more margin to play with those ink changes with no clashes.

• Hardwired scrolling :

let's say this can also be used to ease horizontal scrolling provided the kind of game actually need it.

• Palette : the awesome Plus palette is always a sweet feature to use.

The few real Plus games don't make a great use of parallel projection.

Examples would be :

World Of Sports ( Cartridge ) for its BMX part (cavalier perspective).

Operation Thunderbolt ( Cartridge ) perhaps use some cosmetic cavalier perspective for the horizontal scrolling parts but it is more a CPC old game with "refreshed" graphics.

Shadows

Getting some Sprites a shadow on the floor is a nice way to ease the player's comprehension of the 3D effect and environment, yet it was rarely used.

Head over Heels is notable because when your Sprite (mostly "Head" who could glide in the air) was in "altitude" you may not easily see were it is actually in the X,Z plane.

Yet putting a vertical shadow may be heavier on the CPU and Ram consuming...

• Examples :

• • Batman : the Movie (OCEAN) in the Batwing level (4th level, horizontal oblique) so you can see your altitude.

• • Hydrofool : as you float in an Aquatic environment, the game would be unplayable without this shadow (just look at the picture, yellow shadow...) to see your coordinates in the X/Z plane and judge at which height you are swimming.

Video Modes

The square pixels from Mode1 was usually preferred for real Isometric.

Yet games in mode 0 managed well with it or other parallel projections type too.

Some reasons the Mode1 was anyway quite popular :

• Many isometric games were Speccy Ports.

• the fine square pixels in mode1 also enable to get fine detailed sprites, while the blockier Mode0 would need those sprites to be bigger in order to manage a proper level of details.

Mode1 :

In Mode1, the limited set of inks (only 4 ink) need a proper colour management.

The technique used in Head Over Heels was certainly the best one  :

• • • Background : can be in 4 colours, it is used for the floor, HUD and backgrounds walls only. You can use a set of 2D tiles with no mask and those can never be "foreground".

• • • The doors actually manage to fit well in the background.

• • • Sprites and Scenery elements (objects, doors, platforms...) : they use only 3 colours and the 4th ink (ink number0) is used to get the transparency mask.

Hero Quest is quite similar yet fail to achieve this level of goodness.

The floor-tiles and background walls are masked, the "4th colour" (grey, actually ink0) is nearly never used inside those except for the "empty floor" or the "Mouse cursor"...

What was, what could, what should.

A more clever use of the transparency/mask ink with the Floor/Wall tiles could enable to display this background grey in those floor/wall tiles but it wasn't done... which is a serious graphical limitation alongside a poor colours choice, which leads to the sprites and scenery being quite blurred into a blue messy hell as the background can't differentiate properly through the use of an additional different colour.

It is also to notice that some basic floor tiles use only 2 inks+transparency (Blue and dark blue) the "light cyan" seen in the jointed floor-tiles being then obtained by the pixels-crossing from 2 different Floor-tiles.

Many Speccy Ports in "isometric Mode1" actually still use 1bpp coded graphics.

• Some remains in Mono-colour display as lazy ports, be it only in game's playfield (HUD often display other colours anyway).

Examples :

• • Alien Highway
  • Highway Encounter
  • H.A.T.E Hostile All Terrain Encounter
  • Pac-Mania
  • The Great Escape
  • Attack Of The Killer Tomatoes
  • Gauntlet III
  • Molecule Man (also a bad game...)

• Other games manage to get the elements (background and sprites) in different colours : yet still mono-coloured themselves.

This greatly increase the games quality and understandability of the environment despite being still inferior to real 2bpp graphics in 3 or 4 colours for Sprites or backgrounds, and this still enable some Amstrad CPC's specificity over the ZX spectrum : the lack of colour clashes that goes so well with Isometric variations.

Examples :

• • Bomb Scare
  • Crystal Castles
  • Fire Trap
  • Bobby bearing : yet in this one, the sprites seem to be 2bpp coded as they actually use 2 colours+transparency (White+black for sprites, darkBlue and light Cyan for scenery) or there is still a 1bpp mask over a 1bpp sprite data, then colour are chosen when displayed. This makes the sprites even more apparent over the background despite still having a 1bpp flavour.

There a comparison with the different way to do it :

Gauntlet3, FireTrap, HeroQuest, Head Over Heels. Notice that Gauntlet's HUD is in proper 2bpp graphics to add insult to injury.

Mode0 :

Due to the larger set of ink, there is no problem to find one ink to get the mask.

Most/All Mode0 isometric games have properly coded graphics (4bpp).

By the way because of the wider pixels, you need bigger sprites to get some details with them, so those games are quite heavy to manage and often quite slow, but delightfull to the eyes...

Level design

The background elements being obscured by the foreground elements, a proper level design is needed so most crucial elements remain visible.

Yet this can also used to put hidden features and secret passages too.

HUD

A problem with Isometric was the need to put HUD in corners of the screen.

As a result, it was rarely possible to add extra colours thanks to raster interrupts because the oblique HUD often cross the games windows.

• This is of course not a problem in Mode0 as the 16 colours on screen are enough to get a coloured feeling.

• And by the way the heaviness of a proper Mode1 Isometric engine simply can't bother to have extra colours with the sacrifice of precious CPU resources.

Head over Heels and many Mode1 games deal well with this lack of colours with many palette changes from room to room. While the game only display 4 colours at a time on screen, those colours change often when you explore the levels

Scrolling

• Few Isometric games actually included proper multi-scrolling as an Isometric engine is already quite heavy for the system.

A proper scrolled isometric game would need 2 diagonal scrollings and perhaps a vertical scrolling too, not the easiest to get.

Isometric shooters were often exceptions.

H.A.T.E / Alien highway / Highway Encounter.

• Cavalier perspective games were more prone to get scrolling because only a "normal" horizontal scrolling mau be needed.

Some "Beat'hem All" games in approximate Cavalier Perspective managed to get some decent scrolling, often an horizontal one...

Double Dragon series are typical examples of such games, with Horizontal scrolling.

Pac-Mania is a notable example of multi-scrolled parallel projection game. its Cavalier Perspective being perhaps more suitable for multi-scrolling as it need only 1 diagonal scrolling and 1 horizontal scrolling.

Scrolling was often a severe lack in many Amstrad CPC's games anyway.

Control and Gameplay

Parallel projection is quite suitable for many kind of games.

• Beat'hem All : a clever way to get good looking backgrounds.

• Shooters : diagonal shooters were quite popular yet despite being more difficult to play than Horizontal or vertical ones, they have a special graphical flavour.

• Platformers : they more rely on exploration than manic reflexes.

• Strategic games or RPG : parallel projection is perfect for good looking turn based games, the turn based element being also a good point as such engine may be quite heavy for a realtime action game.

A Projection based environment can be used as 2D or 3D environment/engine.

• Cavalier Perspective :

Because it still have some traditional Horizontal and vertical axis, this projection often stick to the up/down and left/right way to move the Player's sprite. As a result, this projection if more than often only cosmetic : the background looks like 3D but the game and the sprites are clearly 2D.

• • 2D : As in most Beat'hem'all like Renegade. Or even some shooters like MagMax. They are indeed 2D games. The vertical axis being only limited to jumps on the X axis (left/right) if available.

• • 3D : Pacmania is a complete example of a real oblique 3D.

To move "vertically" (Y axis), you need to jump (Fire button), otherwise the basic 4 directions really stick to the 2 horizontal plane axis' (X and Z), one of them (Z) being "diagonal" on the screen. This is helped by the railroaded aspect of the labyrinth which prevent any Diagonal move (on the X/Z plane) to be exploited. As a result, you can jump in X and Z axis.

• Isometric :

• • Square/Rhombus Grid issues.

Carré/Losange (F) Quadrat /Raute (D) Cuadrado/Rombo (E)

most 2D or Isometric environment may have some issues concerning distances.

A Square's diagonals is longer the its sides.

To get a realistic distance/time ratio (speed), you may need to compensate or else the diagonal moves can be exploited, be it in real time or turn based games.

The problem often happens in action 2D games and in many 8-directional games (square grid).

• • Examples are many Football game (view from above) where running in diagonal often enable to actually run faster than in Horizontal/Vertical on-screen directions (provided the game doesn't lag due to real time multiscrolling issues).

• • Also strategic/tactical turn based games using "square grid" instead of hexagonal grid... if possible, using the diagonals of the squares is often advantageous movement wise...

But in isometric the problem can be even more complicated as the 2 diagonals of the "theorically square grid" of the "horizontal plane" (X/Z plane), now a Rhombus/Losange grid, actually have 2 differently sized diagonals.

Real Isometric 3D environment lead to some diagonal horizontal (X and Z axis) movement problems : the 2 horizontal plane axis (X and Z) are (visually) diagonals... but the joystick does not use its diagonal to move in X/Z axis. So you have to choose whether you use X=left/Right and Z=up/down or X=up/down and Z= left/Right... (orientation of the joystick to the right or left...)

Some isometric games enable you to move horizontally in 8 direction... such engine often don't manage the vertical axis (jump) and are therefore often 2D.

It is to notice that getting a player go in 8 direction also means that you need a larger set of sprites to display the additional movements, which could be heavy RAM-wise, added to an isometric engine.

• • 3D : Head over heels example.

You move on the horizontal plan with only 4 directions (X or Z axis), and you can jump (Y axis) to get some platformer gameplay.

You can't actually move in diagonals on the horizontal plane (X+Z movement)

• • 2D :Gauntlet 3 is some precursor of Diablo-like games.

The Scenery elements are in "3D" (isometric oriented) but you can't use the Y (3D vertical) axis (no jump), therefore you can move on the horizontal plane (X/Z) in 8 directions.

This leads to a strange and odd sensation as the levels are designed in "diagonals" on screen but the player would instinctively move mostly in up/down/left/right 2D fashion (X+Z axis at the same time).

List of Amstrad "Isometric" and "Oblique" games

you can visit CPCpowers to get a list thanks to the "3d iso" keyword.

Here are some limited and notable examples.

Distinction has to be done with symmetric obliques and asymmetric obliques.

SYMMETRIC

Isometric examples  :

(X and Z axis are oblique/diagonal on screen, Y axis is vertical on screen, diagonal ratio for the X/Z plane is 2x1)

• Mode1 :

• • Batman

• • Head Over Heels

• • Alien Highway

• • H.A.T.E Hostile All Terrain Encounter

• • Hero Quest

• • Marble Madness

• • Revolution

• Mode0 :

• • Bactron

• • Crafton & Xunk (Get Dexter)

• • Cubert

• • Desqpotik Design

A panel of different sort of Mode0 isometric games.

135x135x90

(a narrower isometric, rarely seen on Amstrad CPC, diagonal ratio for the X/Z plane is 1x1, mostly possible in Mode1 unless you use 1x2 Mode0 pixels)

• • Frontiers

Flattened Dimetric examples :

(an even more flattened isometric, diagonal ratio for the X/Z plane is 4x1)

• • Firetrap

• • Pro Skateboard Simulator

• • Zaxx

• • Black Land

Various Symmetric

Those can tend to look messy, especially in Mode0.

Diagonal ratio for the X/Z plane lead to lines looking less regular/straight.

• • Chicago 90 : the horizontal plane has a X10xY6 diagonal oblique, meaning the lines looks irregular, and and it looks slightly less flattened.

• • BAM : an amateurish game published in amstrad100% french mag. the ratio is X6xY2.

• • Binky : ratio = X12xY4 (mode0 : X=2+2+1+1pixels, Y = 4)

ASYMMETRIC

Cavalier perspective :

(X Axis is horizontal on the screen, Y axis is vertical on the screen, Z axis is oblique/diagonal on the screen)

• Mode1 :

• • Pac-Mania

• Mode0 :

• • Ball Breaker

• • Dragon's Lair

• • Paperboy

A panel of different sort of Mode0 cavalier perspective games.

Various Oblique/Trimetric examples :

(X and Z axis are both oblique but with different angle = asymmetric...)

• • Crystal Castles (Diamond Plateaus In Space).

Pixel Art renewal and Isometric

Isometric is often used in classic Pixel Art and is emblematic of it as it was the best way to display good looking pseudo 3D FX on old computer 2D systems.

(in opposition to the modern full-real-3D).

This is quite due to the fact that Isometric/Parallel projection was made obsolete by full Real 3D computers evolution, so became synonymous of Old-School Computers and Games

Hence, "PixelArt" and "Isometric graphics" are often merged nowadays in the younger ignorant generations' mind.

Modern day uses of Isometric Graphics

Isometric 3D is still used in modern day, mostly to get an old-styled "Pixel Art" flavour.

• Online MMORPG "Dofus" is notable for it's use of isometric 3D.

• "Habbo Hotel" is also a well known modern example.

• Baldur's Gate (and some spin-offs like Planescape Torment) featured perhaps the last great 2D engine ever produced for a Commercial super-production game : the Infinity Engine.

• Diablo series is also a well known isometric gameplay, reprising Gountlet3 in many way, but adding modern computer power and far more RPG mechanics.

Links

Wikipedia articles

• Graphical projection
• Parallel projection
• Isometric projection

List of isometric games on CPC-POWER