学习日记#1 cocos creator3.8开发微信打飞机小游戏

cocos creator介绍

cocos creator 是一个面向组件的、免费开源的、具有跨平台性的、2D/3D游戏开发引擎。

打飞机游戏演示

3.8与2.x的对比

由于使用3.8引擎开发、故一些2.x代码不再适用

游戏引擎设置

2D物理系统设置

引擎默认使用基于box2D的物理系统，这会导致无法进行碰撞检测。

在项目测试->功能裁剪->2D->2D物理系统进行设置

碰撞矩阵设置

碰撞矩阵可以将加载了boxcollider2D组件的节点进行分组，可以实现指定的分组之间才能发生碰撞。

设置节点位置

在3.8版本中设置节点位置需要先声明一个参数来定位当前节点的位置，再使用setposition方法来设置节点的位置。而在2.x版本中不需要声明一个参数来定位就可以设置当前节点的位置。

 //子弹移动代码
 update(deltaTime: number) { 
 //2.x版本
 this.node.y += this.speed *deltaTime;


 //3.8版本
 let p = this.node.getPosition();
 this.node.setPosition(p.x,p.y + this.speed *deltaTime);
 }

预设体设置父节点

在3.8中为预设体设置父节点可以使用目前节点的父节点

//设置生成的子弹的父节点
 bullet.setParent(this.node.getParent());

动态加载

在3.8中使用动态加载方法加载图片时需要在图片名称后面加上后缀。

//加载敌人爆炸图片 需要加上后缀spriterFrame
resources.load("enemy0_die/spriteFrame",SpriteFrame,(err,res)=>{
}

碰撞检测

打开碰撞检测需要在脚本中添加以下代码

this.node.getComponent(RigidBody2D).enabledContactListener = true; //3.8打开碰撞监听

cc.director.getCollisionManager().enable = true; //2.x打开碰撞监听

开发过程

背景脚本

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

@ccclass('bgControl')
export class bgControl extends Component {
    start() {

    }

    update(deltaTime: number) {       
     //遍历子物体（背景）
      for(let bgNode of this.node.children){
     //移动 帧 ->每秒移动50
        let p = bgNode.getPosition();
        p.y -= 50*deltaTime;
     //当节点超出屏幕时移动到场景上方
        if(p.y < -850){
          p.y += 850*2;
      }
        bgNode.position = p;
    }  
  }
}

玩家脚本

import { _decorator, Collider, Collider2D, Component, director, instantiate, Node, Prefab, RigidBody, RigidBody2D, RigidBodyComponent } from 'cc';
import { bullet } from './bullet';
const { ccclass, property } = _decorator;


@ccclass('player')
export class player extends Component {
    @property(Prefab)
    bulletPre:Prefab = null;
   
    start() {
     //移动监听事件
      this.node.on(Node.EventType.TOUCH_MOVE,(event)=>{
        let p = this.node.getWorldPosition();
     //移动代码需要关联相机
        this.node.setWorldPosition(event.getUILocation ().x,event.getUILocation ().y,0);
 });
     //攻击计时器
      this.schedule(()=>{
     //创建子弹
        let bullet = instantiate(this.bulletPre);
     //设置父节点 设置父节点的时候可以获取玩家节点的父节点然后在将该父节点设置成子弹的父节点
        bullet.setParent(this.node.getParent());
     //设置子弹位置
        let pos1=this.node.position;
        bullet.setPosition(pos1.x,pos1.y+80);
     },0.5);
 }
}

子弹脚本

import { _decorator, Collider, Collider2D, Component, Node,ICollisionEvent, RigidBody, Contact2DType, ToggleContainerComponent, RigidBody2D, BoxCollider2D, physics, PhysicsSystem2D } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('bullet')
export class bullet extends Component {
    start() {
        this.node.getComponent(RigidBody2D).enabledContactListener = true;
        let collider= this.getComponent(BoxCollider2D);
        collider.on(Contact2DType.BEGIN_CONTACT,this.onCollisionEnter,this);
        if(collider){
            collider.on(Contact2DType.BEGIN_CONTACT,this.onCollisionEnter,this);
     }
    }
    @property
    speed:number = 800;
    protected onLoad(): void {
  PhysicsSystem2D.instance.enable = true;
}
    update(deltaTime: number) {
         //移动
        let p = this.node.getPosition();
        this.node.setPosition(p.x,p.y + this.speed *deltaTime);
         //出屏幕销毁
        if(p.y>820){
          this.node.destroy();
}
        let rigbody = this.getComponent(RigidBody2D);
        this.node.getComponent(RigidBody2D).enabledContactListener = true;
    }

onCollisionEnter(BEGIN_CONTACT:string,onCollisionEnter:any,arg2:this){
        if(onCollisionEnter.tag == 1){
         //销毁敌人
          onCollisionEnter.getComponent(enemycontrol).die();
         //销毁自己
          this.node.destroy();
  }
 }
}

敌人脚本

import { _decorator, BoxCollider2D, Component, Node, resources, RigidBody2D, Sprite, SpriteFrame } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('enemycontrol')
export class enemycontrol extends Component {
    isDie:boolean = false;//声明一个死亡参数
    start() {
        let collider= this.getComponent(BoxCollider2D);
        this.node.getComponent(RigidBody2D).enabledContactListener = true;//打开碰撞监听
    }

    update(deltaTime: number) {
        //移动
        if(this.isDie==false){
          let p = this.node.getPosition();
          this.node.setPosition(p.x,p.y - 300*deltaTime);
          if(p.y< -850){
            this.node.destroy();
          }
        }
    }
         //死亡 方法
    die(){
        this.isDie=true;
        //加载爆炸图片  3.7.3以上版本记得在图片名字再加一个/spriteFrame
        resources.load("enemy0_die/spriteFrame",SpriteFrame,(err,res)=>{
          this.node.getComponent(Sprite).spriteFrame = res;
        //300毫秒后销毁
          setTimeout(() => {
            this.node.destroy();
        //在死亡时关闭碰撞检测
            this.node.getComponent(RigidBody2D).enabledContactListener = false;
          }, 300);
        })
    }
}

碰撞设置

在游戏中子弹需要打中敌人所以需要设置子弹和敌人的分组可以互相碰撞，在碰撞矩阵中已经设置other组可以和current组发生碰撞。

子弹预设体碰撞箱设置

敌人预设体碰撞箱设置

为了之后可以增加敌人的类型，将敌人预设体的tag值设定为1，在子弹代码中也会检测该tag值。