參考Laya TileMap 系列一 地圖編輯器使用基礎(chǔ)

一、編輯器版本

TileMap編輯器，建議下載1.2版本的。https://github.com/mapeditor/tiled/releases/tag/v1.2.0
剛開(kāi)始我下載了1.7版本，cocos會(huì)提示：

cocos2d: TMXFormat: Unsupported TMX version: 1.5

至于為什么是1.2，參考官方文檔https://docs.cocos.com/creator/manual/zh/asset-workflow/tiledmap.html

瓦片圖資源是由 TiledMap 所導(dǎo)出的數(shù)據(jù)格式（Creator v2.1 及以下支持 TiledMap v1.0.0，Creator v2.2.0 及以上支持 TiledMap v1.2.0）。

另外可參考官方文檔：TiledMap 組件參考
https://docs.cocos.com/creator/manual/zh/components/tiledmap.html

二、尋路

參考官方示例改 TiledMap 瓦片地圖+尋路，這個(gè)帖子提供了正常角度的地圖坐標(biāo)轉(zhuǎn)換。我現(xiàn)在想做斜45度的地圖，需要修改坐標(biāo)轉(zhuǎn)換算法。

三、坐標(biāo)

參考
筆記：TileMap坐標(biāo)轉(zhuǎn)換
45度角地圖坐標(biāo)計(jì)算
瓦片地圖-坐標(biāo)轉(zhuǎn)換

1.地圖類型

image.png

正常

斜45

45度交錯(cuò)

六角交錯(cuò)

• 所有地圖類型的坐標(biāo)都是格子數(shù)，X軸向右增加，Y軸向下增加
• 正常/45度交錯(cuò)/六角交錯(cuò)地圖左上角第一個(gè)格子為起始點(diǎn)：(0,0)
• 45度地圖上方頂點(diǎn)第一個(gè)格子為起始點(diǎn)：(0,0)

2.坐標(biāo)系

image.png

• TileMap坐標(biāo)：以地圖左上角為原點(diǎn)(0,0)，X軸向右增加，Y軸向下增加
• OpenGL坐標(biāo)：以地圖左下角為原點(diǎn)(0,0)，X軸向右增加，Y軸向上增加
• Creator坐標(biāo)：以節(jié)點(diǎn)中心點(diǎn)為原點(diǎn)(0,0)，X軸向右增加，向左減少，Y軸向上增加，向下減少

3.引擎提供tiled格式轉(zhuǎn)圖層坐標(biāo)

let Orientation = cc.Enum({
    /**
     * !#en Orthogonal orientation.
     * !#zh 直角鳥(niǎo)瞰地圖（90°地圖）。
     * @property ORTHO
     * @type {Number}
     * @static
     */
    ORTHO: 0,

    /**
     * !#en Hexagonal orientation.
     * !#zh 六邊形地圖
     * @property HEX
     * @type {Number}
     * @static
     */
    HEX: 1,

    /**
     * Isometric orientation.
     * 等距斜視地圖（斜45°地圖）。
     * @property ISO
     * @type {Number}
     * @static
     */
    ISO: 2
});

    /**
     * !#en Returns the position in pixels of a given tile coordinate.
     * !#zh 獲取指定 tile 的像素坐標(biāo)。
     * @method getPositionAt
     * @param {Vec2|Number} pos position or x
     * @param {Number} [y]
     * @return {Vec2}
     * @example
     * let pos = tiledLayer.getPositionAt(cc.v2(0, 0));
     * cc.log("Pos: " + pos);
     * let pos = tiledLayer.getPositionAt(0, 0);
     * cc.log("Pos: " + pos);
     */
    getPositionAt (pos, y) {
        let x;
        if (y !== undefined) {
            x = Math.floor(pos);
            y = Math.floor(y);
        }
        else {
            x = Math.floor(pos.x);
            y = Math.floor(pos.y);
        }
        
        let ret;
        switch (this._layerOrientation) {
            case cc.TiledMap.Orientation.ORTHO:
                ret = this._positionForOrthoAt(x, y);
                break;
            case cc.TiledMap.Orientation.ISO:
                ret = this._positionForIsoAt(x, y);
                break;
            case cc.TiledMap.Orientation.HEX:
                ret = this._positionForHexAt(x, y);
                break;
        }
        return ret;
    },

四、有做大型RPG或SLG游戲需求的朋友請(qǐng)進(jìn)，有在線地圖編輯器

作者QQ583051842
以下為評(píng)論區(qū)精選：

1.人物移動(dòng)使用插值

從a點(diǎn)走到b的過(guò)程中突然又點(diǎn)擊了c點(diǎn)，a到b點(diǎn)的行走被打斷，改為當(dāng)前位置到c點(diǎn)行走，用tween不好控制，而且tween性能消耗大。而插值可以輕松每時(shí)每刻的屏幕平滑移動(dòng)。還有一種情況，arpg游戲，a點(diǎn)走到b點(diǎn)的過(guò)程中，角色中了一個(gè)暈眩技能，被迫停下，用tween就不好處理了。

