游戏UI效果的UGUI仿制（一）实现守望先锋中的对话弹出效果

最新推荐文章于 2023-11-14 21:19:35 发布

没关系丶是爱情啊

最新推荐文章于 2023-11-14 21:19:35 发布

阅读量931

点赞数

文章标签： unity3d ugui

本文链接：https://blog.csdn.net/OvejeJ1/article/details/104143508

版权

本文介绍了如何使用Unity3D的UGUI系统仿制守望先锋中的对话弹出效果，详细分析了原版效果的特点，并通过实际操作展示了实现过程，包括设置背景、创建Prefab、应用遮罩、编写代码控制动态显示和消失，最后进行了效果对比。

摘要由CSDN通过智能技术生成

一、原版效果图

二、效果分析

1.算上图1被挤掉的消息，在视野中能看到的消息最多有4条。

2.每条消息由一个[name(hero)] message的格式组成，而且前半部分的颜色是浅蓝色。

3.黑色背景是没有渐变的。但是文字存在透明度渐变。

4.消失的对话是背景和语句同时变化的，直至消失

5.如果没有消息进入，一段时间后消息会自然消失

三、实际实现

首先像模像样的弄了张截图当作背景，用来催眠自己告诉自己这是我写的游戏(雾)

接下来制作一个Prefab用来预览效果，并且接下来还会用它实现。
大概就像这样

Van♂全一致好吧！
然后弄一个mask作为一个遮罩来顶住上下两个位置。
![](https://img-blog.csdnimg.cn/20200202161500197.png
有内味了！
静态效果已经实现，接下来可以写代码啦。

由于要在最下面一行的下面升起来一条消息，所以我们需要5个Y轴位置来定义实际只能看到的三条消息。同时为了节约资源，我们可以使用SetActive(true)和SetActive(false)(对象池)来避免频繁的Instantiate造成的资源浪费。

接下来写亿点小小的代码

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Message : MonoBehaviour
{
   
    //单例
    public static Message Instance;
    private void Awake()
    {
   
        Instance = this;
    }
    //Prefab
    [SerializeField] private GameObject Prefab;
    [SerializeField] private GameObject Mask;
    //对象池
    private List<GameObject> AvailablePool;
    private List<GameObject> UsedPool;
    //自定义内容
    [SerializeField] private float Speed;
    //定时器
    private float timer1;
    private float timer2;
    void Start()
    {
   
        AvailablePool = new List<GameObject>();
        UsedPool = new List<GameObject>();
        for (int i = 0; i < 5; i++)
        {
   
            AvailablePool.Add(Instantiate(Prefab,Mask.transform));
            AvailablePool[i].SetActive(false);
        }
    }

    void Update()
    {
   
        //如果一定时间内没有新消息，则挨个消失
        timer1 += Time.deltaTime;
        if (timer1 >= 2)
        {
   
            timer2 += Time.deltaTime;
            if (timer2 > 1)
            {
   
                timer2 = 0;
                if (UsedPool.