Image & Raw Image的区别

一、面板参数

1Image类型:

         Source Image:图片资源(sprite)

         Color:颜色

         Material:材质

         Raycast Target :是否作为射线目标

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

 

2Raw Image类型

         Source Image :图片资源(Texture)

         Color :颜色

         Material:材质

         Raycast Target: 是否作为射线目标

         UV Rect :图片在矩形里的偏移和大小

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

         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和Raw Image区别和优势

1、区别:

         1.Sprite 只能用在 Image 组件上,做2D and UI;

         2.Sprite可以做九宫格;

         3.Sprite一般用在小图.可以打包Atlas(图集);

         4.Texture基于纹理寻址模式,不能打包Atlas;

         5. UI 需要修改UV Rect和用到寻址模式的,用Texture,否则用Sprite;

2、优势:

         1. Image可以九宫格拉伸。

         2. Raw Image可以UV Rect贴图的纹理寻址。

         3.一般用Image,除了地图寻址,滚动之类的,从贴图哪个位置开始显示。

 

三、Raw Image应用--飞行类游戏场景的滚动效果

         1.创建一个叫“sky”的Raw Image的UI节点。

         2.把Texture类型的贴纸拖进sky节点的Raw Image组件的Texture属性中。贴图必须是Texture类型的,不能是Sprite2D,Sprite2D会有空白。而且Wrap Mode必须是Repeat,不然会把最后一行的像素重复显示。

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

         4.创建一个叫sky的脚本,脚本代码如下,挂载到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属性中才会显示。

猜你喜欢

转载自www.cnblogs.com/yzm-code/p/9210226.html
今日推荐