关于Unity中RawImage和Button

Posted 2020-09-18 杭者

1.贴图的Texture Type属性值

Texture：会把贴图的大小转换为最相近的2的n次方，比如400X1369会转换为512X1024。

Sprite 2D：是贴图的原始大小。

 

 

2.创建一个RawImage类型的UI节点，贴图属性是Texture，与Image是不一样的，Image是Sprite2D类型的。

RawImage比Image多一个Raw Image组件，里面的UV rect属性是比较特殊的。

UV rect的x,y的意思就是从贴图的哪个地方开始显示在Canvas中的。以左下角为(0,0)，右上角为(1,1)。

如果是x,y是(0,0.5)，表示从贴图的中部(0,0.5)的坐标开始往上和往右显示，超出的部分有两种模式来填补，受贴图的Wrap Mode属性影响，Clamp表示用最后的像素填充，另一种是Repeat表示从头开始贴，Sprite类型的只能Clamp。

 

UV rect的w,h的意思就是显示在Canvas中的大小，以左下角为(0,0)，右上角为(1,1)，如果是w,h是(0.5,0.5)，表示在Canvas中显示原来贴图的四分之一。

 

Image有Image的优势，Image可以九宫格拉伸。

RawImage有RawImage的优势，RawImage可以UV rect贴图的纹理寻址。

 

 

应用：飞行类游戏场景的滚动效果

1.创建一个叫做sky的RawImage的UI节点。

2.把Texture类型的贴纸拖进sky节点的RawImage组件的Teture属性中。贴图必须是Texture类型的，不能是Sprite2D，Sprite2D会有空白。

2.设置sky节点的Scale，x和y都设置为1.25，覆盖好Canvas。只有x,y相同才能不变形。

3.创建一个叫sky的脚本，挂载到sky节点下。

4.sky脚本代码

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class sky : MonoBehaviour {
    RawImage img;
    float speed = 0.1f;
    // Use this for initialization
    void Start () {
        this.img = this.GetComponent<RawImage>();
    }
    
    // Update is called once per frame
    void Update () {
        float s = this.speed * Time.deltaTime;
        Rect r = this.img.uvRect;
        r.y += s;
        this.img.uvRect = r;
    }
}

5.可以实现地图的滚动

 

 

创建完一个Canvas后需要做的事情

1.把Canvas节点的Canvas组件的Render Mode改为Screen Space-Overlay

2.把Canvas节点的Canvas Scaler组件的UI Scale Mode改为Scale With Screen Size

3.把Canvas节点的Canvas Scaler组件的Reference Resolution改为640X960

4.把Canvas节点的Canvas Scaler组件的Match拉到Width那一边

5.把Canvas节点的Canvas Scaler组件的Reference Pixels Per改为100

 

注意：Canvas节点的Canvas组件的Render Mode为Screen Space-Overlay时是绘制不出带材质球的UI节点，必须换成Screen Space-Camera，并且把Main Camera拉到Canvas节点的Canvas组件的Render Camera属性中才会显示。