airpg-front/assets/scripts/OptionsCtr.ts

import { _decorator, color, Color, Component, Label, Node, Sprite, tween, UIOpacity, Vec3 } from "cc"
const { ccclass, property } = _decorator

@ccclass("OptionsCtr")
export class OptionsCtr extends Component {
    // 直接引用四个子节点
    @property({ type: Node })
    public optionNodes: Node[] = []

    @property({ type: Color })
    selectedColor: Color = new Color(180, 173, 121) // B4AD79

    @property({ type: Sprite })
    selectedSprite: Sprite = null // 设置你想要的选中背景图

    @property({ type: Sprite })
    notSelectedSprite: Sprite = null // 设置你想要的选中背景图

    start() {}

    setOptions(options: string[]) {
        if (options.length !== 4) {
            console.warn("Expected 4 options!")
            return
        }

        //显示前先制空lebel
        for(let i=0;i<4;i++)
        {
            const nodeLabel = this.optionNodes[i].getChildByName("text_option").getComponent(Label);
            nodeLabel.string = ''
        }


        tween(this.node.getComponent(UIOpacity))
            .to(1, { opacity: 255 })
            .call(() => {
                for (let i = 0; i < 4; i++) {
                    this.setOptionText(this.optionNodes[i], options[i])
                }
            })
            .start()
    }

    setOptionText(node: Node, text: string) {
        
        const labelComponent = node.getChildByName("text_option").getComponent(Label)
        const uiOpacity = labelComponent.node.getComponent(UIOpacity) || labelComponent.node.addComponent(UIOpacity)
        uiOpacity.opacity = 0 // 初始设置为透明
        labelComponent.string = text

        // 使用tween实现淡出效果
        tween(uiOpacity)
            .to(1, { opacity: 255 }) // 1秒内淡入到完全不透明
            .start()
    }

    selectOption(index: number) {
        if (index < 1 || index > 4) {
            console.warn("Invalid option index!")
            return
        }

        // 重置所有选项的背景和颜色
        for (let i = 0; i < 4; i++) {
            const optionNode = this.optionNodes[i]
            const labelComponent = optionNode.getChildByName("text_option").getComponent(Label)

            if (i === index - 1) {
                // 这是被选中的选项
                labelComponent.color = this.selectedColor

                // 设置选中背景图
                const spriteComponent = optionNode.getComponent(Sprite)
                if (spriteComponent) {
                    spriteComponent.spriteFrame = this.selectedSprite.spriteFrame
                }

                // 使用tween实现颜色渐变效果
                const currentColor = labelComponent.color.clone()
                tween(labelComponent)
                    .to(2, {
                        color: Color.lerp(new Color(), currentColor, this.selectedColor, 0.1)
                    }) // 这里的0.1表示每次插值的比例，你可以根据需要调整
                    .start()

                this.selectedAction(optionNode)
            } else {
                // 这是未被选中的选项
                labelComponent.color = Color.WHITE // 假设默认颜色为白色，你可以根据需要更改

                // 移除选中背景图
                const spriteComponent = optionNode.getComponent(Sprite)
                if (spriteComponent) {
                    spriteComponent.spriteFrame = this.notSelectedSprite.spriteFrame
                }
            }
        }
    }

    selectedAction(optionNode: Node) {
        tween(optionNode)
            .to(0.1, { scale: new Vec3(1.1, 1.1, 1.1) }) // 放大到原始大小的110%
            .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个单位回到原位置
            .to(0.1, { scale: new Vec3(1, 1, 1) }) // 缩小回原始大小
            .start()
    }

    private scaleUp(node: Node) {
        return tween(node).to(0.1, { scale: new Vec3(1.1, 1.1, 1.1) }) // 放大到原始大小的110%
    }

    private scaleDown(node: Node) {
        return tween(node).to(0.1, { scale: new Vec3(1, 1, 1) }) // 缩小回原始大小
    }

    private shake(node: Node) {
        return tween(node)
            .by(0.05, { position: new Vec3(5, 0, 0) }) // 向右移动5个单位
            .by(0.05, { position: new Vec3(-10, 0, 0) }) // 向左移动10个单位
            .by(0.05, { position: new Vec3(10, 0, 0) }) // 向右移动10个单位
            .by(0.05, { position: new Vec3(-10, 0, 0) }) // 向左移动10个单位
            .by(0.05, { position: new Vec3(5, 0, 0) }) // 向右移动5个单位回到原位置
    }

    update(deltaTime: number) {}
}