Cocos Creator 3D 入门教程：快速上手，制作第一款游戏！

来源：好游戏攻略时间：2024-11-26 02:37

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

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

体验游戏（仅支持桌面鼠标操作）：

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

CocosCreator3D下载地址：

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

一、新建项目

如果您还不了解如何获取和启动CocosCreator3D，请阅读[安装和启动]一节。

首先启动CocosCreator3D，然后新建一个名为MindYourStep的项目，如果不知道如果创建项目，请阅读[HelloWorld!]新建项目后会看到如下的编辑器界面：

二、创建游戏场景

在CocosCreator3D中，游戏场景（Scene）是开发时组织游戏内容的中心，也是呈现给玩家所有游戏内容的载体，游戏场景中一般会包括以下内容：

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

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

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

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

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

3.我们创建了一个名叫NewScene的场景文件，创建完成后场景文件NewScene的名称会处于编辑状态，将它重命名为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。

注意：CocosCreator3D中脚本名称就是组件的名称，这个命名是大小写敏感的！如果组件名称的大小写不正确，将无法正确通过名称使用组件！

（2）编写脚本代码

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

import{_decorator,Component}from"cc";const{ccclass,property}=_decorator;@ccclass("PlayerController")exportclassPlayerControllerextendsComponent{/*classmembercouldbedefinedlikethis*///dummy='';/*use`property`decoratorifyourwantthemembertobeserializable*///@property//serializableDummy=0;start(){//Yourinitializationgoeshere.}//update(deltaTime:number){////Yourupdatefunctiongoeshere.//}}

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

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

import{_decorator,Component,Vec3,systemEvent,SystemEvent,EventMouse,AnimationComponent}from"cc";const{ccclass,property}=_decorator;@ccclass("PlayerController")exportclassPlayerControllerextendsComponent{/*classmembercouldbedefinedlikethis*///dummy='';/*use`property`decoratorifyourwantthemembertobeserializable*///@property//serializableDummy=0;//forfaketweenprivate_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(){//Yourinitializationgoeshere.systemEvent.on(SystemEvent.EventType.MOUSE_UP,this.onMouseUp,this);}onMouseUp(event:EventMouse){if(event.getButton()===0){this.jumpByStep(1);}elseif(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){//endthis.node.setPosition(this._targetPos);this._startJump=false;this.onOnceJumpEnd();}else{//tweenthis.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按钮：在打开的网页中点击鼠标左键和右键，可以看到如下画面：