UFCEKU-20-3Web Games Programming Tile-based and Isometric Worlds

UFCEKU-20-3Web Games Programming

Web Games Programming

Tile-based and Isometric Worlds


Agenda

Simulating depth in 2D Principles of tile-based worlds Isometric game worlds


Simulating Depth in 2D Parallax Scrolling with multiple distance planes

Varying colour and brightness of depth planes gives illusion of receding background and thus simulates depth in the z plane

Nearer planes scroll faster


Simulating Depth in 2D Parallax distance scrolling with simulated direction in

the z plane

x

z

y


Tile Based Worlds


Principles of Tiled Worlds

Tile based worlds consist of a finite grid of x width and y height individual tiles

Game world may be closed or wrapped and may feature scrolling beyond screen boundaries

Each tile in the world may have several alternative sprite images and tile states that initiate events in the main game loop

Traditional computer games programming would refer to a sprite sheet which is mapped to individual tiles and changes the image according to game logic


Tile Worlds in 2D


Tile Worlds in 2D


Tile Grid Construction

Use a nested for-loop to create tile grid in x and yloop for all grid values of x // outer loop

loop for all grid values of y // inner (nested) loop

create tile object at position (x,y) // x = 1

loopend

loopend

for(i = 1; i <= 10; i++){

for (j = 1; j <= 10 ; j++){

// code to add and place the game tile at grid position i j

// game tile would be an object with properties to determine visual

// appearance and logic state

} // end inner loop

} // end outer loop


Perspective Viewpoint andIsometric World View


Creating an Illusion of 3D


True 3D Perspective Vanishing Points

Vanishing Point


True 3D Perspective Vanishing Points

Vanishing Points


The Isometric World View

Parallel Lines


Adding a Z Plane to the World View


x y object view

Where are the objects in the z plane ?

y

x

z


x y object view and z depth view

y

x

z


Rotating 300 around the x axis


Rotating 450 around the y axis


Isometric World View rotate x 300 and y 450





Animation Here


Where to Place Objects in the New Coordinate System


Placing Objects in the Isometric Coordinate System


Isometric World Game View Achieved


Tile Worlds in Isometric 3D


Designing the Isometric Game World

Make tiles easily repeatable by matching the edges



Create tiles that can be varied easily



Creating seamless tiled game worlds


Populating the Game Grid with XML


Isometric Game


Further Reading

Flash MX 2004 Game Design has an excellent coverage of 2D and 3D tile based world and Isometric 3D

Flash MX 2004 Magic Project Five covers implementing simulated 3D using quarternions

Documents

UFCEKU-20-3Web Games Programming Tile-based and Isometric Worlds