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

【Cocos TypeScript 零基础 15.1】

article 2025/2/13 17:53:35

见缝插针

本人只是看了老师的大纲,中途不明白不会的时候再去看的视频
所以代码可能与老师代码有出入
SIKI_学院_点击跳转

UI脚本

import { _decorator, Camera, color, Component, director, instantiate, Label, math, Node, Prefab, tween } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('ts_ui')
export class ts_ui extends Component {
    static inthis : ts_ui
    static getinthis() : ts_ui {return this.inthis}

    @property(Prefab) pin : Prefab = null
    @property(Node) cam : Node = null
    pin_num : number = 0    //  是否生成pin

    @property(Label) ui_fen : Label = null
    fen : number = 0
    @property(Camera) camera : Camera = null
    @property(Node) but : Node = null

    start() {
        ts_ui.inthis = this
        this.schedule(this.on_rate,1)
        this.on_fen(0)
    }

    update(deltaTime: number) {
        
    }
    on_rate(){
        if (this.pin_num == 1){return}  //  是否生成
        const p = instantiate(this.pin)
        this.cam.addChild(p)
        p.setPosition(0 , -640)
        this.pin_num = 1
    }
    on_fen(num : number){
        this.fen += num
        this.ui_fen.string = this.fen.toString()
    }
    on_end(){
        this.but.active = true
        this.on_anim()
        this.scheduleOnce(function(){director.pause()},1)
    }
    on_anim(){  //  结束缓动动画函数
        let new_col = new math.Color()
        new_col.r = 60
        new_col.g = 5
        new_col.b = 5
        new_col.a = 255
        tween(this.camera)
        .to(1 , {orthoHeight : 450 , clearColor : new_col})
        .start()
    }
    on_reset(){
        director.resume()
        director.loadScene(`s1`)
    }
}

针脚本

import { _decorator, Collider2D, Component, Contact2DType, Input, input, Node } from 'cc';
import { ts_circle } from './ts_circle';
import { ts_ui } from './ts_ui';
const { ccclass, property } = _decorator;

@ccclass('ts_pin_s')
export class ts_pin_s extends Component {
    move_sp : number = -2   //  -2刚生成时 -1等待发射 0发射 1完成碰撞
    start() {
        const col = this.getComponent(Collider2D)
        if (col){col.on(Contact2DType.BEGIN_CONTACT,this.on_bc,this)}   //  开启碰撞
        else {console.log(`针头 开启碰撞异常`)}
        input.on(Input.EventType.TOUCH_END , this.on_te , this)     //  开启触摸
    }
    on_bc (me : Collider2D , oth : Collider2D){
        console.log(`针头碰撞`,oth.name)
        if (oth.name == `Circle<CircleCollider2D>`){
            const pw = this.node.getWorldPosition()
            const rw = this.node.getWorldRotation()
            const cir = ts_circle.getinthis()
            this.node.setParent(cir.node)       //  更新父节点
            this.node.setWorldPosition(pw)
            this.node.setWorldRotation(rw)
            this.move_sp = 1
            const ui = ts_ui.getinthis()
            ui.pin_num = 0
            ui.on_fen(1)
        }
        if (oth.name == `Pin<BoxCollider2D>`){
            ts_ui.getinthis().on_end()
        }
    }
    on_te(){
        if (this.move_sp == -1){this.move_sp = 0}
    }
    update(deltaTime: number) {
        this.move(deltaTime)
    }
    move(deltaTime: number){
        if (this.move_sp >= 1){return}
        const pos = this.node.getPosition()
        if (this.move_sp == -2){
            if (pos.y <= -500){this.node.setPosition(pos.x , pos.y + deltaTime * 500)}      //  新生成速度
            else {this.move_sp = -1}
        }
        if (this.move_sp == -1){return}
        if (this.move_sp == 0){this.node.setPosition(pos.x , pos.y + deltaTime * 1000)}      //  发射速度
    }
}

move 函数处于性能考虑
应该在条件判断成立时返回的,不应该多个IF轮流判定

球脚本

import { _decorator, CircleCollider2D, Collider2D, Component, Contact2DType, Input, Node } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('ts_circle')
export class ts_circle extends Component {
    static inthis : ts_circle
    static getinthis() : ts_circle {return this.inthis}

    start() {
        ts_circle.inthis = this
        const col = this.getComponent(Collider2D)
        if (col){col.on(Contact2DType.BEGIN_CONTACT,this.on_bc,this)}
        else {console.log(`球 开启碰撞异常`)}
    }
    on_bc(me : Node , oth : Node){
        console.log(`球 碰撞` , oth.name)
    }
    update(deltaTime: number) {
        this.node.angle += 2
        if (this.node.angle >= 360){this.node.angle = 0}
    }
}

心得_旋转

在这里插入图片描述
项目设置 > 功能裁剪 > 2D物理系统 > 内置2D物理系统
在不改内置的情况下

this.node.angle += 2    //  旋转角度速度

球旋转会卡住不动,取消刚体组件也可以使其正常旋转,但碰撞就会有点麻烦

心得_更改父节点

在变更父节点的时候,子节点的位置和角度会被重置
不想重置,就需要记录之前的位置和角度,更换后再设置回来

        if (oth.name == `Circle<CircleCollider2D>`){
            const pw = this.node.getWorldPosition()
            const rw = this.node.getWorldRotation()
            const cir = ts_circle.getinthis()
            this.node.setParent(cir.node)       //  更新父节点
            this.node.setWorldPosition(pw)
            this.node.setWorldRotation(rw)
            this.move_sp = 1
            const ui = ts_ui.getinthis()
            ui.pin_num = 0
            ui.on_fen(1)
        }

心得_缓动动画

还没有仔细研究,看了老师的视频,依葫芦画瓢
但看使用情况来看,以下是个人理解
tween 传入缓动组件
to 传入 1缓动执行时间 2组件需要缓动变更的属性
start 开始

    on_anim(){  //  结束缓动动画函数
        let new_col = new math.Color()
        new_col.r = 60
        new_col.g = 5
        new_col.b = 5
        new_col.a = 255
        tween(this.camera)
        .to(1 , {orthoHeight : 450 , clearColor : new_col})
        .start()
    }