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

本豚利

已于 2022-04-26 14:53:35 修改

阅读量5.6k

点赞数 7

分类专栏： unity3D C# 文章标签：游戏小白 3d unity

于 2022-04-18 18:30:50 首次发布

本文链接：https://blog.csdn.net/LicalKi/article/details/124191665

版权

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

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

界面UI搭建

创建一个canvas

并且设置为屏幕覆盖的。在CanvasScaler里设置UI缩放模式为屏幕大小缩放，参考分辨率暂时设为750*1334。
创建一个canvas
创建一个ScrollView滚动区域在底部
布局调整如下： ScrollView布局
然后删掉横竖方向的滚动条。
删掉滚动条
选中Viewport节点，修改它的布局，并去掉原来默认的Mask，换成矩形遮罩Rect Mask 2D，暂时设置softness为30，后续可以情况修改。

Content也修改一下布局，然后添加垂直组件Vertival Layout Group，子级对齐为MiddleLeft，居中左对齐。
再添加一个适配高度的组件Content Size Fitter，垂直方向设置为：Preferred Size，这样在content里添加子节点的话其本身也可以改变自身大小。
Content设置
创建单条弹幕的UI样式

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

调整BarrageItem的layout组件的配置：调整后样式效果
点击BarrageItem，ctrl+D复制多一个BarrageItem，看看列表UI看起来是怎么样的：
调整前列表UI效果
非常紧凑且顶着外容器的左侧，所以需要对它们的父节点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)];
    }
}

二、弹幕数据

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

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

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

按照上面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

最低0.47元/天解锁文章