Cocos Creator2D游戏开发(15)---预制体和按钮的绑定以及冷却效果的实现

news2025/1/12 21:06:55

场景: 植物大战僵尸中,种植植物前,要判断状态,只有在阳光充足时才能点击

图片资源:
在这里插入图片描述

预制体的创建,创建一个空节点命名: CardTemplate,将三张豌豆射手相关的图片拖入如下图

在这里插入图片描述
其中card_mask图片中的透明度改为150;

在assets中创建prefab文件夹,将CardTemplate节点直接拖入prefab文件夹,然后就出现了CardTemplate预制体
双击预制体CardTemplate,创建脚本CardTemplate,并将脚本CardTemplate拖入右侧属性检查器中;
在脚本CardTemplate中添加代码

import { _decorator, Component, Node, Sprite } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('CardTemplate')
export class CardTemplate extends Component {


    @property({ type: Node })
    public cardLight: Node = null; // 卡牌亮节点
    @property({ type: Node })
    public cardGrey: Node = null; // 卡牌暗节点
    @property({ type: Sprite })
    public cardMask: Sprite = null; // 卡牌遮罩

    start() {
        this.cardLight.active = true;
        this.cardGrey.active = false;
        this.cardMask.node.active = false;
    }

    update(deltaTime: number) {
        
    }


    onButtonClick(){
        console.log("按钮被点击了")
    }

}

节点对应绑定,拖过去一一对应
在card_light下,添加button组件
ClickEvents改为1, 第二个框选择CardTemplate,第三个框选择onButtonClick

点击运行,尝试点击豌豆射手,就可以看到控制台打印的日志了;
调整下面三行的值,再次点击测试;

        this.cardLight.active = true;
        this.cardGrey.active = false;
        this.cardMask.node.active = false;

冷却效果的实现
图片card_mask属性调整

添加代码:

import { _decorator, Component, Node, Sprite } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('CardTemplate')
export class CardTemplate extends Component {


    @property({ type: Node })
    public cardLight: Node = null; // 卡牌亮节点
    @property({ type: Node })
    public cardGrey: Node = null; // 卡牌暗节点
    @property({ type: Sprite })
    public cardMask: Sprite = null; // 卡牌遮罩

    @property({ type: Number })
    private cdTime: number = 5; // 卡牌冷却时间

    private cdTimer: number = 0; // 卡牌冷却计时器

    start() {
        this.cardLight.active = false;
        this.cardGrey.active = true;
        this.cardMask.node.active = true;
        this.cdTimer = this.cdTime
    }

    update(deltaTime: number) {
        if(this.cdTimer >0 ){
            this.cdTimer -= deltaTime;
            this.cardMask.fillRange = -(this.cdTimer / this.cdTime);
            if(this.cardMask.fillRange >0){
                this.cardLight.active = true;
                this.cardGrey.active = false;
                this.cardMask.node.active = false;
            }
        }
    }


    onButtonClick(){
        console.log("按钮被点击了")
        this.cardLight.active = false;
        this.cardGrey.active = true;
        this.cardMask.node.active = true;
        this.cdTimer = this.cdTime
    }

}

效果如下
在这里插入图片描述