Unity練習帳:WebGLでビルドしたシーンをWordPressに埋め込み

スポンサーリンク

みなさんこんにちは!UnityやUnreal Engineを勉強しながらゲームつくるマンです。
ゲーム開発ツールのUnityを少しづつ勉強中。解説書やネットで調べた情報を参考にして覚えたことを忘れないように書き留めています。

Unityのアセットストアで購入したアドベンチャーゲーム制作アセットAdventure Creatorの公式サイトに掲載されている英語のチュートリアルを翻訳しながら進めていきたいと思います。
今回はチュートリアルPart4でMechanimアニメーションを設定してキャラクターの操作ができるようになったシーンをWebGLでビルドしてブログ(WordPress)に掲載してみたいと思います。

まずビルドするシーンを開いておきましょう。次にメニュー:File > Build Settingsを選択。[Build Settings]ウィンドウが開いたらPlatform > WebGLを選択して[Switch Platform]ボタンをクリック。

[Build Settings]ウィンドウ > [Build and Run]ボタンをクリック。[Build WebGL]ウィンドウが開いたら書き出しフォルダを指定して[フォルダーの選択]ボタンをクリックするとビルドが始まります。ビルドが完了するまでしばらく待ちましょう。

ビルドが完了するとWebブラウザが開いて動作確認することができます。

ちなみに[Build Settings]ウィンドウ > [Build]ボタンをクリックした場合はビルド完了後にWebブラウザでファイルを開いてくれません。ローカルのファイルをそのままIEやChromeで開いてもWebGLが実行されないのでWebサーバーにファイルをアップロードしてアクセスする必要があります。ただしFirefoxはローカルのWebGLファイルを開くことができました。

さて、ここからWordPressの記事にWebGLを埋め込む作業に入りましょう。書き出されたフォルダを開くと次のフォルダとファイルが作成されています。

  • index.html:表示ファイル
  • [TemplateData]フォルダ:ローディング画面ファイルやロゴ画像、スタイルシートファイルなど
  • [Build]フォルダ:ビルドされたWebGLファイル

なお、今回使用しているUnityのバージョン5.6.2f1ではビルドファイルの構成が新しくなっていて公式マニュアルの記載内容と一部異なっています。

WebGLをWordPressに埋め込む方法ですが、一番簡単な方法としてYouTubeの埋め込みコードでも使用されている”iframe”タグを使用してみます。まずはindex.htmlを確認してみましょう。ビルドで書き出されたhtmlファイルは下記のようなコードになっています。

17行目にWebGLの表示サイズが記載されているのでここをWordPressのレイアウト幅に合わせて変更します。
変更前

変更後

ビルドしたWebGLファイル一式をWebサーバにアップロードしてからWordPressの記事内に下記のコードを書きます。表示高さサイズはロゴやフルスクリーンボタンのサイズが収まるサイズに調整。表示幅サイズはWebGLのindex.htmlで指定したサイズと同じ値にすると端が隠れてしまうのでわずかに大きくしました。

埋め込んだWebGLはこんな感じです。[W][A][S][D]キーでキャラクターを移動、[SPACE]キーでジャンプできます。

ということで無事にブログにWebGLを埋め込むことができましたが、Internet Explorer 11で問題発生です。表示すると次のようなダイアログが表示されます。「このWebブラウザではUnityのWebGLがサポートされていませんが続けますか?」

そのまま[OK]の文字をクリックするとUnityのロゴが表示されてWebGLの読み込みが始まるのですが、しばらくすると次のダイアログが表示されます。「Scriptエラー。詳しくはコンソールを見てください」的なメッセージ。

エラーの内容を確認するために[F12]キーを押してコンソールパネルを表示。もう一度ページを読み込み直してコンソールに表示されるメッセージをみるとメモリ不足らしいです。

Unityの方でWebGLのメモリ割り当てサイズを設定できるので変更してみます。メニュー:Edit > Project Settings > Playerを選択。[Inspector]パネルで最大値(2032)を設定。

メモリサイズを変更してビルドを行ったのですが、Internet Explorerのコンソールには相変わらずメモリ不足のメッセージが表示され、WebGLは表示されませんでした。Internet Explorer 11でUnityのWebGL表示はサポートしていないということで、ひとまずあきらめることにします。ちなみに公式マニュアルにWebGL表示の互換性について掲載されています。

今回とりあえずWordPressの記事にUnityのWebGLを埋め込むことができましたが、気になるのはページが表示されると同時にWebGLファイルが読み込まれる点とWebGL表示の右下にあるフルスクリーンに切り替えボタンが働かない点。これらについては一通りチュートリアルが進んだところで見直したいと思います。
こちらの記事に合わせてWebGLの内容を修正しました。

スポンサーリンク
スポンサーリンク

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

コメント

  1. Molly より:

    An intriguing discussion is worth comment. I think that
    you need to write more about this subject,
    it might not be a taboo subject but generally folks don’t speak about these issues.
    To the next! Best wishes!! http://tens-elektroden.de/index.php/component/k2/itemlist/user/31059

  2. […] 参考:Unity練習帳:WebGLでビルドしたシーンをWordPressに埋め込み […]

  3. […] 参考:Unity練習帳:WebGLでビルドしたシーンをWordPressに埋め込み […]