cocos creator + TypeScript 实现跑马灯效果

1、引言

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

2、实现过程

  具体实现包括以下步骤。

2.1、场景制作

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

  • 首先我们先创建图片精灵节点,修改名字为ScrollMsgNode,做如图设置在这里插入图片描述
  • 然后添加一个名为Btn的按钮铺满全屏,设置如图的颜色(浅绿色)
  • 然后在ScrollMsgNode节点下添加空节点,改名为MaskNode,并添加mask组件,调整MaskNode的宽高如图

在这里插入图片描述

  • 添加一个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、效果展现

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

在这里插入图片描述

3、结束语


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


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

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页