Unity 3D UGUI游戏界面 基础元素

Unity 4.6 推出了全新的UI系统，称为UGUI。

配合UI还提供了强大的EventSystem 事件系统来管理UI元素。

从Unity 2017开始还引入了图集的概念。

//--Text

在 Hierarchy 中创建文本组件。 Create → UI →Text 。

Rect Transform：用于控制UI物体的基本属性，Canvas Renderer：画板UI渲染器，必备且不可编辑。

• Text : 要显示的文本。
• Font : 字体（TTF格式）可以用 FontCreator 软件来精简一下字体库。
• FontStyle : 字体风格（粗体，斜体，正常和粗体加斜体）。
• FontSize : 字体大小。
• LineSpacing : 行间距。
• RichText : 富文本（这里的富文本的意思是在Text输入的内容里面用Html的一些字体修饰符来改变字体。例如<b>字体</b>意思是加粗。color为颜色，fontsize为大小等。）
• Alignment ： 对齐方式（第一行里面的是段落对齐，第二行是靠顶中间或者靠底）。
• Align By Geometry ： 几何对齐（使用区段的字形几何执行水平对齐，可以导致更好的拟合左和右对齐,但可能会导致不正确的定位）。
• Horizontal Overflow ： 水平溢出（Wrap：文本将自动换行，当达到水平边界，Overflow：文本可以超出水平边界，继续显示）。
• Vertical Overflow ： 垂直溢出（Truncate：文本不显示超出垂直边界的部分，Overflow：文本可以超出垂直边界，继续显示）。
• Best Fit ： 最佳适应（Min Size：最小大小Max Size：最大大小）就是让当前输入的文字默认的变为适应当前的输入框。
• Color ：字体颜色，不会影响到富文本颜色。
• Material ：材质球，一般不用。
• Raycast Target ： 是否作为射线投射目标，关闭之后忽略UGUI的射线检测。

Text 组件提供了横向 纵向自动换行的功能。

Raycast Target ，如果UI元素不需要点击事件，一定不要勾选。因为UGUI的事件系统会遍历所有带有Raycast Target 的组件，这会带来一些不必要的开销。

UGUI默认材质无法修改，可以重写它，即拖入新的材质。

//--描边和阴影

在Text游戏对象上添加Outline 和 Shadow ，即表示支持文本的描边和阴影。可以设置它们的颜色以及距离。

描边的原理就是在原有Text组件的基础上在上 下 左 右 各多画了一遍，所以它的效率是很低的。

阴影会比描边好很多，因为它只需要多画一遍，所以能用阴影就不要用描边。

//--动态字体

有时间的同学可以看一下这个：Unity3D中的动态字体和静态字体

UGUI动态字体的原理是根据传入的字体以及字体的大小生成一张纹理，最终将纹理上的字体显示出来。

这就带来一个问题：相同字体只是字体大小不同会在纹理中生成多份（此处两个text所以两份）。

所以不太建议使用动态字体。（除了聊天和起名等）

//--字体花屏

UGUI的动态字体会动态生成材质，它开始是256X256（像素）然后根据使用字体的情况慢慢扩大，直到4096X4096（像素）。

当文字太多不够放的时候，会触发UGUI内部重建字体贴图命令，接着就可能造成文字花屏。若要解决这个问题，就要监听它内部重建的事件，然后整理刷新一下当前场景的所有字体即可。

using UnityEngine;
using UnityEngine.UI;

public class ZiTiHuaPingMyTools : MonoBehaviour
{
    private Font m_NeedRebuildFont = null;

    private void Start()
    {
        Font.textureRebuilt += (Font font) =>
        {
            m_NeedRebuildFont = font;
        };
    }

    private void Update()
    {
        if (m_NeedRebuildFont)
        {
            Text[] texts = FindObjectsOfType<Text>();
            if (texts != null)
            {
                foreach (Text text in texts)
                {
                    if (text.font == m_NeedRebuildFont)
                    {
                        text.FontTextureChanged();
                    }
                }
            }
            m_NeedRebuildFont = null;
        }
    }
}

//--Image组件

导入 Unity 内的图片资源，如果是用于 UI 显示的，需要手动将这些图片的类型修改为“Sprite(2D and UI)。

Source Image ：设置用于显示的图片。
Color ：设置用于显示的颜色。

Material : 渲染图像的材质。

Raycast Target : 能否接收到射线检测，不需要点击事件不勾选。

Preserve Aspect (Simple 和 Filled Image Types 时有效) ： 图像的高度和宽度保持原始比例, 勾选后图片会等比例进行缩放，不会变形。

Image Type : 图片显示方式。

1 简单Simple

2 九宫格/片Sliced

