Tilemaps In tilemap games, the graphics consist of a small number of images, called tiles, that...

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

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

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

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

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, …

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

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)

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)


• 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)


• 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


• 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)


• 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


• 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


• 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


• 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”)


• Example of a property: isWater

• Do not use too many layers could impact frame rate

• 2 to 4 layers should be sufficient

Using the TMX tilemap

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

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)

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];

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

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

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;

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


• 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 );


• 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 );

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

Tile GID

• Touch ccTouchesBegan called retrieve location of touch, assign to touchLocation

CGPoint tilePos = [self tilePosFromLocation: touchLocation tileMap: tileMap];

int tileGID = [eventLayer tileGIDAt: tilePos];

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

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

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

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

Tilemaps In tilemap games, the graphics consist of a small number of images, called tiles, that...

Documents

Transcript of Tilemaps In tilemap games, the graphics consist of a small number of images, called tiles, that...