学习笔记：使用 Cocos Creator 3.4.0 开发空战游戏 02——玩家飞机

开发工具

1. Cocos Dashboard 1.0.20
2. Cocos Creator 3.4.0
3. Visual Studio Code 1.63
4. Microsoft Edge 97.0.1072.69

---

创建玩家飞机

1. 在 层级管理器 中 创建一个空节点, 命名为 playerPlane, 在 资源管理器 中拖动的 FBX 模型 assets/res/model/plane01/plane01 到 playerPlane 节点中, 并将节点 playerPlane 下的模型名称 plane01(模型根节点) 改名为 body。

2. 在 资源管理器 中点击选中 assets/res/model/plane01 文件夹, 右键 -> 创建 -> 材质, 命名为 playerPlane。

3. 将材质 playerPlane 的属性 Effect 更改为 builtin-unlit; 属性 USE TEXTURE 打勾, 飞机图片 plane01 拖动到 MainTexture, 保存材质。

4. 在 层级管理器 中, 点击选中 playerPlane/body/plane01 节点, 将上一步创建的材质 playerPlane 拖动到其 属性检查器 中的 Materials[0], 保存场景。

5. 在 层级管理器 中点击选中 playerPlane/body 节点, 修改缩放属性 Scale 的值为：X:8, Y:8, Z:8 (放大8倍)。

6. 此时飞机与背景板重叠，在 层级管理器 中点击选中 movingSceneBg, 将其 Position 的 Y轴 修改为: -20 (背景往下移)。

7. 在 层级管理器 中点击选中 playerPlane 节点，将其拖动到 资源管理器 中的 assets/res/model/plane01 文件夹 制作 成 预制, 保存场景。

控制飞机移动

1. 在 资源管理器 点击选中 assets/script/ 文件夹, 右键 -> 创建 -> 文件夹, 命名为 ui, 在该文件夹中添加脚本 UIManager, 双击打开该脚本进行编辑。

import { _decorator, Component, Node, Touch, EventTouch, Input } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('UIManager')
export class UIManager extends Component {

    @property
    public playerPlaneSpeed = 1;

    @property(Node)
    public playerPlane: Node = null;

    start() {
        this.node.on(Input.EventType.TOUCH_MOVE, this._touchMove, this);
    }

    private _touchMove(touch: Touch, event: EventTouch) {
        // touch.getDelta() 获取当前触点值与上一次触点值的差值
        let delta = touch.getDelta();
        let pos = this.playerPlane.position;  // 获取当前节点的位置
        // 在速度前乘以 0.01 是用于调整移动的速度
        this.playerPlane.setPosition(
            pos.x + 0.01 * this.playerPlaneSpeed * delta.x,
            pos.y,
            pos.z - 0.01 * this.playerPlaneSpeed * delta.y);
    }
}

2. 在 层级管理器 中点击选中场景 airplane, 右键 -> 创建 -> UI组件 -> Canvas(画布), 名字默认。

3. 在 层级管理器 中点击选中 Canvas 节点, 在 属性检查器 点 添加组件 -> 自定义脚本 -> UIManager, 将上一步编辑好的脚本 UIManager 挂载到 Canvas 根节点。

4. 将 层级管理器 中的 playerPlane 节点拖到 Canvas 节点 属性检查器 的 playerPlane 属性中, 修改 playerPlaneSpeed 值为 8，保存场景，预览。

玩家飞机子弹

1. 在 资源管理器 点击选中 assets/res/effect/bullet/ 文件夹, 右键 -> 创建 -> 材质, 命名为 bullet01, 修改 Effect 为 bulitin-unlit, 此处子弹模型包含透明外环效果, 将 Technique 修改为 3-alpha-blend 模式; 选中 USE TEXTURE, 将图片 bullet01 拖动到 属性检查器 中的属性 MainTexture, 在 属性检查器 右上角点 保存。

2. 选中已经制作好的子弹材质 bullet01, Ctrl+D 快速复制为 4 个(bullet02 - bullet05), 分别将各个新材质的属性 MainTexture 更改为对应的图片, 保存。

3. 在 层级管理器 中创建一个名为 bullet01 的空节点， 点击选中 bullet01 节点, 右键 -> 创建 -> 3D对象 -> Quad(四方形), 将其改名为 body。

4. 创建好的 Quad(四方形) 垂直于背景， 将其 Rotation 的 X轴 改为 -90, 摆正其位置, 修改其 Materials 为 材质 bullet01; 缩放属性 Scale(缩放) 调整为 5倍 大小，Scale: X:5, Y:5, Z:5 。

5. 在 资源管理器 的 script 文件夹中创建 bullet 文件夹, 并创建子弹脚本 Bullet 处理子弹的运行逻辑和子弹的销毁。

import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;

const OUTOFRANGE = 50; // 子弹移动的最大范围

@ccclass('Bullet')
export class Bullet extends Component {

    @property
    public bulletSpeed = 0;

    update(deltaTime: number) {
        let pos = this.node.position;  // 获取子弹的位置
        let moveLength = pos.z - this.bulletSpeed; // 计算每一帧子弹要移动的位置
        this.node.setPosition(pos.x, pos.y, moveLength);

        if (moveLength > OUTOFRANGE) {
            this.node.destroy();
            console.log(`bullet destory`);
        }
    }
}

6. 在 层级管理器 点击选中 bullet01 节点, 在 属性检查器 中点击 添加组件 -> 自定义脚本 -> Bullet, 将脚本绑定到子弹根节点上; 然后将 层级管理器 中 bullet01 的节点拖动到 资源管理器 的 assets/res/effect/bullet/ 文件夹中，变成预制。

