1. Tilemaps In tilemap games, the graphics consist of a small number of images, called tiles, that align with each other Tilemap can be bigger than screen (we can scroll) The same tile can be used many times memory savings

2. Tilemaps Orthogonal tiles (ch 10) tiles are rectangular; most of the time, they will be square (easier to align) Isometric tiles (ch 11): orthogonal tile rotated 45 degrees ( diamond), then compressed vertically: 2D image but gives a 3D look

3. Tilemaps Orthogonal tiles can use perspective gives the illusion of depth gives the illusion of 3D (with 2D images) Example: See figure 10-2 page 245

4. Build the Tilemap Usually done with an editor Tiled (Qt) Map Editor is free and open source, supported by Cocos2D Tiled works with both orthogonal and isometric tiles, supports multiple layers

5. Build the Tilemap Tiled also enables you to add trigger areas (in the Object layer) something happens when a character enters an area event driven programming Could prevent character from entering the area, make a sound, define spawn locations, …

6. Build the Tileset We need a tileset to make a tilemap A tileset is an image containing multiple tiles with equal spacing it is special type of texture atlas (images have the same size) Can use Texture Packer for that

7. Build the Tileset Inside Texture Packer, set Sort By Name Tiled refers to individual tiles in the tileset by position and offset only it is important that the tiles in the tileset stay in the same position (if you sort them by name, they will)

8. Tiled (Qt) Map editor Creates TMX files TMX files are (natively) supported by Cocos2D TMX files use XML (you could even edit them with a text editor)

9. Tiled (Qt) Map editor Set the orientation, the map size (width X height), tile size (width and height) Map size = w tiles TIMES h tiles Tile size should be the same as the tile images (in the book example 32 X 32)

10. Tiled (Qt) Map editor You can also specify margin (from image border) and spacing (between tiles) If you used Texture Packer to make the tileset, use the same margin and spacing Default is 0

11. Tiled (Qt) Map editor There are 4 modes for editing the tilemap: Stamp Brush (draw current selection) Bucket Fill (fills areas of connected, identical tiles) Eraser (erases tiles) Rectangular Select (select a range of tiles, then use copy and paste)

12. Tiled (Qt) Map editor Can zoom: Command Key with + or – We will use mostly the Stamp Brush mode To add a layer, Layer add Tile Layer could have a layer for summer, and a layer for winter and switch between them

13. Tiled (Qt) Map editor Can also add an Object Layer Layer add Object Layer There are 2 types of objects: Regular objects: rectangles Tile objects: allow you to place a tile anywhere on the map without snapping on the grid

14. Tiled (Qt) Map editor Can use Rectangle objects to annotate the map with key locations: trigger areas, spawn points, forbidden areas, … We can: Select Objects, Insert Objects, and Insert Tile Objects Mostly done via clicking, dragging, right clicking

15. Tiled (Qt) Map editor We can edit the properties of objects, layers and tiles Right click properties menu item Could create a new tile layer (Layer add Tile Layer) and place the properties in that layer (Properties layer or event driven code)

16. Tiled (Qt) Map editor Example of a property: isWater Do not use too many layers could impact frame rate 2 to 4 layers should be sufficient

17. Using the TMX tilemap Bring both TMX tilemap and the accompanying tileset image files (there could be more than 1) into the resources folder

18. Magic of the TMX file Look at it; it uses XML Check the image file paths for correctness You can also see the layers and the objects You can even edit it if you want (for example change the path of the file names if they are wrong)

19. CCTMXTileMap class CCTMXTileMap *tileMap = [CCTMXTileMap tiledMapWithTMXFile: @orthogonal.tmx]; CCTMXTileMap is a subclass of CCNode can add it as a child to current CCLayer [self addChild: tileMap z: -1 tag: TileMapNode];

20. CCTMXLayer class If we have built the tilemap using several layers in Tiled, then we can use the method layerName of CCTMXTileMap to retrieve a particular layer, based on its name (the name we gave the layer in Tiled) layerNamed returns a CCTMXLayer

21. CCTMXLayer CCTMXLayer *eventLayer = [tileMap layerNamed: @GameEventLayer]; Assuming we named a layer GameEventLayer in Tiled when we build the tilemap can be useful to detect things based on their properties

22. Things of interest We will probably want a method that converts a touch location (a CGPoint) to a tile location (tile row, tile column another CGPoint) -(CGPoint )tilePosFromLocation: touchLocation tileMap: tileMap;

23. Touch location to tile location The tilemap may have been scrolled upper left of screen may not be 0, 0 of tilemap (tilemap may be bigger than screen) Subtract tilemap position from touch location to get touch position with respect to tilemap Now convert to tile row and column

24. Touch location to tile location Scale for retina display if necessary using CC_CONTENT_SCALE_FACTOR( ) scaledTileWidth = tilemap.tileSize.width / CC_CONTENT_SCALE_FACTOR( ); Same for scaledTileHeight tile row = (int) ( position.x / scaledTileWidth );

25. Touch location to tile location Tile coordinates (0,0) is at top left corner not bottom left corner Tile column = (int) ( (tilemap.mapSize.height * tilemap.mapSize.height - position.y ) / scaledTileHeight );

26. Accessing properties Access a tile via its tileGID in order to check its properties GID = Global Identifier Location of a touch tile position tile GID properties

27. Tile GID Touch ccTouchesBegan called retrieve location of touch, assign to touchLocation CGPoint tilePos = [self tilePosFromLocation: touchLocation tileMap: tileMap]; int tileGID = [eventLayer tileGIDAt: tilePos];

28. Retrieving properties of a tile Use propertiesForGID method of CCTMXTileMap class; returns an NSDictionary (hashtable) NSDictionary *properties = [tileMap propertiesForGID: tileGID]; can loop through properties or access a particular property

29. Checking a property of a tile Use valueForKey method of NSDictionary class; returns an object NSString *isWaterProperty = [properties valueForKey: @isWater]; we can then test isWaterProperty and execute some code depending on its value

30. Other things of interest Retrieve a tile: in CCTMXLayer class, use method -(CCSprite *) tileAt: (CGPoint) tileCoord Note that tileAt: returns a CCSprite, which in turns can be treated as such, i.e. you can scale it, rotate it, change its opacity,..

31. Other things of interest Remove a tile: in CCTMXLayer class, use method -(void) removeTileAt: (CGPoint) tileCoord Set a tile: in CCTMXLayer class, use method (if a tile is already there, it will be removed and replaced) -(void) setTileGID: (int) gid at: (CGPoint) tileCoord