Cocos Creator 3D 入门教程:快速上手,制作第一款游戏!【一】

分类栏目:cocos教程

56

跟随教程制作一款名叫《一步两步》的魔性小游戏,从新建项目到完整工程代码都有,帮助新手开发者了解 Cocos Creator 3D 游戏开发流程中的基本概念和工作流程。


快速上手制作你的第一个游戏

Cocos Creator 3D编辑器的强大之处就是可以让开发者快速地制作游戏原型,下面我们将跟随教程制作一款名叫 《一步两步》 的魔性小游戏。这款游戏非常考验玩家的反应能力,玩家根据路况选择是要跳一步还是跳两步,“一步两步,一步两步,一步一步似爪牙似魔鬼的步伐”。

体验游戏(仅支持桌面鼠标操作):

https://gameu3d.github.io/MindYourStep_Tutorial/index.html

Cocos Creator 3D 下载地址:

https://forum.cocos.com/t/cocos-creator-3d-beta/82849

 

一、新建项目

如果您还不了解如何获取和启动 Cocos Creator 3D,请阅读 [安装和启动]一节。

1. 首先启动 Cocos Creator 3D,然后新建一个名为 MindYourStep 的项目,如果不知道如果创建项目,请阅读 [Hello World!]

2. 新建项目后会看到如下的编辑器界面:


二、创建游戏场景

在 Cocos Creator 3D 中,游戏场景(Scene)是开发时组织游戏内容的中心,也是呈现给玩家所有游戏内容的载体,游戏场景中一般会包括以下内容:

  • 场景物体
  • 角色
  • UI
  • 以组件形式附加在场景节点上的游戏逻辑脚本

当玩家运行游戏时,就会载入游戏场景,游戏场景加载后就会自动运行所包含组件的游戏脚本,实现各种各样开发者设置的逻辑功能。所以除了资源以外,游戏场景是一切内容创作的基础。

现在,让我们来新建一个场景。

1. 在 资源管理器 中点击选中 asset 目录,点击 资源管理器 左上角的 加号 按钮,选择文件夹,命名为 Scenes。


2.点击先中 Scenes 目录(下图把一些常用的文件夹都提前创建好了),点击鼠标右键,在弹出的菜单中选择 场景文件。


3. 我们创建了一个名叫 New Scene 的场景文件,创建完成后场景文件 New Scene 的名称会处于编辑状态,将它重命名为 Main。

4. 双击 Main,就会在场景编辑器和层级管理器中打开这个场景。


三、添加跑道

我们的主角需要在一个由方块(Block)组成的跑道上从屏幕左边向右边移动。我们使用编辑器自带的立方体(Cube)来组成道路。

1. 在 层级管理器 中创建一个立方体(Cube),并命名为 Cube。



2. 选中 Cube,按 Ctrl+D 来复制出 3 个 Cube。

3. 将 3 个 Cube 按以下坐标排列:第一个节点位置(0,-1.5,0),第二个节点位置(1,-1.5,0),第三个节点位置(2,-1.5,0)。

效果如下:



四、添加主角

1、创建主角节点

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


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

将 Player 节点设置在(0,0,0)位置,使得它能站在第一个方块上。效果如下:

2、编写主角脚本

想要主角影响鼠标事件来进行移动,我们就需要编写自定义的脚本。如果您从没写过程序也不用担心,我们会在教程中提供所有需要的代码,只要复制粘贴到正确的位置就可以了,之后这部分工作可以找您的程序员小伙伴来解决。下面让我们开始创建驱动主角行动的脚本吧。

(1)创建脚本

1. 如果还没有创建 Scripts 文件夹,首先在 资源管理器 中右键点击 assets 文件夹,选择 新建 -> 文件夹,重命名为 Scripts。

2. 右键点击 Scripts 文件夹,选择 新建 -> TypeScript ,创建一个 TypeScript 脚本,有关 TypeScript 资料可以查看 [TypeScript 官方网站]

3. 将新建脚本的名字改为 PlayerController,双击这个脚本,打开代码编辑器,例如VSCode。


注意:Cocos Creator 3D 中脚本名称就是组件的名称,这个命名是大小写敏感的!如果组件名称的大小写不正确,将无法正确通过名称使用组件!

(2)编写脚本代码

在打开的 PlayerController 脚本里已经有了预先设置好的一些代码块,如下所示:

import { _decorator, Component } 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;

start () {
// Your initialization goes here.
}

// update (deltaTime: number) {
// // Your update function goes here.
// }
}

这些代码就是编写一个组件(脚本)所需的结构,具有这样结构的脚本就是 Cocos Creator 3D 中的组件(Component),他们能够挂载到场景中的节点上,提供控制节点的各种功能,更详细的脚本信息可以查看 [脚本]


我们在脚本中添加对鼠标事件的监听,然后让 Player 动起来,将 PlayerController 中代码做如下修改:

import { _decorator, Component, Vec3, systemEvent, SystemEvent, EventMouse, AnimationComponent } 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 = cc.v3();
private _deltaPos: Vec3 = cc.v3(0, 0, 0);
private _targetPos: Vec3 = cc.v3();
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, cc.v3(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 节点,然后在 属性检查器 中点击 添加组件 按钮,选择 添加用户脚本组件 -> PlayerController ,为主角节点添加 PlayerController 组件。


为了能在运行时看到物体,我们需要将场景中的 Camera 进行一些参数调整,将位置放到(0,0,13),Color设置为(50,90,255,255):


现在点击工具栏中心位置的 Play 按钮:Image title在打开的网页中点击鼠标左键和右键,可以看到如下画面:

Image title


更多的预览功能,可以参考 [项目预览调试]

3、添加角色动画

从上面运行的结果可以看到单纯对 Player 进行水平方向的移动是十分呆板的,我们要让 Player 跳跃起来才比较有感觉,我们可以通过为角色添加垂直方向的动画来达到这个效果。有关 动画编辑器 的更多信息,请阅读 [动画编辑器]

(1)选中场景中的 Body 节点,编辑器下方 控制台 边上的 动画编辑器,添加 Animation 组件并创建 Clip,命名为 oneStep。

Image title

(2)进入动画编辑模式,添加 position 属性轨道,并添加三个关键帧,position 值分别为(0,0,0)、(0,0.5,0)、(0,0,0)。

Image title


退出动画编辑模式前前记得要保存动画,否则做的动画就白费了。

(3)我们还可以通过 资源管理器 来创建 Clip,下面我们创建一个名为 twoStep 的 Clip 并将它添加到 Body 身上的 AnimationComponent 上,这里为了录制方便调整了一下面板布局。

Image title


(4)进入动画编辑模式,选择并编辑 twoStep 的 clip,类似第 2 步,添加三个 position 的关键帧,分别为(0,0,0)、(0,1,0)、(0,0,0)。

Image title


(5) 在 PlayerController 组件中引用动画组件,我们需要在代码中根据跳的步数不同来播放不同的动画。

     首先需要在 PlayerController 组件中引用 Body 身上的 AnimationComponent。

        @property({type: AnimationComponent})
        public BodyAnim: AnimationComponent = null;

    然后在属性检查器中将 Body 身上的 AnimationComponent 拖到这个变量上。

Image title


   在跳跃的函数 jumpByStep 中加入动画播放的代码:

if (step === 1) {
this.BodyAnim.play('oneStep');
} else if (step === 2) {
this.BodyAnim.play('twoStep');
}

点击 Play 按钮,点击鼠标左键、右键,可以看到新的跳跃效果:

Image title