nuxt3でnuxt-unity-webglモジュールを作成

nuxt3でunity webglを簡単に組み込みできるnpmモジュールを書いてみました。unityのwebglビルドを配置してコンポーネントを指定するだけです。windowのリサイズに合わせてcanvasタグのサイズも変わるようにしています。

GitHub - moritetu/nuxt-unity-webgl: Vue composable introduces component and utilities for unity WebGL container

Vue composable introduces component and utilities for unity WebGL container - moritetu/nuxt-unity-webgl

以下のような感じで組み込むことができます。

pnpm add -D nuxt-unity-webgl

app.vue

<script lang="ts" setup>
useProvideNuxtUnity(undefined, (unity) => {
  // eslint-disable-next-line no-console
  console.log(unity)
})
const { NuxtUnity, loaded, SendMessage } = useNuxtUnityOrThrow()
const callUnityFunction = () => {
  // scalar or json object are enable as argument
  SendMessage('GameObject', 'HelloMethod', { message: 'hello' })
}
const nuxtApp = useNuxtApp()

nuxtApp.$nuxtUnityEvent.on('nuxt-unity:ready', (providerId, unityInstance) => {
  // eslint-disable-next-line no-console
  console.log(providerId, unityInstance)
})

nuxtApp.$nuxtUnityEvent.on('hello', (message: string) => {
  // eslint-disable-next-line no-console
  console.log(message)
})
</script>

<template>
  <div class="container">
    <NuxtUnity
      width="500px"
      height="500px"
      unity-loader="/unity/Build.loader.js"
      :config="{
        dataUrl: '/unity/Build.data',
        frameworkUrl: '/unity/Build.framework.js',
        codeUrl: '/unity/Build.wasm',
      }"
      :resizable="true"
      :refresh-delay-time="100"
    ></NuxtUnity>
  </div>
  <button @click="callUnityFunction">SendMessage</button>
</template>

Unity側では、jslibファイルでWebの世界と連携すると思います。nuxt-unity-webglでは、モジュールイストールでjslibとnuxt間の連携のためのプラグインも一緒にインストールします。プラグインの実体はEventEmitterと同様なインターフェースのオブジェクト（EventEmitter3）でメッセージを送信とハンドリングができます。

// Sample.jslib
mergeInto(LibraryManager.library, {
  JSLibFunction: function () {
    $nuxtUnityEvent.emit('hello', 'Hello from unity jslib')
  },
})

nuxt3でnuxt-unity-webglモジュールを作成

参考リンク

コメント