Phaser 3 寻路的最佳解决方案？

Question

我有一个游戏，我希望能够让敌人在地图上找到玩家的路径，有没有办法在不编写我自己的 a* 算法的情况下做到这一点？我已经看到一些据称仍在为此更新的库，但它们都没有工作，它们都被 npm 破坏并且在作为脚本添加时不起作用。
我尝试过的库是Easystar 和Navmesh。
任何建议都会很棒，虽然 Phaser 支持会很有用，但在 2D 阵列上寻路对我来说仍然是一个很好的解决方案。谢谢！

Answer 1

我自己从未尝试过（直到现在），但你可以查看这个插件寻路插件https://github.com/mikewesthad/navmesh 它非常广泛。

（顺便说一句：一个**star 很容易实现）*

... 一个 JS 插件，用于使用导航网格进行快速寻路，带有用于 Phaser v2 和 Phaser v3 游戏引擎的可选包装器。 ...

附言：在此页面上，您可以找到 Phaser https://phaserplugins.com/ 的可用插件列表

更新：

您可以签出这个基本的寻路实现（基于网格/非像素）：https://gist.github.com/akumagamo/06a8e958d7646eb9f388640e8c0e537c

可以说它的性能如何，但适用于迷你演示。

用法：

 // Create Object pass map and Array of indices, with are passable
 let pf = new PathFinding ([[1,1,1],[1,1,1],[1,1,1],[1,1,1],], [1]);

 // find path
 pf.findPath({x:0, y:0}, {x:2, y:3})

更新“导航网格”：

在对一个简单的示例进行测试后，它运行良好，请注意不要错过任何步骤。

这里需要的步骤：

1. 获取最新的插件文件phaser-navmesh-plugin.js（目前来自https://github.com/mikewesthad/navmesh/releases/tag/2.1.0）

2. 从 html 文件中加载它 <script src="phaser-navmesh-plugin.js"></script>

3. 配置插件，在config（还有其他方法，但这个更方便）

    var config = {
        ...
        plugins: {
            scene: [
                {
                    key: "PhaserNavMeshPlugin", // Key to store the plugin class under in cache
                    plugin: PhaserNavMeshPlugin, // Class that constructs plugins
                    mapping: "navMeshPlugin", // Property mapping to use for the scene, e.g. this.navMeshPlugin
                    start: true
                }
            ]
        },
        scene: {
           ...
        }
    };
   

4. 设置应该碰撞的地图和图层：

        var map = this.make.tilemap({ data: [[0,1,0],[0,1,0],[0,1,0],[0,0,0]], tileWidth: 8, tileHeight: 8 });
        var tiles = map.addTilesetImage('tile01');
        var layer = map.createLayer(0, tiles, 0, 0);
   
        // this is important, can also be multiple indices
        layer.setCollision(1);
   

5. 创建 navMesh，传递地图和创建的图层，应该有碰撞。

        const navMesh = this.navMeshPlugin.buildMeshFromTilemap("mesh", map, [layer]);
   

6. 需要时执行寻路（x/y 位置以像素为单位，而不是 tilesId）：

        const path = navMesh.findPath({ x: 4, y: 4 }, { x: 17, y: 4 });
   

   您也可以像这样在 preload 函数中加载插件

           this.load.scenePlugin({
               key: 'PhaserNavMeshPlugin',
               url: PhaserNavMeshPlugin,
               sceneKey: 'navMeshPlugin'
           });
   

   这里是完成后带有迷你路径跟踪的演示代码：

       var config = {
           scene: {
               preload,
               create,
           }
       };
   
       var game = new Phaser.Game(config);
   
       function preload() {
           this.load.image('tile01', 'tile01.png');
           this.load.scenePlugin({
               key: 'PhaserNavMeshPlugin',
               url: PhaserNavMeshPlugin,
               sceneKey: 'navMeshPlugin'
           });
       }
   
       function create() {
           var map = this.make.tilemap({ data: [[0,1,0],[0,1,0],[0,1,0],[0,0,0]], tileWidth: 8, tileHeight: 8 });
           var tiles = map.addTilesetImage('tile01');
           var layer = map.createLayer(0, tiles, 0, 0);
   
           layer.setCollision(1);
   
           const navMesh = this.navMeshPlugin.buildMeshFromTilemap("mesh", map, [layer]);
           const path = navMesh.findPath({ x: 4, y: 4 }, { x: 17, y: 4 });
   
           if (!path) {
               return;
           }
   
           let graphics = this.add.graphics();
   
           graphics.lineStyle(2, 0xff0000, 1);
           graphics.beginPath();
           graphics.moveTo(path[0].x, path[0].y);
   
           for (let idx = 1; idx < path.length; idx++) {
               graphics.lineTo(path[idx].x, path[idx].y);
           }
   
           graphics.strokePath();
       }