[杨宗宝]Cocos Creator 3.x 3D 插件集合-独立开发者的福利

Creator 3.x
#1

前言

正如标题所写，这篇文章是真正的独立开发者的福利；在这篇文章中，宗宝将自己之前在独立游戏过程中用到的部分功能进行了封装，以插件的形式提供给大家；这些功能有：辅助开发的模型 UV 查看器，网格导出，网格合并导出，网格拆分导出的网格工具，3d 开发必备功能NavMesh 寻路;下边听宗宝给大家一一道来。

UV 查看器

uv 查看器:也就是对模型的 uv 布局进行查看的功能；使用过 3D 建模工具，或者用过 UE 的可能都知道有这么一个查看 uv 的功能；

  • 在 Maya 3d 建模软件中它长这样

    0
    0800×437 130 KB
  • 在 UE 引擎中它长这样

    1
    1800×437 336 KB



    uv 查看器，可以帮助我们快速的了解模型 uv 的分布情况，展开方向，所跨象限等信息；

    看了上边的介绍，那么大家肯定会有一个问题：Cocos Creator 3.x 已经发布了这么时间了，目前也已经到了 3.8 本版，该怎么使用这个功能呢？
  • 答案：目前为止 Cocos Creaor3.x 引擎未实现这个功能，但是宗宝自己进行了扩展，


    -在Cocos Creator 3.x中它长这样

    2
    2800×508 335 KB

使用教程



Nav Mesh寻路

实话实说，宗宝是将Nav Mesh寻路集成到Cocos Creator 3.x 的第一个人，看过宗宝独立游戏开发过程的人可能了解，宗宝在很早就自己试着去实现寻路功能，但是最后失败了；选择了一个新的思路就是去参考借鉴已有的方案，最早2022年一月份就已经将其进行了集成与分享：

在后续宗宝的独立射击游戏中不断的优化与完善，以及大家使用过程中的反馈，宗宝将其重新进行了调整，进行了新的升级；现在以全新的插件方式再次出现到大家面前

全新界面

3
3400×596 83.5 KB

看界面是不是一目了然了，每个参数都增加了详细描述，一键集成，一键构建，一键导出

使用教程

1.集成

当前版本添加了一键集成，所用到的库已经添加到了插件中，到使用此项功能时一键集成，插件就会将使用到的库与代码自动添加到项目中的assets/nav-mesh目录中；

4

2.构建

构建就是去构建导航寻路所用到的网格，构建的步骤如下：

  • 1.绑定root节点：构建时获取获取root节点下所有节点的网格信息，这是构建的前提
  • 2.设置属性：当前版本对所有的属性都进行了详细的描述，大家根据实际的场景进行设置

3.导出

nav-mesh导航网格信息导出是当前版本新增的功能，可以在项目开发过程中提前进行构建，然后将构建好的数据进行导出保存，可以在一定程度上减少项目在运行过程中由于需要构建所产生的耗时；

4.使用

这就属于代码部分了，真正的将nav-mesh添加到自己的项目中

  • 初始化
this._navMesh = new NavMeshMgr();
this._navMesh.init();
  • 通过节点构建导航网格
let meshrenderer: MeshRenderer[] = this.root.getComponentsInChildren(MeshRenderer);
meshrenderer.forEach((mesh: MeshRenderer) => {
    this._navMesh.addStaticModle(mesh.node);
})
this._navMesh.build();
  • 通过已导出的数据构建导航网格
//第一个参数：resources目录下的文件目录（同resources.load）
this._navMesh.loadNavMeshData("navmehs", (data: any) => {
  if (!null) {
      time = Date.now();
      this._navMesh.buildFromNavMeshData(data);
      console.log("build nav mesh:" + (Date.now() - time));
      this.createDebugMeshRederer(this.root);
  }
});
  • 其他

    通过上述的步骤我们就已经有了用来寻路的网格数据，接下来就可以去使用寻路功能了；

    同时此次的版本新增了两个接口：动态障碍物的添加和移除
/**
 * 添加圆柱形障碍物
 * @param position  位置
 * @param radius  半径
 * @param height  高
 * @returns 
 */
public addCylinderObstacle (position: Vec3, radius: number, height: number): IObstacle {
   .....
}
/**
 * 添加立方体障碍物
 * @param position  位置
 * @param size  尺寸
 * @param angle  盒子方向在Y轴上的弧度角
 * @returns 
 */
addBoxObstacle (position: Vec3, extent: Vec3, angle: number): IObstacle {
    .....
}
/**
 * 移除障碍物
 * @param obstacle 
 */
public removeObstacle (obstacle: IObstacle): void {
  ...
}

具体接口可参考：

Cocos Creator 3.x :NavMesh寻路

Cocos Creator 3.x :NavMesh寻路（二）

视频教程

Mesh 工具

问题：
  1.网格工具到底是干啥的？
  2.有什么作用？
  3.怎么使用？

基于上边的三个问题，宗宝逐一进行回答

1.网格工具到底是干啥的

先给大家看一下界面吧

5


界面中已经一目了然了，他是将所选节点的网格数据导出后可以在建模软件中进行二次编辑；

2.有什么作用

这个功能有啥用，那就得从它一开始出现的需求说起;

需求1：代码动态创建网格与预期效果不一致，进行问题排查

大家应该都使用过动态创建网格的接口吧：utils.MeshUtils.createMesh（…）；正如需求所描述，刚开始写这个插件， 主要是因为使用动态网格创建生成的网格和预期数据不一致，所以想将这套数据以模型的方式导出到建模软件中去排查并非引擎创建网格的问题；

