或者说unity和vue3的交互

replaced Pointer__stringify() with UTF8ToString in 2021.2 onwards

I would love to have Typescript definitions.

Hello!

I use UnityWebGL with Vue.
I have a wrapper component for it.

In mounted hook:

this.UnityContext = new UnityWebgl('#canvas', {
      loaderUrl: '/unity/test-customizer/BuildWA.loader.js',
      dataUrl: '/unity/test-customizer/BuildWA.data',
      frameworkUrl: '/unity/test-customizer/BuildWA.framework.js',
      codeUrl: '/unity/test-customizer/BuildWA.wasm',
   })

this.$once('hook:beforeDestroy', function () {
      console.log('hook:beforeDestroy');
      this.UnityContext.destroy()
      this.UnityContext = null
})

beforeDestroy hook works. But when I navigate between pages that use UnityWebGL I still have this warning:

Unity Webgl: Unityloader already exists

Could you please explain, what am I doing wrong?

Our case is a Vue3 SPA where users can play various different Unity games. Because it is an SPA, users can play different games within the same single session. When this happens, we see problems with loading any streaming assets, like translation files.

With this information, I started investigating the loader part.

This is what I've observed so far:

• The first game that loads creates 2 <script>s in the DOM, the .loader.js and the .framework.js.
• When the first game is unloaded (with await unityContext.unload();), both of these scripts disappear from the DOM.
• The second game that loads only creates 1 <script>, for the .framework.js.
• This second game mostly "works", but things like translations are not loaded.
• By looking at the network requests, I can see that the .loader.js code from the first game is reused from browser cache to load the second game.
• In the build files, I see that the .loader.js files of the two games are similar, but not identical. Because there is a difference, I expect that this reusing should not happen.
• Looking at the code, I think that this line is relevant: https://github.com/Meqn/UnityWebGL.js/blob/main/packages/lib/src/loader.ts#L28

If I change my code after unload() so that it sets window.createUnityInstance = null, then loading a second game will create the 2 <script>s and I don't see problems with translations anymore.

From what I understand, even if the <script> tag for the .loader.js is deleted, the window.createUnityInstance function will still exist in the browser's memory.

I'm not sure my solution of unsetting the createUnityInstance is correct, which is why I'm posting here.

Sorry that I don't have a reproduction. Hope this helps to clear up the issue.

Hi, thanks for your great plugin!

Everything is working fine except communication from unity to vue. I want to listen on a method listenToUnity() in Unity. My code in Vue looks like this:

Unity.on("listenToUnity", () => console.log("I am listening to unity."));

What do I have to do in Unity? Your docu says __UnityLib__.showDialog(data), but I dont understand what I should do..

Can you help me please?

ppVis

I wanted to suggest a small update.
Unity's canvas captures all the keyboard input that comes in. No longer being able to interact with the rest of the applioation.

To get around this problem in the Unity project you need to make a small change:
#if !UNITY_EDITOR && UNITY_WEBGL WebGLInput.captureAllKeyboardInput = false; #endif

This causes Unity to no longer capture all input once the focus is lost, however, you can no longer reassign it.

To solve this problem it is nesessary to add the tabindex attribute to the canvas.
Then the library should directly generate the canvas with the attribute
<canvas id="unity-canvas-1" style="width: 100%; height: 100%; cursor: default;" width="1689" height="356" tabindex="1"></canvas>

用C#开发的unity。
在web端使用window.xxx能监听到，使用插件的on('xxx')监听不到什么原因？

Thank you for your great plugin!

Almost works properly.
But setFullscreen() is not working on My environment(Unity2020.3.24f1).

VueCode:
Unity.setFullScreen(true);

Error:
"TypeError: Unity.setFullScreen is not a function"

Please, Can you help me ?

ittoh0819

Hello!

We have an app with different games. User can select a game from map-page.
Each game uses unity. We have a wrapper component for unity.

The problem is that when you open the NEXT game unity build loads twice.

So, for example, you open the first game (unity build loads). Then you go to map-page and choose another game. When this another game page is opened the build loads twice for some reason.

Do you have any idea what could be the reason?

