UI 效果制作-Scroll View 选择板

以下作业五选一：

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）开会，语句从每个动物头上飘出，当达到一个大小，会出现清晰的文字！如果文字较多，会自动滚动”

我选择第二项，制作选择板

具体流程如下：
1.创建GameObject->UI->Convas

2.创建GameObject->UI->image,将image移入Convas，使其成为Convas子对象，需要调整相对于其他子对象的位置，使image置于最底层，也要调整image大小。

然后将准备好的图像（建议为jpg格式）拉入资源，要将图片的Texture Type类型改为Sprite（2D and UI）才能作为背景图片放到UI里（具体操作：Inspector -> Texture Type -> Sprite（2D and UI））

注意这里image和scoll view的顺序会影响显示

3.添加三个button和两个text组件，操作方法：GameObject->UI->Button和GameObject->UI->Text

3.1然后将三个Button移入Convas的子对象Scoll View的子对象Viewport的子对象Content，作为Content的子对象，然后将两个Text分别作为第一个和第二个的子对象。

3.2注意也要在Convas的子对象Scoll View的子对象Viewport下增加image组件，移入背景图方式同上。

最后结构展开如下：

4.调整按钮大小以及位置，还有文本框Text的大小位置以及内容。按钮的背景图也是可以调整的，同上。最后做出来的效果如下：
5.接下来我们需要添加按钮的交互逻辑了：
前面两个按钮的作用是显示一些文字，后面一个按钮的作用是退出。
因此前面两个按钮共用一个脚本，字需要传入不同的文本就行。因此需要将之前创建的两个文本分别挂载到对应脚本。这两个按钮使用的脚本如下

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

public class Board : MonoBehaviour
{

    private Button btn;
    public Text text;
    private float text_height;
    private int frame = 30;


    void Start()
    {
        btn = this.gameObject.GetComponent<Button>();
        btn.onClick.AddListener(OnClick);
        text_height = text.rectTransform.sizeDelta.y;
    }

    void OnClick()
    {
        if (text.gameObject.activeSelf)
        {
            StartCoroutine(rotateIn());
        }
        else
        {
            StartCoroutine(rotateOut());
        }

    }

    IEnumerator rotateIn()
    {
        float rotatex = 0;
       
        float height = text_height;
        for (int i = 0; i < frame; i++)
        {
            rotatex -= 90f / frame;
            yield return null;
        }
        text.gameObject.SetActive(false);
    }

    IEnumerator rotateOut()
    {
        float rotatex = -90;
        float xy = 0;
        text.gameObject.SetActive(true);
        for (int i = 0; i < frame; i++)
        {
            rotatex += 90f / frame;
            xy += text_height / frame;
            text.transform.rotation = Quaternion.Euler(rotatex, 0, 0);
            text.rectTransform.sizeDelta = new Vector2(text.rectTransform.sizeDelta.x, xy);
            yield return null;
        }
        
    }

}

退出按钮使用的脚本如下：

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class Quit : MonoBehaviour
{
    private Button btn;

    private void Start()
    {
        btn = gameObject.GetComponent<Button>();
        btn.onClick.AddListener(QuitManager);
    }
    public void QuitManager()
    {
        #if UNITY_EDITOR
        UnityEditor.EditorApplication.isPlaying = false;
        #else
		Application.Quit();
        #endif
    }
}

效果演示
源码(请直接使用我做好的场景new.unity)