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

1	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>

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>

<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')
},
})

// Sample.jslib

mergeInto(LibraryManager.library, {

JSLibFunction: function () {

$nuxtUnityEvent.emit('hello', 'Hello from unity jslib')

})

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

参考リンク

コメント