新时代总会有新产物，比如直播。直播的特色就在于实时互动。将原本的视频聊天一对一，变成主播和评论区聊天的一对多。 直播的特色也很明显，底部摄像机渲染实时画面；在左下角叠上一层弹幕滚动实时显示评论，右下角点赞购买等，同时点击屏幕会触发点赞动画；顶部左上角为头像和粉丝数以及关注，然后跟着一排打赏排行榜。 这些套用到游戏里的话，就是把原本的摄像机实时画面，变成游戏场景就行了。
下面主要是介绍单机直播弹幕的实现和送礼物的特效。
界面UI搭建创建一个canvas
并且设置为屏幕覆盖的。在CanvasScaler里设置UI缩放模式为屏幕大小缩放，参考分辨率暂时设为750*1334。
创建一个ScrollView滚动区域在底部
布局调整如下：
然后删掉横竖方向的滚动条。
选中Viewport节点，修改它的布局，并去掉原来默认的Mask，换成矩形遮罩Rect Mask 2D，暂时设置softness为30，后续可以情况修改。
Content也修改一下布局，然后添加垂直组件Vertival Layout Group，子级对齐为MiddleLeft，居中左对齐。
再添加一个适配高度的组件Content Size Fitter，垂直方向设置为：Preferred Size，这样在content里添加子节点的话其本身也可以改变自身大小。
创建单条弹幕的UI样式
首先，找一张圆角的弹幕UI背景图itemBg.png，然后在content节点下添加Image图片，命名为BarrageItem，并将itemBg赋值给Image。图像类型选中切片，在图像编辑器里将两端切出来，这样改变图片尺寸时两端也不会被拉伸到。
添加水平布局Horizontal Layout Group，和尺寸适配组件Content Size Fitter。设置如图：
在BarrageItem下添加两个Text，用于填写网友名称的NameText和弹幕内容DescText。调好字体大小颜色后，同样的也加上尺寸适配。
此时，弹幕效果是这样的：
调整BarrageItem的layout组件的配置：
点击BarrageItem，ctrl+D复制多一个BarrageItem，看看列表UI看起来是怎么样的：
非常紧凑且顶着外容器的左侧，所以需要对它们的父节点content的Layout进行调整：
将弹幕BarrageItem单独拖到Prefabs里作为预制体，再将其从父节点Content移除，然后将弹幕滚动ScrollView也拖动到资源里作为预制体。
至此，弹幕UI搭建就可以告一段落。
昵称数据结构UserName
有一个int类型的id和一个string类型的昵称
public struct UserName{
int id;
public string nickName;
}
建立JSON
可以通过unity的插件直接将excel文件赋值给unity里的节点去转换文件，也可以用其它插件将excel文件转换成Json文件，放入项目里供unity调用。
这里使用的是后者：
配置好excel后使用工具转换后得到的json如下，将其放入AssetsResourcesJsons中：
建立数据管理模块
在类初始化时就对Json进行转换为对象。再写一个GetRandomName方法供调用获取一个随机的昵称名。
public class UserNameClass{
static public UserName[] userName;//配置
public UserNameClass(){
LoadByJson();
}
private void LoadByJson () {
TextAsset text = Resources.Load("Jsons/" + "UserName");
userName = JsonMapper.ToObject(text.text);
}
static public UserName GetRandomName(){
return userName[Random.Range(0, userName.Length)];
}
}
二、 弹幕数据
首先，弹幕在游戏里的应用分为以下几类：
- 普通弹幕，模拟玩家发言，随机出现一条；
- 指引弹幕，模拟通过玩家对话进行任务指引，多条弹幕按顺序出现；
- 特定场景弹幕，模拟特殊情况下触发多条弹幕内容，多条弹幕不按顺序依次随机出现；
- 奖励弹幕，模拟玩家打赏，随机插入出现，并带有数据增加和送礼动画；（这种在此篇里暂不实现）
由此，弹幕将被分为以下三种类型，结构为id，desc（弹幕类型说明，辅助配表用）
每一条弹幕的结构则为index（序号），desc（弹幕内容）
第一列的数字对应的是上面的id，index对应的是第id组弹幕的第index条弹幕，即如果只有0代表其实是单条弹幕。弹幕内容自行填写即可。
转为Json后，三类弹幕结构是这样的：
段落弹幕，如图，每个id里仅有一条。
普通弹幕，如图，每个id里仅有一条。
特定场景弹幕，其实和有指引作用的段落弹幕是一样的，同样的将此json文件放到Resoutces/Jsons里：
接下来，将三种弹幕类型存到各自的分类中，并设置好他们的单独滚动速度：
item_arr里包含的是上面【弹幕组合】的对应id；弹幕滚动速度设置上限和下限。转换为Barrage.json文件后同上面一样放在Resources/Jsons文件里；
建立数据管理模块
按照上面json的结构创建三个类用于后续的调用：
////// 弹幕类型汇总 /// public class BarrageJson { public int id = 0; public string type = ""; public double min;//弹幕滚动速度 public double max;//弹幕滚动速度 public string[] item_arr;//弹幕id } ////// 弹幕组合 /// public class BarrageItemsJson { public int id; public string desc;//类型说明 public BarrageItemJson[] item; } ////// 弹幕单例 /// public class BarrageItemJson { public int index;// public string desc;//弹幕内容 }
然后创建一个BarrageClass类，并进行json和上述类的初始化：
using System.Collections.Generic;
using UnityEngine;
using LitJson;
public class BarrageClass{
public static BarrageClass instance;
BarrageJson[] barrageJson;//配置
BarrageItemsJson[] barrageItemsJson;//配置
private List curbarrages = new List();
static public Dictionary> TYPE_Barrage = new Dictionary>{};
public BarrageClass()
{
if(instance != null){
return;
}
instance = this;
LoadByJson();
reset();
}
public void reset()
{
TYPE_Barrage.Add(BarrageType.newbie, getBarrageListByType(BarrageType.newbie));
TYPE_Barrage.Add(BarrageType.day, getBarrageListByType(BarrageType.day));
TYPE_Barrage.Add(BarrageType.night, getBarrageListByType(BarrageType.night));
TYPE_Barrage.Add(BarrageType.success, getBarrageListByType(BarrageType.success));
TYPE_Barrage.Add(BarrageType.fail, getBarrageListByType(BarrageType.fail));
Debug.Log("新手弹幕:"+JsonMapper.ToJson(TYPE_Barrage[BarrageType.newbie]));
}
//获取弹幕组合;
public List getBarrageListByType(BarrageType type){
string[] idArr = barrageJson[((int)type)].item_arr;
List barrageArr = new List();
for(int i = 0; i < idArr.Length; i++) {
int id = int.Parse(idArr[i]);
barrageArr.Add(barrageItemsJson[id]);
}
return barrageArr;
}
//Json转换成对应的object
private void LoadByJson () {
TextAsset text = Resources.Load("Jsons/" + "Barrage");
barrageJson = JsonMapper.ToObject(text.text);
Debug.Log("弹幕: 原json"+text);
text = Resources.Load("Jsons/" + "BarrageItem");
barrageItemsJson = JsonMapper.ToObject(text.text);
Debug.Log("弹幕:"+JsonMapper.ToJson(barrageJson) + JsonMapper.ToJson(barrageItemsJson));
}
}
将弹幕组合类型写成enum方便代码理解：
public enum BarrageType{
newbie,
day,
night,
success,
fail
}
通过组合类型，来获取 [弹幕组合] 集合的方法：getBarrageByType（BarrageType type）
//获取弹幕类型;
public BarrageJson getBarrageByType(BarrageType type){
return barrageJson[((int)type)];
}
通过 [弹幕组合] 的id，来获取该条 [弹幕组合] 内多条弹幕集合item的方法：getBarrageByID（BarrageType id）
//获取弹幕组合;
public BarrageItemJson[] getBarrageByID(int id){
return barrageItemsJson[id].item;
}
通过getBarrageByType和getBarrageByID方法来设置字典，通过字典可直接获取 [弹幕组合] 集合：
//获取弹幕组合;
public List getBarrageListByType(BarrageType type){
string[] idArr = getBarrageByType(type).item_arr;
List barrageArr = new List();
for(int i = 0; i < idArr.Length; i++) {
int id = int.Parse(idArr[i]);
barrageArr.Add(barrageItemsJson[id]);
}
return barrageArr;
}
三、弹幕显示和调用
弹幕滚动区域
首先是弹幕的滚动区域，创建BarrageUI脚本，进行简单的赋值。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class BarrageUI : MonoBehaviour
{
public ScrollRect scroll_rect;//滚动区域
public ScrollViewNevigation scrollViewNevigation;//用于滚动缓动动画的插件
public GameObject item;//弹幕object
private List barrageItemsJson = new List();//弹幕组合列表
private BarrageItemsJson curBarrageArr;//当前弹幕组合
private BarrageType barrageType;//当前弹幕组合类型
private BarrageItemJson curBarrage;//当前弹幕
private int arrIndex = 0;//第几组弹幕
private int index = 0;//弹幕组合里的第几条弹幕
private BarrageClass barrageClass;//当前弹幕信息
BarrageItemJson[] baragesArr;
double min;//最小弹幕出现速度
double max;//最大弹幕出现速度
bool isStop = true;//是否弹幕滚动停止了
void Start(){
// MessageCenter.Instance.RigisterListener(MessageName.INSERT_BARRAGE, InsertBarrage);
barrageClass = BarrageClass.instance;
}
}
挂到Barrage预制体中去，再为其添加ScrollViewNevigation脚本，并赋值：
设置弹幕列表SetBarrageList，初始化弹幕出现时间。如果弹幕自动播放停止的话，则需要调用NextBarrageArr启动一下
public void SetBarrageList(BarrageType type) {
barrageType = type;
min = barrageClass.getBarrageByType(type).min;
max = barrageClass.getBarrageByType(type).max;
barrageItemsJson = BarrageClass.TYPE_Barrage[barrageType];
index = 0;
arrIndex = 0;
if(isStop){
NextBarrageArr();
}
}
设置下一组弹幕NextBarrageArr：
//下一组弹幕段落
public void NextBarrageArr(){
isStop = false;
if(barrageType == BarrageType.newbie){
if(TaskClass.instance.isNewbie){//新手阶段未结束
arrIndex = TaskClass.instance.newbieID;//播放下一段新手弹幕
curBarrageArr = barrageItemsJson[arrIndex];
baragesArr = curBarrageArr.item;
StartCoroutine(nextBarrage());
}else{//新手阶段已结束
isStop = true;
SetBarrageList(BarrageType.day);
}
}else if(barrageType == BarrageType.day || barrageType == BarrageType.night){//随机抽取一段弹幕
arrIndex = Random.Range(0, barrageItemsJson.Count);
curBarrageArr = barrageItemsJson[arrIndex];
baragesArr = curBarrageArr.item;
index = 0;
StartCoroutine(nextBarrage());
}else if(barrageType == BarrageType.success || barrageType == BarrageType.fail){//特定场景下弹幕
if(arrIndex < barrageItemsJson.Count){//依次播放成功失败段落的弹幕
curBarrageArr = barrageItemsJson[0];
baragesArr = curBarrageArr.item;
baragesArr = AddBarage();
RandomList(baragesArr, curBarrageArr.item.Length, out baragesArr);//打乱各条弹幕顺序
StartCoroutine(nextBarrage());
arrIndex ++;
}
}
}
void RandomList(BarrageItemJson[] barrageItemsArr, int count, out BarrageItemJson[] rangeArr{
List barrageList = new List();
List indexList = new List();//一个和animalList数量相同的序列List
for(int i = 0; i < barrageItemsArr.Length; i++) {
indexList.Add(i);
}
int countNum = barrageItemsArr.Length;
while (barrageList.Count < countNum)
{
int rangeNum = Random.Range(0,indexList.Count-1);//随机一个数
int index = indexList[rangeNum];//在List取出该随机数的index
barrageList.Add(barrageItemsArr[index]);
indexList.Remove(index);
if(barrageList.Count == count) break;
}
rangeArr = barrageList.ToArray();
}
设置下一条弹幕nextBarrage
//下一条弹幕
IEnumerator nextBarrage(){
curBarrage = baragesArr[index];
StartCoroutine(createItem());
index ++;
yield return new WaitForSeconds(Random.Range(((float)min), ((float)max)));
if(barrageType == BarrageType.newbie){//新手弹幕播放完后不会出新的内容
if(index < baragesArr.Length){
StartCoroutine(nextBarrage());
}else{
isStop = true;
}
}else if(barrageType == BarrageType.day || barrageType == BarrageType.night){//白天和黑夜都为单独一句
NextBarrageArr();
}else if(barrageType == BarrageType.success || barrageType == BarrageType.fail){//成功失败
if(curBarrageArr.desc != "特定场景弹幕"){
NextBarrageArr();
}else{
if(index < baragesArr.Length){
StartCoroutine(nextBarrage());
}else{
isStop = true;
}
}
}
}
创建弹幕实例createItem，创建后像弹幕单例传入数据进行初始化：
//创建弹幕UI
IEnumerator createItem(){
GameObject _obj;
_obj = GameObject.Instantiate(item);
_obj.SetActive(true);
_obj.transform.SetParent(scroll_rect.content.transform);
item.GetComponent().localScale= Vector3.one ;
_obj.GetComponent().setData(curBarrage);
yield return new WaitForSeconds(0.1f);
scrollViewNevigation.Nevigate(_obj.GetComponent(), Mathf.Min(0.8f, ((float)min)/2));//缓动移动到滚动区域底部
}
单条弹幕实例
创建脚本BarrageItem，进行简单的赋值初始化即可。
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class BarrageItem : MonoBehaviour
{
public Text userName;
public Text text;
public void setData(BarrageItemJson data){
userName.text = UserNameClass.GetRandomName().nickName + ": ";
text.text = data.desc;
}
private void Update() {
GetComponent().localScale = Vector3.one;
}
}
最终效果
