3 制作第一个游戏 – Cocos 系列教程

下面我们将跟随教程制作一款名叫 “一步两步” 的小游戏。这款游戏考验玩家的反应能力,根据路况选择是要跳一步还是跳两步。
可以在https://gameall3d.github.io/MindYourStep_Tutorial/index.html 体验一下游戏的完成形态。

1 新建项目

新建一个名为 MindYourStep 的空项目

2 创建场景

游戏场景(Scene) 是开发时组织游戏内容的中心,一般会包括以下内容:

  • 场景物体
  • 角色
  • UI
  • 逻辑脚本

当玩家运行游戏时,就会载入游戏场景,游戏场景加载后就会自动运行所包含组件的游戏脚本

  1. 在 资源管理器 中点击选中 assets 目录,新建一个文件夹,命名为 Scenes。
  2. 选中 Scenes 目录,点击鼠标右键,新建一个scence,将它重命名为 Main。

3 添加跑道

我们的主角需要在一个由方块(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)

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 添加角色动画

 

 

本站文章如未注明均为原创 | 文章作者:刘晓帆 | 转载请注明来自:前端印象

发表评论

邮箱地址不会被公开。 必填项已用*标注

浏览量:86 次浏览