Creator技能按钮冷却效果
实现这个效果很简单,需要用到精灵组件
先把技能按钮拖到场景里面,修改渲染类型为填充,方向为扇形填充,中心点设置为(0.5,0.5),填充起始为0,填充总量为1
在技能按钮下创建一个label,这里为了更醒目设置成了红色
新建个脚本取名SkillBtn,把下面的代码复制粘贴进去
import { _decorator, Component, Node, SpriteComponent, LabelComponent, CCFloat, CCBoolean, Button, SystemEventType, ButtonComponent } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('SkillBtn')
export default class SkillBtn extends Component {
@property({displayName: "技能精灵", tooltip: "技能精灵", type: SpriteComponent, displayOrder: 1})
skill: SpriteComponent = null!;
@property({displayName: "技能冷却时间", tooltip: "技能冷却时间", type: CCFloat, displayOrder: 2})
time: number = 3;
@property({displayName: "是否显示文字", tooltip: "是否显示文字", displayOrder: 3})
is_show_label: boolean = true;
@property({
displayName: "是否显示小数",
tooltip: "是否显示小数",
visible: function () {
return(this.is_show_label);
},
displayOrder: 4,
})
is_decimals: boolean = true;
@property({
displayName: "显示技能冷却剩余时间的文字",
tooltip: "显示技能冷却剩余时间的文字",
visible: function () {
return(this.is_show_label);
},
type: LabelComponent,
displayOrder: 5,
})
time_label: LabelComponent = null;
// 技能按钮的button
btn: ButtonComponent = null!;
onLoad () {
// 游戏开始的时候技能的填充范围是1
this.skill.fillRange = 1;
// 获取button
this.btn = this.skill.getComponent(ButtonComponent)!;
}
update (dt:number) {
// 如果技能精灵的填充不为1 也就是说已经使用了技能
if (this.skill.fillRange < 1) {
// 恢复技能 每帧恢复的值为帧率 / 技能冷却时间
this.skill.fillRange += dt / this.time;
// 如果显示小数
if (this.is_decimals == true) {
// 每帧更新技能剩余时间
this.time_label.string = ((1 - this.skill.fillRange) * this.time).toFixed(1).toString();
} else {
// 每帧更新技能剩余时间
this.time_label.string = Math.round(((1 - this.skill.fillRange) * this.time)).toString();
}
}
// 如果技能精灵的填充为1 也就是说技能还没被使用
if (this.skill.fillRange == 1) {
// 隐藏技能冷却剩余时间
this.time_label.node.active = false;
}
}
// 按下按钮
onbtn () {
// 技能填充范围设置为0
this.skill.fillRange = 0;
// 禁用按钮
this.btn.interactable = false;
// 计时器,用来启用按钮
this.scheduleOnce(() => {
// 启用按钮
this.btn.interactable = true;
}, this.time);
// 如果可以显示文字
if(this.is_show_label == true){
// 显示技能冷却剩余时间
this.time_label.node.active = true;
}
console.log("使用了技能");
}
}
脚本放在技能按钮上,设置好参数
再给技能按钮加一个button组件,添加按钮点击事件,就是Skill_Btn中的onbtn方法,最后把过渡类型改为color(这点是为了让按钮点击的时候更好看)
这样设置完就可以了,想在点击技能按钮的时候想实现什么功能就接着在button组件绑定点击事件就可以了,比如像文章开头的效果那样绑定一个播放动画的方法
源码:https://gitee.com/propertygame/cocos-creator3.x-demos/tree/master/SkillCD
技术交流Q群:1130122408
更多内容请关注微信公众号