在游戏开发中经常会遇到这样一个需求:就是在玩家头像框周围,又个倒计时的TimeBar。
如下面:
那么这个功能,使用creator是怎么实现的呢?
seat_normal_bk是头像底框;
seat_time_bar是进度条框;Type选择filled填充模式,Fill Type选择radial扇形模式,fill center设置成中心0.5,fill start是控制起始点位置的,通过改变fill range来改变进度。
扫描二维码关注公众号,回复:
9781719 查看本文章
下面简单介绍下Filled模式:
1: 配置Filled模式
2: 配置Filled模式, 设置为Radius参数;
3: 配置Radius的参数模式,
中心: 位置坐标(0, 1小数), (0, 0)左下脚, (1, 1) 右上角 (0.5, 0.5) 中心点
Fill Start 开始的位置: 0 ~1, 右边中心点开始,逆时针走
Fill Range: 填充总量(0, 1];
FillRange为正,那么就是逆时针,如果为负,那么就是顺时针;
4: 个性化时间进度条案例; 5: 游戏中道具的时间进度显示都可以;
下面看看代码:
// Learn cc.Class:
// - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
// - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
// - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
// - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
// - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html
cc.Class({
extends: cc.Component,
properties: {
// foo: {
// // ATTRIBUTES:
// default: null, // The default value will be used only when the component attaching
// // to a node for the first time
// type: cc.SpriteFrame, // optional, default is typeof default
// serializable: true, // optional, default is true
// },
// bar: {
// get () {
// return this._bar;
// },
// set (value) {
// this._bar = value;
// }
// },
//获取组件实例2:编辑器绑定
timeBar: {
default: null,
type: cc.Sprite,
},
//走完的时间
act_time: 15,
},
// LIFE-CYCLE CALLBACKS:
onLoad () {
//获取组件实例1:代码获取
this.tBar1 = this.getComponent(cc.Sprite);
this.add_time = 0;
this.sub_time = this.act_time;
},
start () {
},
update (dt) {
//----增加----
this.add_time += dt;
var persent = this.add_time / this.act_time;
if(persent >= 1){
persent = 1;
this.add_time = 0;
}
//this.tBar1.fillRange = persent;//----1--
this.timeBar.fillRange = persent;//----2--
//----减少----
this.sub_time -= dt;
var per = this.sub_time / this.act_time;
if(per <= 0){
per = 0;
this.sub_time = this.act_time;
}
//this.tBar1.fillRange = per;//------3--
//this.timeBar.fillRange = per;//----4--
},
});
this.tBar1 = this.getComponent(cc.Sprite);
是通过代码获取的组件实例
timeBar: {
default: null,
type: cc.Sprite,
},
是通过编辑器绑定获取的组件实例
this.tBar1.fillRange = persent;//----1--
this.timeBar.fillRange = persent;//----2--
是timeBar增长的例子
this.tBar1.fillRange = per;//------3--
this.timeBar.fillRange = per;//----4--
是timeBar减少的例子
//----------------------------------------------------------------------------------
另外的一种实现方法
cc.Class({
extends: cc.Component,
properties: {
// foo: {
// default: null, // The default value will be used only when the component attaching
// to a node for the first time
// url: cc.Texture2D, // optional, default is typeof default
// serializable: true, // optional, default is true
// visible: true, // optional, default is true
// displayName: 'Foo', // optional
// readonly: false, // optional, default is false
// },
// ...
action_time: 15,
clockwise: false, // 是否为顺时针
reverse: false, // false, 由少变多,否者的话的就是由多变少;
play_onload: true, // 是否在加载的时候开始倒计时
},
// use this for initialization
onLoad: function () {
this.now_time = 0;
this.is_running = false;
this.node.active = false;
this.sprite = this.getComponent(cc.Sprite);
if (this.play_onload) {
this.start_clock_action(this.action_time);
}
},
start_clock_action: function(action_time, end_func) {
if (action_time <= 0) {
return;
}
this.end_func = end_func;
this.node.active = true;
this.action_time = action_time;
this.now_time = 0;
this.is_running = true;
},
stop_clock_action: function() {
this.node.active = false;
this.is_running = false;
},
// called every frame, uncomment this function to activate update callback
update: function (dt) {
if (!this.is_running) {
return;
}
this.now_time += dt;
var per = this.now_time / this.action_time;
if (per > 1) { // 结束了,超时了
per = 1;
this.is_running = false;
if (this.end_func) {
this.end_func();
}
}
if (this.reverse) {
per = 1 - per;
}
if (this.clockwise) {
per = -per;
}
this.sprite.fillRange = per;
},
});