草庐IT

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

本豚利 2024-01-29 原文

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

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

界面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如下,将其放入Assets\Resources\Jsons\中:

建立数据管理模块

在类初始化时就对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(弹幕类型说明,辅助配表用)

每一条弹幕的结构则为index(序号),desc(弹幕内容)
第一列的数字对应的是上面的id,index对应的是第id组弹幕的第index条弹幕,即如果只有0代表其实是单条弹幕。弹幕内容自行填写即可。

转为Json后,三类弹幕结构是这样的:
段落弹幕,如图,每个id里仅有一条。

普通弹幕,如图,每个id里仅有一条。

特定场景弹幕,其实和有指引作用的段落弹幕是一样的,同样的将此json文件放到Resoutces/Jsons里:

接下来,将三种弹幕类型存到各自的分类中,并设置好他们的单独滚动速度:

item_arr里包含的是上面【弹幕组合】的对应id;弹幕滚动速度设置上限和下限。转换为Barrage.json文件后同上面一样放在Resources/Jsons文件里;

建立数据管理模块

按照上面json的结构创建三个类用于后续的调用:

/// <summary>
/// 弹幕类型汇总
/// </summary>
public class BarrageJson
{
    public int id = 0;
    public string type = "";
    public double min;//弹幕滚动速度
    public double max;//弹幕滚动速度
    public string[] item_arr;//弹幕id    
}
/// <summary>
/// 弹幕组合
/// </summary>
public class BarrageItemsJson
{
    public int id;
    public string desc;//类型说明
    public BarrageItemJson[] item;
}
/// <summary>
/// 弹幕单例
/// </summary>
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脚本,并赋值:

设置弹幕列表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】直播间滚动式弹幕效果的更多相关文章

  1. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  2. Unity 热更新技术 | (三) Lua语言基本介绍及下载安装 - 2

    ?博客主页:https://xiaoy.blog.csdn.net?本文由呆呆敲代码的小Y原创,首发于CSDN??学习专栏推荐:Unity系统学习专栏?游戏制作专栏推荐:游戏制作?Unity实战100例专栏推荐:Unity实战100例教程?欢迎点赞?收藏⭐留言?如有错误敬请指正!?未来很长,值得我们全力奔赴更美好的生活✨------------------❤️分割线❤️-------------------------

  3. FOHEART H1数据手套驱动Optitrack光学动捕双手运动(Unity3D) - 2

    本教程将在Unity3D中混合Optitrack与数据手套的数据流,在人体运动的基础上,添加双手手指部分的运动。双手手背的角度仍由Optitrack提供,数据手套提供双手手指的角度。 01  客户端软件分别安装MotiveBody与MotionVenus并校准人体与数据手套。MotiveBodyMotionVenus数据手套使用、校准流程参照:https://gitee.com/foheart_1/foheart-h1-data-summary.git02  数据转发打开MotiveBody软件的Streaming,开始向Unity3D广播数据;MotionVenus中设置->选项选择Unit

  4. unity---接入Admob - 2

    目录1.AdmobSDK下载地址2.将下载好的unityPackagesdk导入到unity里​编辑 3.解析依赖到项目中

  5. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  6. [Vuforia]二.3D物体识别 - 2

    之前说过10之后的版本没有3dScan了,所以还是9.8的版本或者之前更早的版本。 3d物体扫描需要先下载扫描的APK进行扫面。首先要在手机上装一个扫描程序,扫描现实中的三维物体,然后上传高通官网,在下载成UnityPackage类型让Unity能够使用这个扫描程序可以从高通官网上进行下载,是一个安卓程序。点到Tools往下滑,找到VuforiaObjectScanner下载后解压数据线连接手机,将apk文件拷入手机安装然后刚才解压文件中的Media文件夹打开,两个PDF图打印第一张A4-ObjectScanningTarget.pdf,主要是用来辅助扫描的。好了,接下来就是扫描三维物体。将瓶

  7. python - Ruby 或 Python 的 3d 游戏引擎? - 2

    关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于StackOverflow来说是偏离主题的,因为它们往往会吸引自以为是的答案和垃圾邮件。相反,describetheproblem以及迄今为止为解决该问题所做的工作。关闭9年前。Improvethisquestion是否有适用于这些的3d游戏引擎?

  8. Unity Shader 学习笔记(5)Shader变体、Shader属性定义技巧、自定义材质面板 - 2

    写在之前Shader变体、Shader属性定义技巧、自定义材质面板,这三个知识点任何一个单拿出来都是一套知识体系,不能一概而论,本文章目的在于将学习和实际工作中遇见的问题进行总结,类似于网络笔记之用,方便后续回顾查看,如有以偏概全、不祥不尽之处,还望海涵。1、Shader变体先看一段代码......Properties{ [KeywordEnum(on,off)]USL_USE_COL("IsUseColorMixTex?",int)=0 [Toggle(IS_RED_ON)]_IsRed("IsRed?",int)=0}......//中间省略,后续会有完整代码 #pragmamulti_c

  9. 三分钟集成 TapTap 防沉迷 SDK(Unity 版) - 2

    三分钟集成Tap防沉迷SDK(Unity版)一、SDK介绍基于国家对上线所有游戏必须增加防沉迷功能的政策下,TapTap推出防沉迷SDK,供游戏开发者进行接入;允许未成年用户在周五、六、日以及法定节假日晚上8:00-9:00进行游戏,防沉谜时间段进入游戏会弹窗进行提示!开发环境要求:Unity2019.4或更高版本iOS10或更高版本Android5.0(APIlevel21)或更高版本🔗Unity集成Demo参考链接🔗UnityTapSDK功能体验APK下载链接二、集成前准备1.创建应用进入开发者后台,按照提示开始创建应用;2.开通服务在使用TDS实名认证和防沉迷服务之前,需要在上面创建的应

  10. 【Unity大气散射】GAMES104:3A中如何实现大气散射 - 2

    写在前面前两天学习并整理的大气散射基础知识:【Unity大气渲染】关于单次大气散射的理论知识,收获了很多,但不得不承认的是,这其实已经是最早的、90年代的非常古老的方法了,后来也出现了一些优化性的计算思路和方法。因此,我打算先不急着跟各种教程在Unity中实现大气散射,而是再花时间来看看最近的游戏是如何去实现大气渲染的:06.游戏中地形大气和云的渲染(下)|GAMES104-现代游戏引擎:从入门到实践接下来就跟着GAMES104讲地形大气和云渲染的部分学习并做简单的记录,涉及到之前没提到的Mie散射也只选择直接截图PPT的方式记录啦!毕竟对于做作品来说,之后实现出来才是重要的~当然,May佬的

随机推荐