200字范文 > unity UGUI + DOTween + lua（xlua）实现跑马灯效果

unity UGUI + DOTween + lua（xlua）实现跑马灯效果

时间：2023-12-28 12:37:07

1、引言

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

2、实现过程

具体实现包括以下步骤。

2.1、制作预制体

这里的素材只需要一张图就可以了。我也上传了吧，需要尝试的同学，可以拿去试一试。

有了背景，我们就可以开始了！

首先我们先创建空物体，修改名字为ScrollMsgForm，做如图设置

添加背景，创建Img!如图所示

添加遮罩，创建空物体，添加组件Image（必须添加，不然mask不起作用）和组件Mask，做不显示遮罩图，如图

添加文本，添加文本时最好勾选富文本，便于在程序中控制文本的颜色，同时要添加组件Content size Fitter，Content size Fitter组件可以使文本自适应字体的大小和宽高。

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

2.2、代码实现

具体实现如下所示

ScrollMsgForm = class("ScrollMsgForm") -- 滚动消息类LuaFormManager.formClassDict["ScrollMsgForm"] = ScrollMsgFormlocal GameEntry = CS.XinYue.GameEntrylocal cs_coroutine = require "cs_coroutine"local Vector3 = CS.UnityEngine.Vector3function ScrollMsgForm:ctor( transform,objs )print("ScrollMsgForm:ctor")self.msgInfoArr = {}self.transform = transformself.msgTxt = transform:Find("MsgBg/MsgMask/Text"):GetComponent("Text")self.mskTrans = self.msgTxt.transform.parentself.sizeDeltaParentX = self.mskTrans:GetComponent("RectTransform").sizeDelta.x / 2self.oriTxtVector3 = Vector3(self.sizeDeltaParentX,self.msgTxt.transform.localPosition.y,self.msgTxt.transform.localPosition.z)self.msgTxt.transform.localPosition = self.oriTxtVector3self.msgTxt.text = ""endfunction ScrollMsgForm:OnOpen(msgInfo)print("ScrollMsgForm:OnOpen")if msgInfo == nil or next(msgInfo) == nil then return endself:scrollMsg(msgInfo[1])endfunction ScrollMsgForm:scrollMsg(msgInfo)print("ScrollMsgForm:scrollMsg, msgInfo =",msgInfo)if msgInfo == nil thenreturnendself.msgInfoArr[#self.msgInfoArr + 1] = msgInfo-- 如果正在滚动直插入数据就可以了，不需要重复执行下面的语句if CS.DG.Tweening.DOTween.IsTweening(self.msgTxt.transform) then returnendlocal msgTxtWidthlocal moveDistancelocal moveDuration -- 滚动时间local function strtScrollMsg()if #self.msgInfoArr > 0 thenlocal 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.oriTxtVector3strtScrollMsg()end)end)else -- 滚动完成后关闭GameEntry.UI:CloseUIForm("ScrollMsgForm")endendstrtScrollMsg()endfunction ScrollMsgForm:OnClose()self = ScrollMsgFormif CS.DG.Tweening.DOTween.IsTweening(self.msgTxt.transform) then -- 关闭时要停止动作，同时清空消息队列CS.DG.Tweening.DOTween.Kill(self.msgTxt.transform.name)endself.msgInfoArr = {}end