airpg-front/assets/scripts/RoleCtr.ts

import {
    _decorator,
    assetManager,
    AssetManager,
    AudioClip,
    AudioSource,
    Color,
    Component,
    ImageAsset,
    Label,
    Node,
    ProgressBar,
    resources,
    Sprite,
    SpriteFrame,
    Texture2D,
    tween,
    Tween,
    UIOpacity,
    Vec2,
    Vec3
} from "cc"
const { ccclass, property } = _decorator

@ccclass("RoleCtr")
export class RoleCtr extends Component {
    @property({ type: Node })
    public roleNodes: Node[] = []

    private loadedFrames = []

    private treatFrames = []

    public deathNodes: any[] = []

    @property(AudioClip)
    public attackClip: AudioClip = null!

    @property(AudioClip)
    public scanClip: AudioClip = null!

    @property(AudioClip)
    public treatClip: AudioClip = null!
    @property(AudioClip)
    public welcomeClip: AudioClip = null!

    public audioSource: AudioSource = null!

    start() {
        this.preloadAllFrames()
        this.audioSource = this.node.getComponent(AudioSource)
    }
    preloadAllFrames() {
        for (let i = 1; i <= 62; i++) {
            resources.load(`effect/treat/图层 ${i}/spriteFrame`, SpriteFrame, (err, spriteFrame) => {
                if (!err && spriteFrame) {
                    this.treatFrames[i - 1] = spriteFrame
                }
            })
        }

        for (let i = 1; i <= 79; i++) {
            resources.load(`effect/scan/图层 ${i}/spriteFrame`, SpriteFrame, (err, spriteFrame) => {
                if (!err && spriteFrame) {
                    this.loadedFrames[i - 1] = spriteFrame
                }
            })
        }
    }

    update(deltaTime: number) {}

    playAttackOneShot() {
        this.audioSource.playOneShot(this.attackClip, 0.2)
    }

    playScanOneShot() {
        this.audioSource.playOneShot(this.scanClip, 0.2)
    }

    playhealOneShot() {
        this.audioSource.playOneShot(this.treatClip, 0.2)
    }
    playWelcomOneShot() {
        this.audioSource.playOneShot(this.welcomeClip, 0.2)
    }

    attack(node: Node) {
        console.log(node)
        var attackFrameId: number = 1
        node.getChildByName("effect_pannel").scale = new Vec3(0.8, 0.8, 0.8)
        this.schedule(
            () => {
                resources.load(`effect/attack1/图层 ${attackFrameId}/spriteFrame`, SpriteFrame, (err, spriteFrame) => {
                    if (!err && spriteFrame) {
                        node.getChildByName("effect_pannel").getComponent(Sprite).spriteFrame = spriteFrame
                        if (attackFrameId == 15) {
                            attackFrameId = 1
                            node.getChildByName("effect_pannel").scale = new Vec3(1, 1, 1)
                        } else {
                            attackFrameId++
                        }
                    } else {
                        console.log(err)
                    }
                })
            },
            0.03,
            15,
            0
        )
        //播放音效
        this.playAttackOneShot()

        //红色效果
        const effectPannel2: Node = node.getChildByName("effect_pannel2")
        const uiopa = effectPannel2.getComponent(UIOpacity)
        uiopa.opacity = 200
        tween(uiopa).to(0.5, { opacity: 0 }).start()

        //shake
        tween(node)
            .by(0.1, { position: new Vec3(5, 0, 0) }) // 向右移动5个单位
            .by(0.1, { position: new Vec3(-10, 0, 0) }) // 向左移动10个单位
            .by(0.1, { position: new Vec3(10, 0, 0) }) // 向右移动10个单位
            .by(0.1, { position: new Vec3(-10, 0, 0) }) // 向左移动10个单位
            .by(0.1, { position: new Vec3(5, 0, 0) }) // 向右移动5个单位回到原位置
            .call(() => {
                //角色死亡，处理为透明
                let hp = node.getChildByName("progressbar_hp").getComponent(ProgressBar).progress
                if (hp == 0) {
                    const imgMask: Node = node.getChildByName("icon_mask")
                    const default_icon: Node = node.getChildByName("img_icon")
                    const imgNode: Node = imgMask.getChildByName("user_icon")
                    imgNode.getComponent(UIOpacity).opacity = 100
                    default_icon.active = false
                }
            })
            .start()
    }