I have used the pluguin in Vue2 & Vue3 and it works well. But when i try to use it in a old version vue2(v2.6.11 and parser is "babel-eslint"), it doesn't work any more. It can render a canvas which id is "unity-canvas-1", but there are noting on the cavans; I debug it in console, it's unityInstance and unityLoader are all null. Can you plz tell me any solution to solve the problem?
last day：
I found in unity-webgl/vue/index.esm.js line 42: cavas.value is undefine. So the code in if condition never run;

onMounted(() => {
var _a;
if (canvas.value) {
(_a = props.unity) === null || _a === void 0 ? void 0 : _a.create(canvas.value);
}
});
Do you have some idea to solve it?

这是unity目录

loaderUrl,dataUrl,frameworkUrl,codeUrl这些和我目录下的文件好像都对应不上

Hi, first off great work! I have this working well with a Vue2 project. I'm upgrading my project to Nuxt 3.6.5 which runs on Vue3.3.4 and am receiving the following error:

npm WARN config global --global, --local are deprecated. Use --location=global instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: nuxt-app@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR! peer vue@"^3.3.4" from @nuxt/[email protected]
npm ERR! node_modules/@nuxt/vite-builder
npm ERR! @nuxt/vite-builder@"3.6.5" from [email protected]
npm ERR! node_modules/nuxt
npm ERR! dev nuxt@"^3.6.5" from the root project
npm ERR! 2 more (@nuxt/devtools, @nuxt/devtools-kit)
npm ERR! peer vue@">=2.7 || >=3" from @unhead/[email protected]
npm ERR! node_modules/@unhead/vue
npm ERR! @unhead/vue@"^1.1.30" from [email protected]
npm ERR! node_modules/nuxt
npm ERR! dev nuxt@"^3.6.5" from the root project
npm ERR! 2 more (@nuxt/devtools, @nuxt/devtools-kit)
npm ERR! 6 more (@vitejs/plugin-vue, @vitejs/plugin-vue-jsx, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! unity-webgl@"^3.5.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/vue
npm ERR! peer vue@">= 2.5 < 2.7" from @vue/[email protected]
npm ERR! node_modules/@vue/composition-api
npm ERR! peerOptional @vue/composition-api@"^1.7.0" from [email protected]
npm ERR! node_modules/unity-webgl
npm ERR! unity-webgl@"^3.5.1" from the root project

I was trying to work on a fix with your repo, but when I clone it and run npm install I receive the following error:

npm WARN config global --global, --local are deprecated. Use --location=global instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR! dev vue@"^3.2.38" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@">= 2.5 < 2.7" from @vue/[email protected]
npm ERR! node_modules/@vue/composition-api
npm ERR! dev @vue/composition-api@"^1.7.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

I'd love to help get this working in Vue3 if possible. Any guidance would be appreciated.

Thanks again!

I am developing a Unity game that will run in the browser. It runs fine but I need to call a C# function from my Vue component and send a string to the WebGL app. For some reason, this does not work. If I provide the Scene name as an argument, I get an error that the scene does not exist. If I provide the GameObject name, I get an error that the method I'm calling doesn't exist. I initally had the unityContext.send function called right after I instantiate the unityContext variable but that didn't work either so I set it up as a button to see if it's a loading thing where the function was being called before objects in the scene had loaded. It doesn't work more in this format when I click on the button... Any help would be greatly appreciated!

This is what my Vue component currently looks like:

<script setup>
import { shallowRef } from "vue";
import { useRouter, useRoute } from "vue-router";
import useTimelineStepper from "@/composables/timelinestepper";
import useSmileStore from "@/stores/smiledata"; // get access to the global store
import UnityWebgl from "unity-webgl";
import UnityVue from "unity-webgl/vue";

const router = useRouter();
const route = useRoute();
const smilestore = useSmileStore();

const { next, prev } = useTimelineStepper();

if (route.meta.progress) smilestore.global.progress = route.meta.progress;

// assign conditions here for testing
const conditions = ["level1"];

// load unity
const unityContext = new UnityWebgl({
  loaderUrl: "/unity/Build/creative-physical-reasoning.loader.js",
  dataUrl: "/unity/Build/creative-physical-reasoning.data",
  frameworkUrl: "/unity/Build/creative-physical-reasoning.framework.js",
  codeUrl: "/unity/Build/creative-physical-reasoning.wasm",
});

// setup event listener for button click
function loadData() {
  console.log("loadData");
  unityContext.send("Menu", "LoadAllLevels", JSON.stringify(conditions));
}

function finish(goto) {
  // smilestore.saveData()
  unityContext.unload();
  if (goto) router.push(goto);
}
</script>

<template>
  <div class="page">
    <UnityVue :unity="unityContext" width="1080" height="675" />
    <button class="button is-success is-light" id="finish" @click="finish(next())">
      next &nbsp;<FAIcon icon="fa-solid fa-arrow-right" />
    </button>
    <button class="button is-success is-light" id="loadData" @click="loadData()">
      load data
    </button>
  </div>
</template>

https://github.com/Meqn/UnityWebGL.js/wiki/Document

Document

• Unity webgl Manual
• 使用 WebGL 模板
• WebGL：与浏览器脚本交互

中文教程

• Unity WebGL 开发指南
• Unity WebGL 与 JS通信
• 前端JS脚本调用Unity内的函数

我目前使用electron打包桌面程序，工具使用的是electron-vite，资源放在了resources目录下，打包后可以正常运行，但是不能替换unity资源内容，一旦进行替换就不能正确加载，根据开发者工具里的内容看像是loader.js被一并打包了，如果想要把unity的内容单独提取出来做热替换是否可行，如果可行我该怎么做，感谢

I'm getting the following error when building:

/vercel/path0/node_modules/.pnpm/[email protected][email protected]/node_modules/unity-webgl/dist/index.esm.js:380
export { UnityWebgl as default };
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

I can solve it by editing the package.json of unity-webgl to have "type": "module", or by doing this weird import:

import UnityWebgl from "unity-webgl/dist/index.js";
import UnityVue from "unity-webgl/vue/index.js";

My own package.json has type: module as I require it for unrelated things.

Am using Node.js 18

Even with the uncommon import strategy I still get a warning:
ReferenceError: window is not defined

I am trying to load the indicated files of a WebGL build from local path. Neither with a new project, nor with the example works.

文档中的vue2.x 以下语句
import VueUnity from 'Unity-webgl/vue'
大小写错误。
应该是 import VueUnity from 'unity-webgl/vue'

您好，首先感谢您开源一个vue社区唯一的untiy webgl库！

不幸的是我按照 example.vue 里的代码编译会报错，复现步骤如下
1.新建一个vue2项目
2. 安装npm install unity-webgl
3. 把自带的 HelloWorld.vue 改成说明文档里的例子

<template>
  <Unity :unity="unityContext" width="800px" height="600px" />
</template>

<script>
import UnityWebgl from 'unity-webgl'

const Unity = new UnityWebgl({
  loaderUrl: 'Build/OUT_BIM.loader.js',
  dataUrl: "Build/OUT_BIM.data",
  frameworkUrl: "Build/OUT_BIM.framework.js",
  codeUrl: "Build/OUT_BIM.wasm"
})

export default {
  name: 'Unity',
  component: {
    Unity: UnityWebgl.vueComponent
  },
  data() {
    return {
      unityContext: Unity
    }
  }
}
</script>

然后 npm run serve 出现这么一个错误：

R:\html\hello-world\src\components\HelloWorld.vue
  16:9  error  Component name "Unity" should always be multi-word  vue/multi-word-

请大佬不吝赐教

Hi, thanks for the effort for this plugin.
I tested the Vue 2 sample(https://stackblitz.com/edit/unity-webgl-vue2-demo?file=package.json) but I found that there is some issue might cause the webgl unable to render properly.


Can you help to check on this issue?
Thx in advance for the support.

Hello, I created a game with unity and WebGL. Everything works fine on every device except for iOS. For some reason when i try to emit some values from unity to a function in javascript IOS return me an error and unity crashes. The error: __UnityLib__unityStarted() is not a function unityStarted is my function tha needs to be called to communicate in javascript. Again it gives me this error only on an Ipad or Iphone.

For the frontend tecnologies i'am using Nuxt (vuejs)

Thanks in advance

Code cannot be run on unity2021，Can you provide a simple demo