> 文档中心 > 【unity3D】直播间滚动式弹幕效果

【unity3D】直播间滚动式弹幕效果

新时代总会有新产物,比如直播。直播的特色就在于实时互动。将原本的视频聊天一对一,变成主播和评论区聊天的一对多。 直播的特色也很明显,底部摄像机渲染实时画面;在左下角叠上一层弹幕滚动实时显示评论,右下角点赞购买等,同时点击屏幕会触发点赞动画;顶部左上角为头像和粉丝数以及关注,然后跟着一排打赏排行榜。 这些套用到游戏里的话,就是把原本的摄像机实时画面,变成游戏场景就行了。

下面主要是介绍单机直播弹幕的实现和送礼物的特效。

界面UI搭建

创建一个canvas

并且设置为屏幕覆盖的。在CanvasScaler里设置UI缩放模式为屏幕大小缩放,参考分辨率暂时设为750*1334。
创建一个canvas
创建一个ScrollView滚动区域在底部
布局调整如下:ScrollView布局
然后删掉横竖方向的滚动条。
【unity3D】直播间滚动式弹幕效果
选中Viewport节点,修改它的布局,并去掉原来默认的Mask,换成矩形遮罩Rect Mask 2D,暂时设置softness为30,后续可以情况修改。
Viewport节点
Content也修改一下布局,然后添加垂直组件Vertival Layout Group,子级对齐为MiddleLeft,居中左对齐。
再添加一个适配高度的组件Content Size Fitter,垂直方向设置为:Preferred Size,这样在content里添加子节点的话其本身也可以改变自身大小。
Content设置
创建单条弹幕的UI样式

首先,找一张圆角的弹幕UI背景图itemBg.png,然后在content节点下添加Image图片,命名为BarrageItem,并将itemBg赋值给Image。图像类型选中切片,在图像编辑器里将两端切出来,这样改变图片尺寸时两端也不会被拉伸到。
【unity3D】直播间滚动式弹幕效果
添加水平布局Horizontal Layout Group,和尺寸适配组件Content Size Fitter。设置如图:
弹幕背景设置
在BarrageItem下添加两个Text,用于填写网友名称的NameText和弹幕内容DescText。调好字体大小颜色后,同样的也加上尺寸适配。
text设置
此时,弹幕效果是这样的:【unity3D】直播间滚动式弹幕效果

调整BarrageItem的layout组件的配置:调整后样式效果
点击BarrageItem,ctrl+D复制多一个BarrageItem,看看列表UI看起来是怎么样的:
【unity3D】直播间滚动式弹幕效果
非常紧凑且顶着外容器的左侧,所以需要对它们的父节点content的Layout进行调整:
调整后列表UI效果
将弹幕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表格
配置好excel后使用工具转换后得到的json如下,将其放入Assets\Resources\Jsons\中:
excel表格转换后的UserName.Json文件
建立数据管理模块

在类初始化时就对Json进行转换为对象。再写一个GetRandomName方法供调用获取一个随机的昵称名。

public class UserNameClass{    static public UserName[] userName;//配置    public UserNameClass(){ LoadByJson();    }    private void LoadByJson () { TextAsset text = Resources.Load<TextAsset>("Jsons/" + "UserName"); userName = JsonMapper.ToObject<UserName[]>(text.text);    }    static public UserName GetRandomName(){ return userName[Random.Range(0, userName.Length)];    }}

二、 弹幕数据

首先,弹幕在游戏里的应用分为以下几类:

  1. 普通弹幕,模拟玩家发言,随机出现一条
  2. 指引弹幕,模拟通过玩家对话进行任务指引,多条弹幕按顺序出现
  3. 特定场景弹幕,模拟特殊情况下触发多条弹幕内容,多条弹幕不按顺序依次随机出现
  4. 奖励弹幕,模拟玩家打赏,随机插入出现,并带有数据增加和送礼动画;(这种在此篇里暂不实现)

由此,弹幕将被分为以下三种类型,结构为id,desc(弹幕类型说明,辅助配表用)
【unity3D】直播间滚动式弹幕效果
每一条弹幕的结构则为index(序号),desc(弹幕内容)
第一列的数字对应的是上面的id,index对应的是第id组弹幕的第index条弹幕,即如果只有0代表其实是单条弹幕。弹幕内容自行填写即可。
【unity3D】直播间滚动式弹幕效果
转为Json后,三类弹幕结构是这样的:
段落弹幕,如图,每个id里仅有一条。
段落弹幕结构
普通弹幕,如图,每个id里仅有一条。
普通弹幕结构
特定场景弹幕,其实和有指引作用的段落弹幕是一样的,同样的将此json文件放到Resoutces/Jsons里:
在这里插入图片描述
接下来,将三种弹幕类型存到各自的分类中,并设置好他们的单独滚动速度:
【unity3D】直播间滚动式弹幕效果
item_arr里包含的是上面【弹幕组合】的对应id;弹幕滚动速度设置上限和下限。转换为Barrage.json文件后同上面一样放在Resources/Jsons文件里;
转换为Json
建立数据管理模块

按照上面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<BarrageItemJson> curbarrages = new List<BarrageItemJson>();    static public Dictionary<BarrageType, List<BarrageItemsJson>> TYPE_Barrage = new Dictionary<BarrageType, List<BarrageItemsJson>>{};    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<BarrageItemsJson> getBarrageListByType(BarrageType type){ string[] idArr = barrageJson[((int)type)].item_arr; List<BarrageItemsJson> barrageArr = new List<BarrageItemsJson>(); 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<TextAsset>("Jsons/" + "Barrage"); barrageJson = JsonMapper.ToObject<BarrageJson[]>(text.text); Debug.Log("弹幕: 原json"+text); text = Resources.Load<TextAsset>("Jsons/" + "BarrageItem"); barrageItemsJson = JsonMapper.ToObject<BarrageItemsJson[]>(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<BarrageItemsJson> getBarrageListByType(BarrageType type){ string[] idArr = getBarrageByType(type).item_arr; List<BarrageItemsJson> barrageArr = new List<BarrageItemsJson>(); 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> barrageItemsJson = new List<BarrageItemsJson>();//弹幕组合列表    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脚本,并赋值:
【unity3D】直播间滚动式弹幕效果
设置弹幕列表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<BarrageItemJson> barrageList = new List<BarrageItemJson>(); List<int> indexList = new List<int>();//一个和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<RectTransform>().localScale= Vector3.one ; _obj.GetComponent<BarrageItem>().setData(curBarrage); yield return new WaitForSeconds(0.1f); scrollViewNevigation.Nevigate(_obj.GetComponent<RectTransform>(), 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<RectTransform>().localScale = Vector3.one;    }}

【unity3D】直播间滚动式弹幕效果

最终效果

【unity3D】直播间滚动式弹幕效果

【unity3D】直播间滚动式弹幕效果 创作挑战赛 【unity3D】直播间滚动式弹幕效果 新人创作奖励来咯,坚持创作打卡瓜分现金大奖