当前位置：首页 > article >正文

【Cocos TypeScript 零基础 7.1】

article 2025/1/13 17:40:14

重写小结一下心得

本人重写了整个项目
有了点小心得

页面跳转

director.loadScene(`s2`)

背景移动

canvas 是画布
在这里插入图片描述
为什么要向上图布局?
方便计算相对坐标,脚本还是只写一个
绑定上 BG 一样跑,不影响

export class ts_2_bg extends Component {
    @property speed : number = 100
    start() {

    }

    update(deltaTime: number) {
        let pos1 = this.node.getPosition()
        this.node.setPosition(
            pos1.x,
            pos1.y - deltaTime * this.speed
        )
        pos1 = this.node.getPosition()
        if (pos1.y < -851) {this.node.setPosition(pos1.x,852)}
    }
}

精简 player

老师的代码好处所见即所得
在这里插入图片描述
本人代码没那么多弯弯绕绕
新手容易绕晕,暂时只用了一种发射模式,
道理是一样的,后续更新双发

@ccclass('ts_player')
export class ts_player extends Component {
    @property(Prefab) bullet1 : Prefab = null   //  子弹
    @property rate : number = 0.4   //  子弹发射频率
    time1 : number = 0  //  过去的时间
    @property(Node) zidan_weizhi : Node = null
    
    protected onLoad(): void {  //  打开监听
        input.on(
            Input.EventType.TOUCH_MOVE, //  设置获取的类型
            this.onmove,    //  赋值给onmove函数
            this
        )
    }
    protected onDestroy(): void {   //  关闭监听
        input.off(
            Input.EventType.TOUCH_MOVE,
            this.onmove,
            this
        )
    }
    onmove(event:EventTouch){
        const p = this.node.position;   //  获取坐标
        let pos1 = new Vec3( //  创建一个新的变量.来存储将要变更坐标,以便于判断
            p.x + event.getDeltaX(),    //  当前X坐标 + 移动的X坐标
            p.y + event.getDeltaY(),
        )
        if (pos1.x < -240) pos1.x = -240    //  限制左边
        if (pos1.x > 240) pos1.x = 240    //  限制右边
        if (pos1.y < -426) pos1.y = -426    //  限制下边
        if (pos1.y > 426) pos1.y = 426  //  限制上边
        
        this.node.setPosition(pos1.x , pos1.y)  //  设置新的位置
    }

    start() {

    }

    update(deltaTime: number) {
        this.time1 += deltaTime
        if (this.time1 >= this.rate) {
            this.time1 = 0  //  重置发射计时
            const zidan1 = instantiate(this.bullet1)    //  实例化
            this.zidan_weizhi.addChild(zidan1)  //  位置上创建实体
            let pw = this.node.getWorldPosition()
            zidan1.setWorldPosition(pw.x,pw.y + 40,pw.z)
        }
    }
}

我之前子弹,敌机老是搞成一条直线,移动后新老精灵都跟随移动
试了好久,发现这样才能实现前后精灵不联动

实例化
实体化
设置世界坐标

这是我试了好久总结出来的
子弹代码

@ccclass('ts_bullet')
export class ts_bullet extends Component {
    @property speed1 : number = 200
    start() {
        let collider = this.getComponent(Collider2D);
        if (collider) {collider.on(Contact2DType.BEGIN_CONTACT, this.onBeginContact, this);}
    }
    onBeginContact (selfCollider: Collider2D, otherCollider: Collider2D) {
        this.node.destroy()
    }
    update(deltaTime: number) {
        let pos = this.node.position
        this.node.setPosition(pos.x,pos.y + deltaTime * this.speed1)
        let posy = this.node.position.y
        if (posy > 810) {this.node.destroy()}
    }
}

敌机精灵

我在写敌机的时候,写了2遍,才明白过来
所谓的精灵,它是一个抽出来的概念
简单的说,就是实体化后它能不能满足你的需求(个体独立)
举个简单的例子,
猪生仔,仔有自己的血,自己的动作,自己的速度,自己的饱腹度…
这就是精灵,独立个体,有自己的属性

