【Cocos TypeScript 零基础 7.1】

目录

重写 小结一下心得

本人重写了整个项目

有了点小心得

页面跳转

复制代码
director.loadScene(`s2`)

背景移动

canvas 是画布

为什么要向上图布局?

方便计算相对坐标,脚本还是只写一个

绑定上 BG 一样跑,不影响

typescript 复制代码
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

老师的代码好处 所见即所得

本人代码没那么多弯弯绕绕

新手容易绕晕,暂时只用了一种发射模式,

道理是一样的,后续更新双发

typescript 复制代码
@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)
        }
    }
}

我之前子弹,敌机老是搞成一条直线,移动后新老精灵都跟随移动

试了好久,发现这样才能实现前后精灵不联动

  1. 实例化
  2. 实体化
  3. 设置世界坐标

这是我试了好久总结出来的

子弹代码

typescript 复制代码
@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遍,才明白过来

所谓的精灵,它是一个抽出来的概念

简单的说,就是实体化后它能不能满足你的需求(个体独立)

举个简单的例子,

猪生仔,仔有自己的血,自己的动作,自己的速度,自己的饱腹度...

这就是精灵,独立个体,有自己的属性

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

说了这么多,上图片,上代码



敌机这里就很明显看出来我所说的

自己要理解这个逻辑,后面就很清楚这个游戏的大致框架
敌机属性代码

typescript 复制代码
@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代码,而是敌机代码

你要把敌机的共有属性抽离出来,写相同的代码

不一样的地方,就用绑定的形式来调用
敌机生成

typescript 复制代码
@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) {
        
    }
}

修复瞬移BUG

优化代码

但这一版的代码还是有问题

敌机死后可以再次被击杀(突然想起可以休眠,明天再实验)

肉眼击中了,但没有触发碰撞?子弹穿过去了,但再对准,又可以了

下次更新再说了

相关推荐
brzhang1 小时前
为什么 OpenAI 不让 LLM 生成 UI?深度解析 OpenAI Apps SDK 背后的新一代交互范式
前端·后端·架构
brzhang1 小时前
OpenAI Apps SDK ,一个好的 App,不是让用户知道它该怎么用,而是让用户自然地知道自己在做什么。
前端·后端·架构
爱看书的小沐2 小时前
【小沐学WebGIS】基于Three.JS绘制飞行轨迹Flight Tracker(Three.JS/ vue / react / WebGL)
javascript·vue·webgl·three.js·航班·航迹·飞行轨迹
井柏然2 小时前
前端工程化—实战npm包深入理解 external 及实例唯一性
前端·javascript·前端工程化
IT_陈寒3 小时前
Redis 高性能缓存设计:7个核心优化策略让你的QPS提升300%
前端·人工智能·后端
aklry3 小时前
elpis之动态组件机制
javascript·vue.js·架构
井柏然3 小时前
从 npm 包实战深入理解 external 及实例唯一性
前端·javascript·前端工程化
羊锦磊3 小时前
[ vue 前端框架 ] 基本用法和vue.cli脚手架搭建
前端·vue.js·前端框架
brzhang3 小时前
高通把Arduino买了,你的“小破板”要变“AI核弹”了?
前端·后端·架构
她说..4 小时前
通过git拉取前端项目
java·前端·git·vscode·拉取代码