2.想問(wèn)下 如果想在地圖上添加NPC 怪物等等 這個(gè)可以添加么 然后如何觸發(fā)事件

在地圖上添加怪物和npc可以在cocoscreator里編輯。新建一個(gè)場(chǎng)景，把地圖底圖拉到場(chǎng)景里，然后把怪物和npc根據(jù)底圖的位置拖放，在把這些怪物和npc一起生成一個(gè)預(yù)制體。運(yùn)行游戲時(shí)，加載地圖的同時(shí)順便把這個(gè)預(yù)制體加載進(jìn)來(lái)放置在底圖上就可以了。

點(diǎn)擊事件可以在怪物和npc的節(jié)點(diǎn)上添加事件監(jiān)聽(tīng)

3.點(diǎn)擊不能尋路的地方，現(xiàn)在是不會(huì)移動(dòng)，可以改為跑到離這個(gè)點(diǎn)，最近的可移動(dòng)的地方

修復(fù)了源代碼項(xiàng)目用2.20以上的版本打開(kāi)，角色動(dòng)畫(huà)不能播放的問(wèn)題，并且添加了點(diǎn)擊障礙點(diǎn)也可以行走到最靠近目標(biāo)點(diǎn)最近的地方的功能

尋路算法添加了可以選擇是否優(yōu)化尋路路徑的選項(xiàng)修改一下A*尋路腳本里的optimize屬性，true為優(yōu)化，會(huì)把路徑里多余的路點(diǎn)清理掉，false為不優(yōu)化，返回尋路的完整路徑

4.大佬 ，地圖圖片太大了會(huì)不會(huì)加載慢？

很大的地圖， 最好先photoshop把大地圖導(dǎo)出一張很小的地圖，提前加載到游戲里，并且縮放大小和原始地圖一樣大小，這樣就能作為馬賽克地圖。然后再用photoshop可以分片切割大圖片成很多小圖片（如每張256 * 256），玩家走到哪里就加載哪里的小圖塊，這樣就不會(huì)影響加載速度了，就算是微信小游戲也能跑。以前網(wǎng)頁(yè)游戲就是這種做法的

在線編輯器里新增了針對(duì)大地圖的裁圖工具，需要下載使用

5.筆刷

更新了功能，按住shitf拖動(dòng)鼠標(biāo)可以加大筆刷范圍，按住鼠標(biāo)“中鍵”或者“space + 鼠標(biāo)左鍵”可以拖曳底圖，

6.如果用tilemap那種像素風(fēng)類型的,似乎不大適用

tilemap是以地磚的方式重復(fù)利用資源，優(yōu)點(diǎn)節(jié)省資源大小，缺點(diǎn)畫(huà)面太單一。我這種是傳統(tǒng)的rpg地圖原畫(huà)，優(yōu)點(diǎn)地圖由美術(shù)原畫(huà)自由發(fā)揮，畫(huà)面比較精美。缺點(diǎn)是資源相對(duì)地磚地圖大很多，不過(guò)可以通過(guò)切割地圖，按視野分塊加載地圖片，效率不會(huì)受影響很多。如果tilemap需要做尋路，我的項(xiàng)目里自帶的尋路系統(tǒng)是可以用的。

7.小地圖尋路

游戲中點(diǎn)擊顯示縮略圖（一般右上角顯示小地圖）需顯示兩點(diǎn)間虛線路線，并自動(dòng)尋路過(guò)去(尋路過(guò)程中，縮略圖虛線路線逐漸縮短且頭像逐漸移動(dòng)),請(qǐng)問(wèn)樓主能否指點(diǎn)一下思路

縮略圖可以自己用ps按比例縮小出一張小的地圖，放在右上角，點(diǎn)擊縮略圖時(shí)，根據(jù)點(diǎn)擊縮略圖的位置按比例轉(zhuǎn)化到場(chǎng)景地圖的位置，并尋路到該位置，尋路會(huì)得到一條尋路路徑，用繪圖工具如graphic組件根據(jù)玩家行走的位置，再連接剩下沒(méi)走完的路徑，實(shí)時(shí)繪制就得到你要的結(jié)果了

8.請(qǐng)問(wèn)大佬打開(kāi)地圖時(shí)讀取本機(jī)文件并上傳是如何做到的？有相關(guān)文檔嗎？

js配合html標(biāo)簽就可以做得到

五、其它優(yōu)化

【Tiledmap】斜45度 貼圖利用率優(yōu)化分享

slg系列（地圖篇）3d透視無(wú)限地圖完成……其他補(bǔ)充中..