ComposableでComponentを返す方法でUnityのWebGLをコンポーネント化する

BoskampiによるPixabayからの画像 NuxtJS
BoskampiによるPixabayからの画像
この記事は約4分で読めます。

Composableの中でComponentを返せたらと考えていたところ、まさにそのアプローチがあった!と感動したので、その方法を採用してUnityのWebGLを返すComposableを作成してみました。

環境

VueUseの利用

VueUseのcreateInjectionStateを使いたいため、まずは使い方を見ておきたいと思います。

こちらは、provideとinjectをcomposableの仕組みで使いやすくしたようなものになります。createInjectionStateを呼び出すと、provideとinjectをラップした2つのglobal state関数が返されます。そして、createInjectionStateを呼び出す際にprovideするstateを引数として渡します。

例えば、使用例は以下のようになります。今回はあまり意味がないのですが、配列に格納した文字列をカットして返すstateを作成してみます。

この使い方は以下のようになります。まず、provide側。

続いてinject側。

実行すると以下のようになります。

VueUse: https://vueuse.org/

useUnityを書いてみる

useUnityでは以下のような方針で書いてみたいと思います。

  • ComponentとComponent内の外部スクリプトのロード完了状態(UnityInstance)を統合的に利用可能にする
  • provideとinjectでUnityInstanceにアクセスできるようにする
  • provideしたインスタンスで透過的にinjectができる
  • 画面のリサイズでcanvasをリサイズする

全体像は以下になります。

続いて利用側です。

以下補足説明です。

vueuseのcreateInjectionStateについて、ここではinjectの呼び出し部分を少し修正しています(ライセンスMIT:https://github.com/vueuse/vueuse/blob/main/LICENSE)。目的はprovideを呼び出したコンポーネント内でinjectしたstateやComponentを使うためです。ここではUnityComponentを指します。

一番下のinjectWithSelfはvee-validateの実装で使われているものです。(ライセンスMIT:https://github.com/logaretm/vee-validate/blob/main/LICENSE)。provideのコンポーネント内でもinjectを透過的に使用できるようにするためです。

今回は、以下の部分がなるほど!と思ったところです。UnityComponentを定義するところになります。

defineComponentでコンポーネントを定義しています。template部分は、今回はrender呼び出しを使う方法で試してみました。このUnityComponentは、templateの中で通常のComponentと同じように呼び出せます。

Unity WebGLのcanvasをリサイズ可能にするためにuseResizeObserverでcanvasのラッパータグのリサイズをウォッチします。変更があればcanvasのwidthとheightを書き換えます。

loadedでUnityLoaderからのUnityInstance初期化の完了を受け取れます。

ComponentとComponentのロード完了(UnityInstance)状態(loaded)を統合的に扱えることで、分かりやすい実装にできるのではと思います。

参考リンク

 

2023.4.8

npmモジュール化しました。

nuxt-unity-webgl
Vue Composables introducing unity webgl containers. Latest version: 0.0.3, last published: a year ago. Start using nuxt-...

コメント

タイトルとURLをコピーしました