    //单独处理死亡
    dealDeath(roleNodes: any) {
        let index = 0
        for (let i = 0; i < this.deathNodes.length; i++) {
            const node = roleNodes[this.deathNodes[i].name]
            if (node) {
                node.getChildByName("progressbar_hp").getComponent(ProgressBar).progress = 0
                const imgMask: Node = node.getChildByName("icon_mask")
                const default_icon: Node = node.getChildByName("img_icon")
                const imgNode: Node = imgMask.getChildByName("user_icon")
                imgNode.getComponent(UIOpacity).opacity = 100
                default_icon.active = false
            }

            if (index == this.deathNodes.length - 1) {
                this.deathNodes = []
            }
        }
    }

    treat(node: Node) {
        let attackFrameId: number = 1
        let frameId: number = 1
        node.getChildByName("effect_pannel").scale = new Vec3(0.8, 0.8, 0.8)
        this.schedule(
            () => {
                if (frameId <= 62 && this.treatFrames[frameId - 1]) {
                    node.getChildByName("effect_pannel").getComponent(Sprite).spriteFrame =
                        this.treatFrames[frameId - 1]
                    node.getChildByName("effect_pannel").scale = new Vec3(1, 1, 1)
                    frameId++
                }
            },
            0.02,
            62,
            0
        )

        //白色效果
        const effectPannel2: Node = node.getChildByName("effect_pannel3")
        const uiopa = effectPannel2.getComponent(UIOpacity)
        uiopa.opacity = 240
        tween(uiopa).to(2, { opacity: 0 }).start()

        this.playhealOneShot()
    }

    newPlayer(node: Node, person: any) {
        const imgMask: Node = node.getChildByName("icon_mask")
        const imgNode: Node = imgMask.getChildByName("user_icon")
        const nameNode: Node = node.getChildByName("text_name")
        const pbNode: Node = node.getChildByName("progressbar_hp")
        const effect: Node = node.getChildByName("effect_pannel")
        const default_icon: Node = node.getChildByName("img_icon")

        //新角色席位刷新头像
        if (nameNode.active) {
            //已存在则只更新hp
            pbNode.getComponent(ProgressBar).progress = person.hp / 100
        } else {
            // 远程 url 带图片后缀名
            let remoteUrl = person.avatar
            assetManager.loadRemote<ImageAsset>(remoteUrl, (err, imageAsset) => {
                const spriteFrame = new SpriteFrame()
                const texture = new Texture2D()
                texture.image = imageAsset
                spriteFrame.texture = texture
                // ...
                imgNode.getComponent(Sprite).spriteFrame = spriteFrame

                let frameId: number = 1
                this.schedule(
                    () => {
                        if (frameId <= 79 && this.loadedFrames[frameId - 1]) {
                            node.getChildByName("effect_pannel").getComponent(Sprite).spriteFrame =
                                this.loadedFrames[frameId - 1]
                            frameId++
                        }
                    },
                    0.0168,
                    79,
                    0
                )

                tween(imgMask)
                    .by(2, { position: new Vec3(0, -100, 0) }) // 父节点向下移动
                    .start()

                tween(imgNode)
                    .by(2, { position: new Vec3(0, 100, 0) }) // 子节点向上移动
                    .call(() => {
                        nameNode.getComponent(Label).string = person.name
                        nameNode.active = true

                        pbNode.getComponent(ProgressBar).progress = person.hp / 100
                        pbNode.active = true

                        if (person.hp === 0) {
                            default_icon.active = false
                            imgNode.getComponent(UIOpacity).opacity = 130
                        }
                    })
                    .start()

                this.playScanOneShot()
                this.scheduleOnce(() => {
                    this.playWelcomOneShot()
                }, 3)
            })
        }
    }
}