UGUI实现跑马灯效果
发表于2019-01-15
在游戏中都有系统公告,提示某某玩家做了什么事,或者系统发布一些公告。文字在屏幕上方移动提示。本篇就借助UGUI给大家分享下跑马灯效果的实现。
使用UGUI,text包含了一个Text的组件。
注意:Text的文本垂直设置设成overflow不换行。
这样在massage的长度会随着text文字的增长而增长,从而不需要固定文本的长度导致文本多长看不到溢出的字。
接下来就是动画部分,让文字循环一定次数播放。这里用到的是HOTween动画,其他动画组件是一样的。
/// <summary> /// 播放公告 /// </summary> /// <param name="str">公告内容</param> /// <param name="runnum">循环播放次数</param> public void RollMessage(string str,int runnum=1) { if (isRoll) //判断当前是否有公告在播放,有就把待播放公告插到队列中等待播放。 { Messages message = new Messages() { message=str, num=runnum }; messages.Enqueue(message); return; } isRoll = true; playNum = runnum; messagePanel = GameObject.Instantiate(Resources.Load("Prefabs/WorldMessage")) as GameObject; GameObject obj = GameObject.Find("bottomCanvas"); messagePanel.transform.SetParent(obj.transform,false); messageRect = messagePanel.transform.Find("massage").GetComponent<RectTransform>(); Text text = messageRect.transform.Find("text").GetComponent<Text>(); text.text = str; width = text.preferredWidth; //获取文字的长度 messageRect.anchoredPosition = new Vector3(0, 0, 0); //让文字从在最右边开始移动 RollAnimation(); }
注意设置预设中massage的锚点X的值为0;
/// <summary>
/// 播放动画
/// </summary>
public void RollAnimation()
{
HOTween.Init(); //HOTween初始化
TweenParms parms = new TweenParms(); //定义一个tween参数
parms.Loops(playNum,LoopType.Restart); //循环播放
parms.Prop("localPosition", new Vector3(-width-540,0,0)); //移动距离 开发环境是1080*1920 unity自适应
parms.Ease(EaseType.Linear); //动画播放曲线
parms.OnComplete(CompleteRoll); //设置回调函数
HOTween.To(messageRect, (width + 540), parms); //开始播放
}
/// <summary>
/// 结束播放
/// </summary>
private void CompleteRoll()
{
Destroy(messagePanel);
isRoll = false;
if (messages.Count > 0) //判断队列中有木有公告,有继续播放
{
Messages message=messages.Dequeue();
RollMessage(message.message, message.num);
}
}
这样就可以了。