ゲームには必ずと言っていいほど背景が存在します。
RPGのマップや町、シューティングゲームの背景、これが使えればゲーム作りも楽しくなると思います。
今回もcocos2dを使います。
Tiledというアプリを使えば、cocos2d専用の背景を簡単に作ることができるみたいです。日本語にも対応しています。
まずは、サイトからDLをしてください。
今回はこのチュートリアルをやります。
まずは、Tiledで自分の好きなマップを作ります。
チュートリアルでタイルセットを読み込んで、後は自分の好きなように配置します。レイアーに関してはこの時点で特にいじる必要な無いです。
私はこのような感じで作りました。
注意点
作成したレイアー名は、cocos2dを使用する際に利用するので、どのような名前で作成したかを覚えておく必要があります。
次にcocos2dでのコードの記述です。
まずは、画面にTaildで作ったマップを表示させます。.h
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@interface HelloWorld : CCLayer { CCTMXTiledMap *_tileMap; CCTMXLayer *_background; } @property (nonatomic, retain) CCTMXTiledMap *tileMap; @property (nonatomic, retain) CCTMXLayer *background; +(id) scene; @end |
.m
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@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」で空のオブジェクトを画面に追加します。
追加した空のオブジェクトを選択し、右クリックして以下のように、名前を設定します。
先ほど空のオブジェクトに実際の画像を当てはめます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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]; |
見にくいけどこんな感じです。
後はキャラクタに動きを加えれば、マップを移動できます。
