votetake / vue-unity-webgl Goto Github PK

View Code? Open in Web Editor NEW

207.0 207.0 51.0 504 KB

Unity 3d Component for VueJS

Vue 1.64% JavaScript 98.36%

vue-unity-webgl's People

Contributors

Stargazers

Watchers

Forkers

kolombet magneval kseiinnovations object-ify vrdate rocher0724 prog-maker echads vprime yinmuzr thooto uwitec soleyu icode5s xingningbo wu-jianyong panboren topud benticlaskaris snhwang sxjpage hobyq q42 rhclayto alexgr raphaelmaschinsen foreverliu borjagodoy kpansavuth201 regoresearch cryptosports mpenna cedricbloem alsritter feixuezhang deltacdevadmin cgqaq apocalysmmeta carlosmolano ininsayy andreibosco artusic ironnman zhanghaifei1997 phantomxm2021 macoluoer nickhaecker ryonzhang yeqingli-ko

vue-unity-webgl's Issues

Messages from unity to js

Hi, how can I accept a message from unity?

how can i use externalProgress property

when i introduction a function, The following error occurs:

Error in event handler for "onload": "ReferenceError: UnityProgress is not defined"

Any demo

I have import this moudle into my project，and I can sendmessage to webgl, but could not receive the message from webgl . Does any one have a demo related to this?

Unknown custom element: <unity>

I am trying to run a WebGL application in Vue.js.

I don't understand vue does'nt recognize my custom unity element while I respect the documentation..

My vue component :

<template>
        <unity :src="asset_url + 'unity_map/build/Main.json'" width="1000" height="600" :unityLoader="asset_url + 'unity_map/build/UnityLoader.js'"></unity>
</template>

<script>
    import { Unity, Message } from 'vue-unity-webgl';

    export default {
        components: {
            Unity
        },
    }
</script>

<style lang="scss" scoped>
</style>

My html file :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Test vue</title>

    {% block stylesheets %}
    {% endblock %}

</head>

<body>
    <div id="app-vue"></div>


    {% block data_layout %}
        <script type="text/javascript" id="dataLayout">
            var dataLayout = {};

            dataLayout.base_url = "{{ path('homepage') }}";
            dataLayout.asset_url = "{{ asset('assets/') }}";
            dataLayout.locale = "{{ app.request.getLocale() }}";
        </script>
    {% endblock %}


    <script src="{{ asset('build/unityload.js') }}"></script>

    <script type="text/javascript" src="{{ asset('build/entrypoint.js') }}"></script>
</body>

<footer>
</footer>

And my webpack config :

// webpack.config.js
var Encore = require('@symfony/webpack-encore');

Encore
// the project directory where all compiled assets will be stored
    .setOutputPath('web/build/')

    // the public path used by the web server to access the previous directory
    .setPublicPath('/build')


    /** Add entry **/

    // will create public/build/app.js and public/build/app.css
    .addEntry('app', './web/assets/js/app.js')
    .addEntry('entrypoint', './app/Resources/views/front/entrypoint.js')
    .addEntry('unityload', './web/assets/unity_map/Build/UnityLoader.js')

    //Style
    .addStyleEntry('test_style',[
        './web/assets/scss/test.scss'
    ])

     /***************/


    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()

    // enable source maps during development
    .enableSourceMaps(!Encore.isProduction())

    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()

    // show OS notifications when builds finish/fail
    .enableBuildNotifications()

    // create hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // allow sass/scss files to be processed
    .enableSassLoader()

    // to enable vue
    .enableVueLoader()
;

// export the final configuration
module.exports = Encore.getWebpackConfig();

I'm looking for several hours, please help me xD

Hi,
Have you worked on support for Vue Hot Reload?
It appears that the Unity WebGL canvas reloads each time the main Vue app code is updated.
Any way to have it cache the Unity WebGL connection, and avoid reloading the entire WebGL on hot reload?

Calling JavaScript functions in Vue from Unity scripts

Hi,
I need to calling a function in my vue component from Unity scripts. What is the best way to do that?
Here, there is a exemple with React: https://npm.taobao.org/package/react-native-unity-webgl

