- Home /
Textinputs not working when I implemented "Unity webGL" in VueJS Project
I'm doing in my work educational curses with VueJS, when I export Unity resources, the text inputs and text area, are not working.
The call:
<unity src="UnityResources/Build/cubito.json" width="600" height="400" unityLoader="UnityResources/Build/UnityLoader.js" ref="myInstance"></unity>
The component:
Vue.component('unity', {
template:`
<div class="webgl-content">
<div id="unity-container" v-bind:style="{ width: width + 'px', height: height + 'px' }"></div>
<div v-if="loaded == false">
<div class="unity-loader">
<div class="bar">
<div class="fill" v-bind:style="{ width: progress * 100 + '%'}"></div>
</div>
</div>
</div>
<div class="footer" v-if="hideFooter !== true">
<a class="fullscreen" @click.prevent="fullscreen">Fullscreen</a>
</div>
</div>
`,
props: {
src: String,
module : String,
width: String,
height: String,
externalProgress: String,
unity_loader: String,
hideFooter: Boolean,
},
data () {
return {
gameInstance: null,
loaded: false,
progress: 0,
error: null
}
},
methods: {
onClick () {
this.$refs.myInstance.message("object", "method", "param")
},
fullscreen () {
this.gameInstance.SetFullscreen(1)
},
message(gameObject, method, param) {
if (param === null) {
param = ''
}
if (this.gameInstance !== null){
this.gameInstance.SendMessage(gameObject, method, param)
} else {
console.warn('vue-unity-webgl: you\'ve sent a message to the Unity content, but it wasn\t instantiated yet.')
}
}
},
beforeMount() {
console.log(this.unity_loader)
console.log(this.src)
if (!this.eventBus) {
this.eventBus = new Vue({
data: {
ready: false,
load: false
}
})
}
if (typeof UnityLoader === 'undefined' && this.unity_loader && !this.eventBus.load) {
const script = document.createElement('SCRIPT')
script.setAttribute('src', this.unity_loader)
script.setAttribute('async', '')
script.setAttribute('defer', '')
document.body.appendChild(script)
this.eventBus.load = true
script.onload = () => {
this.eventBus.ready = true
this.eventBus.$emit('onload')
}
} else {
this.eventBus.ready = true
this.eventBus.load = true
}
},
mounted () {
const instantiate = () => {
if (typeof UnityLoader === 'undefined') {
let error = '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.'
console.error(error)
this.error = error
return
}
if (this.src === null) {
let error = 'Please provice a path to a valid JSON in the "src" attribute.'
console.error(error)
this.error = error
return
}
let params = {}
if (this.externalProgress) {
params.onProgress = UnityProgress
} else {
params.onProgress = ((gameInstance, progress) => {
this.loaded = (progress === 1)
this.progress = progress
})
}
if (this.module) {
params.Module = this.module
}
this.gameInstance = UnityLoader.instantiate('unity-container', this.src, params)
}
if (this.eventBus.ready) {
instantiate()
} else {
this.eventBus.$on('onload', () => {
instantiate()
})
}
}
});
Comment
Answer by atiqanazir15 · Apr 24, 2020 at 09:04 AM
@Lozamded did you find any solution because i have the same kind of project and facing the same issue i can't figure out the solution my project is stuck :(
Your answer
Follow this Question
Related Questions
How to feature WebGL build on SquareSpace? 1 Answer
Embed a WebGL game on an old Google Sites? 0 Answers
Memory Access Out of Bounds - WebGL 1 Answer
problem uploading my game to a web page 0 Answers
Running one instance of webgl build at a time in a html page when loading webgl builds sequencially. 0 Answers