cocos creator实现滚动公告

本文介绍了一个在Cocos Creator中实现游戏UI动态滚动文字效果的方法,通过使用RichText组件和Node节点,结合自定义的更新逻辑,使得文字能够从屏幕一侧平滑移动到另一侧,形成常见的新闻滚动条效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

cc.Class({

extends: cc.Component,

 

properties: {

marqueeLabel:cc.RichText,

mask: cc.Node

},

 

onLoad: function(){

this.desc1 = "啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊"

this.desc2 = "呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃"

this.desc3 = "哈哈哈哈"

this.descs = []

this.descs.unshift(this.desc1)

this.descs.unshift(this.desc2)

this.descs.unshift(this.desc3)

 

this.marqeeIndex = 0;

this.marqueeBg = this.node;

this.marqueeBg.opacity = 0;

},

 

update: function(){

try{

var endIndex = this.descs.length - 1

var desc = this.descs[endIndex]

if(desc){

this.runMarqeeBar(desc)

this.descs[endIndex] = null;

}

}catch(e){

}

},

 

runMarqeeBar: function(desc){

this.marqueeBg.opacity = 255;

this.marqueeLabel.node.x = this.mask.width;

this.marqueeLabel.string = desc;

this.marqueeLabel.node.runAction(cc.sequence(

cc.moveTo(10, -this.marqueeLabel.node.width, 0),

cc.callFunc(()=>{

this.descs.pop();

if(!this.isExistContent()){

this.descs.unshift(this.desc1)

// this.marqueeBg.opacity = 0;

}

}, this, this)))

},

 

isExistContent: function(){

if (this.descs[this.descs.length - 1]){

return true;

}

return false;

}

});

转载于:https://my.oschina.net/andyzzh1314/blog/1924526

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值