UnityWebGL Tips集

[秋葉原] Unityもくもく勉強会×1週間ゲームジャム準備会
LT資料

https://weeyble-game.connpass.com/event/87052/

Transcript

1. Unityもくもく勉強会×1週間ゲームジャム準備会(2018/06/03) LT枠
2. どこからきたの？なわばりは？ ・mao (@TEST_H_) ・ゲームプログラマーなフレンズ ・仕事では主にUnityちほー等に生息している ・Unity1Weekの参加歴は多分4回ぐらい
3. 質問です。 この中でWebGLについて完全に 理解しているフレンズは？
4. 今回話す内容について。 結論から言うと大体は公式ドキュメントに載っていた り、調べたりすると(多分割と簡単に)出てきます。 オリジナルな黒魔術とかそっち方面ではないのでご了承を。 Unity Documentation : WebGL https://docs.unity3d.com/ja/current/Manual/webgl.html
5. GraphicsAPIの違い？ 日本語周りについて NativePlugin活用術 おまけ 目次
6. GraphicsAPIの違い？
7. Editor / Chrome / Firefoxで実行
8. Safari or Edgeで実行
9. なんか違う
10. どうしてこうなった ・SafariとEdgeがWebGL 2.0に非対応のため - 今回の実装としてはSSR(Screen Space Reflection)でゴリラを反射させている。 但しSSR自体はDeferred Renderingである事が必要。 - Deferred Rendering自体はWebGL 2.0から可能となっているので、 対応していないブラウザでは表示されない。 ※例自体はUnity2017.4.4f1 + PostProcessing v1で実装。Editor上ではWebGL 2.0でエミュレート WebGL グラフィックス https://docs.unity3d.com/ja/current/Manual/webgl-graphics.html ※その他互換性はこちらで確認可能 https://docs.unity3d.com/ja/current/Manual/webgl-browsercompatibility.html
11. 注意点 ・外部Assetとかは注意しよう - 把握せずにビルドして動かしてみると「写真と違わない？」となることも。 - ちゃんと把握した上でEditor上でも正しくGraphics emulationを設定して確認。 ・一部演出が無くなる程度であるなら割り切ることも - ※2.0対応ブラウザで遊んだ方がグラ周りが豪華になる的な感じで ・仮に2.0を前提としている場合には注意 - 2.0専用である事を明記するとか。 - (やった事無いけど、user agent取得するplugin作ってタイトル辺りで弾くとかできるか な...)
12. 日本語周りについて
13. Arialフォントに注意 →UI.Textとかにデフォルトで設定されてる奴 - Editor上だと日本語が表示されるがブラウザ上だと日本語が表示されないので注 意。 ・日本語を含むフォントを設定しよう - ライセンスには注意すること。 - M+ FONTSさんとかおすすめ。 - 解決策ではないが、入れたついでにTextMeshProを使うとか。 UnityのWebGLで日本語を表示する https://qiita.com/tsubaki_t1/items/93e4b91b830729cd93a4
14. 日本語入力について ・InputFieldとか置いてもブラウザ上だと日本語入力が出来ない - そしてEditor上では出来るという罠。 - ※原因について少し掘り下げると、ブラウザ側でキーボード入力自体は取れるが、かな変換をやっ ている時のコントロールはブラウザ上には無い為にキーイベントが飛んでこないらしい。 →その上でこれを直接JSでコントロールするAPIも無いのとの事..。 ・公式で解決策が公開されているのでこちらを用いる - InputFieldの拡張 - 改造すれば多分TextMeshProとも合わせられるはず。。(多分) (「え？？ この流れなら普通「実は僕の方で用意しました！」と出すところでは？？」禁止) WebGLでの日本語入力・コピー＆ペーストについて https://helpdesk.unity3d.co.jp/hc/ja/articles/220207047
15. Native Plugin 活用術
16. 何が出来るの? ・UnityからJavaScriptコードを呼び出してWebAPIを叩いたり出来る。 - “.jslib”の拡張子がつくJavaScriptコードを用意したり。Application.ExternalEvalに string型でJavaScriptコードを書くと言う手もあったが、最新のドキュメントを見たら Obsoleteになってた。 ・JavaScript側からUnityのスクリプトを呼び出すことも可能。 - WebAPIの何かしらの取得結果をUnity側に渡したり出来る。 WebGL: ブラウザ スクリプトとの相互作用 https://docs.unity3d.com/ja/current/Manual/webgl-interactingwithbrowserscripting.html
17. 注意点 ・Unity⇔JSのやり取りについて - 例えばUnityからJSに引数を渡す際など。 値型ならそのまま渡せるが、stringだとJS側にポインタが渡ってくるの で”Pointer_stringify”ヘルパー関数を用いてJS側の文字列に変換する必要があった りなど。 - 詳細についてはドキュメント参照。 ・キャッシュが残る...? - たまに修正しても反映されない現象?を確認。。 - 詳細は不明だが、キャッシュ消したら直ったので参考までに。。
18. 実装例 ・別タブへの切り替えや最小化と言った非表示時を検知して「Pause...」を表示してみるテ スト。 - “visibilitychange”イベントを見ている。 - この例ではポーズ表示を行っているが、例えばホラゲだと精神的ブラクラを表示でき たりとかｄ(ey mao-test-h/WebGL-VisibilityState https://github.com/mao-test-h/WebGL-VisibilityState
19. 参考リンク ・WebGL での開発を始めるにあたって - https://docs.unity3d.com/ja/current/Manual/webgl-gettingstarted.html ・【Unite 2017 Tokyo】WebGL：ゲームプラットフォームとしてのWebと現在と未来 ※講演 動画あり - https://www.slideshare.net/UnityTechnologiesJapan/unite-2017-tokyowebglweb-76727421 ・【Unite 2017 Tokyo】Unity+WebGLでゲームを開発・運用して見えてきたメリット・デメリッ ト ※講演動画あり - https://www.slideshare.net/UnityTechnologiesJapan/unite-2017-tokyounitywebgl-76727485
20. おまけ (長くなりそうなやつとか。メモ書き的な何か)
21. おまけ(ビルド編) ・WebGLのスクリプティングバックエンドはIL2CPP - AssetBundle運用時などはStrip Engine Codeに注意。 - ※例えばassetBundleでは参照していても実行ファイルの方で参照していない Scriptが存在すると、ビルド時に削られる可能性がある。 - ※Strip Engine Code自体の有効/無効は設定可能。 - →こちら自体はlink.xmlで解決可能。 - 詳細は公式ドキュメントの「Issues with code stripping」を参照。 ・インクリメンタルビルド - デフォルトで有効との事。 - キャッシュ自体は”Library/il2cpp_cache”にある。こちらを削除するか別のUnityバー ジョンで開かれるとリビルドされる。
22. おまけ(ビルド編) ・Development Buildについて - 出力後のJavaScriptファイルはminifyされない模様。 - その為にファイルサイズがメチャクチャデカくなる。 - 【GraphicsAPIの違い？】の項目で表示したゴリラ2体表示する実行ファイル一式のサイズの違いを見 比べると... - Release Build(通常時) : 8.04 MB - DevelopmentBuild(Use pre-build Engine有効) : 206 MB ・Use pre-build Engineについて - Development Buildを有効時に選択可能。 - 有効にするとUnityはビルド時にマネージドコードのみを再構築してビルド前の UnityEngineと動的にリンクする。(再構築が30%~40%早くなるとか?) - ただし、動的なリンクオーバーヘッドの為にパフォーマンスは通常時よりも遅くなる。
23. おまけ(ビルド編) ・Chromeだとビルド生成物のindex.htmlをダブルクリックで開いても動かない？ - Chromeではセキュリティ上の理由からローカルファイルのURLから開いたScriptに 制限がある。 - 自前で立てたサーバー経由。若しくはBuild & Runでローカルのサーバー経由で開く と動く。 - 後はオプションを付けてChromeを動かし制限を解除するとか。 - 詳細は公式ドキュメントの「Building and running a WebGL project」を参照。
24. おまけ(メモリ編) ・とにかくメモリ周りが結構シビア。 - 特に32bit環境はブラウザ側で確保できる最大メモリが2GBとなるので、その中で色々とやりくりされるので 結構シビア。 - ※WOW64の上で実行した場合などについては不明...(未調査) - ChromeだとJavaScriptのコード解析の段階で膨大なメモリを食うので32bitだとシビアだとか。 - それ以外にもデカいデータを置きまくるなどすれば32bitだと特に厳しくなるかもしれない。 - PlayerSettings -> Publishing Settingsにて「WebGL Memory Size」と言うUnityが使用するメモリ領域を設定 できる項目があるが、256を超えた辺りから警告が出る。 - ※64bitでも物によっては512ぐらい取らないと「Out of memory」が出たりするときも.. - Asset管理戦略は慎重に。一気に読み込んで確保しておくのではなく、細かく読む戦略の方が良いとか。 - ※「【Unite 2017 Tokyo】WebGL：ゲームプラットフォームとしてのWebと現在と未来」でメモリ周りにつ いて解説されているのでおすすめ。
25. おまけ(その他) ・スレッドは非サポート。 - ※「【Unite 2017 Tokyo】WebGL：ゲームプラットフォームとしてのWebと現在と未来」曰くJavaScript側でゴ ニョゴニョすることでそれっぽいことは出来るとのことだが...未検証。 ・ログはブラウザのJavaScriptコンソールから確認可能 - ChromeだとF12押したら出てくるやつ。 ・バックグラウンドタブでの実行 - PlayerSettingsにある「Run in background」のチェックが有効であれば、キャンバスや ブラウザがフォーカスされて無くてもゲームが動き続ける。 - →但し裏に回った際には実行に制限が掛かり、更新間隔が大分遅くなったりするの で注意。
26. おまけ(その他) ・AssetBundleについて - WebGLはAndroid/iOSと違いストレージにAssetBundleを保存することが出来ない。 - ブラウザキャッシュやLoadFromCacheOrDownloadと言ったUnityのキャッシュシステ ムを使うことになると思われる。 - ※後者について、正確に言うとIndexedDBに保存される模様。 - ここらは「【Unite 2017 Tokyo】Unity+WebGLでゲームを開発・運用して見えてき たメリット・デメリット」で触れられている。 - Addressable Asset Systemで管理がどう変わってくるのかは要調査。
27. おまけ(その他) ・StreamingAssetsについて - こちらどうやらビルド時の生成物一式の中にそのままの形で吐き出されるっぽい。 - 故にStreamingAssetsから読み込む際には一緒にサーバーにアップする必要があり そう。
28. Thank you!