glory原創,首發於泰然,轉載請注明出處
https://github.com/chukong/cocos-docs/blob/master/manual/framework/native/v3/tiled-map/zh.md
歡迎大家斧正錯誤,提交PR。
在游戲開發過程中,我們會遇到超過屏幕大小的地圖,例如即時戰略游戲,使得玩家可以在地圖中滾動游戲畫面。這類游戲通常會有豐富的背景元素,如果直接使用背景圖切換的方式,需要為每個不同的場景准備一張背景圖,而且每個背景圖都不小,這樣會造成資源浪費。
瓦片地圖就是為了解決這問題而產生的。一張大的世界地圖或者背景圖可以由幾種地形來表示,每種地形對應一張小的的圖片,我們稱這些小的地形圖片為瓦片。把這些瓦片拼接在一起,一個完整的地圖就組合出來了,這就是瓦片地圖的原理。
TileMap方案
在Cocos2d-x中,瓦片地圖實現的是TileMap方案,TileMap要求每個瓦片占據地圖上一個四邊形或六邊形的區域。把不同的瓦片拼接 在一起,就可以組成完整的地圖了。我們需要很多較小的紋理來創建瓦片。通常我們會將這些較小的紋理放圖一張圖片中,這樣做會提高繪圖性能。
瓦片地圖編輯器
Cocos2d-x支持由瓦片地圖編輯器Tiled Map Editor制作並保存為TMX格式的地圖。Tiled Map Editor是一個開源項目,支持Windows、Linux及Mac OS X多個操作系統,我們可以從官網下載到編輯器的Java和QT版本。
如何使用Tiled工具建立地圖可以參考以下文章:
地圖方向
Tiled地圖支持直角鳥瞰地圖(90°地圖)、等距斜視地圖(斜45°地圖)和六邊形地圖,不支持左右或上下邊界的六邊形地圖。
地圖資源
- 建議瓦片地圖素材大小為32*32的倍數
- 瓦片素材組與其他圖片不能混合使用
- 只有瓦片素材圖能被導入TMX文件
- 每個Layer最多支持1套瓦片素材組。
瓦片層
- TMX文件中瓦片層的數量沒有上限
- 每一個瓦片層只能由一種瓦片素材組成
- 每一個瓦片層可以被TMXLayer類表示-為SpriteSheet的子類
- 每一個單一的瓦片被Sprite表示-父節點為TMXLayer
對象層
- 瓦片地圖支持對象組
- 用來添加除背景以外的游戲元素-道具、障礙物等
- 對象組中的對象在TMX文件中以鍵值對形式存在,因此可以直接在TMX文件中對他進行修改
瓦片地圖坐標系
對於一個16*16的瓦片地圖文件的坐標系統為
- (0, 0): 左上角
- (15, 15): 右下角
在Cocos2d-x中使用TMX
創建TMX節點
TMXTiledMap *map = TMXTiledMap::create("bg.tmx"); addChild(map, 0);
遍歷子節點
Vector pChildrenArray = map->getChildren(); SpriteBatchNode* child = NULL; Ref* pObject = NULL; for (Vector::iterator it = pChildrenArray.begin(); it != pChildrenArray.end(); it++) { pObject = *it; child = (SpriteBatchNode*)pObject; }
獲取/刪除一個瓦片
TMXLayer* layer = map->getLayer("layer0"); Sprite* tile0 = layer->getTileAt(Point(1, 15)); layer->removeTileAt(Point(1, 15));
遍歷對象層中對象
TMXObjectGroup* objectGroup = map->getObjectGroup("center"); ValueVector object = objectGroup->getObjects(); for (ValueVector::iterator it = object.begin(); it != object.end(); it++) { Value obj = *it; ValueMap map = obj.asValueMap(); log("x = %d y = %d", map.at("x").asInt(), map.at("y").asInt()); }