ufceku-20-3web games programming tile-based and isometric worlds
Post on 15-Jan-2016
215 views
TRANSCRIPT
UFCEKU-20-3Web Games Programming
Web Games Programming
Tile-based and Isometric Worlds
UFCEKU-20-3Web Games Programming
Agenda
Simulating depth in 2D Principles of tile-based worlds Isometric game worlds
UFCEKU-20-3Web Games Programming
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
UFCEKU-20-3Web Games Programming
Simulating Depth in 2D Parallax distance scrolling with simulated direction in
the z plane
x
z
y
UFCEKU-20-3Web Games Programming
Tile Based Worlds
UFCEKU-20-3Web Games Programming
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
UFCEKU-20-3Web Games Programming
Tile Worlds in 2D
UFCEKU-20-3Web Games Programming
Tile Worlds in 2D
UFCEKU-20-3Web Games Programming
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
UFCEKU-20-3Web Games Programming
Perspective Viewpoint andIsometric World View
UFCEKU-20-3Web Games Programming
Creating an Illusion of 3D
UFCEKU-20-3Web Games Programming
True 3D Perspective Vanishing Points
Vanishing Point
UFCEKU-20-3Web Games Programming
True 3D Perspective Vanishing Points
Vanishing Points
UFCEKU-20-3Web Games Programming
The Isometric World View
Parallel Lines
UFCEKU-20-3Web Games Programming
Adding a Z Plane to the World View
UFCEKU-20-3Web Games Programming
x y object view
Where are the objects in the z plane ?
y
x
z
UFCEKU-20-3Web Games Programming
x y object view and z depth view
y
x
z
UFCEKU-20-3Web Games Programming
Rotating 300 around the x axis
UFCEKU-20-3Web Games Programming
Rotating 450 around the y axis
UFCEKU-20-3Web Games Programming
Isometric World View rotate x 300 and y 450
UFCEKU-20-3Web Games Programming
Isometric World View rotate x 300 and y 450
UFCEKU-20-3Web Games Programming
Isometric World View rotate x 300 and y 450
Animation Here
UFCEKU-20-3Web Games Programming
Where to Place Objects in the New Coordinate System
UFCEKU-20-3Web Games Programming
Placing Objects in the Isometric Coordinate System
UFCEKU-20-3Web Games Programming
Isometric World Game View Achieved
UFCEKU-20-3Web Games Programming
Tile Worlds in Isometric 3D
UFCEKU-20-3Web Games Programming
Designing the Isometric Game World
Make tiles easily repeatable by matching the edges
UFCEKU-20-3Web Games Programming
Designing the Isometric Game World
Create tiles that can be varied easily
UFCEKU-20-3Web Games Programming
Designing the Isometric Game World
Creating seamless tiled game worlds
UFCEKU-20-3Web Games Programming
Populating the Game Grid with XML
UFCEKU-20-3Web Games Programming
Isometric Game
UFCEKU-20-3Web Games Programming
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