cocos做飞机大战笔记【玩家飞机移动与子弹发射】

ykl970719

已于 2022-04-13 10:03:52 修改

阅读量1k

点赞数

分类专栏：学习cocos做飞机大战文章标签：游戏引擎 typescript

于 2022-04-05 20:25:49 首次发布

本文链接：https://blog.csdn.net/ykl970719/article/details/123956314

版权

学习cocos做飞机大战专栏收录该内容

11 篇文章 5 订阅

订阅专栏

这篇博客介绍了如何在Cocos Creator中实现滚动背景、飞机移动以及子弹发射的机制。首先，通过创建MovingSceneBg脚本来使两个背景图片拼接并移动，接着展示了如何在UIMain.ts中处理飞机移动的触摸事件。此外，还详细说明了子弹的创建、材质绑定、脚本编写以及子弹管理类和游戏管理类的实现。最后，通过GameManager和UIMain的配合实现了触摸屏射击功能。

摘要由CSDN通过智能技术生成

滚动背景

思路是两个图片拼接移动

创建脚本MovingSceneBg

在这里插入图片描述


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

/**
 * Predefined variables
 * Name = MovingSceneBg
 * DateTime = Mon Apr 04 2022 16:57:20 GMT+0800 (中国标准时间)
 * Author = YKL970719
 * FileBasename = MovingSceneBg.ts
 * FileBasenameNoExtension = MovingSceneBg
 * URL = db://assets/script/MovingSceneBg.ts
 * ManualUrl = https://docs.cocos.com/creator/3.4/manual/zh/
 *
 */

@ccclass('MovingSceneBg')
export class MovingSceneBg extends Component {
    @property(Node)
    //图片1
    bg1: Node = null
    @property(Node)
    //图片2
    bg2: Node = null

    @property
    // 移动速度
    private _bgSpeed = 10
    @property
    //移动上限
    private _bgMovingRange = 90

    start() {

    }

    update(deltaTime: number) {
        this._moveBackground(deltaTime)
    }
    /**
     * 重置两个背景图片位置
     */
    private _init() {
        this.bg1.setPosition(0, 0, 0)
        this.bg2.setPosition(0, 0, -this._bgMovingRange)
    }
    /**
    * 背景移动部分
    * @param deltaTime update中的帧
    */
    private _moveBackground(deltaTime: number) {
        this.bg1.setPosition(0, 0, this.bg1.position.z + this._bgSpeed * deltaTime);
        this.bg2.setPosition(0, 0, this.bg2.position.z + this._bgSpeed * deltaTime);
        // 背景衔接部分
        if (this.bg1.position.z >= this._bgMovingRange) {
            this.bg1.setPosition(0, 0, this.bg2.position.z - this._bgMovingRange);
        }
        else if (this.bg2.position.z >= this._bgMovingRange) {
            this.bg2.setPosition(0, 0, this.bg1.position.z - this._bgMovingRange);
        }
    }
}

让背景动起来

调整相机为正交相机，然后拼接两张图片
在这里插入图片描述

如果不是很懂怎能创建的参考这个链接

拖入脚本
在这里插入图片描述

游戏开发常用框架

在这里插入图片描述

gameManager 为游戏入口，负责游戏流程运作
funcManager（为自己管理游戏类的名称）其他功能有必要的话都可以创建一个管理类，用来管理其他对象
uiMain(或uiManager)专门用来处理用户输入以及它下面的界面

左部分为一些辅助功能，如果不同模块需要交互可以通过事件传递

constant 存放游戏类型，供所有模块使用

飞机移动+子弹发射

管理脚本文件夹

按照上面所说的架构进行分类来创建文件夹
在这里插入图片描述
其中

bullet用来存放子弹
framework用来存放上面框架图中右边的逻辑
plane用来存放飞机
ui用来存放ui

飞机移动

在UIMain.ts中


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

/**
 * Predefined variables
 * Name = UIMain
 * DateTime = Mon Nov 15 2021 14:10:01 GMT+0800 (China Standard Time)
 * Author = mywayday
 * FileBasename = UIMain.ts
 * FileBasenameNoExtension = UIMain
 * URL = db://assets/script/ui/UIMain.ts
 * ManualUrl = https://docs.cocos.com/creator/3.3/manual/en/
 *
 */

@ccclass('UIMain')
export class UIMain extends Component {
    @property
    public planeSpeed = 1;//飞机移动速度

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

 

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

    // update (deltaTime: number) {
    //     // [4]
    // }
    _touchStart(touch: Touch, event: EventTouch){
    }

    _touchMove(touch: Touch, event: EventTouch){
        //获取当前触点值与上一次触点值之间的差值 
        const delta = touch.getDelta();
        //获取当前位置
        let pos = this.playerPlane.position;
        //移动位置z与x移动 y轴不变 
        /**
         * 乘0.01是因为每移动一段距离移动的都是单位,但是在操作屏幕触点的时候操作的其实是像素，两者之间不能转换，所以只能预估一下大概的移动距离 */
        this.playerPlane.setPosition(pos.x + 0.01 * this.planeSpeed * delta.x, pos.y, pos.z - 0.01 * this.planeSpeed * delta.y);
    }

