vue-unity-webglの使い方メモ

Vue.jsからUnityのWebGLビルドを扱いたい

Vue.jsからUnityのWebGLを扱いたいタイミングがあったので調べるとvotetake/vue-unity-webglがあることを知り使ってみました。

• Unityで吐いたWebGLをPWAで動かしてみた
• 箱庭の音

二つともVue.jsでUnityのWebGLビルドを扱った記事です。

ただ、二つとも詳しい使い方は書いてなかったので改めて記事に残しておこうと思い記事しました。

導入と準備

Unityで吐いたWebGLをPWAで動かしてみたの記事は少し古いためnpmで扱っていましたが箱庭の音を作る際にyarnで管理する必要があることを知ったのでyarnを使って導入します。

yarn add vue-unity-webgl

で大丈夫です

そしてUnityをビルドして成果物をvueのプロジェクトの public ディレクトリに入れておきます。

index.html

<script src="<%= htmlWebpackPlugin.files.publicPath %>unitybuild/TemplateData/UnityProgress.js"></script> 
<script src="<%= htmlWebpackPlugin.files.publicPath %>unitybuild/Build/UnityLoader.js"></script> |

index.htmlでunityのjsを呼び出す用意をして完了です。

.vueで扱う際のパラメータ

基本的にvue-unity-webglのREADME.mdに書いてある通りで問題はないのですが中身を見ると追加でパラメータが渡せる様だったので残しておきます。

<unity
   src="unitybuild/Build/unitybuild.json"
   v-bind="{
      width: 640,
      height: 480,
      hideFooter: true,
      externalProgress: true,
      module: { TOTAL_STACK: 6 * 1024 * 1024 }
   }"
   unityLoader="unitybuild/Build/UnityLoader.js"
></unity>

• width heightはわかりやすくunityを表示する大きさになります。

• hideFooterはUnityのWebGLにデフォルトでついているフルスクリーン機能などを使わない設定です
  本当に非表示にする場合はcssの方で隠せば大丈夫のはずです。

• externalProgressはfalseだとカスタムのprogress操作ができるそうですがUnityデフォルトのProgressを使いたい場合にtrueで設定します。
  カスタムのProgress操作はvue-unity-webglのREADME.mdにあるので興味がある人は確認してみてください。

• moduleは扱えるスタック領域などの値を変えれる設定のようです。ここに関しては Unity：WebGLでメモリエラーに苦しんだ話を参考に設定させていただきました。

おわり

vue-unity-webglについて扱う話は以上になります。基本的にはREADME.mdをみつつ操作したら大丈夫だと思いますが中身を覗くと追加で設定できるパラメータがあったのでメモがてら記事にしました。
そしてもっとProgressをカスタムして扱いたい場合は、vue-unity-webglを参考にすれば自前で呼び出してコントロールも可能かなと思っています。Vueじゃなくても扱えるような中身になっていると思うので興味ある人はのぞいて見てください。