If you know a solution to do the same thing in Vue ...

Thanks in advance.

multiple unity instances can not be loaded successfully in SPA

I use vue-router in my SPA, and here is my situation.

Scenario 1 : PageA( unity instance successfully loaded ) -> PageB ( failed to load )
Scenario 2 : PageA( unity instance successfully loaded ) -> PageC ( a page without using vue-unity-webgl) -> PageB ( successfully loaded )

I made some modifications in the source code as follows, and the instances distributed in multiple pages can be loaded successfully.

I suppose this is because all the unity instance share a fixed id 'unity-container', but i still can not figure out why scenario 2 happened.

<template>
     ...
    <div :id="container_id" v-bind:style="{ width: width + 'px', height: height + 'px' }"></div>
     ...
</template>

  data() {
    return {
       ...
      // a simple random id generator
      container_id: Number(Math.random().toString().substr(3, length) + Date.now()).toString(36)
    }

  mounted() {
      ...
      this.gameInstance = UnityLoader.instantiate(this.container_id, this.src, params)
      ...
  }

stale vue-unity-webgl.js

vue-unity-webgl.js is stale on github so if you use the git based install method now you don't get the latest message capabilities.

Since project is published to npm it works well to just 'npm install vue-unity-webgl' instead of the git based recommendation

Is there any plan for Unity 2020 support?

Hi,
since Unity 2020 has changed their WebGL build output pipeline, such as UnityLoader structure has changed.
Is there any plan for an update according to this issue?
Best,

Remove fullscreen label

Hello there!
Is there a way to remove the fullscreen label or edit its styling? The standard fullscreen label is clashing with my footer.

Still: thank you for this awesome component, you saved me a lot of time!
Have a great day

Textinputs not working when I implemented Unity

When I import a unity resource in to the index all text inputs, and text area stop working

the call:
<unity src="UnityResources/Build/cubito.json" width="600" height="400" unityLoader="UnityResources/Build/UnityLoader.js" ref="myInstance"></unity>

unitywegl logo

How to display the loading logo of unitywebgl

Example Repo

I put together a vue-unity-webgl example repo in case anyone is having difficulty with implementation

Unable to use with Nuxt

Hi,
I'm trying to use this component with Nuxt but when I try to add it via NPM I receive a lot of Errors and I cannot install it?

How can implement it?

Fullscreen button bug

When I use hideFooter=true in tag, it does not seem to hide the footer. I still got it and the display of is seems to contain text and the picture at the same time, which is a little bit ugly.

Error Security Policy

Hi
I'd like to use this solution in my app but when i setup my vue Unity Webgl i got this error :

"Refused to load the script 'blob:http://127.0.0.1:8000' because it violates the following Content Security Policy directive: "script-src * 'unsafe-inline' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback."

I tried to add some other policy but i'm totally lost with it, do you have some tips to help me with my problem ?

Actually i got this security policy :
meta http-equiv="Content-Security-Policy" content="default-src * gap: file:; child-src * 'self' blob: http: ;style-src 'self' 'unsafe-inline'; img-src 'self' data: ; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'self' ws: ;media-src *; frame-src *;"

How to hide footer

I found your template has a footer contains fullscreen bottom.
how can i remove it. I have saw your sourcecode, I modefy your Unity.vue file it seems doesnot work.

The UnityLoader was not defined

I am trying to run my WebGL application in Vue.js(version: 2.8.2). unityLoader attribute doesn't see the path somehow. I tried 3 different ways but all of them showed me the same error and I wonder if there is any solution.

The UnityLoader was not defined, please add the script tag to the base html and embed the UnityLoader.js file Unity exported or use "unityLoader" attribute for path to UnityLoader.js.

Things I have tried:

Adding UnityLoader.js in HTML:
<script type="javascript" src="../assets/games/game1/Build/UnityLoader.js"></script>
Using require() function in Home.vue:
require('../assets/games/game1/Build/UnityLoader.js');
Adding the script tag in index.html :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
  <script type="javascript" src="./assets/games/game1/Build/UnityLoader.js"></script>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

After adding it in index.html, I got a different error:
GET http://localhost:9292/assets/games/game1/Build/UnityLoader.js net::ERR_ABORTED

Home.Vue with first try:

<template>
  <unity>
    <script type="javascript" src="../assets/games/game1/Build/UnityLoader.js"></script>
    <unity src="../assets/games/game1/Build/game1.json"
           width="1000" height="600" unityLoader="../assets/games/game1/Build/UnityLoader.js"></unity>
  </unity>
</template>
<script>
  import { Unity, Message } from 'vue-unity-webgl';

  require('../assets/games/game1/TemplateData/style.css');

  export default {
    components: {
      Unity,
    },
    name: 'homepage',
    data() {
      return {
        title: 'Homepage',
      };
    },
    methods: {
      onClick() {
        Message('object', 'method', 'param');
      },
    },
  };

</script>
<style scoped>
</style>

Is Vue 3 support planned?

So far I wasn't successful using vue-unity-webgl with Vue 3. I'm using [email protected] 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?

Could I use the absolute path?

Hi,the example is
src="static/Build/game.json" width="1000" height="600" unityLoader="static/Build/UnityLoader.js"

and i used the absolute path,such as:

src="D:/projects/test/static/Build/game.json" width="1000" height="600" unityLoader="D:/projects/test/static/Build/UnityLoader.js"

It runned failed,the log is
Uncaught SyntaxError: Unexpected token '<'
Uncaught TypeError: UnityLoader[n] is not a function

Install undefined

got this error,

Uncaught TypeError: Cannot read property 'install' of undefined at Function.Vue.use (vue.esm.js?efeb:4639) at eval (main.js?3479:27) at Object../src/main.js (app.js:2040) at __webpack_require__ (app.js:708) at fn (app.js:113) at Object.0 (app.js:2185) at __webpack_require__ (app.js:708) at app.js:806 at app.js:809

what does 'Module' mean?

I can't find the document of unityloader.js.
I only found some snippets of code in following url.

var myGame = UnityLoader.instantiate("gameContainerId", "http://mydomain/myfolder/Build/mygame.json", {onProgress: myProgress, Module: {TOTAL_MEMORY: 0x20000000}});

But I still don't know what it's meaning.

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c')

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c')
at Proxy.render (vue-unity-webgl.js:7050)
at renderComponentRoot (runtime-core.esm-bundler.js:761)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:4529)
at ReactiveEffect.run (reactivity.esm-bundler.js:160)
at setupRenderEffect (runtime-core.esm-bundler.js:4655)
at mountComponent (runtime-core.esm-bundler.js:4438)
at processComponent (runtime-core.esm-bundler.js:4396)
at patch (runtime-core.esm-bundler.js:3991)
at mountChildren (runtime-core.esm-bundler.js:4187)
at mountElement (runtime-core.esm-bundler.js:4096)

Unity canvas is not releasing memory

Upon a page switch the canvas never releases its memory. If you leave the page then return it will reload the page again it stacks memory and will quickly overflow. Looking into it, it seems that they have seen this issue at Unity, and will solve it in future versions with .Quit() on destroy, however that version is quite far away. The only other solution I've been able to find is IFrame the canvas then dispose of it.

how can component support canvas.toDataUrl()

I meet new issues
for now，I have set context config below

let canvas = document.getElementById('#canvas')
canvas.getContext('webgl', {preserveDrawingBuffer: true})
console.log(canvas.toDataURL('image/jpeg',1.0))

it only appear blank on my base64url ， I‘m not quit familiar with webgl
how can I get screen image in my unity canvase， thx

calling vue js function from unity

can unity call the function in vue js?
so I have a case where when the game is finished, vue knows that and runs the function,

Cannot use scss to select #unity-container

I've tried to use scss to select #unity-container element, but the element did not have any response.

Below is my scss structure.
.webgl-content { height: 100%; #unity-container { height: 1100px; canvas { height: 100%; } } }