UIGUソースコード解析16：RawImage

ソースコード 16: RawImage

  /// <summary>
    /// Displays a Texture2D for the UI System.
    /// </summary>
    /// <remarks>
    /// If you don't have or don't wish to create an atlas, you can simply use this script to draw a texture.
    /// Keep in mind though that this will create an extra draw call with each RawImage present, so it's
    /// best to use it only for backgrounds or temporary visible graphics.
    /// </remarks>
[RequireComponent(typeof(CanvasRenderer))]
[AddComponentMenu("UI/Raw Image", 12)]
public class RawImage : MaskableGraphic
{
    [FormerlySerializedAs("m_Tex")]
    [SerializeField] Texture m_Texture;
    [SerializeField] Rect m_UVRect = new Rect(0f, 0f, 1f, 1f);
    
    ...
}

コードを理解する最も早い方法は、UGUI ソースコードにすでに記載されているコメントを読むことです。

RawImage は、UI システムで Texture2D テクスチャを表示するために使用されます

しかし、それとイメージの違いは何でしょうか？以下のコメントでは、アトラスを作成したくない場合は、このコンポーネントを使用してテクスチャを描画できるが、RawImage を使用すると追加の DrawCall が必要になるため、その半分は背景または一時的に表示されるパターンにのみ使用されるとも述べています。

比較的に、RawImage は実装が比較的簡単です。

表示にはメインテクスチャが必要です。コンポーネントにテクスチャが指定されていない場合は、マテリアル内のメインテクスチャが返されます。

        /// <summary>
        /// Returns the texture used to draw this Graphic.
        /// </summary>
        public override Texture mainTexture
        {
            get
            {
                if (m_Texture == null)
                {
                    if (material != null && material.mainTexture != null)
                    {
                        return material.mainTexture;
                    }
                    return s_WhiteTexture;
                }

                return m_Texture;
            }
        }

    /// <summary>
    /// UV rectangle used by the texture.
    /// </summary>
    public Rect uvRect
    {
        get
        {
            return m_UVRect;
        }
        set
        {
            if (m_UVRect == value)
                return;
            m_UVRect = value;
            SetVerticesDirty();
        }
    }

VRect は RawImage の表示範囲を設定するためによく使用されます。Rect 内のコンテンツのみを表示します

    public override void SetNativeSize()
    {
        Texture tex = mainTexture;
        if (tex != null)
        {
            int w = Mathf.RoundToInt(tex.width * uvRect.width);
            int h = Mathf.RoundToInt(tex.height * uvRect.height);
            rectTransform.anchorMax = rectTransform.anchorMin;
            rectTransform.sizeDelta = new Vector2(w, h);
        }
    }

まず、テクスチャの幅と高さ、UVRect の表示範囲に基づいて、RawImage の必要な幅と高さを決定します。次に、rectTransform のアンカーポイントを均等にし、中央のアンカーポイントの下で sizeDelta を設定することは、rectTransform の幅と高さを設定することになります。

    protected override void OnPopulateMesh(VertexHelper vh)
    {
        Texture tex = mainTexture;
        vh.Clear();
        if (tex != null)
        {
            var r = GetPixelAdjustedRect();
            var v = new Vector4(r.x, r.y, r.x + r.width, r.y + r.height);
            var scaleX = tex.width * tex.texelSize.x;
            var scaleY = tex.height * tex.texelSize.y;
            {
                var color32 = color;
                vh.AddVert(new Vector3(v.x, v.y), color32, new Vector2(m_UVRect.xMin * scaleX, m_UVRect.yMin * scaleY));
                vh.AddVert(new Vector3(v.x, v.w), color32, new Vector2(m_UVRect.xMin * scaleX, m_UVRect.yMax * scaleY));
                vh.AddVert(new Vector3(v.z, v.w), color32, new Vector2(m_UVRect.xMax * scaleX, m_UVRect.yMax * scaleY));
                vh.AddVert(new Vector3(v.z, v.y), color32, new Vector2(m_UVRect.xMax * scaleX, m_UVRect.yMin * scaleY));

                vh.AddTriangle(0, 1, 2);
                vh.AddTriangle(2, 3, 0);
            }
        }
    }

これは、mseh データを CanvasRenderer に後続適用するために、Graphic で OnPopulateMesh を書き直したものです。コードがさらに 2 行あることを除けば、基本的に Graphic と同じです。

            var scaleX = tex.width * tex.texelSize.x;
            var scaleY = tex.height * tex.texelSize.y;

この計算の意味が分からないのですが、ご存知の方は下記にメッセージを残してお答えください。

UIGUソースコード解析16：RawImage

ソースコード 16: RawImage

おすすめ