Ugui使用方式的初步理解

1 Canvas 幕布

1. Screen Space - Overlay

这种渲染模式表示 Canvas 下的所有的 UI 控件永远位于屏幕的前面 , 不管有没有相机 , UI元素永远在屏幕最前面 ，主要是2D效果。类似手机膜贴在手机屏幕的最上面，若是屏幕尺寸或屏幕分辨率发生变化，Canvas也会

 2. Screen Space - Camera

这种渲染模式 Canvas 和 摄像机之间有一定的距离 , 可以在摄像机和 Canvas 之间播放一些粒子特效，主要是3D效果。利用这种渲染模式时需要设定一个摄像机并将其绑定到Canvas组件下的Rander Camera处，改变Camera则UI元素的渲染效果也会发生变化。

自动和当前屏幕尺寸相适应，这也就很好的解决了屏幕自适应问题。

3. World Space

这种模式下 Canvas 就和普通的 3D 物体一样了 , 可以控制它的大小,旋转,缩放等 。这种渲染模式使得UI元素和3D世界中的物体产生遮挡效果。 Filed一般用来做血条。\

 Canvas Scaler 中 Scale  With Screen Size游戏界面自适应屏幕大小。

2 Text

Text可以显示文本

Font为文本字体

FontSize 文字字体样式    

LineSpace 行间距

Alignment 对齐方式

Color 字体颜色

Honizontal 水平溢出

Vertical 垂直溢出

RichText 富文本

<Colr=blue>text</color> <size=10>text</size> <b>text</b> <i>text</i>

Best Fit 最佳匹配方式

color 颜色

size 大小

b 加粗

i 倾斜

锚点

负责固定在屏幕的各个方向，按住shift键可以选择全屏又或者是任意一个你想定在屏幕的位置

3 Panel 面板

Panel 控件又叫面板，该面板实际上就是一个容器，在其上可放置其他 UI 控件。

当移动该面板时，放在其中的 UI 控件就会跟随移动，这样可以更加合理与方便地移动与处理一组控件。

当面板被创建时，会默认包含一个 image（Script 组件）。

Source Image 用来设置面板的图像。

Color 用来改变面板的颜色。

4 Image

Source Image（图像源）：纹理格式为Sprite（2D and UI）的图片资源（导入图片后选择Texture Type为Sprite（2D and UI））。

Color（颜色）：图片叠加的颜色。

Material（材质）：图片叠加的材质。

Raycast Target（射线投射目标）：是否作为射线投射目标，关闭之后忽略UGUI的射线检测

Image Type（图片显示类型）：

Simple（基本的）：图片整张全显示，不裁切，不叠加，根据边框大小会有拉伸。

Preserve Aspect（锁定比例）：针对Simple模式，勾选之后，无论图片的外形放大还是缩小，都会一直保持初始的长宽比例。

Image Type（图片显示类型）：

 Sliced（切片的）：图片切片显示，在Project页面选中图片，切换为Sprite（2D and UI）模式后，点击Sprite Editor进入图片裁切模式，将图片裁切为上图的形状，使用Sliced模式后，根据图片边框拉伸，图片的四个角会保持原状，而1和4部分会随着图片的横向拉伸而拉伸，2和3部分会随着图片的纵向拉伸而拉伸，图片的中间部分会拉伸5进行填充。

Fill Center（填充中心）：勾选后，5显示，反之，5不可见。

Image Type（图片显示类型）：

 Tiled（平铺的）：若图片已经过裁切，则使用Tiled模式后，根据图片边框拉伸，图片的四个角会保持原状，而1和4部分会随着图片的横向拉伸而拉伸，2和3部分会随着图片的纵向拉伸而拉伸，图片的中间部分会用5进行平铺填充。若图片未裁切，则使用Tiled模式后，根据图片边框拉伸，图片保持原大小不做变化，只是用自身平铺填充。

Fill Center（填充中心）：（已裁切的图像源才有此选项）勾选后，5显示，反之，5不可见

Image Type（图片显示类型）：

Filled（填充的）：根据填充方式、填充起点、填充比例决定图片显示哪一部分。

Fill Method（填充方式）：分为水平、垂直、90度圆、180度圆、360度圆。

Fill Origin（填充起点）：根据填充方式不同有所变化。

Fill Amount（填充比例）：0是完全不显示，1是完全显示。

。

案例：进度条

Image img;

    Text txt;

    float timer = 0f;

    void Start()

    {

        img = GetComponent<Image>();

        txt = img.GetComponentInChildren<Text>();

        img.fillAmount = 0;

    }

    void Update()

    {

        timer += Time.deltaTime;

        float per = timer / 100;

        per=per>=0.1f?0.1f:per;

        img.fillAmount = per * 10;

        txt.text = (int)(per * 100) + "%";

    }

5 Raw Image

Raw Image(Scripts)组件各属性作用。

Texture 指定Raw Iamge（Scripts）组件要显示的图片。

Raw Image 组件中显示的图片可以是任何类型，不单单是sprite类型。

Material 设置材质，

UV Rect 调节图片显示的位置与图片自身的大小。

RawImage和Image的区别

Image控件用于显示Sprite类型的图片

Raw Image控件用于显示Texture类型的图片，包含Iamge所支持的格式

案例 滚动背景

RawImage raw;

    float speed = 0.1f;

    void Start()

    {

        raw = GetComponent<RawImage>();

    }

    void Update()

    {

        float a = Time.deltaTime*speed;

        Rect r= raw.uvRect;

        r.x += a;

        raw.uvRect = r;

    }

6 Input Field‘

一般用于输入账号密码

Text Component（文本组件）此输入域的文本显示组件，任何带有Text组件的物体

Text 此输入域的初始值

Character Limit(字符数字限制)：限定此输入域最大输入字符数，0为不限制。

Conter Type(内容类型)限定输入此处的内容类型，包括数字，密码等，常用类型为：

Standard（标准类型）什么字符都能输入，只是当前字体支持的。

Integer Num （整数类型） 只能输入一个整数。

Decimal Num（十进制数）能输入整数或小数

Alpha Numeric  能输入整数或小数。

剩下下次再更。