Cocos Creator3.x NavMesh导航网格寻路(一)

前言

在游戏开发过程中,寻路可能是大多数游戏都必不可少的功能。2d游戏中最常用的就是A* 寻路了。在3d游戏中,对于一些简单的,没有高度地面A* 寻路同时也是可以使用的,但是对于一些地面比较复杂的游戏,寻路功能怎样实现比较好呢!

效果展示

<iframe src="//player.bilibili.com/player.html?aid=893263716&bvid=BV1HP4y177QU&cid=488947254&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

1.RecastNavigation

相信了解过3d寻路的小伙伴都有听说过RecastNavigation。RecastNavigation是一款非常强大的寻路系统,被广泛的应用于各大游戏引擎中。如Unreal,Unity等。


image

NavMesh的生成基本原理:

  1. 体素化。从源几何体构造实心的高度场,用来表示不可行走的空间。
  2. 生成地区。将实心高度场的上表面中连续的区间合并为地区。
  3. 生成轮廓。检测地区的轮廓,并构造成简单多边形。
  4. 生成多边形网格。将轮廓分割成凸多边形。
  5. 生成高度细节。将多边形网格三角化,得到高度细节。

感兴趣的小伙伴们可以去了解一下,甚至可以去了解了解源码。源码也去看过,奈何自己C++实在太差


image

2.耳切法+A*

大概了解了导航寻路的原理,觉得整个寻路的关键可以分为两部分:网格画与寻路,所以决定自己尝试一下,现从最简单的没有高度的地图入手


image

大概步骤:

  • 1.基于耳切法实现地图的网格化
  • 2.基于A* 实现寻路
  • 3.基于漏斗算法将三角形集合进行路径最优解


    image

    在最终的尝试下,基本的寻路功能是实现了,但是在路径的优化方面会存在一些问题,所以决定去寻找一些现成的js库来实现这个功能

3.NavMesh 导航

在github闲逛的时候发现了recast.js这个库,于是乎就开始花时间去了解了一下具体功能和API,同时还发现在Babylon.js这个3d游戏引擎中已经将其集成进去了,并且这个游戏引擎也是开源的,简直太完美了,

3.1 Cocos Creator3.x

花了点时间,成功将recast.js 移到了Cocos Creator3.x


image
  • recast.js js库
  • NavMesh.ts 功能实现

3.2 基础功能实现

1.初始化

import Recast from "./lib/recast.js"
...
public init(cb: Function = null):void{
  new Recast().then((recast) => {
      this._recast = recast;
      this._navMesh = new this._recast.NavMesh();
      this.setDefaultConfig();

      this._tempVec=new this._recast.Vec3();
      this._tempVec1=new this._recast.Vec3();
      this._tempVec2=new this._recast.Vec3();
      if (cb) cb();
  });
}

2.添加静态物体

/**
 * 添加静态的模型
 */
public addStaticModle(node: Node): void {
    if(!node||!node.getComponent(MeshRenderer)) return;
    let render: MeshRenderer = node.getComponent(MeshRenderer);
    if (!render || !render.mesh) return;
    let matrix: math.Mat4 = node.getWorldMatrix();
    this.updateBaseDatas(render.mesh, matrix);
}

场景中一些固定不变的,比如地面,障碍物之类的可以通过这个结构进行添加,代码中对传入节点的网格信息进行处理,处理为recast所需要的格式,


image

3.添加Terrain 地形

 /**
 * 添加cocos的地形 
 * @param terrain 地形组件
 */
public addTerrain (terrain: Terrain,): any {
   ...
}

terrain 地形组件同时也是游戏开发过程中会常用到的组件,所以听取了大佬的建议,将咱们的寻路对terrain进行了支持,大家可以在demo中看见对terrain数据处理的一些逻辑


image

4.构建导航网格

/**
 * 构建导航网格
 */
public build(): void {
    var rc = new this._recast.rcConfig();
    rc.cs = this._config.cs;
    rc.ch = this._config.ch;
    ....
    this._navMesh.build(this._positions, this._positions.length / 3, this._indices, this._indices.length, rc);
}

5.可视化调试

在构建完导航网格后,为了方便大家调试,需要将最终的数据以可视化的效果展现给大家,方便大家开发过程的调试,代码中已经做好了处理,提供了两种调试方式:

export enum MeshDebugDataType {
    SURFACE = 0, //面
    LINE = 1,   //线
}

let navMeshData: NavMeshDebugData = this._navMeshMgr.getNavMeshDebugData(MeshDebugDataType.LINE);
this.createDebugMesh(navMeshData.positions, navMeshData.normals);

private createDebugMesh (positions: number[], normals: number[]): void {
    this.line.node.destroyAllChildren();
    let node = new Node();
    let render = node.addComponent(MeshRenderer);
    let mesh = utils.createMesh({
        positions: positions,
        primitiveMode: gfx.PrimitiveMode.TRIANGLE_LIST,
        normals: normals,
    });
    render.mesh = mesh;
    this.line.node.addChild(node);
}
image

image

6.Crowd和Agent

首先来谈谈本人对这两个概念的理解吧。Crowd,从字面意识大概就能猜到,这是人群。Agent则表示的是这群人里边的其中一个。可以存在多个人群。本人猜测每个Crowd中的Agent在移动的时候会进行彼此之间距离的一些检测,但是不同Crowd的Agent则不会检测(还未验证),

  • 创建Crowd
public initCrowd (maxAgents: number, maxAgentRadius: number): NavMeshCorwd {
    return new NavMeshCorwd(this, maxAgents, maxAgentRadius);
}
  • 添加一个Agent
public addAgent (pos: Vec3, parameters: AgentConfig): number {
    let config = new this._navMeshMgr.recast.dtCrowdAgentParams();
    ...
    let agentIndex: number = this._recastCrowd.addAgent(new this._navMeshMgr.recast.Vec3(pos.x, pos.y, pos.z), config);
    ...
    return agentIndex;
}

7.寻路移动

导航网格的关键点就是为了获取两点之间的最有路径。

private findPath (pos): void {
    let targetPos: Vec3 = this._navMeshMgr.getClosestPoint(pos);
    //设置指定的Agent移动到特定位置
    this._navMeshCrowd.agentMoveTarget(this._playerAgentIndex, targetPos);
}

通过agentMoveTarget()函数去置顶Agent的目标点,同时还需要去实时刷新Crowd来更新Agnet的实际位置,

 update (deltaTime: number) {
    if(! this._navMeshCrowd) return;
    //刷新Crowd
    this._navMeshCrowd.update(deltaTime);
    //获取指定Agent当前的位置
    let agentPosition = this._navMeshCrowd.getAgentPosition(this._playerAgentIndex);
    this.player.position = agentPosition;
    }
image

image

4.总结

希望以上内容对小小伙伴们可以有所帮助
demo地址:https://store.cocos.com/app/detail/3516

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,463评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,868评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,213评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,666评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,759评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,725评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,716评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,484评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,928评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,233评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,393评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,073评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,718评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,308评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,538评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,338评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,260评论 2 352

推荐阅读更多精彩内容