cocos creator + TypeScript 实现跑马灯效果

时间：2024-04-08 19:25:13

目录

1、引言

  前面的篇幅我们给出了cocos的跑马灯实现思路，这里借助上一篇来用unity实现跑马灯效果，具体原理参照上一篇内容，这里是传送门跑马灯原理分析。

2、实现过程

  具体实现包括以下步骤。

2.1、场景制作

  这里的素材只需要一张图就可以了。这里我就不上传了，前一篇也有，需要的可以去前一篇拿去试一试。
有了背景，我们就可以开始了！

  • 首先我们先创建图片精灵节点，修改名字为ScrollMsgNode，做如图设置cocos creator + TypeScript 实现跑马灯效果
  • 然后添加一个名为Btn的按钮铺满全屏，设置如图的颜色（浅绿色）
  • 然后在ScrollMsgNode节点下添加空节点，改名为MaskNode,并添加mask组件，调整MaskNode的宽高如图

cocos creator + TypeScript 实现跑马灯效果

  • 添加一个label标签，设置锚点为(0,0.5),水平对正为LEFT，其他属性默认

到这里场景制作完毕，下面开始代码部分！

2.2、代码实现

具体实现如下所示

const {ccclass, property} = cc._decorator;

@ccclass
export default class ScrollMsg extends cc.Component {

    @property(cc.Node) maskNode: cc.Node = null;
    @property(cc.Label) label: cc.Label = null;
    
    /**
     * 滚动内容
     */
    contentArr:Array<string> = new Array<string>()

    startPos:cc.Vec2 = null

    onLoad()
    {
        this.startPos = cc.v2(this.maskNode.width/2,0)

        if(this.contentArr.length == 0)
        {
            this.node.active = false
        }
        this.label.node.position = this.startPos
        cc.find("Canvas/Btn").on(cc.Node.EventType.MOUSE_UP,()=>{
            this.startScroll("各位看官，大家好！")
        })
    }

    /**
     * 开始滚动信息
     * @param content 滚动内容
     */
    startScroll(content:string):void
    {
        let self = this
        if(content == null || content.length == 0)
        {
            return
        }
        this.node.active = true
        this.contentArr.push(content)
        if(self.label.node.getActionByTag(0) != null && this.label.node.getActionByTag(0).isDone() == false)//如果正在播放只插入数据
        {
            return
        }

        let scrollFunc = function()
        {
            if(self.contentArr.length > 0)
            {
                self.label.string = self.contentArr.shift()
                //需要先更新标签的宽度，不然下一帧才更新，这里取到的值就会是原来的值，导致宽度计算错误
                self.label._updateRenderData(true)
                self.label.node.position = self.startPos
                let distance:number = self.label.node.width + self.label.node.parent.width
                let duration: number = distance / 100
                let seq = cc.sequence(
                    cc.moveBy(duration,cc.v2(-distance,0)),
                    cc.callFunc(function(){
                        self.label.string = ""
                        self.label.node.position = self.startPos
                        scrollFunc()
                    })
                )
                seq.setTag(0)
                self.label.node.runAction(seq)
            }
            else
            {
                self.node.active = false
            }
        }
        scrollFunc()
    }
    onDestroy()
    {
        if(this.label.node.getActionByTag(0) != null )
        {
             this.label.node.stopAction(this.label.node.getActionByTag(0))
        }
    }
}
只需要将此脚本挂在ScrollMsgNode上就可以了

2.3、效果展现

使用时，只需要，传入参数就可以了，效果如下：

cocos creator + TypeScript 实现跑马灯效果

3、结束语

The End
  好了，今天的分享就到这里，如有不足之处，还望大家及时指正，随时欢迎探讨交流！！！

喜欢的朋友们，请帮顶、点赞、评论！您的肯定是我写作的不竭动力！

相关文章