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中例子类似的效果。

效果展示

本人的“3D游戏编程与设计”课程作业合集,请访问:
https://www.yizuodi.cn/category/3DGame/

声明:一座堤的博客|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - Unity3dUI系统 UI 效果制作


为者常成 行者常至