參考文章：http://www.raywenderlich.com/1163/how-to-make-a-tile-based-game-with-cocos2d
各位好久不見。最近比較忙，都沒上來寫新的文章(謎之音：漫畫倒是看了不少)，所以今天來寫一下TileMap的教學。
本教學會分成非常多的步驟，某個步驟都會很短，以便於查閱。主要進行的步驟以一開始所放的參考文章為主，如果看不懂筆者寫的，也可以去看一下原文，或留言跟我講一下。
本章是要建立新地圖，在此之前，希望大家先下載好TileMap和可以用來製作tilemap的檔案。在下使用的TileMap版本是中文界面的，所以下面會以中文為主。下載的檔案可以參考一開始所附的參考文章，或去網路上找TileMap的下載點。
假設大家已經下載好，那現在就開始了！
開始
第一步是建立地圖，點選功能列中的文件，選新文件，會出現一個小視窗，可以選擇地圖的方向，這邊我稍微解釋一下：正常(orthogonal)：地圖建立的方位跟一般笛卡爾坐標系一樣，這種地圖看起來就是2D。
45度(isometric)：有名的銀河英雄傳說的回合制地圖就是這樣，這種地圖比較有3D立體感。
地圖大小：寬度和高度各由多少塊方塊組成，注意，單位是方塊。
塊大小：要輸入真實的方塊大小，注意，單位是像素。
載入素材
點選功能列中的地圖，會跳出一個視窗，第一行是名稱，這先不用輸入，第二行寫圖像，旁邊有一個瀏覽按鈕，按下去，選擇你要用來編輯地圖的png檔，選好後名稱會以你所選的png檔名為主自動生成。
再來輸入塊的一些參數，塊寬度、高度是以真實png檔中的塊像素大小輸入，你png檔中的塊像素有多大就輸入多少，而邊距和間距，這需要解釋一下。
看了網上一些翻譯，其實我還是不懂，後來看了原文才比較瞭解。
間距(margin)：大家可以先看一下下載的tile圖檔，每一個方塊之間由一條黑線所分開，這條黑線的像素為一。間距是說，在計算每一個方塊的真實大小(width、height，單位是像素)時，需要減去多少才能得到真正的width和height的像素？再說得更白話一點，就是他在算width時會計入左右兩條黑線的寬度，所以要減去左右兩條黑線的寬度，才能得到方塊真實的寬度。
邊距(spacing)：這是說，當你要算下一個方塊的大小時，你要跨過多少距離能到達下一個像素。更白話一點就是，你算好這個方塊的大小後，你再跳到下一個方塊，總不能把黑線算進去吧？所以你要告訴程式至少要跨過一條黑線的寬度才能算是到了下一個方塊，然後再進行計算。
希望我這樣解釋夠白話了。
繪製你的地圖
再來就是製作你的地圖了，記得把畫面都用右邊的方塊填滿。
填滿之後，在右邊圖層裡面，把名稱改成Background。
改好之後，儲存，名稱取作TileMap。
建立你的專案
再來就是開一個新專案，這邊我就不多講了，開好之後，我們會修改HelloWorldLayer.h去載入地圖。要先把你做好的地圖，和使用的方塊圖檔，都先加入到你的專案裡面去。
首先在HelloWorldLayer.h裡面做以下修改，稍後會解釋：
#import "cocos2d.h"
// HelloWorldLayer
@interface HelloWorldLayer : CCLayer
{
CCTMXTiledMap *_tileMap;
CCTMXLayer *_background;
}
@property (nonatomic, retain) CCTMXTiledMap *tileMap;
@property (nonatomic, retain) CCTMXLayer *background;
+(CCScene *) scene;
@end
然後到HelloWorldLayer.m裡面，輸入以下code：
#import "HelloWorldLayer.h"
// HelloWorldLayer implementation
@implementation HelloWorldLayer
@synthesize tileMap = _tileMap;
@synthesize background = _background;
+(CCScene *) scene
{
CCScene *scene = [CCScene node];
HelloWorldLayer *layer = [HelloWorldLayer node];
[scene addChild: layer];
return scene;
}
// on "init" you need to initialize your instance
-(id) init
{
if( (self=[super init])) {
self.tileMap = [CCTMXTiledMap tiledMapWithTMXFile:@"TileMap.tmx"];
self.background = [_tileMap layerNamed:@"Background"];
[self addChild:_tileMap z:-1];
}
return self;
}
// on "dealloc" you need to release all your retained objects
- (void) dealloc
{
self.tileMap = nil;
self.background = nil;
[super dealloc];
}
@end
這些code應該都很簡單，除了init裡面的可能你比較陌生之外，但他就只是那樣，載入你的地圖tmx檔，以及地圖裡面的層。
好吧，下一個教學會說明如何加入你的角色！
留言
張貼留言