Cocos 飞机大战 （难点分析 制作）

前言

自己也写了3个cocos 项目，觉得前面确实有点难，但是熟悉上手之后应该就是 好多了，就是熟能生巧吧

下面就是我的一个 项目分析 和难点   就是我们常玩的打飞机

先看下效果图 我在手机上的截图 

就是拖到触屏 飞机进行射击 和躲避 子弹， 感觉还行吧哈哈

难点 

1. 就是物体直接的碰撞 和刚体 碰撞

// 添加碰撞体 BoxCollider 和刚体 RigidBody
       const collider = this.node.getComponent(BoxColliderComponent);
        const rigidBody = this.node.getComponent(RigidBodyComponent)

逻辑：

     玩家飞机 ，敌方飞机，和子弹 实现自己的逻辑

玩家飞机需要和敌机以及敌方子弹碰撞，无论哪种玩家飞机都要减小血量

敌方飞机无论被玩家飞机还是玩家子弹碰撞都需要被销毁

玩家子弹碰到敌方飞机就自动销毁

敌方子弹碰到玩家飞机就自动销毁

其实只要 在 碰撞矩阵上设置子弹和子弹之间 不产生碰撞就好了，所以设置4个属性

项目 设置 ---》 physics 

 然后设置他们的碰撞条件 勾选一下就好

然后到编辑内容上

 添加2个 组件   撞体 BoxCollider 和刚体 RigidBody

设置碰撞体的大小和 飞机一样大    就是size  ，isTrigger 一定要勾选上

然后设置rigidbody  分类是 self_player 就是我们之前设置的4个其中一个，

运动类型 因为没有重力 所以不是运动学，静态就好KINEMATIC

 然后 子弹和 敌方飞机也是这么设置就好，就不写了

然后在代码 敌方机上写

    private _onTriggerEnter(event: ITriggerEvent){
        const collisionGroup = event.otherCollider.getGroup();
        if(collisionGroup === Constant.CollisionType.SELF_PLANE || collisionGroup === Constant.CollisionType.SELF_BULLET){
            // console.log('trigger enemy destroy');
            this._gameManager.playAudioEffect('enemy');
            PoorManager.instance().putNode(this.node);
            // this.node.destroy();
            this._gameManager.addScore();
            this._gameManager.createEnemyEffect(this.node.position);
        }
    }

解释就是敌方飞机 ： 当碰撞类型 遇到 玩家飞机和玩家子弹的是时候 就 就开始销毁 和加分

    onEnable () {
        const collider = this.getComponent(Collider);
        collider.on('onTriggerEnter', this._onTriggerEnter, this);
    }onTriggerEnter 就是碰撞监听事件 需要绑定

 
这样就比较好理解了

难点2
节点池

 就是类型垃圾回收这样 script 的    解释：  就是存放 数据的时候  有需要在拿去不需要就 放回，以免 产生大量的实例 垃圾

在script  目录下新建一个文件 ：PoorManager.Ts

里面就是

// 节点池
interface IDictPool {
    [name: string]: NodePool;
}

interface IDictPrefab {
    [name: string]: Prefab;
}
 
@ccclass('PoorManager')
export class PoorManager {
    
    //  因为不是组件没有地方实例化  因此定义 静态方法实例化
    public static instance(){
        if(!this._instance){
            this._instance = new PoorManager();
        }

        return this._instance;
    }

    private _dictPool: IDictPool = {}; // 存放节点
    private _dictPrefab: IDictPrefab = {};  //存放预制
    private static _instance: PoorManager; // 判断是否实例化过


    public getNode(prefab: Prefab, parent: Node){
        let name = prefab.data.name;
        // console.log('get node   ' + name);
        let node: Node = null;
        this._dictPrefab[name] = prefab;
        const pool = this._dictPool[name];
        // 判断有米有当前分类的容器
        if (pool) {
            if (pool.size() > 0) {
                node = pool.get();
            } else {
                node = instantiate(prefab); //s实例化新的节点
            }
        } else {
            this._dictPool[name] = new NodePool();
            node = instantiate(prefab);
        }

        node.parent = parent;  //设置他的归宿 他的父节点
        node.active = true;   //属性激活
        return node;
    }

    // 放回到容器里面
    public putNode(node: Node){
        let name = node.name;
        // console.log('put node   ' + name);
        // 因为节点被回收了，就不能存在场景里面
        node.parent = null;
        if (!this._dictPool[name]) {
            this._dictPool[name] = new NodePool();
        }

        this._dictPool[name].put(node);
    }
}

就是创建 2个 一个是存放节点池，一个预制体 的

然后在2个方法   getNode 和  putNode 这样好理解了吧

然后在其他控制器内 把   instantiate 这个方法 替代  因为这就是创建节点的方法

   PoorManager.instance() 

写法就是 下面

        // const bullet = instantiate(this.bullet01);
        // bullet.setParent(this.bulletRoot);
        const bullet = PoorManager.instance().getNode(this.bullet02, this.bulletRoot);
        bullet.setPosition(targetPos.x, targetPos.y, targetPos.z + 6);

全局找到着方法然后在替换

难点3  血条：

血条 用锚点 ， 但是 画图里面没有锚点 这个制作 ，   所以那就用节点做锚点

步骤：

1.创建一个新的节点
2.然后把要展示的血条的节点 那个 放在这个新建的节点下面 （子节点）
3. 右边缩放 左边没有血条 因为是右边减少 

4.设置 创建着节点 左边 ，分界 点， 需要把下面 的face 节点 往右边移东，然后确定 face 父节的face 刚好在 blood 的中点

然后就是 在平移face 这个到 最左边，这样 就好了

难点4

CocosCreator图片导入到工程，没办法拖动到场景中，

将资料的属性类型由texture 调整为sprite-frane  就是Type 类型修改

2D 是匹配UI 在项目的 设置 配置 项目数据
要贴着 全屏显示

选择的精灵图必须是 属性layer 是UI_2D 才能在canvas 下展示 

以上是遇到的一些比较难的地方，然后加入自己的一些理解 还是需要自己多家联系操作 COCOS 编辑器，

欧克 先这样了。

记录COCOS开发的，加油！！！！