Cocos2D Game Tutorial – RPG Style Game for the iPhone – Part 2: Tiled Maps

Cocos2D Game Tutorial – RPG Style Game for the iPhone – Part 2: Tiled Maps:
Update: Made some modifications to the source code – changed the title music (Hope you enjoy a remix of Dragon Warrior) and expanded the map to give a better idea of how you can use the space. Also, I added grid lines to the tiles so it didn’t looks so much like a painting. More parts to come!

It’s been a while since part 1 – we know from your comments that it’s not your favorite thing in the world (it’s not ours either) but we’re gonna try to get going again!

That being said, if you haven’t read part 1 of the tutorial, or the intro describing what we’re working towards, now’s your chance to play catch-up before plunging forward into the next piece of unknown – tile based maps using Tiled!

As will be the case for the rest of the tutorial, we’re using the Cocos2D framework for game development, which already includes support for the TMX file format (we’ll get to that later – just know that it makes our lives easier!). To build the map, we’re going to be using Tiled Qt, a fantastic piece of software that makes creating maps a piece of cake!

Source code after the break!



Download the source for this project from here!

I’ve gone ahead and made what I believe to be some of the finest tiles available. Feel free to use these tiles in any way you see fit (but for the sake of artists everywhere please don’t).

One if by land, Two if by sea, Three if by tree, Four if by...mountain

Be consistent in your spacing – whether its 1 pixel, 0 pixels, or 100 pixels. Tiled needs to know how much space is between each tile when reading in your graphic, otherwise when the map is drawn it will look wrong. The same applies to the margin around the sides. In my case, I’ve used a 1px margin and 1px spacing.

Also I’ve made my tiles 44px by 44px, so they’re large enough to see the wonderful detail on them – how big you make your tiles is completely up to you. If you’re programming for iPhone, just remember that you have a smaller space to deal with and you probably don’t want your user to have to constantly be scrolling around – 44×44 gets you about 11 tiles horizontally, and a little more than 7 vertical. For the purposes of this tutorial, I’ve made a really simple map with 15×15 tiles. Let’s get you started on designing your own map first!

First things first – the default compression that Tiled is set to (at least on the Mac version) is incompatible with Cocos2d. So click on the Tiled menu and select “Preferences”. Then in the drop down select “Base 64 (gzip compressed)” – you do NOT want the zlib compressed version. Click on the pic on the left to see the details if necessary.

Next, go to File->New, and then put in the parameters for your new map. You want the orientation set to “Orthogonal”, and the map size and tile size set to whatever works for you. For your map to work with this project, you’ll want to rename the tile layer from “Tile Layer 1″ to “Background”. Once you’re set there, go to Map->New Tileset, give it a name, choose your tile sheet, then set the height and width, and margin and spacing. Once you’ve done all that, you’ll see the Tilesets section of Tiled (generally the bottom right) become populated with your tiles. Now you’re ready to start drawing!

You can use the Stamp Brush tool to draw individual squares, or use the Bucket Fill tool to fill a large portion. Either way, you draw by clicking on the tile you want to use in the Tilesets section, and then click to fill a square or a section. Whenever you’re done, save your map as “Level1″ to the Resources directory of your Xcode project, and make sure you copy or move your tile sheet file in there also, and then add them both in the actual project.

Enough Tiled – time for some code!

We only had to add one class for this tutorial, Map.h/m. The Map class simply loads up the TMX file you created and adds it to the screen, and uses the touch detection methods to pan the screen around. Also we made a static variable to use the Singleton design pattern so that it can be accessed from anywhere (this comes in handy later on). Here’s the code where we load up the map:

Map.h

- (void) loadLevel:(int)levelNum
{
NSString * fileName = [NSString stringWithFormat:@"Level%i.tmx", levelNum];
self.anchorPoint = ccp(0,0);
self.position = ccp(0,0);
self.tileMap = [CCTMXTiledMap tiledMapWithTMXFile:fileName];
self.background = [self.tileMap layerNamed:@"Background"];

[self addChild:self.tileMap z:-1];
}

As you can see, the tile layer we renamed to “Background” in Tiled is what we are referencing with the “layerNamed” function. Like I mentioned, the rest of the code in the Map class is mainly for moving the map around – the “boundLayerPos” function makes sure we can’t scroll our Map past its edges.

The only other change we make is in PlayLayer. In the header file, we add:

#import "Map.h"

and in PlayLayer.m we update the init function:

- (id) init
{
if ((self = [super init])) {
Map *m = [Map getInstance];
[m loadLevel:1];
[self addChild:m];
}

return self;
}

And that’s it! Now we have our menu system that loads up our tile based map when you start the game. Part 3 to come as soon as we can get it out!