cocos creator 小游戏源码_制作第一个 Creator 3D 游戏一步两步魔性小游戏！

原文地址：https://github.com/cocos-creator/docs-3d/blob/master/zh/getting-started/first-game/index.md

Cocos Creator 3D编辑器的强大之处就是可以让开发者快速的制作游戏原型。

下面我们将跟随教程制作一款名叫 一步两步 的魔性小游戏。这款游戏考验玩家的反应能力，根据路况选择是要跳一步还是跳两步，“一步两步，一步两步，一步一步似爪牙似魔鬼的步伐”。

可以在 这里 体验一下游戏的完成形态。

新建项目

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

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

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

   

创建游戏场景

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

• 场景物体

• 角色

• UI

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

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

1. 在 资源管理器 中点击选中 assets 目录，点击 资源管理器 左上角的加号按钮，选择文件夹，命名为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) 效果如下：

   

添加主角

创建主角节点

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

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

效果如下：

编写主角脚本

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

创建脚本

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

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

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

   

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

编写脚本代码

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

import { _decorator, Component } from "cc";const { ccclass, property } = _decorator;
@ccclass("PlayerController")export class PlayerController extends Component {
    
    start () {
    // Your initialization goes here.
    }
}

这些代码就是编写一个组件(脚本)所需的结构。具有这样结构的脚本就是 Cocos Creator 3D 中的 组件(Component)，他们能够