Comments (9)
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 [email protected] 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 callSendMessage
you need to .then or await the call and then map the unityInstance back to some variable. I usewindow.gameInstance
becausewindow
is accessible in jslib plugins inside Unity.
from vue-unity-webgl.
same errors with me,i think it should be update to vue3.
from vue-unity-webgl.
same here, is there any solution for vue3?
from vue-unity-webgl.
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.
from vue-unity-webgl.
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 [email protected] 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 callSendMessage
you need to .then or await the call and then map the unityInstance back to some variable. I usewindow.gameInstance
becausewindow
is accessible in jslib plugins inside Unity.
have you tried it using vite? I have a problem when importing the wasm file
from vue-unity-webgl.
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 [email protected] 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 callSendMessage
you need to .then or await the call and then map the unityInstance back to some variable. I usewindow.gameInstance
becausewindow
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?
from vue-unity-webgl.
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.
from vue-unity-webgl.
The files exported by my unity have no .data, no .framework.js, and no wasm.
Can you try doing a build where in your publishing settings you set "Compression Format" to disabled and see if that gets you the correct files?
from vue-unity-webgl.
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
from vue-unity-webgl.
Related Issues (20)
- stale vue-unity-webgl.js HOT 1
- Error Security Policy
- Unable to use with Nuxt HOT 1
- Example Repo HOT 1
- Textinputs not working when I implemented Unity HOT 1
- How to hide footer HOT 1
- how can component support canvas.toDataUrl()
- what does 'Module' mean?
- Cannot use scss to select #unity-container HOT 1
- Remove fullscreen label HOT 5
- multiple unity instances can not be loaded successfully in SPA
- Fullscreen button bug HOT 1
- unitywegl logo HOT 1
- how can i use externalProgress property HOT 1
- calling vue js function from unity HOT 3
- Is there any plan for Unity 2020 support? HOT 10
- Messages from unity to js HOT 7
- Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c') HOT 5
- Could I use the absolute path? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-unity-webgl.