高级UI制作:
弹出式对话框JS:
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
// },
// ...
mask: {
type: cc.Node,
default: null,
},
mask_opacity: 128,
content: {
type: cc.Node,
default: null,
},
},
// use this for initialization
onLoad: function () {
},
show_dlg: function() {
this.node.active = true;
// mask 渐变出来;
this.mask.opacity = 0;
var fin = cc.fadeTo(0.3, this.mask_opacity);
this.mask.runAction(fin);
// dlg由小到大
this.content.scale = 0;
var s = cc.scaleTo(0.4, 1).easing(cc.easeBackOut());
this.content.runAction(s);
},
hide_dlg: function() {
//
var fout = cc.fadeOut(0.3);
this.mask.runAction(fout);
var s = cc.scaleTo(0.3, 0).easing(cc.easeBackIn());
var end_func = cc.callFunc(function() {
this.node.active = false;
}.bind(this));
var seq = cc.sequence([s, end_func]);
this.content.runAction(seq);
},
// called every frame, uncomment this function to activate update callback
// update: function (dt) {
// },
});
=====================================
个性化进度条:
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;
},
});