ひとりでのアプリ開発 - fineの備忘録 -

ひとりでアプリ開発をするなかで起こったことや学んだことを書き溜めていきます

Unity - UI:Raw Image の使い方 -

初めに

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

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);

 引数は次の通りです.

第1引数 テクスチャの幅
第2引数 テクスチャの高さ
第3引数 テクスチャフォーマット
第4引数 ミップマップを作成するか

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

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 を使えばよいでしょう。