こんにちは！
今回ブログを担当しますエンジニアの重山です。
Unity 2018.2からWebGLの書き出しがWebAssembly(wasm)で行えるようになったので、その利点とiPhoneやAndroidで動かす際の注意点等をお話しできればと思います。
WebAssemblyの利点
冒頭でもお話ししましたが、Unity 2018.2からWebGL書き出しの出力形式がWebAssemblyに切り替えられるようになりました。(元々はasm.jsでした)
WebAssemblyになったことによって以下の点で利点があります。
ファイルサイズが小さくなり読み込み時間が早い
WebAssemblyはasm.jsの代替案として生まれたファイルフォーマットになります。
asm.jsのよくない点の1つに「ファイルサイズの増加」があり、WebAssemblyはバイナリコードをブラウザ側で扱えるようにすることで大幅にファイルサイズを小さくしています。
これによりファイルの読み込み時間が短縮され、最大で3倍ほど早くなります。
モバイルで動作しやすい
asm.jsの場合モバイルでの動作はできなかったのですが、WebAssemblyはモバイルのブラウザも対応しています。
現状(バージョンにもよりますが)Internet Explorer以外のブラウザで互換性があり、iOSでもAndroidでも動作します。
「動作しやすい」と濁したのには理由があり、OSのバージョンやブラウザのバージョンによって使えない場合があるため、注意が必要です。
(iOSだとiOS11.2.2で使えなくなっており、iOS11.3で修正されたみたいです。)
実践
WebGLで書き出す際にProjectSettings内のLinkerTargetの設定でWebAssemblyに設定することで出力形式を変えられる。
※Unity2019.1からはLinkerTargetの項目自体がなくなっておりデフォルトでWebAssemblyになっている。
上記設定を行なって書き出せば良いだけなのですが、書き出した後2点ほど問題があるのでそれを解消しようと思います。
ダイアログを無視する
書き出したWebGLをモバイルで動作させると「モバイルだとサポートされてないから動作しないかも」という旨のダイアログが表示されます。
このままOKを押せば動作はするのですが、モバイルで動かすこと前提の場合このダイアログは邪魔になります。
そこでUnityLoader.js内の
[UnityLoader.SystemInfo.hasWebGL?UnityLoader.SystemInfo.mobile?e.popup("Please note that Unity WebGL is not currently supported on mobiles. Press OK if you wish to continue anyway.",[{text:"OK",callback:t}]):["Firefox","Chrome","Safari"].indexOf(UnityLoader.SystemInfo.browser)==-1?e.popup("Please note that your browser is not currently supported for this Unity WebGL content. Press OK if you wish to continue anyway.",[{text:"OK",callback:t}]):t():e.popup("Your browser does not support WebGL",[{text:"OK",callback:r}])の部分を
t();に置き換えることでダイアログの表示を削除します。
レイアウトを整える
書き出した後、モバイルでも動作しますがもちろんPCのブラウザでも動作します。
また、モバイルだと戻るボタンやブックマークなどのツールバーが邪魔になるためこれも考慮したレイアウトにしたいです。
さらに、モバイルには必要ないUIもデフォルトだと存在するため、書き出したファイル内に存在するindex.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 | Title</title>
<script src="Build/UnityLoader.js"></script>
<script>
UnityLoader.instantiate("unityContainer", "Build/GameTitle.json");
</script>
<link rel="stylesheet" href="Build/style.css" type="text/css">
</head>
<body>
<div id="mobile" class="cover"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var div = document.getElementById('mobile');
if (navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/i)){
var mobileHeight = $(window).height();
var mobileWidth = $(window).width();
var tempData = '<center><div id="unityContainer" style="width: '+mobileWidth+'px; height: '+mobileHeight+'px; margin: auto"></div></center>'
div.innerHTML = tempData;
}
else {
div.innerHTML = '<center><div id="unityContainer" style="width: 360px; height: 640px; margin: auto"></div></center>';
}
</script>
</body>
</html>上記のように変更しました。
今回はjQueryを用いてモバイル端末のツールバーを除いたサイズを取得しています。
取得したサイズに合わせて調整してあげればレイアウトが崩れません。
if (navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/i)){
var mobileHeight = $(window).height();
var mobileWidth = $(window).width();
var tempData = '<div id="unityContainer" style="width: '+mobileWidth+'px;height: '+mobileHeight+'px;margin: auto"></div>'
div.innerHTML = tempData;
}最後に
WebGLどんどん面白くなってますね。
WebAssemblyのおかげでモバイル開発のハードルは更に下がったように思います。
今回の方法であればWindowsPCしか持っていなくてもiPhoneで遊べるゲームを作れるのでぜひ試してみてください！