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

  • 25
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

2015年12月24日に渋谷dots.で行われた「Unity 5.3 & Web GL/HTML5 セミナー by Unity & Mozilla」で記載したメモです。

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


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


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

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

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

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

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

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


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

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

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


■ゲームパッド

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

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


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

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

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

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


■ビルドデータ詳細

・HTML

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

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

・フォルダの中身

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

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


■WebGLのメモリ

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

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

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

・注意点

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

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


■圧縮

LZ4推奨 CPUに優しい

・LZ4推奨の理由

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

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


■Strip Engine Codeの注意点

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

・解決策

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

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

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

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

・解決策は(1)と同じ

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

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


■アセットバンドル

アセットバンドルはLZ4 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は非対応にした方がいいかも パフォーマンスがいろいろ悪い


2.Mozilla & Games
Mozilla Japan 清水智公氏


■Mozillaとは

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


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

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

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

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

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


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


■ゲームを動かすために

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

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

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

・通知
通知も出せる

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

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

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


■将来的な実装

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


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


■MozVR
HTML上で動くVR


おまけ


Unity道場

2016年1月、来年から始まる新サービス!!

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

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