Cocos2d Tiledを使ってみる

  • |
   

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




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

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

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

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

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

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


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

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

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

.h


@interface HelloWorld : CCLayer
{

	CCTMXTiledMap *_tileMap;
	CCTMXLayer *_background;

}

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

+(id) scene;

@end


.m


@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;
}


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


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

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

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





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


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


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


Related Posts Plugin for WordPress, Blogger...