今見てくれてる人の数

ホンキートンク・スーダラブルース

ゆるコラム、oF、邦ロックや歌謡曲、小説の感想。ドラクエ、JavaScript、ドラゴンボール超など。湘南あたりを転がってる石コロのゆるゆる生きてく超雑多な軌跡です。

uGUI webサーバーから画像をダウンロードして表示

WWWクラスとRawImageをつかって
Webサーバー上にある豚くん画像を表示します!!!

12021927_673085316126630_10284087_n.jpg

 WWWクラスを知る

Webサーバーからデータをダウンロードすためには、WWWクラスを使用する。

string url = "http://www.hogehoge.com/hugahuga.png";
WWW www = new WWW(url);

こんな感じで

WWWクラスのコンストラクタに引数としてURLを渡すとWWWオブジェクトを生成
し、バックグラウンドでダウンロードを開始するそうです。

公式マニュアル WWWクラス
http://docs.unity3d.com/jp/current/ScriptReference/WWW.html

 実装します。

1.HierarchyからCreate→UI→Raw Image を追加。

12028922_673085342793294_202875955_n.jpg

 Raw Imageって何?普段のImageとなにが違うの?

こちらが詳しいっす

hiyotama.hatenablog.com

ImageとRaw Imageの違いは何かというと、ImageはSprite画像限定でしたが、Raw ImageはSprite限定ということはなく、Texture画像も使える。
その代わり、Imageに比べて機能が制限されている。(Image Typeが選択できないとか)

公式マニュアル Raw Image

docs.unity3d.com

2, Raw Imageに下記スクリプトをアタッチして実行!

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class ImageDownloder : MonoBehaviour {


    IEnumerator Start(){

        // wwwクラスのコンストラクタに画像URLを指定
        string url = "http://www.wanpug.com/illust/illust3038.png";
        WWW www = new WWW(url);

        // 画像ダウンロード完了を待機
        yield return www;

        // webサーバから取得した画像をRaw Imagで表示する
        RawImage rawImage = GetComponent<RawImage>();
        rawImage.texture = www.textureNonReadable;

        //ピクセルサイズ等倍に
        rawImage.SetNativeSize();
    }

}

豚くん表示された!(最初の画像)

f:id:sudara_bluse:20171104135516j:plain

やったね!

 

f:id:sudara_bluse:20171104135327p:plain