Unity3dUI系统 UI 效果制作

作业要求

以下作业五选一：
1、血条（Health Bar）的预制设计。
具体要求如下
• 使用 IMGUI 和 UGUI 实现
• 使用 UGUI，血条是游戏对象的一个子元素，任何时候需要面对主摄像机
• 分析两种实现的优缺点
• 给出预制的使用方法
2、 UI 效果制作（仅需要实现以下效果之一）
•进入 NGUI 官方网站，使用 UGUI 实现以下效果
• Inventory 背包系统
• Quest Log 公告牌
• Scroll View 选择板
•以上例子需要使用 Unity web player，仅支持以下操作系统与浏览器，参见官方下载
• Windows 版 IE11
• Mac OS X 10.7 Safari
• 出现界面需要等待较长时间，打开页面让它慢慢加载
3、 DOTween 仿写
如果你觉得 UI 不是你的菜，喜欢复杂的设计与代码
• 研究 DOTween 网站 http://dotween.demigiant.com/getstarted.php 网页，
它在 Specific settings 中 transform.DoMove 返回 Tween 对象。请实现该对象，实现对动作的持续管理。
4、编写一个组件，提供常用窗口服务
修改 Game Jam Menu Template 的脚本
• 如 ShowPanels 脚本
具体要求是实现一个方法
• 支持某个面板窗口独立显示
• 支持某个面板窗口模态，其他面板窗口显示在后面
• 支持几个窗口同时显示，仅一个窗口是活动窗口
5、如果你喜欢凭空构思场景，请自制有趣的 UI 场景
• 例如：“几个小动物（3D）开会，语句从每个动物头上飘出，当达到一个大小，会出现清晰的文字！如果文字较多，会自动滚动”

我们选择第二个选题——UI 效果制作 UGUI实现Quest Log公告牌效果。
NGUI提供的示例如下图：

而UGUI是由unity官方提供的UI工具套件。
参考它们的区别：https://www.jianshu.com/p/5891e28aa766

场景布置

我们可以通过创建UI-面板创建一个panel（面板），其根目录为canvas（画布）。
然后我们在panel中创建一个文本，作为公告栏的标题；在panel中添加一个ScollView（滚动视图）作为公告栏的主要内容部分；在panel中添加一个button（按钮）作为公告栏“关闭”按钮。略作调整后效果如图（这里我们使用了2D Casual UI资源包）：

滚动视图的完善

上面我们的UI界面中，只有滚动视图，里面还没有详细的内容，我们继续为其添加详细的内容。我们先在Viewport的Content中加入组件“Vertical Layout Group”，设置勾选“控制子对象大小-宽度”和“子力拓展-宽度”，其他不勾选。
然后我们在Content下创建三个Button（命名为Button1，Button2，Button3）和三个Text（命名为Text1，Text2，Text3）。在Button的检查器中，我们将导航设置为None。

我们需要为按钮加上脚本，使其被点击时，对应的文本展示/不展示。脚本extend内容如下：

using UnityEngine.UI;

public class extend : MonoBehaviour
{
    public Text text;  // 控制的Text对象
    private int frame = 20;  // 动画帧数

    void Start()
    {
        Button btn = this.gameObject.GetComponent<Button>();  // 获取Button对象
        btn.onClick.AddListener(TaskOnClick);  // 添加点击事件
        text.gameObject.SetActive(false);  // 初始化时隐藏Text
    }
    
    IEnumerator FoldAndUnfold(bool isFold)
    {
        Vector2 fold = new Vector2(0, 120);  // 折叠状态
        Vector2 unfold = new Vector2(-90, 0);  // 展开状态
        Vector2 target = isFold ? fold : unfold;
        for (int i = 0; i < frame; i++)  // 逐帧执行动画
        {
            target.x += (isFold ? -90f : 90f) / frame;  // 旋转角度逐帧增加或减少
            target.y += (isFold ? -120f : 120f) / frame;  // Text高度逐帧增加或减少
            text.transform.rotation = Quaternion.Euler(target.x, 0, 0);  // 设置旋转角度
            text.rectTransform.sizeDelta = new Vector2(text.rectTransform.sizeDelta.x, target.y);  // 设置Text高度
            if (i == 0 || i == frame - 1)  // 第一帧和最后一帧控制Text的显示状态
            {
                if(isFold){
                    text.gameObject.SetActive(false);
                }
                else{
                    text.gameObject.SetActive(true);
                }
            }
            yield return null;
        }
    }

    void TaskOnClick()
    {
        if (text.gameObject.activeSelf)  // 判断Text是否显示
        {
            StartCoroutine(FoldAndUnfold(true));  // 执行折叠动画
        }
        else
        {
            StartCoroutine(FoldAndUnfold(false));  // 执行展开动画
        }
    }
}

这样我们就成功实现了与NGUI中例子类似的效果。