テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

【Unity】SpriteAtlasでパッキングしたテクスチャを遅延ロードする

2D Sprite GUI（uGUI/NGUI/旧UI） AssetBundle リソース・メモリ管理 最適化・デバッグ アセット・ファイル管理

今回は、キャラクターやUIといったシーンに配置したSpriteのテクスチャを遅延ロードする事で、ユーザーが操作出来るまでの時間を短縮するアプローチついてです。

SceneやPrefabから参照するSpriteは即時ロードされる

Unityを使っていて頭を悩ませる項目の一つが「SceneやPrefabが参照しているアセットは、オブジェクトがロードされた瞬間に即時ロードされる」という点です。これはロードが完了すればレスポンスが高く、色々と処理を考えなくても良いのですが、同時にロードが完了するまで何も出来ないという欠点もあります。

これを回避するため、Scene/Prefab全体でUIを構築するのではなく、Prefabを個別にロードする、もしくはPrefabからSprite等の情報を剥がしておき追加で注入するアプローチをよく採用されています。ただし、実装の難易度が上がったり、作成ルールが厳格かつ複雑になります。

さて、問題はやはりTextureでしょう。他のアセット群のように即時必要になる訳でもなく、かつデータサイズも非常に大きい。なので、今回は「Textureは後で読む」アプローチを使ってみます。

テクスチャの遅延ロード

よく勘違いされている事ですが、Unityの使用するSpriteはTextureを指すのではなく、MeshとTextureを含むデータを指します。メッシュのUV情報を使用してテクスチャの一部を切り出す感じです。
この２つはある意味分割されているデータなので、後で更新することが可能です。

なので"Spriteが持つUV情報"と"空のTexture"だけを事前にロードしておき、その空のTextureに後でAtlasを注入するといった事を行います。

Textureをロードされないようにする

まず最初に、Spriteを使用してもTextureも一緒にロードされないようにします。

  1. 遅延でロードしたいSpriteをSpriteAtlasに登録
  2. SpriteAtlasのビルドに入れるのチェックを外す

f:id:tsubaki_t1:20181214211010j:plain

これでビルドした時、Spriteを使用していてもSpriteが使用するTextureはロードされなくなります。
ロード時にはSpriteAtlasManager.atlasRequested wasn't listened to while SpriteAtlas名 requested.と表示されます

f:id:tsubaki_t1:20181214212333g:plain

動的にSpriteAtlasをバインドする

次にTextureをバインドします。

今回はAssetBundleでSpriteAtlasを配信しようと思うので、AtlasはatlasAssetBundleに格納しています。
暗黙的参照で含まれているように見えますが、ポリゴン情報だけです。

f:id:tsubaki_t1:20181214213047j:plain

後はSpriteAtlasManager.atlasRequestedでSpriteAtlasのリクエストを検出、そのタイミングでAtlasをロード・差し込みを行えばOKです。
この機能はゲームで一つだけあれば良いので、今回はこの動作をするマネージャーをScriptableObjectにして、プリロードアセットに登録しました。他にもシングルトン的なアプローチでも良いです。

gist.github.com

f:id:tsubaki_t1:20181214214224j:plain

f:id:tsubaki_t1:20181214214235j:plain

これを実行すると、シーン上に用意したオブジェクトをロード後、SpriteAtlasで使用しているSpriteが追加ロードされ反映されます。

f:id:tsubaki_t1:20181214215008g:plain

なお、このアプローチはビルドしたゲーム及びAssetBundleの双方にポリゴン情報が乗ります。テクスチャの本体と比べれば僅かな情報ですが。

f:id:tsubaki_t1:20181214220912j:plain

解像度を下げたテクスチャをロード

