unity UGUI + DOTween + lua(xlua)实现跑马灯效果

时间:2024-04-06 22:42:41

1、引言

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

2、实现过程

  具体实现包括以下步骤。

2.1、制作预制体

  这里的素材只需要一张图就可以了。我也上传了吧,需要尝试的同学,可以拿去试一试。unity UGUI + DOTween + lua(xlua)实现跑马灯效果
有了背景,我们就可以开始了!

  • 首先我们先创建空物体,修改名字为ScrollMsgForm,做如图设置
    unity UGUI + DOTween + lua(xlua)实现跑马灯效果
  • 添加背景,创建Img!如图所示
    unity UGUI + DOTween + lua(xlua)实现跑马灯效果
  • 添加遮罩,创建空物体,添加组件Image(必须添加,不然mask不起作用)和组件Mask,做不显示遮罩图,如图
    unity UGUI + DOTween + lua(xlua)实现跑马灯效果
  • 添加文本,添加文本时最好勾选富文本,便于在程序中控制文本的颜色,同时要添加组件Content size Fitter,Content size Fitter组件可以使文本自适应字体的大小和宽高。

  好了,完成这些预制体就制作好了,下面可以动手写代码了。

2.2、代码实现

具体实现如下所示

ScrollMsgForm = class("ScrollMsgForm") -- 滚动消息类
LuaFormManager.formClassDict["ScrollMsgForm"] = ScrollMsgForm

local GameEntry = CS.XinYue.GameEntry
local cs_coroutine = require "cs_coroutine"
local Vector3 = CS.UnityEngine.Vector3

function ScrollMsgForm:ctor( transform,objs )
    print("ScrollMsgForm:ctor")
    self.msgInfoArr = {}
    self.transform = transform
    self.msgTxt = transform:Find("MsgBg/MsgMask/Text"):GetComponent("Text")
    self.mskTrans = self.msgTxt.transform.parent
    
    self.sizeDeltaParentX = self.mskTrans:GetComponent("RectTransform").sizeDelta.x / 2
    
    self.oriTxtVector3 = Vector3(self.sizeDeltaParentX,self.msgTxt.transform.localPosition.y,self.msgTxt.transform.localPosition.z)
    self.msgTxt.transform.localPosition = self.oriTxtVector3
    self.msgTxt.text = ""
end

function ScrollMsgForm:OnOpen(msgInfo)
     print("ScrollMsgForm:OnOpen")
     
     if msgInfo == nil or next(msgInfo) == nil then return end
     self:scrollMsg(msgInfo[1])
end

function ScrollMsgForm:scrollMsg(msgInfo)
     print("ScrollMsgForm:scrollMsg, msgInfo =",msgInfo)
     if msgInfo == nil then
         return
     end
     self.msgInfoArr[#self.msgInfoArr + 1] = msgInfo
     -- 如果正在滚动直插入数据就可以了,不需要重复执行下面的语句
     if CS.DG.Tweening.DOTween.IsTweening(self.msgTxt.transform) then 
         return
     end
     
     local msgTxtWidth
     local moveDistance
     local moveDuration -- 滚动时间
     local function strtScrollMsg()
          if #self.msgInfoArr > 0 then
              local msgContent = self.msgInfoArr[1]
              table.remove(self.msgInfoArr,1) -- 移除这条滚动的消息
              
              cs_coroutine.start(function ()
                   self.msgTxt.text = msgContent
                   -- 这里等待一帧是为了让msgTxtWidth 得到的值为当前文本的长度,否则得到的值是上一次文本的长度
                   coroutine.yield(CS.UnityEngine.WaitForEndOfFrame())
                   
                   msgTxtWidth = self.msgTxt.transform:GetComponent("RectTransform").sizeDelta.x
                   -- 滚动距离就是最终的相对坐标
                   moveDistance = msgTxtWidth + self.sizeDeltaParentX  -- 滚动距离为文本宽度+遮罩长度的一半(跟锚点有关)
                   moveDuration = moveDistance / 100
                   
                   -- 这里的设置的缓动函数SetEase为线性,是为了让文本的移动速度恒定,否则会出现前面快,结束时慢的现象,否则体验不好
                   self.msgTxt.transform:DOLocalMoveX(-moveDistance,moveDuration):SetEase(CS.DG.Tweening.Ease.Linear):OnComplete(function()
                         self.msgTxt.text = ""
                         self.msgTxt.transform.localPosition = self.oriTxtVector3
                         strtScrollMsg()
                   end)
              end)
         else	   -- 滚动完成后关闭
              GameEntry.UI:CloseUIForm("ScrollMsgForm")
         end
    end
    
    strtScrollMsg()
end

2.3、效果展现

使用时,只需要,传入参数就可以了

GameEntry.UI:OpenUIForm(“ScrollMsgForm”,{content})

unity UGUI + DOTween + lua(xlua)实现跑马灯效果

3、结束语


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


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