Unity - UI：Raw Image の使い方 -

初めに

　UI の一つである Raw Image について、Image との違いや使い方をまとめます。

Index

RawImage とは

　RawImage では画像（Texture2D）を表示できる UI の機能です。

docs.unity3d.com

Image との違い

• Image は Sprite のみ表示できたが、Raw Image は Sprite だけでなく Texture の画像も扱える

　Texture には Sprite 以外の形式もあります。他の形式でも扱うことができます。

• Image は Image Typeを使うことができるが、Raw Image ではできない

　Raw Image では Image Type を使うことができません。Image Type の説明は、下のリンク先をご覧ください。

fineworks-fine.hatenablog.com

• Raw Image では、ゲーム中に作成、取得した画像を表示できる

　Texture クラスはプログラム中で作成、変更がしやすい（らしい）

RawImage の使い方

　ネットワークからテクスチャを取得し、生成する方法をまとめます。今回はフリー素材の画像を表示させてみます。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;  //RawImage は UI のため追加

public class RawImageScript : MonoBehaviour
{
    [SerializeField]
    RawImage img;

    void Start()
    {
      // Texture クラスの子クラスを使ってテクスチャを作成
     //引数は、テクスチャの幅、高さ、テクスチャフォーマット、ミップマップを作成するか
      Texture2D tex = new Texture2D (512, 512, TextureFormat.ARGB32, false);

      img.texture = tex;
      StartCoroutine("GetNetworkImage");
    }

    IEnumerator GetNetworkImage() {

    // ネットワークから取得した画像をRawImageに表示する

    string url = "";  //取得したい画像の url を書く
    WWW www = new WWW(url);
    yield return www;

    img.texture = www.textureNonReadable;
  }
}

（実行）

Texture2D について

Texture2D tex = new Texture2D (512, 512, TextureFormat.ARGB32, false);

　引数は次の通りです.

第１引数	テクスチャの幅
第２引数	テクスチャの高さ
第３引数	テクスチャフォーマット
第４引数	ミップマップを作成するか

　テクスチャの幅、高さについては画面サイズに合わせて決めましょう。また、２のべき乗になるようにしましょう。
　テクスチャフォーマット、ミットマップについては下のリンク先に丁寧に書いてくださっています。ご覧ください。

goisagi-517.hatenablog.com

www について

　www クラスを用いて web 通信を行うことができます。

IEnumerator GetNetworkImage() {

    // ネットワークから取得した画像をRawImageに表示する

    string url = "";  //取得したい画像の url を書く
    WWW www = new WWW(url);
    yield return www;

    img.texture = www.textureNonReadable;
 }

　関数ではなく、コルーチンを使っています。www クラスを使い、url を検索し、return で検索結果を返しています。また、www.textureNonReadable はテクスチャをダウンロード・もしくはロードし、そのバイナリをテクスチャとして読み込むといった機能になります。

docs.unity3d.com

最後に

　Raw Image についてまとめました。普段は Image を使い、ネットワークからテクスチャを取得したり、テクスチャを変更したりしない場合は Raw Image を使えばよいでしょう。