Cocos2d Tiledを使ってみる

ゲームには必ずと言っていいほど背景が存在します。 RPGのマップや町、シューティングゲームの背景、これが使えればゲーム作りも楽しくなると思います。 今回もcocos2dを使います。

Tiledというアプリを使えば、cocos2d専用の背景を簡単に作ることができるみたいです。日本語にも対応しています。

まずは、サイトからDLをしてください。

今回はこのチュートリアルをやります。

まずは、Tiledで自分の好きなマップを作ります。

チュートリアルでタイルセットを読み込んで、後は自分の好きなように配置します。 レイアーに関してはこの時点で特にいじる必要な無いです。

私はこのような感じで作りました。

注意点 作成したレイアー名は、cocos2dを使用する際に利用するので、どのような名前で作成したかを覚えておく必要があります。

次にcocos2dでのコードの記述です。

まずは、画面にTaildで作ったマップを表示させます。

.h

[cpp]

@interface HelloWorld : CCLayer {

CCTMXTiledMap *_tileMap;
CCTMXLayer *_background;

}

@property (nonatomic, retain) CCTMXTiledMap tileMap; @property (nonatomic, retain) CCTMXLayer background;

+(id) scene;

@end

[/cpp]

.m

[cpp]

@synthesize tileMap = tileMap; @synthesize background = background;

//~//

-(id) init { if( (self=[super init] )) {

 // tmxファイルを読み込んでいる
 self.tileMap = [CCTMXTiledMap tileMapWithTMXFile@"TileMap.tmx"];

// 読み込んだtmxファイルからレイアーを選択する、今回はBackgroundがレイアー名。 self.background = [_tileMap layerNamed@"Background"];

[self addChild: _tileMap z:1];

}
return self;

}

[/cpp]

こうすると画面に砂漠の画像が表示されます。 ここまではあくまで画面を表示させるだけの処理です。

Tailed を修正してオブジェクトを表示できるようにする

先ほどの画面に、Playerなり敵なり、モノなり、オブジェクトを配置していきます。 Taildの画面に戻って、オブジェクトレイアーを追加しましょう。

「レイアー」→ 「オブジェクト•レイアーの追加」でレイアーを追加します。 次に、画面の上の方にある「insert object」で空のオブジェクトを画面に追加します。 追加した空のオブジェクトを選択し、右クリックして以下のように、名前を設定します。

先ほど空のオブジェクトに実際の画像を当てはめます。

[cpp]     self.tileMap = [CCTMXTiledMap tiledMapWithTMXFile:@"TileMap.tmx"]; self.background = [_tileMap layerNamed:@"Background"];

    // オブジェクトレイアーを取得する CCTMXObjectGroup objects = [_tileMap objectGroupNamed:@"objects"]; NSAssert(objects != nil, @"'objects' object grounp not found"); // オブジェクトを取得する NSMutableDictionary spawnPoint = [objects objectNamed:@"SpawnPoint"]; NSAssert(spawnPoint != nil, @"'SpawnPoint' object grounp not found");      //オブジェクトのx,yの値を取り出す int x = [[spawnPoint valueForKey:@"x"] intValue]; int y = [[spawnPoint valueForKey:@"y"] intValue];

    //取り出した座標を画面に画像を配置する。
    self.player = [CCSprite spriteWithFile:@"Player.png"];
    _player.position = ccp(x,y);
    [self addChild:_player];

[/cpp]

見にくいけどこんな感じです。 後はキャラクタに動きを加えれば、マップを移動できます。