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);
}
}
这样就可以了。
