下面我们将跟随教程制作一款名叫 “一步两步” 的小游戏。这款游戏考验玩家的反应能力，根据路况选择是要跳一步还是跳两步。
可以在https://gameall3d.github.io/MindYourStep_Tutorial/index.html 体验一下游戏的完成形态。
1 新建项目
新建一个名为 MindYourStep 的空项目
2 创建场景
游戏场景（Scene） 是开发时组织游戏内容的中心，一般会包括以下内容：
- 场景物体
- 角色
- UI
- 逻辑脚本
当玩家运行游戏时，就会载入游戏场景，游戏场景加载后就会自动运行所包含组件的游戏脚本
- 在 资源管理器 中点击选中 assets 目录，新建一个文件夹，命名为 Scenes。
- 选中 Scenes 目录，点击鼠标右键，新建一个scence，将它重命名为 Main。
3 添加跑道
我们的主角需要在一个由方块（Block）组成的跑道上从屏幕左边向右边移动。我们使用编辑器自带的立方体（Cube）来组成道路。
- 在 层级管理器 中创建一个立方体（Cube），并命名为 Cube。
- 选中 Cube，按 Ctrl + D 复制出 3 个 Cube。
- 将 3 个 Cube 按以下坐标排列：
-
- 第一个节点位置（0，-1.5，0）
- 第二个节点位置（1，-1.5，0）
- 第三个节点位置（2，-1.5，0）
4 添加主角
层级管理器中创建一个名为 Player 的空节点；
然后在这个空节点下创建名为 Body 的主角模型节点，为了方便，我们采用编辑器自带的3D对象胶囊体
使用空节点和子节点的方式，把对象分为两个节点的好处是，我们可以使用脚本控制 Player 节点来使主角进行水平方向移动，而在 Body 节点上做一些垂直方向上的动画（比如原地跳起后下落），两者叠加形成一个跳越动画。
5 编写主角脚本
首先在 资源管理器 中右键点击 assets 文Sc件夹，选择 新建 -> 文件夹，重命名为 Scripts。
右键点击 Scripts 文件夹，选择 新建 -> TypeScript，创建一个 TypeScript 脚本。
名字改为 PlayerController，双击这个脚本，打开代码编辑器（例如 VSCode）。
注意：Cocos Creator 中脚本名称就是组件的名称，这个命名是大小写敏感的！
复制下面代码：
import { _decorator, Component, Vec3, systemEvent, SystemEvent, EventMouse, Animation } from 'cc';
const { ccclass, property } = _decorator;
@ccclass("PlayerController")
export class PlayerController extends Component {
/* class member could be defined like this */
// dummy = '';
/* use `property` decorator if your want the member to be serializable */
// @property
// serializableDummy = 0;
// for fake tween
private _startJump: boolean = false;
private _jumpStep: number = 0;
private _curJumpTime: number = 0;
private _jumpTime: number = 0.1;
private _curJumpSpeed: number = 0;
private _curPos: Vec3 = new Vec3();
private _deltaPos: Vec3 = new Vec3(0, 0, 0);
private _targetPos: Vec3 = new Vec3();
private _isMoving = false;
start () {
// Your initialization goes here.
systemEvent.on(SystemEvent.EventType.MOUSE_UP, this.onMouseUp, this);
}
onMouseUp(event: EventMouse) {
if (event.getButton() === 0) {
this.jumpByStep(1);
}
else if (event.getButton() === 2) {
this.jumpByStep(2);
}
}
jumpByStep(step: number) {
if (this._isMoving) {
return;
}
this._startJump = true;
this._jumpStep = step;
this._curJumpTime = 0;
this._curJumpSpeed = this._jumpStep / this._jumpTime;
this.node.getPosition(this._curPos);
Vec3.add(this._targetPos, this._curPos, new Vec3(this._jumpStep, 0, 0));
this._isMoving = true;
}
onOnceJumpEnd() {
this._isMoving = false;
}
update (deltaTime: number) {
if (this._startJump) {
this._curJumpTime += deltaTime;
if (this._curJumpTime > this._jumpTime) {
// end
this.node.setPosition(this._targetPos);
this._startJump = false;
this.onOnceJumpEnd();
} else {
// tween
this.node.getPosition(this._curPos);
this._deltaPos.x = this._curJumpSpeed * deltaTime;
Vec3.add(this._curPos, this._curPos, this._deltaPos);
this.node.setPosition(this._curPos);
}
}
}
}
把 PlayerController 组件添加到主角节点 Player 上。
在 层级管理器 中选中 Player 节点，然后在 属性检查器 中点击 添加组件 按钮。
选择 自定义脚本 -> PlayerController，为主角节点添加 PlayerController 组件。
为了能在运行时看到物体，我们需要将场景中 Camera 的参数进行一些调整，位置Position 设置为（0，0，13），角度Rotation（0，0，0），背景颜色Color 设置为（50，90，255，255）
然后点击工具栏中心位置的 Play 按钮在浏览器中预览
网页中点击鼠标左键和右键，可以看到胶囊移动
6 添加角色动画