Unity 5.3 & Web GL/HTML5 セミナー by Unity & Mozilla メモ

2015年12月24日に渋谷dots.で行われた「<a href="https://kenjin.unity3d.jp/events/show/307">Unity 5.3 & Web GL/HTML5 セミナー by Unity & Mozilla</a>」で記載したメモです。

※間違っている部分もあると思いますのでご了承下さい。

------------------------------------------------------

<b>1.Unity 5.3  WebGL</b>
ユニティ・テクノロジーズ・ジャパン　大前広樹氏

------------------------------------------------------

■WebGL用のゲーム作成に注意すること

・WebGLはインストーラから、インストールし忘れなようにすること
・必ずBuild & Runで実行

●Build & Runで実行で実行する理由

Unityが中に簡易的なテンポラルサーバーを立ち上げているため、
ブラウザのＵＲＬを見るとローカルホストになってる

GoogleChrom等、一部ブラウザはセキュリティの問題でローカル環境では
アセット等がロードできないことがある。

Unityはその問題を解消するため、自前でサーバーを立てて動かしている
なのでBuild & Runを使用すること

------------------------------------------------------

■WebGLを実装 or 勉強するには

マニュアルに書いてあることがほとんどなので、それを見ればいい
ただ詳細すぎるため結構骨折れるかも

※技術ブログも多く公開されているので、そちらを参照！

------------------------------------------------------

■ゲームパッド

WebGLはGoogleChromとFireFoxのみ、ゲームパッドに対応
Safariはゲームパッドは動かない

ただし、FireFoxはゲームパッドをつなげた時になぜか落ちる

------------------------------------------------------

■Unity作成のゲームを移植するには

(1)モバイルゲーム向けのコンテンツ
WebGLに移植するのはあり

(2)PC/Mac/WebPlayerのゲーム向けコンテンツ
WebGLに移植するのは突然の死が待っている！

※最善は１からコンテンツを作ること

------------------------------------------------------

■ビルドデータ詳細

・ＨＴＭＬ

TemplateData
自分でオリジナルのデータが格納可能

Mosuleのデータが大事
errorhandlerに独自のエラー処理が記述可能

・フォルダの中身

jsgzが実際のゲームコード
memgzはユニティで用意した仮想メモリ

WebGL Memory Size 大きければ大きいほどでかいゲームが動かせるがブラウザが落ちる
このサイズを見極めるのが重要

------------------------------------------------------

■WebGLのメモリ

・Unity Heap
・アセットデータ
これはユニティ側でコントロール可能

Strip Engine Code チェックを入れる
→使ってないクラスを片っ端から削除する

できるだけアセットバンドルを使う
JavaScriptをどんどん小さくすることが大事

・注意点

UnityだけでなくJavaScriptもガベージコレクションを使用する
そのため、ゴリゴリとオブジェクトをループで作りまくると落ちるので気をつける

アセットバンドルにはサイズの制限はない
ただ、でかすぎるとブラウザ側でロードを許可するか聞かれる場合もある

------------------------------------------------------

■圧縮

LZ４推奨　CPUに優しい

・LZ4推奨の理由

WebGLはスレッドが存在しない
※ブラウザのスレッドサポートが今後対応する予定

LZMA圧縮は複雑な計算式を使用するため、ブロッキングされて止まる

------------------------------------------------------

■Strip Engine Codeの注意点

(1)ゲームでは使ってないけど、アセットバンドルでは使っているコード
それもスワッピングされるのでロードされない問題がある

・解決策

一番上にLINK.XMLを置く
設定を書くと対象のコードはスワッピングされない

・エラーが起こった時に出てくる、この謎の数値って何よ
YAMLを参照
YAML Class ID Reference

IDが振られているので、これを元にゲームのオブジェクトを探す
大体コライダーが多い

(2)サードパーティのアセットバンドルしか使わないコード
余裕でストリッピングされる

・解決策は(1)と同じ

・動的なコード生成はできない
仕様なのであきらめましょう

・メタデータを使うものはLINK.XMLで解決

------------------------------------------------------

■アセットバンドル

