LoginSignup
30

More than 5 years have passed since last update.

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

Posted at

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

12021927_673085316126630_10284087_n.jpg

WWWクラスを知る

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

hoge
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となにが違うの?

こちらが詳しいっす
http://hiyotama.hatenablog.com/entry/2015/07/02/090000

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

公式マニュアル Raw Image
http://docs.unity3d.com/ja/current/Manual/script-RawImage.html

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

hoge

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

}

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


シルバーウィークは
これといって浮いた予定がない例外なので
Unity道場しようと思います。。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30