今回はUnityのアドベンチャーゲーム制作アセットAdventure CreatorのチュートリアルPart4で作ったシーンをWebGLでビルドしてブログ（WordPress）に埋め込んで表示してみたいと思います。
まずビルドするシーンを開いておきましょう。次にメニュー：File > Build Settingsを選択。[Build Settings]ウィンドウが開いたらPlatform > WebGLを選択して[Switch Platform]ボタンをクリック。
ビルドが完了すると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ファイルは下記のようなコードになっています。
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | corevale</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/20170725.json", {onProgress: UnityProgress});
</script>
</head>
<body>
<div class="webgl-content">
<div id="gameContainer" style="width: 960px; height: 600px"></div>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
<div class="title">corevale</div>
</div>
</div>
</body>
</html>
17行目にWebGLの表示サイズが記載されているのでここをWordPressのレイアウト幅に合わせて変更します。
変更前
<div id="gameContainer" style="width: 960px; height: 600px"></div>
変更後
<div id="gameContainer" style="width: 550px; height: 344px"></div>
ビルドしたWebGLファイル一式をWebサーバにアップロードしてからWordPressの記事内に下記のコードを書きます。表示高さサイズはロゴやフルスクリーンボタンのサイズが収まるサイズに調整。表示幅サイズはWebGLのindex.htmlで指定したサイズと同じ値にすると端が隠れてしまうのでわずかに大きくしました。
<iframe src="http://corevale.com/wordpress/wp-content/uploads/webgl/20170725/index.html" width="560" height="390" scrolling="no" frameborder="0"></iframe>
埋め込んだ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の内容を修正しました。
コメント
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
[…] 参考：Unity練習帳:WebGLでビルドしたシーンをWordPressに埋め込み […]
[…] 参考：Unity練習帳:WebGLでビルドしたシーンをWordPressに埋め込み […]
とても参考になりました。ありがとうございました。
[…] COREVALE Unity:ビルドしたWebGLシーンをWordPressのブログに埋め込む方法についてhttp://corevale.com/unity/449今回はUnityのアドベンチャーゲーム制作アセット このサイトの情報を参考にしま […]
[…] Unity:ビルドしたWebGLシーンをWordPressのブログに埋め込む方法について […]
[…] Unity:ビルドしたWebGLシーンをWordPressのブログに埋め込む方法について […]
[…] 参考サイト http://corevale.com/unity/449 […]
[…] Unity:ビルドしたWebGLシーンをWordPressのブログに埋め込む方法について […]
[…] Unity:ビルドしたWebGLシーンをWordPressのブログに埋め込む方法について […]