アセットバンドルはLZ４　gzip（Webブラウザー、サーバーがプロトコルレベルで吸収してくれる）
gzipを使うとさらに小さくなる

ユーザーはgzipの利点を感じることができる
サーバー側で勝手に解凍してくれるが、ユーザー環境によっては解凍が動かない時がある。その時はJavaScriptが解凍してくれる
ただ、JavaScriptで解凍させるのは最終手段（時間がかかりすぎる）なので、基本はサーバー側と調整すること

------------------------------------------------------

■WebGLでネットワークゲームを作る場合

UNETはWebSocketで動作！　
WebSockets or WebRTC in JavaScript アセットストアにサンプルあり

基本はWWW or UnityWebRequestを使用

------------------------------------------------------

■コンテンツデリバリー
CORS (Cross-Origin Resource Sharing)
crossdomain.XMLみたいなもの

------------------------------------------------------

■WebGLのデバッグ

プロファイラーが使える

Development Build をチェックすると、例外がコンソールに出るようになる
プロファイラーもWebSocketを使用している

WebSocketはオートコネクトプロファイルをオンにする

------------------------------------------------------

■グラフィック
セキュリティの関係で制限がある

------------------------------------------------------

■WebGL2.0

WebGL2.0に対応済み

ただし、サポートしているのはFireFoxのみ
快適に動くのもFireFox

しかし、なぜかゲームパッドが動かない！

------------------------------------------------------

■プラグイン

C言語をそのまま記述しても動く

・ビルドの注意点

Unityの中にあるEmscriptenのバージョンを確認する。

バージョンが一致していないと動かないことが多い
ビルドはバージョンに合わせて行う事

------------------------------------------------------

■ブラウザの注意点

Safariはフルスクリーンにはできるが、入力を受け付けない
Safariはフルスクリーン非推奨

------------------------------------------------------

■オーディオ

オーディオはすべてwebオーディオに依存している
ややこしい事はできない
マイクは動かない

------------------------------------------------------

■将来的な話
スレッド対応が入ったUnityとFireFoxは相当なパフォーマンスが出る

IE11は非対応にした方がいいかも　パフォーマンスがいろいろ悪い

------------------------------------------------------

<b>2.Mozilla & Games</b>
Mozilla Japan　清水智公氏

------------------------------------------------------
■Mozillaとは

Webを良くしようと動く団体。非営利。
主にアフィリエイトで食ってる

------------------------------------------------------

■web the platform
リンクを渡すだけでみんなが共有して使える
アンインストールを必要しない

ユーザーを試させるために非常に敷居が低い
拡散がすごい

・webでゲームを出す利点
気軽に試してもらえるため、すごく敷居が下がる

※インストールは心理的抵抗がある

・利点　
ソーシャルネットワーク上に共有できる
プラグインフリー　根絶を目指している


------------------------------------------------------

■なぜゲーム？　
エクストリームなアプリケーションだから

------------------------------------------------------

■ゲームを動かすために

・ゲームパッド
ゲームパッドはイベントが飛んでこない
フレーム単位で取ってくるように改修

・サービスワーカー
オフラインになってもちゃんとコンテンツが読めるようにする

プロキシをJSに書く
キャッシュをコントールできる

・通知
通知も出せる

・パフォーマンス
パフォーマンスをいかに上げるかが重要

・asm.js
JSに型をどんどん埋め込んでいるスタイル

・emsripten
Cで書かれたコードをJSに変換する

------------------------------------------------------

■将来的な実装

・ＪＳでベクトル計算
一気にやった方が早いよね

------------------------------------------------------

■WebAssembly
バイナリフォーマット

------------------------------------------------------
■MozVR
HTML上で動くVR  

------------------------------------------------------

<b>おまけ</b>

------------------------------------------------------

<b>Unity道場</b>

2016年１月、来年から始まる新サービス！！

毎月1～２回、Unityのさまざまなテーマで渋谷dots.でセミナーやワークショップを開催。
通年20回以上開催予定。

進化が速くて追っかけるのがつらい。
そういう人はUnity道場に通いましょう！

------------------------------------------------------