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

2. UFCEKU-20-3Web Games Programming Agenda Simulating depth in 2D Principles of tile-based worlds Isometric game worlds

3. 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

4. UFCEKU-20-3Web Games Programming Simulating Depth in 2D Parallax distance scrolling with simulated direction in the z plane x z y

5. UFCEKU-20-3Web Games Programming Tile Based Worlds

6. 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

7. UFCEKU-20-3Web Games Programming Tile Worlds in 2D

8. UFCEKU-20-3Web Games Programming Tile Worlds in 2D

9. 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

10. UFCEKU-20-3Web Games Programming Perspective Viewpoint and Isometric World View

11. UFCEKU-20-3Web Games Programming Creating an Illusion of 3D

12. UFCEKU-20-3Web Games Programming True 3D Perspective Vanishing Points Vanishing Point

13. UFCEKU-20-3Web Games Programming True 3D Perspective Vanishing Points Vanishing Points

14. UFCEKU-20-3Web Games Programming The Isometric World View Parallel Lines

15. UFCEKU-20-3Web Games Programming Adding a Z Plane to the World View

16. UFCEKU-20-3Web Games Programming x y object view Where are the objects in the z plane ? y x z

17. UFCEKU-20-3Web Games Programming x y object view and z depth view y x z

18. UFCEKU-20-3Web Games Programming Rotating 30 0 around the x axis

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

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

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

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

23. UFCEKU-20-3Web Games Programming Where to Place Objects in the New Coordinate System

24. UFCEKU-20-3Web Games Programming Placing Objects in the Isometric Coordinate System

25. UFCEKU-20-3Web Games Programming Isometric World Game View Achieved

26. UFCEKU-20-3Web Games Programming Tile Worlds in Isometric 3D

27. UFCEKU-20-3Web Games Programming Designing the Isometric Game World Make tiles easily repeatable by matching the edges

28. UFCEKU-20-3Web Games Programming Designing the Isometric Game World Create tiles that can be varied easily

29. UFCEKU-20-3Web Games Programming Designing the Isometric Game World Creating seamless tiled game worlds

30. UFCEKU-20-3Web Games Programming Populating the Game Grid with XML

31. UFCEKU-20-3Web Games Programming Isometric Game

32. 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