You signed in with another tab or window.
Reload
to refresh your session.
You signed out in another tab or window.
Reload
to refresh your session.
You switched accounts on another tab or window.
Reload
to refresh your session.
By clicking “Sign up for GitHub”, you agree to our
terms of service
and
privacy statement
. We’ll occasionally send you account related emails.
Already on GitHub?
Sign in
to your account
So far I wasn't successful using vue-unity-webgl with Vue 3. I'm using
vue@3.0.2
and I get following warnings in chrome (origin is
runtime-core.esm-bundler.js?5c40:38
):
[Vue warn]: Property "$createElement" was accessed during render but is not defined on instance. at <UnityWebGL src="unity/Build/Web.json" width="1000" height="600" ... > at <App>
[Vue warn]: Property "_self" was accessed during render but is not defined on instance. at <UnityWebGL src="unity/Build/Web.json" width="1000" height="600" ... > at <App>
[Vue warn]: Unhandled error during execution of render function at <UnityWebGL src="unity/Build/Web.json" width="1000" height="600" ... > at <App>
followed by this error (origin is
runtime-core.esm-bundler.js?5c40:217
):
Chrome [Version 86.0.4240.198 (Official Build) (64-bit)] / Windows 10:
Uncaught TypeError: Cannot read property '_c' of undefined
Firefox [83.0 (64-bit)] / Linux:
Uncaught TypeError: can't access property "_c", _vm._self is undefined
I tested this on two different machines and on both machines the project is running fine with Vue 2.
Is there an easy fix or any Ideas on how to get it to work? Are there plans for Vue 3 support?
Here is my solution for loading Unity webGL games in vue3 as I wasn't able to get this module to work either. My solution was tested on Unity 2020.3.19f1 but probably works on all 2020.x versions and above.
First, put a copy of your webGL build folder in your vue
public
directory:
Then copy and paste the code below into a new component and update
const file = 'BUILD_FILE';
with your game name. There are further improvements that can be made here but this should be enough to get you started:
<template>
<canvas
id="unity-canvas"
width=900
height=600
style="width: 900px; height: 600px; background: #808080">
</canvas>
</template>
<script setup>
import { onMounted } from 'vue';
const sendMessage = (object, method, param) => {
window.gameInstance.SendMessage(object, method, param);
onMounted(() => {
const file = 'BUILD_FILE';
const script = document.createElement('script');
script.onload = () => {
createUnityInstance(document.querySelector('#unity-canvas'), {
dataUrl: `Build/${file}.data`,
frameworkUrl: `Build/${file}.framework.js`,
codeUrl: `Build/${file}.wasm`,
streamingAssetsUrl: 'StreamingAssets',
companyName: 'YOUR_COMPANY_NAME',
productName: 'YOUR_PRODUCT_NAME',
productVersion: 'YOUR_VERSION_NUMBER',
// matchWebGLToCanvasSize: false,
// Uncomment above to separately control WebGL canvas render size and DOM element size.
// devicePixelRatio: 1,
// Uncomment above to override low DPI rendering on high DPI displays.
}).then((unityInstance) => {
// setting this allows the usage of "window.gameInstance" in jslib plugins inside Unity
// it also sets up a simple shortcut we can use to provide a path into Unity from vue
window.gameInstance = unityInstance;
});
script.async = true;
script.src = `Build/${file}.loader.js`;
document.head.appendChild(script);
});
</script>
Some notes:
I used vue@3.2.20 and the composition api but this can just as easily be done with the options api if that is what you prefer
If you run into any issues try copying and pasting the values directly from your built webgl game's index.html into the script.onload section.
createUnityInstance
is a promise now and so if you want to be able to call
SendMessage
you need to .then or await the call and then map the unityInstance back to some variable. I use
window.gameInstance
because
window
is accessible in jslib plugins inside Unity.
For anyone else reading this. For Nuxt3 rc4 I had to specify the .br in my build files to get it to load.
EDIT: I also moved the unity instance from the window to it's own constant and it's working fine. Personal preference.
Here is my solution for loading Unity webGL games in vue3 as I wasn't able to get this module to work either. My solution was tested on Unity 2020.3.19f1 but probably works on all 2020.x versions and above.
First, put a copy of your webGL build folder in your vue
public
directory:
Then copy and paste the code below into a new component and update
const file = 'BUILD_FILE';
with your game name. There are further improvements that can be made here but this should be enough to get you started:
<template>
<canvas
id="unity-canvas"
width=900
height=600
style="width: 900px; height: 600px; background: #808080">
</canvas>
</template>
<script setup>
import { onMounted } from 'vue';
const sendMessage = (object, method, param) => {
window.gameInstance.SendMessage(object, method, param);
onMounted(() => {
const file = 'BUILD_FILE';
const script = document.createElement('script');
script.onload = () => {
createUnityInstance(document.querySelector('#unity-canvas'), {
dataUrl: `Build/${file}.data`,
frameworkUrl: `Build/${file}.framework.js`,
codeUrl: `Build/${file}.wasm`,
streamingAssetsUrl: 'StreamingAssets',
companyName: 'YOUR_COMPANY_NAME',
productName: 'YOUR_PRODUCT_NAME',
productVersion: 'YOUR_VERSION_NUMBER',
// matchWebGLToCanvasSize: false,
// Uncomment above to separately control WebGL canvas render size and DOM element size.
// devicePixelRatio: 1,
// Uncomment above to override low DPI rendering on high DPI displays.
}).then((unityInstance) => {
// setting this allows the usage of "window.gameInstance" in jslib plugins inside Unity
// it also sets up a simple shortcut we can use to provide a path into Unity from vue
window.gameInstance = unityInstance;
});
script.async = true;
script.src = `Build/${file}.loader.js`;
document.head.appendChild(script);
});
</script>
Some notes:
I used vue@3.2.20 and the composition api but this can just as easily be done with the options api if that is what you prefer
If you run into any issues try copying and pasting the values directly from your built webgl game's index.html into the script.onload section.
createUnityInstance
is a promise now and so if you want to be able to call
SendMessage
you need to .then or await the call and then map the unityInstance back to some variable. I use
window.gameInstance
because
window
is accessible in jslib plugins inside Unity.
have you tried it using vite? I have a problem when importing the wasm file
Here is my solution for loading Unity webGL games in vue3 as I wasn't able to get this module to work either. My solution was tested on Unity 2020.3.19f1 but probably works on all 2020.x versions and above.
First, put a copy of your webGL build folder in your vue
public
directory:
Then copy and paste the code below into a new component and update
const file = 'BUILD_FILE';
with your game name. There are further improvements that can be made here but this should be enough to get you started:
<template>
<canvas
id="unity-canvas"
width=900
height=600
style="width: 900px; height: 600px; background: #808080">
</canvas>
</template>
<script setup>
import { onMounted } from 'vue';
const sendMessage = (object, method, param) => {
window.gameInstance.SendMessage(object, method, param);
onMounted(() => {
const file = 'BUILD_FILE';
const script = document.createElement('script');
script.onload = () => {
createUnityInstance(document.querySelector('#unity-canvas'), {
dataUrl: `Build/${file}.data`,
frameworkUrl: `Build/${file}.framework.js`,
codeUrl: `Build/${file}.wasm`,
streamingAssetsUrl: 'StreamingAssets',
companyName: 'YOUR_COMPANY_NAME',
productName: 'YOUR_PRODUCT_NAME',
productVersion: 'YOUR_VERSION_NUMBER',
// matchWebGLToCanvasSize: false,
// Uncomment above to separately control WebGL canvas render size and DOM element size.
// devicePixelRatio: 1,
// Uncomment above to override low DPI rendering on high DPI displays.
}).then((unityInstance) => {
// setting this allows the usage of "window.gameInstance" in jslib plugins inside Unity
// it also sets up a simple shortcut we can use to provide a path into Unity from vue
window.gameInstance = unityInstance;
});
script.async = true;
script.src = `Build/${file}.loader.js`;
document.head.appendChild(script);
});
</script>
Some notes:
I used vue@3.2.20 and the composition api but this can just as easily be done with the options api if that is what you prefer
If you run into any issues try copying and pasting the values directly from your built webgl game's index.html into the script.onload section.
createUnityInstance
is a promise now and so if you want to be able to call
SendMessage
you need to .then or await the call and then map the unityInstance back to some variable. I use
window.gameInstance
because
window
is accessible in jslib plugins inside Unity.
Hi, thank you very much for sharing your code
I have a question that I would like to ask. The files exported by my unity have no .data, no .framework.js, and no wasm. The directory is as follows. How should I solve it?
have you tried it using vite? I have a problem when importing the wasm file
Not yet but it is on my product roadmap to move from vue-cli-service to vite as that's the new default. Can you post the exact error you get? I can maybe take a look and see if there is any suggestion for vite config that can help.
i solved by moving to
unity-webgl
