Unity WWWformでの画像ダウンロード→表示までのタイムラグの減らし方。

Question

初めましてUnityを利用してiOS用アプリの開発をしているものです。
質問させていただきます。

アプリ内でアバター画像を表示させる機能を開発しております。
その際、サーバーに画像を置いておき、ダウンロード⇨rawImageに画像データ入れて表示とするという手法を使用しております。画像は３０Kbyte程度のPNGファイルです。
問題は表示までにタイムラグがあることです。
この解消を図りたいと思っているのですが、画像もそこまで重くないと考えているので、画像の軽量化以外に良い方法をご存知でしたら教えていただけませんでしょうか？

どうぞよろしくお願いいたします。

Comments

[sakura_hana]

「ダウンロードが遅い」「表示が遅い」「全く別の要因が影響している」の３つの可能性が考えられます。新規プロジェクトに該当スクリプトだけをインポートし、「ダウンロード」と「表示」を分けて時間計測し、画像の大きさ（ピクセル数）や容量（Kbyte）を変えると所用時間がどう変化するかを確認してみてください。
また、解決するかは分かりませんが、現状のコードを提示してもらえるとアドバイス出来るかもしれません。

[退会済みユーザー]

可能性の提示をしてくださり誠にありがとうございました。
是非とも参考にさせていただきます。

Answer 1

ダウンロード完了までの速度をあげるには、まずサーバーの処理能力に問題無いか確認いただい方が良いかと思います。Chromeで簡単にできるのでその方法を共有いたします。

[サーバー] 応答速度とダウンロード時間を計測する

今回のようなシンプルな画像を取得表示する上で影響するのがTTFB(Time To First Byte)とダウンロード速度と端末性能です。端末性能はどこまでをターゲットにするかで変わるので、それ以外の2点をChromeを使って計測する方法を共有します。

TTFB(Time To First Byte)とは？
最初の1バイドをダウンロードし始めるまでの時間です。

1. Chromeで画像を表示
テストではteratailのロゴを表示します。
https://teratail-v2.storage.googleapis.com/assets/img/common/ttlHeader.png?1552970069537517

2. デベロッパーツールを開く
表示 > 開発/管理 > デベロッパーツール

3. Networkのタブをクリック

4. スーパーリロードでページを更新する
ブラウザには2回目以降の表示を高速にするためキャッシュというダウンロードしたものを保存/表示する機能があります。そのキャッシュを無効にしてロードするのがスーパーリロードです。

#5. 結果
計 55.08ms
TTFB 54.42ms
画像のダウンロードから完了までの時間 0.66ms

TTFBが若干遅いですが一般的な速度です。
この数値からかけ離れていなければサーバーには問題無いと判断して良いです。
ある程度の環境をカバーする予定でしたら上記スコアの3倍は想定していた方が良いとは思います。

[Unity] 表示速度を計測する

こちらに関してはどういうコードか分からないのでご自分で計測してみて下さい。

よくある問題がFPSです。ダウンロード時間はFPSに依存します。FPSが高いほどダウンロード速度が上がるのでダウンロード中のみ上げたりすることもあります。ただ今回のような小さな画像にはあまり効果がありませんし、現在FPSを設定していなければ試す必要ありません。

// フレームレートの変更
Application.targetFrameRate = 60;

[おまけ] Chromeでスマホ、回線速度をシミュレート

スマホのシミュレート
・スマホとタブレットが並んだようなアイコンをクリック
・Onlineのタブから選択
]

回線速度のシミュレート
・SettingsのThrottingタブをクリック

※ SettingのDeviceでは具体的な端末を指定することも可能です。

[Unity] サーバーからダウンロードする際によくやる手法

・画像が表示されるImageにローディング画像を設定しておき、ダウンロード完了のタイミングで差し替える。
・画像が表示されるきっかけ(プロフィール表示ボタンをクリック)などに関係なく、アプリが起動したタイミングでダウンロードを開始し保存しておく。
・画像を永続保存フォルダにキャッシュする。初回は遅いが2回目からは早い。

Comments

[退会済みユーザー]

具体的な手法を提示してくださり誠にありがとうございました。