UGUI实现直播间聊天消息滚动功能

如今直播APP火的简直不像样子了。在直播间里会有观众和主播交流的功能。主要方式是主播动口(说),观众动手(打字)。这篇文章讲解一下观众客户端聊天功能的实现。这里为了更清楚的看到效果功能,我做了一个客户端单机版来讲解。(该版本为unity5.3.2f1)

需求功能是:观众新发送了聊天消息会把之前的消息顶到上面,用户也可以通过滚动聊天栏翻看之前的用户聊天记录。

先看下面gif图功能:

下面讲如何实现:

第一:整个功能我分了三个组件,一个蓝色背景image,一个用来滑动的image(上图图中的黄色光芒图片),一个text的预设物体。(如下图:)

为了方便将这三个物体的pivot都设置为(0,0)。

如下图(根据需求可自定义大小坐标等):

UGUI实现直播间聊天消息滚动功能_第1张图片

第二:给蓝色背景图片添加滑动组件和Mask组件,指定滑动目标为光芒的那个图片。

添加脚本slidertext,然后把text的预设和预设生成的父物体(光芒的那个图片)拖到对应位置。

如下图:

UGUI实现直播间聊天消息滚动功能_第2张图片

第三:脚本slidertext的源码:(这才是重点)

该代码和之前我写的弹幕生产的方法相似(弹幕方法链接http://www.manew.com/thread-95590-1-1.html)

脚本里实现了两种文本移动方法:一种是直接跳到上面的位置,另个是缓慢移动上去(上面gif图的样子),缓慢移动使用了DoTween插件来实现。

[csharp]view plaincopy

usingUnityEngine;

usingSystem.Collections;

usingUnityEngine.UI;

usingDG.Tweening;

usingSystem.Collections.Generic;

usingSystem.Text.RegularExpressions;

usingSystem;

publicclassproductsliderm : MonoBehaviour

{

publicGameObject Textslidermessage, Textslidermessage_parents;

privateGameObject texts;//生成的物体

publicQueue Textslider_queue =newQueue();//物体的队列(生成物体)

privateVector3 textpositon;

privateQuaternion textrotation;

privatestringcontent;//文字内容(ceshi)

floatproduction_timer = 2;//生成的时间间隔

voidUpdate()

{

#region//仅测试用

production_timer -= Time.deltaTime;

if(production_timer <= 0f)

{

inti = UnityEngine.Random.Range(0, DanMuStrings.Length);//弹幕的随机内容

content = DanMuStrings[i];

createDanMuEntity(content);

production_timer = 2;

}

#endregion

if(Textslider_queue.Count > 100)//退出队列方法一

{

GameObject go = Textslider_queue.Peek();

Textslider_queue.Dequeue();

Destroy(go);//销毁弹幕

}

}

publicvoidcreateDanMuEntity(stringtextMsg)

{

texts = (GameObject)(Instantiate(Textslidermessage, textpositon, textrotation));//生成text框

if(texts !=null)

{

texts.transform.SetParent(Textslidermessage_parents.transform);

texts.transform.localScale =newVector3(1, 1, 1);

textrotation.eulerAngles =newVector3(0, 0, 0);

texts.transform.localRotation = textrotation;

texts.transform.localPosition =newVector3(0, 0, 0);

texts.GetComponent().text = textMsg;

if(texts.GetComponent() ==null)//移动组件添加

texts.AddComponent();

if(Textslider_queue.Count >= 1)

{

foreach(GameObject textsslidersinTextslider_queue.ToArray())//凡是在队列中的每一个都要移动

{

Debug.Log("fouzei++++"+ texts.GetComponent().sizeDelta.y);

//直接移动

//textssliders.transform.localPosition= new Vector3(textssliders.transform.localPosition.x, textssliders.transform.localPosition.y + texts.GetComponent().sizeDelta.y, 0f);

#region //缓缓移动

Vector3 kk  =newVector3(textssliders.transform.localPosition.x, textssliders.transform.localPosition.y + texts.GetComponent().sizeDelta.y, 0f);

textssliders.transform.DOLocalMove(kk, 2,true);

#endregion

}

}

Textslider_queue.Enqueue(texts);//添加到队列

}

}

[HideInInspector]

#region 测试用

publicstring[] DanMuStrings =

{

"这个剧情也太雷人了吧!",

"还是好莱坞的电影经典啊,这个太次了还是好莱坞的电影经典啊,这个太次了",

"是电锯惊魂的主角,尼玛",

"这个游戏还是很良心的么",

"卧槽还要花钱,这一关也太难卧槽还要花钱,这一关也太难了卧槽还要花钱,这一关也太难了卧槽还要花钱,这一关也太难了了",

"这个游戏好棒偶",

"全是傻逼",

"求约:13122785566",

"最近好寂寞啊,还是这个游戏好啊是胸再大点就更是胸再大点就更是胸再大点就更",

"难道玩游戏还能撸",

"办证:010 - 888888",

"为什么女主角没有死?",

"好帅呦,你这个娘们儿",

"欠揍啊,东北人不知道啊",

"我去都是什么人啊,请文明用语还是好莱坞的电影经典啊,这个太次了是胸再大点就更",

"这个还是不错的",

"要是胸再大点就更好了",

"这个游戏必须顶啊",

"还是好莱坞的电影经典啊,这个太次了还是好莱坞的电影经典啊,这个太次了怎么没有日本动作爱情片中的角色呢?",

"好吧,这也是醉了!",

"他只想做一个安静的美男子!"

};

#endregion

}

你可能感兴趣的:(UGUI实现直播间聊天消息滚动功能)