弹出式对话框
1:对话框的结构:
根节点 -->
mask: 全屏的单色精灵,监听事件,关闭对话框;
dlg 与它的孩子: 对话框的内容,监听事件，挡住不让他传递到mask节点上;
弹出式动画:
mask: 渐变进来;
对话框内容缩放,并加上easing缓动对象;
收起式动画:
mask: 渐变出去;
对话框内容缩小,并加上easing 缓动对象;
2: 对话框组件脚本
(1)show_dlg
(2)hide_dlg
////////////////////popup_dlg.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
onl oad: 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) {
// },
});
个性化时间进度条
1: 编写脚本, 来使用sprite的扇形来显示当前的进度:
属性:
time_sec: 定时器的时间
clockwise: 是否为顺时针或逆时针;
reverse: 是否反转
start_clock_action: 开始累积时间，看时间过去的百分比,来改变精灵显示的百分比;
stop_clock_action: 停止计时累积;
/////////////////////timebar.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
// },
// ...
action_time: 15,
clockwise: false, // 是否为顺时针
reverse: false, // false, 由少变多，否者的话的就是由多变少;
play_onload: true, // 是否在加载的时候开始倒计时
},
// use this for initialization
onl oad: 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;
},
});
////////////////game_scene.js//////////////////
var popup_dlg = require("popup_dlg");
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
// },
// ...
dlg: {
type: popup_dlg,
default: null,
},
},
// use this for initialization
onl oad: function () {
},
on_show_dlg_click: function() {
this.dlg.show_dlg();
},
// called every frame, uncomment this function to activate update callback
// update: function (dt) {
// },
});