UnityでWebGL出力

結構前にUnity5になってからUnityはWebGLをサポートしました。WebGLのbuildについていろいろと・・・・・

WebGLってなによ?

web上で2D,3Dのグラフィックスをレンダリング(描画)するためのjavascriptという言語の関数の集合体(API)のことです。
Unityは本来webといったらUnityWebPlayerを導入した環境のみ動いていました。逆に言うと、UnityWebPlayerを入れなければ動かないということになります。
WebGLはそういったプラグインとか必要とせず、ブラウザさえ対応していれば動くといった感じです。
以下メリットデメリット(私的)

メリット

  • プラグインを必要としない=アクセスさえできれば誰でも遊べる

デメリット

  • 対応してないやつがある(MovieTexture)
  • モバイルデバイスは非サポート(今のところ)
  • なんか適応されないときがある

マルチプラットフォームな思想は好きだけとあまりマルチではないのが現状ですね。

早速、Buildしてみる

今回はBuildに焦点を当てたいのでなんでもよいのでUnityで適当に何かつくってBuildできる状態にもっていきます。今回、新入生歓迎会用のゲームを作ってたのでそれを使ってBuildしてみます。

  1. Unity画面左上のFile/Build Setting/にアクセス
    Buildsetting
  2. PC,Mac&Linux StandaloneからWebGLをクリックしてSwitch Platfromをクリック
    changewebGL
  3. Player setting でwidthとHeightを設定
    playersetting
  4. Buildをクリック

結構長いのコーヒーでも飲んで気長に待つ。

出力されたファイルを開く

出力されたindex.htmlファイルをブラウザにドラック&ドロップすれば開くのですが・・・・・

web

アラートがなってそのままグレーアウトしてしまいます。どんなエラーかというと、「お使いのブラウザが正式にUnity WebGLに対応してないからfirefoxで開いてみてね」と言われています。

解決策

アラートではそういわれましたが、実際のところWebGL側ではなく実際はローカルからファイルが開けないよというエラーです。これはブラウザのセキュリテイの問題で仕方ないという感じです。解決方法は「XAMPP」をインストールしてApache経由(http:// localhost/)でアクセスすれば回避することができます。
今回は例として、C:\xampp\htdocs\web内にBuildしたファイルを置いて、ブラウザから
http:// localhost/web/ にアクセスしました。

gathadora

いい感じにBuildできました。
Buildするときの注意点がありまして、デフォルトのUIフォントであるArialが適応されているところはArialフォントがBuildされないので表示されません。気をつけてください。(たぶんデフォルト系UISpriteとかぜんぶアウトかも)

無事Buildができると

title

こんな感じになりました。

まとめ

  • file://経由ではなくXAMPP Apache経由でアクセスする
  • Arialフォントは使わない

参考サイト様

MOZILLA DEVELOPER NETWORK WebGL

凹みTips Unity5 × WebGLについて詳しく調べてみた

unity DOVUMENTATION WebGLでの開発を始めるにあたって

jnobuyukiのブログ ブラウザからローカルファイルへのアクセス方法

UnityでWebGL出力」への2件のフィードバック

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中