7. 在 资源管理器 中点击选中 assets/res/effect/bullet/bullet01 预制, Ctrl+D 快速复制为 4 个(bullet02 - bullet05)。

8. 在 资源管理器 中分别双击 assets/res/effect/bullet/ 文件夹中的预制 bullet02 - bullet05, 将 body 中的 Materials 替换为对应的 子弹材质, 保存场景。

9. 在 层级管理器 中 删除 或 不显示 (否则子弹会一直出现在屏幕上)子弹节点 bullet01, 并保存。

控制子弹发射

1. 在 资源管理器 创建 assets/script/framework 文件夹, 然后创建名为 GameManager 的脚本。

import { _decorator, Component, Node, Prefab, instantiate } from 'cc';
import { Bullet } from '../bullet/Bullet';
const { ccclass, property } = _decorator;


@ccclass('GameManager')
export class GameManager extends Component {
    @property(Node)
    public playerPlane: Node = null; // 玩家飞机

    @property(Prefab)
    public bullet01: Prefab = null; // 子弹1
    @property(Prefab)
    public bullet02: Prefab = null; // 子弹2
    @property(Prefab)
    public bullet03: Prefab = null; // 子弹3
    @property(Prefab)
    public bullet04: Prefab = null; // 子弹4
    @property(Prefab)
    public bullet05: Prefab = null; // 子弹5

    @property
    public shootTime = 0.3; // 射击周期（间隔时间）
    @property
    public bulletSpeed = 1;  // 子弹速度

    @property(Node)
    public bulletRoot: Node = null; // 子弹管理节点

    private _currShootTime = 0;
    private _isShooting = false;

    start() {
        this._init();
    }

    update(deltaTime: number) {
        this._currShootTime += deltaTime;
        if (this._isShooting && this._currShootTime > this.shootTime) {
            this.createPlayerBullet();
            this._currShootTime = 0;
        }
    }

    //创建玩家飞机的子弹
    public createPlayerBullet() {
        // 实例材质类型的子弹, 实例出来的对象不在场景中
        const bullet = instantiate(this.bullet01);
        bullet.setParent(this.bulletRoot); // 子弹挂载到子弹管理节点中

        let pos = this.playerPlane.position; // 获取玩家飞机位置
        // 子弹出现的位置为飞机 Z轴 -7
        bullet.setPosition(pos.x, pos.y, pos.z - 7);
        // 获取 Bullet类 （子弹预制根节点添加 Bullet 脚本）
        const bulletComp = bullet.getComponent(Bullet);
        bulletComp.bulletSpeed = this.bulletSpeed; // 设置子弹速度
    }

    // 是否处理触摸状态，触摸才发射子弹
    public isShooting(value: boolean) {
        this._isShooting = value;
    }

    private _init() {
        // 用于按下的时候即发射第一颗子弹
        this._currShootTime = this.shootTime;
    }
}

2. 修改 UIManager 脚本本以更配合 GameManager 脚本使用

import { _decorator, Component, Node, Touch, EventTouch, Input } from 'cc';
import { GameManager } from '../framework/GameManager';
const { ccclass, property } = _decorator;

@ccclass('UIManager')
export class UIManager extends Component {

    @property
    public playerPlaneSpeed = 1;
    @property(Node)
    public playerPlane: Node = null;

    // 添加游戏控制脚本
    @property(GameManager)
    public gameManager:GameManager = null;

    start() {
        this.node.on(Input.EventType.TOUCH_START, this._touchStart, this);
        this.node.on(Input.EventType.TOUCH_MOVE, this._touchMove, this);
        this.node.on(Input.EventType.TOUCH_END, this._touchEnd, this);
    }

    private _touchMove(touch: Touch, event: EventTouch) {
        // touch.getDelta() 获取当前触点值与上一次触点值的差值
        let delta = touch.getDelta();
        let pos = this.playerPlane.position;  // 获取当前节点的位置
        // 在速度前乘以 0.01 是用于调整移动的速度
        this.playerPlane.setPosition(
            pos.x + 0.01 * this.playerPlaneSpeed * delta.x,
            pos.y,
            pos.z - 0.01 * this.playerPlaneSpeed * delta.y);
    }

    // 开始触摸屏幕的回调方法
    private _touchStart(touch: Touch, event: EventTouch) {
        this.gameManager.isShooting(true); // 触摸屏幕时玩家飞机开始射击
    }

    private _touchEnd(touch: Touch, event: EventTouch) {
        // 停止触摸时玩家飞机结束射击
        this.gameManager.isShooting(false);
    }
}

3. 在 层级管理器 中点击选中场景 airplane, 右键-> 空节点，命名为 bulletManager, 创建子弹管理节点。

4. 在 层级管理器 中点击选中场景 airplane, 右键-> 空节点，命名为 gameManager, 在其 属性检查器 中分别添加玩家飞机节点 playerPlane, 子弹预制：bullet01 - bullet05, 子弹管理节点BulletRoot: bulletManager。

5. 在 层级管理器 点击选中 Canvas节点， 将 gameManager 节点拖动到其 UIManamet 中 GameManager 的属性。

6. 保存场景，预览。子弹速度慢，可以将 gameManager 节点 的 shootTime 改为 0.1 ， 缩短子弹发射间隔，提高速度，或是将 bulletSpeed 值改大。

===END===

---