Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

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

Jump to bottom

Unknown custom element: <unity> #5

Closed
alexis-regnaud opened this issue Jul 13, 2018 · 6 comments
Closed

Unknown custom element: <unity> #5

alexis-regnaud opened this issue Jul 13, 2018 · 6 comments

Comments

@alexis-regnaud
Copy link

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

capture7

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
@alexis-regnaud
Copy link
Author

It's ok if I import with this syntax : import Unity from 'vue-unity-webgl'
But how import Message component ?

@Rocher0724
Copy link

Rocher0724 commented Jul 20, 2018 •
edited
Loading

@alex83130
/node_modules/vue-unity-webgl/src/Unity.vue

I've done a lot about using messages and I'm still looking for them.
The only way I succeeded was when I used 'this.gameInstance.SendMessage' directly at the node_module address above. That is, when you wrote the code in the nodeModule.

I'm trying to do something in the .vue I'm writing, but the message is not yet successful.

If the @votetake sees this, please let me know how to use the messages. I've done almost everything.

@alexis-regnaud
Copy link
Author

Thanks @Rocher0724 ! But I would not like to write directly to the node_modules...

@votetake you have a solution to import the message object in my vue component and why the import in the readme no work for me ?

@alexis-regnaud
Copy link
Author

alexis-regnaud commented Jul 31, 2018 •
edited
Loading

  • If I use :
    import { Unity, Message } from 'vue-unity-webgl'

I have no map and this error :

image

  • If I use :
    import Unity from 'vue-unity-webgl'

It's ok for the map but I haven't not access to the Message method

  • If I use :
    import { Message } from 'vue-unity-webgl'
    import  Unity from 'vue-unity-webgl/src/Unity'

It's ok for the map, but I have this error if I try to send a Message :

image

@alexis-regnaud
Copy link
Author

And in your "vue-unity-webgl/src/index.js", only the Unity object is export, and there is no export message object. Is it normal ?

@vprime
Copy link
Contributor

vprime commented Dec 23, 2018

I have a fix for this problem in my pull request #9

@votetake votetake closed this as completed Feb 5, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@votetake @vprime @alexis-regnaud @Rocher0724