cocos creator 滚动字幕公告如何实现?
2017-04-21 本文已影响1086人
z5老张头
上节点图

g_bg是公告的背景图 mask 为遮罩组件节点 gundongzi为label组件节点
运行效果

实现步骤、
1建立一个js组件 绑定 上节点中 mask gundongzi 两个节点

具体实现代码
//滚动公告字幕
gundongText:function(){
var self = this;
setTimeout(function(){
var notifyRes = JSON.parse(cc.sys.localStorage.getItem('notify'));
var gundongNode = cc.find("Canvas/gundong");
if(notifyRes != null){
if(gundongNode){
gundongNode.active = true;
}
self.Gundong.string = notifyRes;
}else{
if(gundongNode){
gundongNode.active = false;
}
}
var text = self.Gundong;
var width = self.Zhezhao.node.width;
text.node.runAction(cc.repeatForever(cc.sequence(
cc.moveTo(text.node.width/width*10,cc.p(-text.node.width-width/5,text.node.y)),
cc.callFunc(function(){
text.node.x = width;
}))));
},300);
},