98 lines
3.3 KiB
Vue
98 lines
3.3 KiB
Vue
<template>
|
|
<div class="container my-3 position-relative game-designer-canvas">
|
|
<div ref="target" @click="targetClick" class="canvas-wrapper"
|
|
@mousedown="targetPointer($event, 'start')"
|
|
@mousemove="targetPointer($event, 'drag')"
|
|
@mouseup="targetPointer($event, 'end')" ></div>
|
|
</div>
|
|
<v-navigation-drawer width="133" rail location="right" class="mt-3">
|
|
<v-menu open-on-hover open-on-click>
|
|
<template v-slot:activator="{ props }">
|
|
<v-btn icon="mdi-panorama-outline" color="primary" v-bind="props"></v-btn>
|
|
</template>
|
|
<v-list selectable color="primary" @update:selected="loadScene($event[0])" :items="scenes"></v-list>
|
|
</v-menu>
|
|
<v-divider class="my-2"></v-divider>
|
|
<v-btn variant="text" icon="mdi-walk" @click="control" v-tooltip="`Pointer lock controls mode`"></v-btn>
|
|
<v-btn variant="text" icon="mdi-image-frame" @click="setGameHeader" v-tooltip="`Capture screenshot as game header image`"></v-btn>
|
|
<v-btn icon="mdi-fullscreen" @click="fullScreen" variant="text" v-tooltip="l.fullScreen"></v-btn>
|
|
<v-btn-toggle variant="text" v-model="store.prefs.xr.depthSense" color="green-darken-2" v-tooltip="`Toggle XR depth sense`">
|
|
<v-btn :value="true" icon="mdi-cube-outline"></v-btn>
|
|
</v-btn-toggle>
|
|
</v-navigation-drawer>
|
|
</template>
|
|
|
|
<script>
|
|
import { GameEngine } from '@/lib/GameEngine';
|
|
import { GameManager } from '@/lib/GameManager';
|
|
let engine = null, manager = null;
|
|
|
|
export default {
|
|
props:['id'],
|
|
data(){
|
|
return {
|
|
scenes: []
|
|
}
|
|
},
|
|
async mounted(){
|
|
engine = new GameEngine();
|
|
await engine.init(this.$refs.target, {
|
|
xr: true,
|
|
gizmo: false,
|
|
stats: true,
|
|
//depthSense: this.store.prefs.xr.depthSense,
|
|
mode: 'GamePreview'
|
|
});
|
|
manager = await new GameManager(engine, this.id);
|
|
this.scenes = manager.scenarioData.scenes.map(s=>({
|
|
title: s.data.title,
|
|
value: s.data.id
|
|
}))
|
|
window.addEventListener('resize', this.resize);
|
|
},
|
|
|
|
async unmounted(){
|
|
this.debug('Disposing scene')
|
|
window.removeEventListener('resize', this.resize);
|
|
engine.tm?.setGame(null);
|
|
engine.dispose();
|
|
this.debug('Disposed scene', JSON.stringify(engine.renderer.info.memory));
|
|
engine = null;
|
|
manager = null;
|
|
},
|
|
|
|
methods:{
|
|
loadScene(sceneId){
|
|
this.debug('Loading scene', sceneId)
|
|
manager.loadScene(sceneId)
|
|
},
|
|
targetClick(e){
|
|
engine.onClick(e, this.$refs.target);
|
|
},
|
|
|
|
targetPointer(e, t){
|
|
engine.onPointer(e, this.$refs.target, t);
|
|
},
|
|
resize(){
|
|
let r = this.$refs.target;
|
|
engine.resize(r.clientWidth, r.clientHeight);
|
|
},
|
|
|
|
control(){
|
|
engine.pointerControls.lock(true);
|
|
},
|
|
|
|
async fullScreen(){
|
|
await engine.renderer.domElement.requestFullscreen()
|
|
},
|
|
|
|
async setGameHeader(){
|
|
let screenshot = await engine.captureScreenshot();
|
|
let fd = new FormData();
|
|
fd.append('file', screenshot);
|
|
await this.$api.game.setHeader(this.id, fd);
|
|
}
|
|
}
|
|
|
|
}
|
|
</script> |