    _touchEnd(touch: Touch, event: EventTouch){
    }
}

 */

在这里插入图片描述
然后运行查看效果飞机就能拖动了

创建子弹材质

在这里插入图片描述

将子弹展示在编辑器中

创建空节点bullet01并在其下创建quad重命名为body
创建quad操作步骤:鼠标右键->3D对象->Quad
替换材质并调整位置

绑定子弹脚本

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

/**
 * Predefined variables
 * Name = Bullet
 * DateTime = Mon Nov 15 2021 14:58:43 GMT+0800 (China Standard Time)
 * Author = mywayday
 * FileBasename = Bullet.ts
 * FileBasenameNoExtension = Bullet
 * URL = db://assets/script/bullet/Bullet.ts
 * ManualUrl = https://docs.cocos.com/creator/3.3/manual/en/
 *
 */

// 当前移动的最大位置范围为50
const OUTOFRANGE = 50;

@ccclass('Bullet')
export class Bullet extends Component {
    // 子弹速度
    @property
    public bulletSpeed = 0;

    start () {
        // [3]
    }

    update (deltaTime: number) {
        // 子弹移动
        const pos = this.node.position;
        const moveLength = pos.z - this.bulletSpeed;
        this.node.setPosition(pos.x, pos.y, moveLength);
        // 超出屏幕销毁
        if(moveLength > OUTOFRANGE){
            this.node.destroy();
            console.log('bullet destroy');
        }
    }
}

将子弹绑定脚本并设置成预制资源体
在这里插入图片描述

创建子弹管理类bulletManager

在这里插入图片描述

创建游戏管理类GameManager

脚本GameManager


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

/**
 * Predefined variables
 * Name = GameManager
 * DateTime = Mon Nov 15 2021 16:15:32 GMT+0800 (China Standard Time)
 * Author = mywayday
 * FileBasename = GameManager.ts
 * FileBasenameNoExtension = GameManager
 * URL = db://assets/script/framework/GameManager.ts
 * ManualUrl = https://docs.cocos.com/creator/3.3/manual/en/
 *
 */

@ccclass('GameManager')
export class GameManager extends Component {
    // 关联玩家飞机
    @property(Node)
    public playerPlane: Node = null;
    // 关联所有子弹
    @property(Prefab)
    public bullet01: Prefab = null;
    @property(Prefab)
    public bullet02: Prefab = null;
    @property(Prefab)
    public bullet03: Prefab = null;
    @property(Prefab)
    public bullet04: Prefab = null;
    @property(Prefab)
    public bullet05: Prefab = null;
    // 射击周期
    @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);
        // 获取飞机位置
        const pos = this.playerPlane.position;
        // 设置子弹位置
        bullet.setPosition(pos.x, pos.y, pos.z - 7);
        // 设置子弹速度
        const bulletComp = bullet.getComponent(Bullet);
        bulletComp.bulletSpeed = this.bulletSpeed;
    }
    /**
     * 触摸状态设置
     * @param value  true/false
     */
    public isShooting(value: boolean){
        this._isShooting = value;
    }
    /**
     * 默认发射子弹
     */
    private _init(){
        this._currShootTime = this.shootTime;
    }
}

脚本UIMain


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

/**
 * Predefined variables
 * Name = UIMain
 * DateTime = Mon Nov 15 2021 14:10:01 GMT+0800 (China Standard Time)
 * Author = mywayday
 * FileBasename = UIMain.ts
 * FileBasenameNoExtension = UIMain
 * URL = db://assets/script/ui/UIMain.ts
 * ManualUrl = https://docs.cocos.com/creator/3.3/manual/en/
 *
 */

@ccclass('UIMain')
export class UIMain extends Component {
    @property
    public planeSpeed = 1;//飞机移动速度

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

    //gameManager的引用
    @property(GameManager)
    public gameManager: GameManager = null;

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

    // update (deltaTime: number) {
    //     // [4]
    // }
    /**
     * 触摸开始 子弹发射
     * @param touch 
     * @param event 
     */
    _touchStart(touch: Touch, event: EventTouch) {
        this.gameManager.isShooting(true);
    }

    _touchMove(touch: Touch, event: EventTouch) {
        //获取当前触点值与上一次触点值之间的差值 
        const delta = touch.getDelta();
        //获取当前位置
        let pos = this.playerPlane.position;
        //移动位置z与x移动 y轴不变 
        /**
         * 乘0.01是因为每移动一段距离移动的都是单位,但是在操作屏幕触点的时候操作的其实是像素，两者之间不能转换，所以只能预估一下大概的移动距离 */
        this.playerPlane.setPosition(pos.x + 0.01 * this.planeSpeed * delta.x, pos.y, pos.z - 0.01 * this.planeSpeed * delta.y);
    }
    /**
         * 触摸结束 子弹取消发射
         * @param touch 
         * @param event 
         */
    _touchEnd(touch: Touch, event: EventTouch) {
        this.gameManager.isShooting(false);
    }
}