//宗宝用以下代码 创建了一个只有两个三角面的最简单的面片
start() {
    let point = [
        0, 0, 0,
        0, 0, 1,
        1, 0, 0,
        1, 0, 1,
    ];
    let uvs = [
        0, 0,
        0, 1,
        1, 0,
        1, 1,
    ];
    let normals = [
        0, 1, 0,
        0, 1, 0,
        0, 1, 0,
        0, 1, 0,
    ];
    let indices = [
        0, 1, 2, 2, 1, 3
    ];
    let mesh = utils.MeshUtils.createMesh({
        positions: point,
        uvs: uvs,
        normals: normals,
        indices: indices,
    });

    let meshrenderer: MeshRenderer = this.node.getComponent(MeshRenderer);
    meshrenderer.mesh = mesh;
}

6
宗宝想将它导出到建模软件中，看看是不是一样的；所以第一个版本的网格导出工具就出现了，但是此时只有简单的代码逻辑，导出的网格在Maya建模软件中打开后效果和预期是一致的；

7
7800×504 175 KB

需求2：模型静态合批耗时严重，如果在编辑器中提前将场景里可合批的模型 进行整合

在宗宝独立游戏的优化过程中，就遇见了上边需求中所提到的需求，宗宝继续进行优化，所以第一版的网格导出工具产生了；
8
Mesh 导出3D模型


具体的功能描述，大家可以移步插件中进行查看

需求3：赛博朋克场景优化

这个插件真正的成型，也就是宗宝在将官方赛博朋克场景添加在宗宝独立开发的射击游戏中，在对长场景的整体结构进行优化过程时；

  • 相信看过原赛博朋克场景的都知道此场景存在的问题：

    1.全场景节点数量过多，宗宝大概看了一下，就网格节点应该是2000起步吧

    2.运行DrawCall过高



    1.全场景节点数量过多

    节点数量多，主要是因为整个场景使用很多类型不一样的小模型拼装而成，宗宝在优化过程中大概统计了一下使用的小模型种类的数量，应该是""；那么超过两千多个节点的场景只是由114个小模型拼装的；就拿其中一个地面网格来说：网格结构非常简单，但是数量就有30多个，这种的话我们的优化方式通常都是代码的静态合批，但是静态合批会大大影响游戏启动时的卡顿时间；像这种网格结构简单，数量多，布局相对集中的，我们是不是将其处理为一个整体而进行优化呢



    2.运行DrawCall过高

    DrawCall高，一方面是场景中网格类型数量多，即使开启了gpu合批；还有一种情况就是部分模型的材质比较复杂：多材质；多材质也会导致DrawCall增加；那么怎么将模型的多材质合并为一个材质呢

3.怎么用

基于不断的完善，咱们的网格工具也初步成型了，那么他到底怎么使用呢，

  • 1.首先通过菜单栏打开网格工具面板
  • 2.在场景编辑器或者成绩管理面板中点击对应的网格节点，就会在当前选择节点中看见节点的名称；
    9
  • 3.单节点导出：单节点导出，仅仅只会对当前选中节点的网格数据进行解析和导出。
    • 3.1原网格导出：就是直接对网格就行导出，他会保存网格的材质类型
      10
      导出后在Maya中打开，可以发现它依旧是两个材质，同个给两个材质设置不同的颜色很明显的可以看出来
      11
      11800×462 175 KB
    • 3.2 网格拆分导出：就是根据网格节点使用的材质类型将模型进行拆分单独导出，还是拿上边模型说明，导出后会更加材质数量生成多个模型：
      12
      将导出的来给两个模型都拖进maya中：
      13
      13800×597 230 KB
    • 3.3 网格合并导出：主要是将多材质网格合并为单网格材质，说白了就是将多个材质中的uv信息合并成一套uv信息，原有的材质uv信息有两套：

14
15
合并后的：

16
16800×436 53.9 KB

合并的原理是uv原有的y轴坐标，也就是v保持不变，将多套uv的x坐标，也就是u合并到0到1之间

  • 3.4.坐标轴，主要包含本地坐标和世界坐标，本地坐标会按照模型制作时的原有坐标进行导出，而世界坐标则是根据模型节点在场景中的位置，将顶点坐标转化为场景的世界坐标进行导出
  • 4.多节点合并：会将当前节点，包含此节点下的所有的网格信息合并为一个模型数据导出（不会检测是否使用了相同的材质，以及顶点将会转化为世界坐标）

视频教程

写在最后

以上就是宗宝这次给大家带来的插件集合，如何才能使用这款插件呢？


除了新增的uv查看器以外；网格工具，导航寻路工具都是在之前的版本上做了优化和升级，所以宗宝做了一个大胆的决定，以下宗宝的四款商品，在2023年7月9日24点前下单的用户都可以找宗宝免费获取最新的插件；
17
之前一元入手mesh tools的是不是感觉捡到宝了

郑重提示：2023年7月10日0点后下单的不能免费领取的奥；原有的mesh tools插件，Mesh导出obj模型插件，导航寻路插件将会在本周内选择下架，下架后将会重新上架咱们文章中的最新版本

宗宝个人联系方式微信：Carlos13207

6赞
#2

优秀，作为第一个回复的人，是否有福利:kissing_cat:

#3

优秀，昨晚11点50下单的人是不是你 :joy:

#4

建个群，感兴趣的可以加一下奥

mmqrcode1688949831555_edit_1978926572692830
mmqrcode1688949831555_edit_1978926572692830857×995 42.8 KB