├── .gitignore
├── .npmignore
├── .babelrc
├── src
    ├── index.js
    └── Unity.vue
├── rollup.config.js
├── package.json
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log
5 | yarn-error.log
6 | .idea/


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log
5 | yarn-error.log
6 | .idea/


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     [
 4 |       "env",
 5 |       {
 6 |         "modules": false
 7 |       }
 8 |     ]
 9 |   ]
10 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import unity from './Unity.vue'
 2 | 
 3 | const install = Vue => {
 4 |   Vue.component('unity', unity)
 5 | }
 6 | 
 7 | unity.install = install
 8 | 
 9 | // export const Unity = unity
10 | 
11 | export default unity
12 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import vue from 'rollup-plugin-vue';
 2 | import babel from 'rollup-plugin-babel';
 3 | import resolve from 'rollup-plugin-node-resolve';
 4 | 
 5 | export default {
 6 |   entry: './src/index.js',
 7 |   dest: 'vue-unity-webgl.js',
 8 |   plugins: [
 9 |     resolve(),
10 |     vue({compileTemplate: true}),
11 |     babel()
12 |   ],
13 |   format: 'umd',
14 |   name: 'vueUnityWebGL'
15 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-unity-webgl",
 3 |   "version": "1.2.0",
 4 |   "description": "Unity WebGL component for VueJs application",
 5 |   "main": "src/index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/votetake/vue-unity-webgl.git"
12 |   },
13 |   "keywords": [
14 |     "vue",
15 |     "unity",
16 |     "webgl"
17 |   ],
18 |   "author": "votetake",
19 |   "license": "ISC",
20 |   "bugs": {
21 |     "url": "https://github.com/votetake/vue-unity-webgl/issues"
22 |   },
23 |   "homepage": "https://github.com/votetake/vue-unity-webgl#readme",
24 |   "dependencies": {
25 |     "babel-core": "^6.26.0",
26 |     "babel-preset-env": "^1.6.0",
27 |     "rollup": "^0.50.0",
28 |     "rollup-plugin-babel": "^3.0.2",
29 |     "rollup-plugin-node-resolve": "^3.0.0",
30 |     "rollup-plugin-vue": "^2.4.2",
31 |     "vue": "^2.5.2",
32 |     "vue-template-compiler": "^2.5.2"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-unity-webgl
 2 | 
 3 | Easy to use Unity 5.6 or newer (also Unity 2017 or newer)  WebGL player component for your VueJS application. Embed your Unity application in your application for writing interactive interfaces with two way Unity and VueJS communication.
 4 | 
 5 | <img src="https://vuejs.org/images/logo.png" height="50px"/> <img src="https://upload.wikimedia.org/wikipedia/commons/8/8a/Official_unity_logo.png" height="50px"/>
 6 | 
 7 | ## Install
 8 | 
 9 | ```Bash
10 | npm install vue-unity-webgl
11 | ```
12 | 
13 | ## Usage
14 | To get stated import the Unity component from `vue-unity-webgl`. Once imported you can use the Unity component to load in your Unity content. Place the Unity tag along with a src to the json file Unity exported.
15 | 
16 | ```js
17 | <template>
18 |   <unity src="static/Build/game.json" width="1000" height="600" unityLoader="static/Build/UnityLoader.js"></unity>  
19 | </template>
20 | 
21 | <script>
22 |   import Unity from 'vue-unity-webgl'
23 |   
24 |   new Vue({
25 |     components: { Unity }
26 |   })
27 | </script>
28 | ```
29 | > ### Notice
30 | > Don't forget to add a script tag to load the `UnityLoader.js` file if miss unityLoader attribute, exported by Unity in your base html file, index.html in example.
31 | 
32 | 
33 | 
34 | ## Optional attributes
35 | 
36 | * `src` - Path to json build
37 | * `width` - width div container
38 | * `height` - height div container
39 | * `unityLoader` - path to UnityLoader, with this
40 | 
41 | 
42 | # Communication
43 | Unity allows you to send Javascript messages to the Unity content. In order to do so using VueJs you have to add a ref to the `<unity>` tag, and call the `message(object, method, param)` method through `this.$refs`.
44 | 
45 | ```js
46 | <template>
47 |   <unity src="static/Build/game.json" width="1000" height="600" unityLoader="static/Build/UnityLoader.js" ref="myInstance"></unity>  
48 | </template>
49 | 
50 | <script>
51 | import Unity from 'vue-unity-webgl'
52 | 
53 | new Vue({
54 |   methods: {
55 |     onClick () {
56 |       this.$refs.myInstance.message("object", "method", "param")
57 |     }
58 |   }
59 | })
60 | </script>
61 | ```
62 | 
63 | # styling
64 | The player will be injected in the a component with the class `unity-container`. To style to player use the following sass styling. To style the loader you can style the component with the class `unity-loader`. See the example below.
65 | 
66 | ```scss
67 | .unity {
68 |     .unity-container {
69 |         canvas {
70 |             
71 |         }
72 |     }
73 |     .unity-loader {
74 |         .bar {
75 |             .fill {
76 |                 /* the width will be set by the component */
77 |             }
78 |         }
79 |     }
80 | }
81 | ```
82 | 
83 | # html example
84 | ```html
85 | <!DOCTYPE html>
86 | <html>
87 |     <head>
88 |         <title>My Unity Game</title>
89 |     </head>
90 |     <body>
91 |         <div id="app"></div>
92 |     </body>
93 |     <script src="Build/UnityLoader.js"></script>
94 |     <script src="static/compiled/bundle.js"></script>
95 | </html>
96 | ```


--------------------------------------------------------------------------------
/src/Unity.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="webgl-content">
  3 |     <div :id="containerId" v-bind:style="{ width: width + 'px', height: height + 'px' }"></div>
  4 |     <div v-if="loaded == false">
  5 |       <div class="unity-loader">
  6 |         <div class="bar">
  7 |           <div class="fill" v-bind:style="{ width: progress * 100 + '%'}"></div>
  8 |         </div>
  9 |       </div>
 10 |     </div>
 11 |     <div class="footer" v-if="hideFooter !== true">
 12 |       <a class="fullscreen" @click.prevent="fullscreen">Fullscreen</a>
 13 |     </div>
 14 |   </div>
 15 | </template>
 16 | 
 17 | <script>
 18 |   import Vue from 'vue'
 19 | 
 20 |   export default {
 21 |     props: ['src', 'module', 'width', 'height', 'externalProgress', 'unityLoader', 'hideFooter'],
 22 |     name: 'UnityWebGL',
 23 |     data () {
 24 |       return {
 25 |         containerId: 'unity-container-' + Number(Math.random().toString().substr(3, length) + Date.now()).toString(36),
 26 |         gameInstance: null,
 27 |         loaded: false,
 28 |         progress: 0,
 29 |         error: null
 30 |       }
 31 |     },
 32 |     methods: {
 33 |       fullscreen () {
 34 |         this.gameInstance.SetFullscreen(1)
 35 |       },
 36 |       message(gameObject, method, param) {
 37 |         if (param === null) {
 38 |           param = ''
 39 |         }
 40 |         if (this.gameInstance !== null){
 41 |           this.gameInstance.SendMessage(gameObject, method, param)
 42 |         } else {
 43 |           console.warn('vue-unity-webgl: you\'ve sent a message to the Unity content, but it wasn\t instantiated yet.')
 44 |         }
 45 |       }
 46 |     },
 47 |     beforeMount() {
 48 | 
 49 |       if (!this.eventBus) {
 50 |         this.eventBus = new Vue({
 51 |           data: {
 52 |             ready: false,
 53 |             load: false
 54 |           }
 55 |         })
 56 |       }
 57 | 
 58 |       if (typeof UnityLoader === 'undefined' && this.unityLoader && !this.eventBus.load) {
 59 |         const script = document.createElement('SCRIPT')
 60 |         script.setAttribute('src', this.unityLoader)
 61 |         script.setAttribute('async', '')
 62 |         script.setAttribute('defer', '')
 63 |         document.body.appendChild(script)
 64 |         this.eventBus.load = true
 65 |         script.onload = () => {
 66 |           this.eventBus.ready = true
 67 |           this.eventBus.$emit('onload')
 68 |         }
 69 |       } else {
 70 |         this.eventBus.ready = true
 71 |         this.eventBus.load = true
 72 |       }
 73 |     },
 74 |     mounted () {
 75 |       const instantiate = () => {
 76 |         if (typeof UnityLoader === 'undefined') {
 77 |           let error = 'The UnityLoader was not defined, please add the script tag ' +
 78 |             'to the base html and embed the UnityLoader.js file Unity exported or use "unityLoader" attribute for path to UnityLoader.js.'
 79 |           console.error(error)
 80 |           this.error = error
 81 |           return
 82 |         }
 83 |         if (this.src === null) {
 84 |           let error = 'Please provice a path to a valid JSON in the "src" attribute.'
 85 |           console.error(error)
 86 |           this.error = error
 87 |           return
 88 |         }
 89 |         let params = {}
 90 |         if (this.externalProgress) {
 91 |           params.onProgress = this.externalProgress
 92 |         } else {
 93 |           params.onProgress = ((gameInstance, progress) => {
 94 |             this.loaded = (progress === 1)
 95 |             this.progress = progress
 96 |           })
 97 |         }
 98 |         if (this.module) {
 99 |           params.Module = this.module
100 |         }
101 |         this.gameInstance = UnityLoader.instantiate(this.containerId, this.src, params)
102 |       }
103 | 
104 |       if (this.eventBus.ready) {
105 |         instantiate()
106 |       } else {
107 |         this.eventBus.$on('onload', () => {
108 |           instantiate()
109 |         })
110 |       }
111 |     }
112 |   }
113 | 
114 | </script>
115 | 


--------------------------------------------------------------------------------