前回は、iOS10で新規に追加されたフレームワークについてご紹介しました。
今回は社内でUnityを使って作成したアニメーションをJavaScript埋め込むことは可能なのか？と話になり、
Unity5でWebGLにかきだせることがわかったので
どう吐き出してくれるのか、気になったのでご紹介していきます。
バージョンはUnity5.5.1f1で行いました。
最初は適当なプロジェクトを作成し、ビルドセッティングでWebGLを選択します。
Open Download Pageというのがあるので押しますと専用のブラウザにとび、exeファイルをおとせます。
しかし、BuildもBuildAndRanも押せず、ビルドすることができませんでした。
Unityを再起動することで、ボタンは押せるようになりましたが、htmlやjsファイルは吐き出されず、
PlayerSettingを選択すると、大量のNullエラーが表示されました。
調べてみると、Unityのインストール時にWebGL Build Supportというコンポーネントを適用する必要があったみたいです。
すでにインストール済みの方は、インストール時に使用したexeをお使いください。
WebGL Build Supportにチェックし、あとは手順の通りUnityをインストールしてください。
そうすることで、無事にビルドができプロジェクトが吐き出されると思います。
吐き出されたファイルは以下です。
—————-
├─index.html
│
├─Release
│ UnityLoader.js
│ webgl.asm.jsgz
│ webgl.datagz
│ webgl.jsgz
│ webgl.memgz
│
└─TemplateData
favicon.ico
fullscreen.png
Logo.Dark.png
Logo.Light.png
logo.png
ProgressBar.Dark.png
ProgressBar.Light.png
ProgressFrame.Dark.png
ProgressFrame.Light.png
style.css
UnityProgress.js
—————-
index.htmlはUnityで作成したものを表示しているファイルになります。
実際に必要なファイルはUnityLoader.jsでこのファイルで、
Releaseフォルダ下にあるほかのファイルを読み込んでいることが分かりました。
なので、使用したい箇所にReleaseフォルダを配置してUnityLoader.jsを呼ぶことで可能だということが分かりました。
TemplateDataはデフォルトのUnityのロゴやProgressがはいっているフォルダで必要なければフォルダごと削除しても問題ないです。
また、スプラッシュはフリーである場合削除できないです。
Android/iOSと同様にプロでないと消せないため、追加したいところに入れるとなるとすこしやっかいです。
以上、WebGLに書き出した方についてご紹介いたしました。
最後までご覧いただきありがとうございます。
弊社では全国各地の請負い（ご自宅）で作業協力頂ける、フリーランスエンジニアの方を常時探しております。
ご興味ある方は、お気軽にお問い合わせ下さい。