[秋葉原] Unityもくもく勉強会×1週間ゲームジャム準備会 LT資料
https://weeyble-game.connpass.com/event/87052/
Unityもくもく勉強会×1週間ゲームジャム準備会(2018/06/03)LT枠
View Slide
どこからきたの？なわばりは？・mao (@TEST_H_)・ゲームプログラマーなフレンズ・仕事では主にUnityちほー等に生息している・Unity1Weekの参加歴は多分4回ぐらい
質問です。この中でWebGLについて完全に理解しているフレンズは？
今回話す内容について。結論から言うと大体は公式ドキュメントに載っていたり、調べたりすると(多分割と簡単に)出てきます。オリジナルな黒魔術とかそっち方面ではないのでご了承を。Unity Documentation : WebGLhttps://docs.unity3d.com/ja/current/Manual/webgl.html
GraphicsAPIの違い？日本語周りについてNativePlugin活用術おまけ目次
GraphicsAPIの違い？
Editor / Chrome / Firefoxで実行
Safari or Edgeで実行
なんか違う
どうしてこうなった・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
注意点・外部Assetとかは注意しよう- 把握せずにビルドして動かしてみると「写真と違わない？」となることも。- ちゃんと把握した上でEditor上でも正しくGraphics emulationを設定して確認。・一部演出が無くなる程度であるなら割り切ることも- ※2.0対応ブラウザで遊んだ方がグラ周りが豪華になる的な感じで・仮に2.0を前提としている場合には注意- 2.0専用である事を明記するとか。- (やった事無いけど、user agent取得するplugin作ってタイトル辺りで弾くとかできるかな...)
日本語周りについて
Arialフォントに注意→UI.Textとかにデフォルトで設定されてる奴- Editor上だと日本語が表示されるがブラウザ上だと日本語が表示されないので注意。・日本語を含むフォントを設定しよう- ライセンスには注意すること。- M+ FONTSさんとかおすすめ。- 解決策ではないが、入れたついでにTextMeshProを使うとか。UnityのWebGLで日本語を表示するhttps://qiita.com/tsubaki_t1/items/93e4b91b830729cd93a4
日本語入力について・InputFieldとか置いてもブラウザ上だと日本語入力が出来ない- そしてEditor上では出来るという罠。- ※原因について少し掘り下げると、ブラウザ側でキーボード入力自体は取れるが、かな変換をやっている時のコントロールはブラウザ上には無い為にキーイベントが飛んでこないらしい。→その上でこれを直接JSでコントロールするAPIも無いのとの事..。・公式で解決策が公開されているのでこちらを用いる- InputFieldの拡張- 改造すれば多分TextMeshProとも合わせられるはず。。(多分)(「え？？ この流れなら普通「実は僕の方で用意しました！」と出すところでは？？」禁止)WebGLでの日本語入力・コピー＆ペーストについてhttps://helpdesk.unity3d.co.jp/hc/ja/articles/220207047
Native Plugin 活用術
何が出来るの?・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
注意点・Unity⇔JSのやり取りについて- 例えばUnityからJSに引数を渡す際など。値型ならそのまま渡せるが、stringだとJS側にポインタが渡ってくるので”Pointer_stringify”ヘルパー関数を用いてJS側の文字列に変換する必要があったりなど。- 詳細についてはドキュメント参照。・キャッシュが残る...?- たまに修正しても反映されない現象?を確認。。- 詳細は不明だが、キャッシュ消したら直ったので参考までに。。
実装例・別タブへの切り替えや最小化と言った非表示時を検知して「Pause...」を表示してみるテスト。- “visibilitychange”イベントを見ている。- この例ではポーズ表示を行っているが、例えばホラゲだと精神的ブラクラを表示できたりとかｄ(eymao-test-h/WebGL-VisibilityStatehttps://github.com/mao-test-h/WebGL-VisibilityState
参考リンク・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
おまけ(長くなりそうなやつとか。メモ書き的な何か)
おまけ(ビルド編)・WebGLのスクリプティングバックエンドはIL2CPP- AssetBundle運用時などはStrip Engine Codeに注意。- ※例えばassetBundleでは参照していても実行ファイルの方で参照していないScriptが存在すると、ビルド時に削られる可能性がある。- ※Strip Engine Code自体の有効/無効は設定可能。- →こちら自体はlink.xmlで解決可能。- 詳細は公式ドキュメントの「Issues with code stripping」を参照。・インクリメンタルビルド- デフォルトで有効との事。- キャッシュ自体は”Library/il2cpp_cache”にある。こちらを削除するか別のUnityバージョンで開かれるとリビルドされる。
おまけ(ビルド編)・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%早くなるとか?)- ただし、動的なリンクオーバーヘッドの為にパフォーマンスは通常時よりも遅くなる。
おまけ(ビルド編)・Chromeだとビルド生成物のindex.htmlをダブルクリックで開いても動かない？- Chromeではセキュリティ上の理由からローカルファイルのURLから開いたScriptに制限がある。- 自前で立てたサーバー経由。若しくはBuild & Runでローカルのサーバー経由で開くと動く。- 後はオプションを付けてChromeを動かし制限を解除するとか。- 詳細は公式ドキュメントの「Building and running a WebGL project」を参照。
おまけ(メモリ編)・とにかくメモリ周りが結構シビア。- 特に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と現在と未来」でメモリ周りについて解説されているのでおすすめ。
おまけ(その他)・スレッドは非サポート。- ※「【Unite 2017 Tokyo】WebGL：ゲームプラットフォームとしてのWebと現在と未来」曰くJavaScript側でゴニョゴニョすることでそれっぽいことは出来るとのことだが...未検証。・ログはブラウザのJavaScriptコンソールから確認可能- ChromeだとF12押したら出てくるやつ。・バックグラウンドタブでの実行- PlayerSettingsにある「Run in background」のチェックが有効であれば、キャンバスやブラウザがフォーカスされて無くてもゲームが動き続ける。- →但し裏に回った際には実行に制限が掛かり、更新間隔が大分遅くなったりするので注意。
おまけ(その他)・AssetBundleについて- WebGLはAndroid/iOSと違いストレージにAssetBundleを保存することが出来ない。- ブラウザキャッシュやLoadFromCacheOrDownloadと言ったUnityのキャッシュシステムを使うことになると思われる。- ※後者について、正確に言うとIndexedDBに保存される模様。- ここらは「【Unite 2017 Tokyo】Unity+WebGLでゲームを開発・運用して見えてきたメリット・デメリット」で触れられている。- Addressable Asset Systemで管理がどう変わってくるのかは要調査。
おまけ(その他)・StreamingAssetsについて- こちらどうやらビルド時の生成物一式の中にそのままの形で吐き出されるっぽい。- 故にStreamingAssetsから読み込む際には一緒にサーバーにアップする必要がありそう。
Thank you!
mao_test_h
tkikuchi1002
cybozuinsideout
oracle4engineer
bengo4com
chumajin
hakubishin3
sansantech
mosa_siru
upura
line_developers_tw
chiroito
sstephenson
bkeepers
hatefulcrawdad
trallard
lara
schacon
brianwarren
gr2m
chrislema
cassininazir
jonyablonski
colly