注意：默认的图片是不支持该模式的，需要编辑图片，设置图片的九宫边框。
设置边框的步骤：
　　①Project面板选中图片资源文件->属性区域点击“Sprite Editor”;
　　②在编辑面板，设置图片的 Border 边框数值；
　　③设置完毕后，不要忘记点击 Apply 保存操作。
设置完毕边框后，对图片进行横向或者纵向拉伸，这个时候图片就会以图片的中心区域进行拉伸，不会拉伸图片的边框效果。

Fill Center 勾选后九宫格中间的区域会显示，不勾选不显示。

3 平铺Tiled

开发中很少用到，如果设置过九宫格，则只会平铺中间的区域。

4 填充Filled
Fill Method 指定图像在动画中填充空间的方式
选项是Horizontal水平方向, Vertical垂直方向、 Radial90度、 Radial180度 Radial360度
Fill Origin 填充的起点。依各选项有所不同
选项是各种组合的底部、顶部、左，右，取决于哪个 Fill方法是选定的。
Fill Amount 
当前填充的图像（范围从 0.0到 1.0）的分数。
Clockwise (Filled Image Type only)填充应按顺时针方向。

Set Native Size ： 按钮图像框的尺寸大小设置为原始像素的纹理。

//--Raw Image组件

Image 组件只能显示 Sprite，Raw Image 组件既可以显示任意Texture 也可以使用 Sprite ，不过它还是以 Texture 方式显示的。

Image 组件使用Sprite时，可以使用Atlas来合并批次，但是Raw Image 组件缺不能，每个Raw Image 就占一次 DrawCall 。

有时候不得不使用Raw Image ，比如 Render Texture ，需要将摄像机渲染到纹理中，就必须用它。

但是它无法合并DrawCall ，所以不建议使用。

//--Button组件

Interactable ： 是否禁用按钮，如果禁用，按钮界面将会产生Dissable的效果。

Transition ： 可以设置按钮再不同状态下的表现形式，有None、Color Tint、Sprite Swap、Animation四种选项。

• None--没有任何效果，点击按钮不会产生界面上的变化。
• Color Tint--颜色过度模式。

Target Graphic--图片组件

Normal Color--正常按钮颜色

Highlighted Color--高亮颜色，鼠标经过时会显示的颜色

Pressd Color--按下的颜色

Disable Color--禁用时的颜色

Color Multiplier--颜色切换系数，颜色切换速度，越大则颜色在几种状态间变化速度越快。

Fade Duration--衰落时间，颜色变化的延时时间，越大则变化越不明显

• Sprite Swap--图片切换模式。
• Animation : 动画过渡。

Navigation : 导航模式

• None（关闭）：关闭导航。
• Automatic（自动导航）：自动识别并导航到下一个控件。
• Horizontal（水平导航）：水平方向导航到下一个控件。
• Vertical（垂直导航）：垂直方向导航到下一个控件。
• Explicit（指定导航）：特别指定在按下特定方向键时从此按钮导航到哪一个控件

Visualize：可视化，把按键能够导航到的路径可视化，高亮的黄色箭头为当前按钮可导航到的目标。

OnClick事件列表 ：可以拖拽物体或脚本，指定方法。（不建议）

建议用代码赋值方式：

using UnityEngine;
using UnityEngine.UI;

public class BindButtonOnClickEvenetMyTools : MonoBehaviour
{
    public Button button;

    private void Start()
    {
        button.onClick.AddListener(OnClickMyButton);
    }

    private void OnClickMyButton()
    {
        Debug.Log("OnClickMyButton");
    }
}

//--Toggle组件

 和Button 差不多。

using UnityEngine;
using UnityEngine.UI;

public class BingToggleEventMyTools : MonoBehaviour
{
    public Toggle toggle;

    private void Start()
    {
        toggle.onValueChanged.AddListener(OnClickMyToggle);
    }

    private void OnClickMyToggle(bool isOn)
    {
        Debug.Log("OnClickMyToggle + " + isOn.ToString());
    }
}

多个Toggle 可以设置同一个 Toggle Group 这样这几个Toogle 就只能有一个是选中状态了。

//--Slider 组件

using UnityEngine;
using UnityEngine.UI;

public class BindSliderEventMyTools : MonoBehaviour
{
    public Slider myslider;

    private void Start()
    {
        //--设置取值范围最小值/最大值
        myslider.minValue = 0;
        myslider.maxValue = 100;

        myslider.onValueChanged.AddListener(OnMySliderValueChange);
    }

    private void OnMySliderValueChange(float value)
    {
        Debug.Log("value :" + value);
    }
}

//--Scrollbar 和 ScrollView 组件

参见这里