图片丢进 cavas
再把 cavas 里的图片拖进资源栏里就形成了初级精灵 (空白精灵,除了图,没有其他属性)
双击这个初级精灵,对精灵进行编辑 (添加动画,绑定脚本等等),这是在完善这个精灵
最后生成精灵,生成是独立于精灵的,子弹是精灵,敌机时精灵,玩家也算是精灵,但很特殊

说了这么多,上图片,上代码
在这里插入图片描述

敌机这里就很明显看出来我所说的
自己要理解这个逻辑,后面就很清楚这个游戏的大致框架
敌机属性代码

@ccclass('ts_enemy_att')
export class ts_enemy_run extends Component {
    @property name1 : string = ''
    @property speed : number = 200  //  移动速度
    @property hp : number = 1   //  生命值
    @property(Animation) anim : Animation = null   //  动画

    start() {
        let collider = this.getComponent(Collider2D);
        if (collider) {
            collider.on(Contact2DType.BEGIN_CONTACT, this.onBeginContact, this);   //  开始触发
            //collider.on(Contact2DType.END_CONTACT, this.onEndContact, this);  //  结束触发没必要
        }
    }
    onBeginContact (selfCollider: Collider2D, otherCollider: Collider2D) {
        // 只在两个碰撞体开始接触时被调用一次
        console.log('onBeginContact');
        this.hp -= 1
        DelayNode
        if (this.hp > 0) {this.anim.play(`${this.name1}_hit`)}
        else {this.anim.play(`${this.name1}_down`)}
    }
    update(deltaTime: number) {
        let pos = this.node.getPosition()
        this.node.setPosition(pos.x , pos.y - deltaTime * this.speed)
        if (this.node.position.y < -426) {this.node.destroy()}
    }
}

我为什么说不是敌机0代码,而是敌机代码
你要把敌机的共有属性抽离出来,写相同的代码
不一样的地方,就用绑定的形式来调用
敌机生成

@ccclass('ts_enemy_0')
export class ts_enemy_0 extends Component {
    @property(Node) linshi : Node = null    //  临时生成位置

    @property rate0 : number = 1 //  0刷新时间
    @property rate1 : number = 2
    @property rate2 : number = 4

    @property(Prefab) enemy0 : Prefab = null    //  精灵0
    @property(Prefab) enemy1 : Prefab = null
    @property(Prefab) enemy2 : Prefab = null

    start() {
        this.schedule(this.onrate0,this.rate0)   //  设置定时器 (调用方法 , 定时)
        this.schedule(this.onrate1,this.rate1)
        this.schedule(this.onrate2,this.rate2)
    }
    protected onDestroy(): void {   //  销毁时
        this.unschedule(this.onrate0())
    }
    onrate0(){
        let en0 = instantiate(this.enemy0)  //  实例化
        this.linshi.addChild(en0)   //  实体化
        let posx = math.randomRangeInt(-240,240)    //  获取随机数
        let pw = this.linshi.getWorldPosition() //  获取临时点世界坐标
        en0.setWorldPosition(pw.x + posx , pw.y + 426 , pw.z)   //  设置敌机位置
    }
    onrate1(){
        let en0 = instantiate(this.enemy1)  //  实例化
        this.linshi.addChild(en0)   //  实体化
        let posx = math.randomRangeInt(-240,240)    //  获取随机数
        let pw = this.linshi.getWorldPosition() //  获取临时点世界坐标
        en0.setWorldPosition(pw.x + posx , pw.y + 426 , pw.z)   //  设置敌机位置
    }
    onrate2(){
        let en0 = instantiate(this.enemy2)  //  实例化
        this.linshi.addChild(en0)   //  实体化
        let posx = math.randomRangeInt(-240,240)    //  获取随机数
        let pw = this.linshi.getWorldPosition() //  获取临时点世界坐标
        en0.setWorldPosition(pw.x + posx , pw.y + 426 , pw.z)   //  设置敌机位置
    }

    update(deltaTime: number) {
        
    }
}