1、Prefab制作
->制作教程:https://docs.cocos.com/creator/manual/zh/asset-workflow/prefab.html
2、编写一个预制板脚本绑定
/*
通用提示框
*/
cc.Class({
extends: cc.Component,
properties: {
Text: { default: null, type: cc.Label },
showTimes: 1, //隐藏时间
jumpHeight: 100, //跳跃高度
_isShow:false,
},
// LIFE-CYCLE CALLBACKS:
setLabelString: function( str )
{
//這邊直接將我們的Label字串設定為 No.#
//this.Text.string = ( str );
//cc.find("background/textCount").getComponent(cc.Label).string = str;
this.node.getChildByName("Text").getComponent(cc.Label).string = str;
},
//按钮点击回调
onConfirBtn:function(callback){
console.log("发布按钮点击回调事件");
this.node.getChildByName("btnconfir").on('click',function(event){
console.log("点击到按钮");
callback();
},this);
},
onLoad:function () {
cc.log("showTips.onLoad")
window.showtips = this;
// 初始化计时器
this.timer = 0;
this.node.active = true;
this.node.getChildByName("layout").on('touchend',function(event){
console.log("点击到layout");
console.log("销毁提示框");
this.finish();
},this);
this.node.getChildByName("mask").on('touchend',function(event){
console.log("点击到mask");
},this);
//this.node.getChildByName("btnconfir").on('click',function(event){
// console.log("点击到按钮");
//},this);
},
setJumpAction: function () {
this.timer = 0;
// 跳跃
var jumpDown = cc.moveBy(this.showTimes, cc.v2(0, this.jumpHeight)).easing(cc.easeCubicActionIn());
var callback = cc.callFunc(this.finish, this);
return cc.repeat(cc.sequence(jumpDown,callback),1);
},
finish:function(){
this._isShow = false;
if(this.node){
this.node.active = this._isShow;
}
this.node.stopAllActions();
this.node.destroy();
},
start:function () {
cc.log("showTips.start")
},
run:function (str) {
this._isShow = true;
if(this.node){
this.node.active = this._isShow;
}
this.setLabelString(str)
this.jumpAction = this.setJumpAction();
this.node.runAction(this.jumpAction);
},
update:function (dt) {
//var opacityRatio = 1 - this.timer/this.showTimes;
//var minOpacity = 50;
//this.node.opacity = minOpacity + Math.floor(opacityRatio * (255 - minOpacity));
//if (this.timer > this.showTimes) {
// this.finish();
// return;
//}
//this.timer += dt;
},
});
3、只需要将上面脚本绑定到预制资源,再加载就能使用
4、使用
//显示升级界面--预制体
showTip:function(str){
//我們先動態取得Canvas
console.log("加载预制板");
var CanvasNode = cc.find('Canvas');
if( !CanvasNode ) { cc.log( 'find Canvas error' ); return; }
var onResourceLoaded = function(errorMessage, loadedResource )
{
if( errorMessage ) { cc.log( 'Prefab error:' + errorMessage ); return; }
if( !( loadedResource instanceof cc.Prefab ) ) { cc.log( 'Prefab error' ); return; }
var newMyPrefab = cc.instantiate( loadedResource );
CanvasNode.addChild(newMyPrefab,100);
newMyPrefab.setPosition( 0, 0 );
var newMyPrefabScript = newMyPrefab.getComponent('prefabBackground');
newMyPrefabScript.setLabelString(str);
newMyPrefabScript.onConfirBtn(function(){
console.log("发送升级事件");
});
};
cc.loader.loadRes('background', onResourceLoaded );
},
5、附加问题
5.1、想要实现一个效果,就是点击这个有背景的区域之外的地方,这个层面消失。
在做的过程中,因为脚本直接挂载在这个节点上
在onload中直接使用
this.node.on('touchend',function(event){
console.log("点击到layout");
console.log("销毁提示框");
this.finish();
},this);
这样会出现一种情况,就是不管点击在那个地方,这个节点都直接消失了。---不理想。
于是使用了一种老方法,添加遮罩层,然后对遮罩层监听点击事件
this.node.getChildByName("layout").on('touchend',function(event){
console.log("点击到layout");
console.log("销毁提示框");
this.finish();
},this);
this.node.getChildByName("mask").on('touchend',function(event){
console.log("点击到mask");
},this);
好了,这样就可以达到点击提示框外就可以销毁这个节点的效果了。
5.2、这个预制板中有一个标签(显示文字)、一个按钮(做响应),现在这个标签已经可以从外界调用传入参数实现不同的显示,然后我就想这个按钮是不是也可以这样,于是加了函数
//预制板脚本中
//按钮点击回调
onConfirBtn:function(callback){
console.log("发布按钮点击回调事件");
this.node.getChildByName("btnconfir").on('click',function(event){
console.log("点击到按钮");
callback();
},this);
},
外部调用
//显示升级界面--预制体
showTip:function(str){
//我們先動態取得Canvas
console.log("加载预制板");
var CanvasNode = cc.find('Canvas');
if( !CanvasNode ) { cc.log( 'find Canvas error' ); return; }
var onResourceLoaded = function(errorMessage, loadedResource )
{
if( errorMessage ) { cc.log( 'Prefab error:' + errorMessage ); return; }
if( !( loadedResource instanceof cc.Prefab ) ) { cc.log( 'Prefab error' ); return; }
var newMyPrefab = cc.instantiate( loadedResource );
CanvasNode.addChild(newMyPrefab,100);
newMyPrefab.setPosition( 0, 0 );
var newMyPrefabScript = newMyPrefab.getComponent('prefabBackground');
newMyPrefabScript.setLabelString(str);
newMyPrefabScript.onConfirBtn(function(){
console.log("发送升级事件");
});
};
cc.loader.loadRes('background', onResourceLoaded );
},
这里没有设置按钮数据,有兴趣的朋友可以拓展一下。
调用结果
注意:在这里,所有的都要注意名字的大小写,在使用this.node.getChildByName("btnconfir"),老是提示找不到这个按钮。。。
在这个类中还有函数update ,可以拓展一下定时功能。
好东西、大家分享!