UFCEKU-20-3Web 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 y loop 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 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 and Isometric 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 30 0 around the x axis

UFCEKU-20-3Web Games Programming Rotating 45 0 around the y axis

UFCEKU-20-3Web Games Programming Isometric World View rotate x 30 0 and y 45 0

UFCEKU-20-3Web Games Programming Isometric World View rotate x 30 0 and y 45 0

UFCEKU-20-3Web Games Programming Isometric World View rotate x 30 0 and y 45 0 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