Cocos 3.x 入门系列二 官方示例Mind your step

本系列参考https://docs.cocos.com/creator/3.0/manual/zh/，会摘抄部分原文，并做一些个人笔记。

在官方的快速上手：制作第一个游戏使用了许多功能，因为篇幅问题，原文只作简单使用，细节介绍放在了其它章节，本文稍微做一些补充，方便理解。

一、坐标系与场景操作

参考坐标系和节点变换属性

1.世界坐标系

image.png

Creator 3.0 的世界坐标系采用的是笛卡尔右手坐标系，默认 x 向右，y 向上，z 向外。

在Scene中添加几个Cube,让它们的x分别是0，1，2 ；这样就能观察到排放顺序。点击场景右上角的箭头

image.png

可以确认，颜色也是红色对应X轴，绿色Y轴，蓝色Z轴。点击不同的轴，看到Cube不同的投影。

2.添加光照，查看效果

默认new的scene就有个平行光，平行光的位置没有意义，可以调旋转属性，此时在场景中使用ALT+左键就能看到光照的实际效果。

在 3D 视图下，可以通过以下操作来移动和定位 场景编辑器 的视图：

• 鼠标左键 + Alt：以视图中心点为中心旋转。
• 鼠标中键：平移视图。
• 鼠标滚轮：以视图中心点为中心缩放视图。
• 鼠标右键 + WASD：摄像机漫游。
• F 快捷键：摄像机聚焦到当前选中节点。

在 2D 视图下，可以通过以下操作来移动和定位 场景编辑器 的视图：

• 鼠标中键：平移视图。
• 鼠标滚轮：以当前鼠标悬停位置为中心缩放视图。
• 鼠标右键：平移视图。
• F 快捷键：摄像机聚焦到当前选中节点。

3.调节摄像机

可以把默认的摄像机参数置0，然后调节X=2，Z=6。不断改变X和Z的值，就能明白X可以控制视野左右变化，Z是离的远近程度，远小近大。

4.本地坐标系

Creator 3.0 的 节点（Node） 之间可以有父子关系的层级结构，我们通过修改节点的 Position 属性设定的节点位置是该节点相对于父节点的 本地坐标系，而非世界坐标系。最后在绘制整个场景时 Creator 会把这些节点的本地坐标映射成世界坐标系坐标。

假设场景中有三个节点：NodeA、NodeB、NodeC，节点的结构如下图所示：

image.png

当场景中包含不同层级的节点时，会按照以下的流程确定每个节点在世界坐标系下的位置：

• 从场景根级别开始处理每个节点，上图中 NodeA 就是一个根级别节点。首先根据 NodeA 的 位置（Position） 属性，在世界坐标系中确定 NodeA 的本地坐标系原点位置（也就是 Position）。

• 接下来处理 NodeA 的所有直接子节点，也就是上图中的 NodeB（以及其他和 NodeB 平级的节点）。根据 NodeB 的 Position 属性，在 NodeA 的本地坐标系中确定 NodeB 在世界坐标系中的位置。

• 之后不管有多少级节点，都继续按照层级高低依次处理，每个节点都使用父节点的坐标系和自身位置属性来确定在世界坐标系中的位置。

• 本地坐标系转世界坐标系，比如const v3 = this.riverRole.getWorldPosition()

5.示例中的主角树节点

首先创建一个名为 Player 的空节点，然后在这个空节点下创建名为 Body 的主角模型节点，为了方便，我们采用编辑器自带的胶囊体模型做为主角模型。

分为两个节点的好处是，我们可以使用脚本控制 Player 节点来使主角进行水平方向移动，而在 Body 节点上做一些垂直方向上的动画（比如原地跳起后下落），两者叠加形成一个跳越动画。

image.png

二、Animation

对Body节点，添加Animation。这里按照教程创建twoStep.ani后，要先挂到Animation后。再进入动画编辑器里切换到twoStep里进行编辑

image.png

image.png

Body添加了Animation后，就可以拖到脚本的BodyAnim属性里了

三、Prefab

参考https://docs.cocos.com/creator/3.0/manual/zh/asset/prefab.html
预制件用于存储一些可以复用的场景对象，它可以包含节点、组件以及组件上的数据。由预制件生成的实例既可以继承模板的数据，又可以有自己定制化的数据修改。

1.创建预制件

在场景中将节点编辑好之后，直接将节点从 层级管理器 拖到 资源管理器 中即可完成预制件资源的创建。
完成创建后，原节点自动变为该预制件的实例，根节点呈现 亮绿色，非嵌套预制件子节点呈现 暗绿色。

2.使用预制件

将预制件资源从 资源管理器 拖拽到 层级管理器 或 场景编辑器，即可在场景中生成一个预制件的实例。
场景中的预制件实例对象，数据源来自预制件资源的反序列化，所以它的数据默认同步了预制件资源，如果对预制件实例中的各项属性进行修改，修改的数据会被存储在预制件实例中，所以不会影响到预制件资源和它生成的其它预制件实例的数据。

image.png

• 还原为普通节点。预制件节点可变为普通节点，即完全脱离和资源的关系。还可以通过点击编辑器主菜单中的 节点 -> 取消关联当前的 prefab 资源 来实现。
• 定位资源。便于快速在 资源管理器 中定位到预制件资源。
• 从资源还原。将当前预制件实例的数据还原为预制件资源中的数据，其中名字、位置和旋转不会被还原为预制体资源中的数据。
• 更新到资源。将当前预制件实例的所有数据更新到所关联的预制件资源中。

3.替换临时资源时有坑

项目刚开始使用临时资源，后期替换资源后，Chrome运行发现报错，加载不到资源，并且Chrome控制台显示的是一些md5码的名称，不清楚具体是哪个文件缺失。此时可以选择项目打包，控制台就会提示哪个文件有问题了。

image.png

另外一个坑就是，prefab替换资源后，仍然会引用之前的uuid，如果此时删除之前的资源就会报错了。解决办法就是先把prefab拖到场景上，然后取消关联，改个名字后再拖回资源管理器里，创建一个新的prefab。这样之前的prefab就可以删除了。后果就是要把使用旧prefab的所有地方，都手动替换成新prefab，很麻烦……

image.png

参照其它代码，改成这样：

let block: Node|null = this.spawnBlockByType(this._road[j]);

四、2D的UI

对于 UI 节点，为了让其正常显示，它的任意上级节点至少得有一个含有 UITransform 组件。所以创建 UI 节点时，如果不符合规则，则会自动创建一个 Canvas 节点作为 UI 节点的根节点，具体内容可参考 UI 结构说明。

五、脚本

1.在 GameManager 脚本中引用 PlayerController 脚本：

image.png

这里需要import:

import { PlayerController } from "./PlayerController";

然后稍微改一下：

    @property({type: PlayerController})
    public playerCtrl: PlayerController|null = null;

然后回到UI，要挂载的并不是PlayerController脚本，而是挂了PlayerController脚本的Player节点。

六、阴影

1.Scene 节点，然后在 属性检查器 勾选 shadows 中的 Enabled，并修改 Distance 和 Normal 属性

2.点击 Player 节点下的 Body 节点，将 cc.MeshRenderer 中的 ShadowCastingMode 设置为 ON

七、复制

复制cocos文件夹时，我把之前的meta文件全删除再复制过来的，这样就会重新生成meta文件。然后就报错了：

image.png

应该是配置文件中使用了固定的uuid，所以需要把meta文件也复制过来，不要重新生成meta。