設計上、ロード対象は簡単に差し替えられます。 今回は最大解像度ではなく、解像度を下げて省電力モードします。端末によっては圧縮フォーマットの切り替え等もありかもしれません。

  1. SpriteAtlasを作成し、バリアントを指定。 先程作成したSpriteAtlasをマスターに登録
  2. 両方共AssetBundleに格納
  3. SpriteAtlasManager.atlasRequestedのコールバック時に、どちらかのSpriteAtlasを指定
    (追加文字列で読み込むSpriteAtlasを切り替える。上のコードではtagがSpriteAtlas名と一致）

f:id:tsubaki_t1:20181214222656j:plain

f:id:tsubaki_t1:20181214223303j:plain

f:id:tsubaki_t1:20181214222959j:plain

unity 2018.3でUIにも対応

この機能、以前はSpriteRenderer専用だったのですが、Unity 2018.3でUI（Image）にも対応しました。
これで最初のUIを表示しつつ裏で次のUIのTextureをロード、画面の切り替えはCanvasとGraphicsRaycastのOn/OFFを切り替えるだけ…というのが実現出来ます。

UI: Added Sprite Atlas Late-Binding support for UI.

UIの描画順とかをSceneで設定しつつも、遅延ロードが可能という感じです。

f:id:tsubaki_t1:20181214220209j:plain

SpriteAtlasの個別アンロード

このアプローチ、一旦SpriteAtlasをアンロードしてしまうと「現在存在するSpriteRendererやImageに入れ直す」事が出来ません。Atlasを開放すると次に使えるのは、Spriteを参照してるPrefabを生成したタイミング（反映されるのは開放以降に生成したSpriteのみ）となります。

テクスチャは誰も使用していなければ開放→使用のタイミングで再ロードとなります。ただ「使ってない」判定にはSpriteへの参照を全て外さなくてはいけないので、細々とメモリを足したり消したりする場合には少し面倒かもしれません。

（個人的には、トップメニューのUIとかは全部テクスチャ読みっぱなしでも良いんじゃないかって気がしますが）

感想

「ユーザーが操作出来るまでの時間を短縮」しつつ「複雑なスクリプト制御を削る」って用途がマッチしていそうです。

関連

「SpriteAtlasとAssetBundleの組み合わせで問題が…」という場合、使い方が間違ってます

tsubakit1.hateblo.jp

【Unity】Timelineからメソッドを呼ぶ新機能 「Marker」と「Signal、Signal Receiver」

Timeline Unity2019.1 Unity

今回はTimelineから特定のメソッドを呼ぶ方法について紹介します。

この機能はUnity 2019.1 a11から安定して使用出来ます。
これはベータですらないアルファの機能なので、今後変化する可能性があります。

Timelineからメソッドを呼ぶ仕組み

Timelineではアニメーションイベントと区別するためか、「Signal」という新しい概念を追加しました。

Signalはアセットです。これはScene上のSignal ReceiverとTimelineに登録します。TimelineからSignalを呼び出すと、シーン上に存在するSignal Receiverがシグナルを受信し、Signal ReceiverがUnity Eventを呼び出す流れです。

f:id:tsubaki_t1:20181210222329j:plain

名称 機能
Signal アセット、マーカーに登録する
Marker Timelineに登録するイベント
Signal Receiver マーカーからシグナルを識別して、UnityEventを呼び出す

SignalやSignal Receiver、マーカーを使う流れ

使い方を見てみます。今回は下のような、特定のタイミングでパーティクルを出力してみます。*1

f:id:tsubaki_t1:20181210224251g:plain

まず最初に、Signalアセットを作ります。
名前は何でも良いのですが、全体を通してユニークな名称である必要があるので、Signalフォルダとか作って、全てソコに突っ込むのが良さそうです。

今回はEmitというSignalを作りました。

f:id:tsubaki_t1:20181210223748j:plain

次にシグナルで反応して欲しいGameObjectにSignal Receiverを登録します。

今回は、移動する玉（Sphere）オブジェクトのParticle System.Emit(100)を呼び出してみます。 Timelineのシグナルと関連付ける為、Signalには先程作成したシグナル、Emitを登録します

f:id:tsubaki_t1:20181210224057j:plain

あとはTimelineのアニメーションクリップ上でAdd Signal Emitterを選択し、マーカーを追加します。
マーカーのシグナルはEmitを選択すると、そのタイミングに呼ばれるイベントが何かを確認出来ます。

f:id:tsubaki_t1:20181210224710j:plain

Tips

呼び出されるマーカーは、Trackが指定しているオブジェクトのSignal Receiverです。同じSignalを使用している場合でも、異なるSignal Receiverの場合、各々のイベントが呼ばれます。

呼び出すSignal ReceiverはTimelineのTrack指定ですが、その他にもSignal Receiver自体をTrackに登録するSignal Receiver Trackや、Playabel Directorが登録されているオブジェクトに設定されているSignal Receiverを呼び出す、Marker Trackなどがあります。

f:id:tsubaki_t1:20181210225200j:plain

Signal ReceiverのUnityEventをEditor And Runtimeにすると、動かせるAPIならゲームを再生しなくてもイベントを呼び出す事が出来ます。その場合、当然巻き戻し処理を作っておかないとひどい目になります。

f:id:tsubaki_t1:20181210230157j:plain

マーカーの挙動を自作する

マーカーを自作することも出来ます。
こちらの方は、Signal等を用意せずともよく、コードベースで色々な処理を実装可能です。 特にSignalベースだと、マーカーに複数の情報を登録する場合*2にSignalが増えすぎて不便なので、場合によってはコチラの方が便利かもしれません。

今回はTimelineから文字を切り替える処理を作成してみます。
マーカーに到着したタイミングで文字を切り替えています。

f:id:tsubaki_t1:20181210230613g:plain

自作するコードには、送信するマーカーと、マーカーを受信するコンポーネントが必要です。

gist.github.com

Text Marker ReceiverはSignal Receiverの代わりに登録します。Timelineからこのクラスが呼ばれる感じです。

f:id:tsubaki_t1:20181210232702j:plain

次にマーカーを受信するGameObjectを登録するTrackを追加します。Animation等で動かしているなら該当するTrackに足せば良いですが、特に無いのならばMarker Trackが良いです。

あとはMarker Trackにイベントを登録します。上のコードを登録しておくと、登録するマーカー一覧にテキストのマーカーが追加されているので、登録します。あとはマーカーの中身をInspectorで設定していきます。

f:id:tsubaki_t1:20181210231136j:plain

f:id:tsubaki_t1:20181210231312j:plain

これでゲームを再生するとイベントが呼ばれます。今回の場合は、テキストの中身が差し替わります。

感想

Signalが直感的ではない感じがしましたが、複数のTimelineを複数のSceneで使いまわしたり、イベントを沢山配置する用途だと確かに理にかなっている気がします。

関連

Signalについて

New in 2019.1 - Timeline Signals - Unity Forum

マーカーのカスタマイズ

New in 2019.1 - Marker Customization - Unity Forum

AnimationEventのように、特定のメソッドを呼び出す、カスタムマーカーのサンプル

github.com

Unity 2019.1未満ならコチラ

tsubakit1.hateblo.jp

わかりやすいスライドが公開されました

speakerdeck.com

*1:本当はCinemachineの画面揺らしをしたかったんですが、TimelineがPackageManagerに移ったせいで動作しません。

*2:例えば字幕のような、二度と使わないイベントを大量の登録する場合

【Unity】SceneViewのカメラが回せなくなった時の対処法

トラブルシューティング Unity 3D

f:id:tsubaki_t1:20181209190233g:plain

SceneViewが回せないという動作になりました。
コレの解決法についてです。

SceneViewのロックを外す

結論から言えば、SceneViewのロックが入っていた為でした。
ロックされていると、右上のGizmoの色が薄くなります。

f:id:tsubaki_t1:20181209190720j:plain

なので、このロックを外してやれば、期待する動作に戻ります。

f:id:tsubaki_t1:20181209190633g:plain

タイミング的にProject Tinyを使ったらこうなったのかな

【Unity】小さく、軽く、早い、Tiny Mode（Project Tiny）についてのアレコレ

Tiny ECS 2D Unity2018.3 Unity WebGL

f:id:tsubaki_t1:20181207211531j:plain

コンパクトなUnityゲームを出力するTiny Modeのプレビュー版が公開されました。
ということで、早速触ってみます。

この記事はTiny Mode 0.13.2 previewで作成されています。

モバイルブラウザ向けUnity

Tiny Modeは、モバイルブラウザやインスタントゲーム、アプリ内広告（ゲーム）向けゲームを出力する機能みたいです。

小さく、軽く、早いUnityです。

WebGLのように「モバイル”でも”動く」ではなく、完全にモバイルブラウザのようなコンパクトな環境向けにチューンされる物で、現行のUnityと比較して使用出来る機能が大きく異なります。

どんな物かは、実際にプレイしてもらうと理解が早いです。
かなりサクっと起動します。

f:id:tsubaki_t1:20181207211341p:plain

https://tiny-match3.storage.googleapis.com/index.html

現状使える機能群

Tiny Modeが使用する機能は、完全に１から新しく作成したものを利用しています。だからUnityとは比べ物にならないくらい軽量・軽快に動作するんですが、現状利用できる機能がかなり限定されます。

  • UI
    • UILayout（RectTransform）
    • UI( Image, Button, Toggle )
    • Text & Text HTML
  • Assets
    • Audio
    • 2D( Sprite, Tilemap, Particles )
    • Video（HTML5のフルスクリーン）
  • Physics
    • Box2D, Rigidbody2D
  • Animation
    • Tween
    • Animation
  • Ad

Compatibility Cheat Sheet | Package Manager UI website

また、多くの部分で使い勝手が若干異なります。
例えばTransformからRotationやScaleを取り外したり出来ます。

f:id:tsubaki_t1:20181207230141j:plain

必要ない機能は削る事を想定しています。通常のUnityと異なりモジュールがキッチリしているので、不要な機能は削られやすく、また削れば削るほどコアランタイムが小さくなります。
これはプロジェクト単位で設定するみたいです。

f:id:tsubaki_t1:20181207225356p:plain

Previewの現状は完全にHTML5の2D向けですが、将来的にインスタント3DやARにも対応するみたいです。

スクリプトはECSベース

Tiny ModeではGameObject/ComponentではなくECSベースです。 ECSの考え方は、雑に言えば「オブジェクトを集めて一気に処理する」です。

  • 処理を担当する機能（System）がオブジェクト（Entity）を集めて一気に処理を行う
  • 処理を行う対象のオブジェクト（Entity）は、Entityが持っているデータ（ComonentData）の組み合わせで決まる

言ってしまえばコレだけです。
（その他にも色々と面倒な事があるのですが、根底はコレです）

f:id:tsubaki_t1:20181207223953g:plain

Tiny Modeは完全にPure ECSです。

ただし、多くの部分がGUIで制御出来るようになっています。例えばPrefabの利用やComponentDataをGUIで作るなど。

またComponentBehaviourというMonoBehaviourに近いモデルのクラスが追加されています。OnEntityEnabledやOnDisableEntityなどECSでやるのが面倒だったイベント処理を担当してくれます。
ただOnUpdateは要らないんじゃないかな。ECSの挙動的に明らかに効率悪いし、マニュアルにも反復処理はComponentSystemを使うべきってなってるし。

f:id:tsubaki_t1:20181207214814j:plain

なお現状処理はTypeScriptで記述しますが、プレビューが外れるまでにTypeScriptからC#になることが確定しています。

TypeScriptは文法的にC#に似ていますが、別物なのでC#来るまで触らないというのは選択肢としてアリかなと思います。
またC#でないとBurstコンパイラが使えないので、最大性能は出ません。なので今の段階でベンチマークすることはそれ程意味はなさそうです。

レンダリングはWebGLとCanvasの両方に対応

レンダリングの設定はWebGLとCanvasの両方に切り替えが可能です。
この辺りはコンテンツによって最適解が違う感じがします。

f:id:tsubaki_t1:20181207230632j:plain

試し方

Tiny Modeを試す方法です。

導入

Package Managerから導入出来ます。

f:id:tsubaki_t1:20181207211758j:plain

とりあえず試したい場合は、メニューアイテム > Tiny > Import Samplesからサンプルパッケージが導入出来ます。 （"registry": "https://staging-packages.unity.com"は不要です）

どんなゲームが含まれているのかは、以下の記事が分かりやすいです。

qiita.com

機能 内容
Project ゲームのプロジェクト(***.utproject)。
UnityProject内に複数存在する
（Ad等は単体のゲームだけじゃないからかな）
Group 概念的にはSceneやPrefabが近い（****.utdata）
Entity GameObjectのようなもの
Component Entityに登録するデータ
System フィルタで指定したComponentに対して処理を行う(***.ts)
Behaviour フィルタで指定したComponentが生成されたり破棄されたりすると呼ばれる(***.ts)

ゲームの再生

再生は普通に「再生ボタン」ですが、GameViewではなくブラウザで実行します。 何もしなければPCのブラウザですが、QRコードを読み込めば同じネットワーク上のモバイルでも動作します。QRコードで起動したゲームは、タブを閉じなければ次起動したときに勝手にコンテンツを更新して再起動してくれます。

f:id:tsubaki_t1:20181207232629j:plain

この時、Unityエディターでポーズを選択すると、現在動いているシーン内の状況をComponentDataの中身も含めて再現します。これはモバイル上でゲームを動作させている場合も同様です。（Live Link）

https://user-images.githubusercontent.com/1644563/49653477-6908bd00-fa78-11e8-9817-c135d63157f3.gif

同様にプロファイラーが使えるっぽいです。

なお、シーンの再現やプロファイラはデバッグ、開発モードでビルドした時のみです。リリースビルドだと出来ません

結局名前はTiny Unity? Tiny Mode?

Project Tinyです。

名前は現状、安定していないみたいです。
自分が聞いた限りだと、以下の名前がありました。ど忘れした、もっと別の名前も言ってた気がしますが、まぁ出てこないって事は二度と聞かないでしょう。

  • Tiny Mode
  • Tiny Unity
  • Unity for Small things
  • Project Tiny

名前が安定したら変更します。

感想

多くの機能が完全に新規なのでムムってなりますが、PrefabやProfiler（Frame Debugger）の機能が使えたり、いつものHierarchy & Inspectorによるデバッグが出来るので、思ってるよりすんなりと使えます。

関連

使い方を紹介しています。 qiita.com

マニュアルです

Tiny Mode | Package Manager UI website

blogs.unity3d.com