gamedesigner

2025-03-19 18:45:40 +02:00
parent 86559bcacd
commit 73ca07bcc0
12 changed files with 367 additions and 25 deletions
@@ -59,22 +59,25 @@ export default{
            if (this.forRendering) {
                gameEngine.scene.clear();
                if (this.obj.type == 'panorama2d') {
-                    let t = await gameEngine.loadTexture(`/asset/default/${this.obj.asset.name}`);
-                    t.mapping = gameEngine.$.EquirectangularReflectionMapping;
-                    gameEngine.scene.background = t;
-                    gameEngine.scene.environment = t;
-                    gameEngine.scene.add(gameEngine.camera);
+                    await gameEngine.loadPanorama(`/asset/default/${this.obj.asset.name}`);
+                    // let t = await gameEngine.loadTexture(`/asset/default/${this.obj.asset.name}`);
+                    // t.mapping = gameEngine.$.EquirectangularReflectionMapping;
+                    // gameEngine.scene.background = t;
+                    // gameEngine.scene.environment = t;
+                    // gameEngine.scene.add(gameEngine.camera);
                } else {
                    let gltf = await gameEngine.load(`/asset/default/${this.obj.asset.name}`);
-                    console.debug('GLTF', gltf);
+                    //console.debug('GLTF', gltf);
                    this.loadedAsset = gltf;
                    this.animations = gltf.animations.map(a => ({
                        name: a.name, id: a.uuid
                    }));
+                    gameEngine.autoScale(gltf.scene);
                    let bb = new gameEngine.$.Box3().setFromObject(gltf.scene);
                    gltf.scene.traverse(function (o) {
                        o.frustumCulled = false;
                    });
+                    //console.log(bb)
                    gameEngine.camera.position.set(bb.max.x, bb.max.y, bb.max.z);
                    gameEngine.controls.target.set((bb.max.x + bb.min.x) / 2, (bb.max.y + bb.min.y) / 2, (bb.max.z + bb.min.z) / 2)
                    gameEngine.controls.update();
@@ -0,0 +1,111 @@
+<template>
+    <v-btn-toggle variant="tonal" density="compact" class="mx-auto" v-model="mode" color="blue">
+        <!-- <v-btn size="small" class="text-none" value="default"
+            prepend-icon="mdi-cursor-default-click">Pointer</v-btn> -->
+        <v-btn size="small" class="text-none" value="translate" prepend-icon="mdi-cursor-move">Move</v-btn>
+        <v-btn size="small" class="text-none" value="rotate" prepend-icon="mdi-rotate-orbit">Rotate</v-btn>
+        <v-btn size="small" class="text-none" value="scale" prepend-icon="mdi-resize">Scale</v-btn>
+    </v-btn-toggle>
+    <div class="container my-3">
+        <div ref="target" @click="targetClick" @pointerdown="targetPointerDown"></div>
+    </div>
+    <v-navigation-drawer location="right">
+        <v-list v-model:selected="scenesList" selectable>
+            <v-list-item v-for="(s, i) in scenes" :key="i" :title="s.data.title" :value="s"></v-list-item>
+        </v-list>
+    </v-navigation-drawer>
+</template>
+
+<script>
+
+import { GameEngine } from '@/lib/gameEngine';
+
+let gameEngine = null;
+
+export default {
+    props:{
+        modelValue: Object,
+        scenario: Object
+    },
+    data(){
+        return {
+            scenesList: [],
+            mode: 'translate',
+            pointerDownTime: 0
+        }
+    },
+    computed:{
+        scenes(){
+            return this.scenario.scenes || [];
+        },
+        scene(){
+            return this.scenesList[0];
+        },
+        object(){
+            return this.modelValue;
+        },
+    },
+    watch:{
+        async scene(n){
+            await this.loadEnvironment();
+        },
+        mode(n){
+            gameEngine.transformControls.setMode(n)
+        }
+    },
+    async mounted(){
+        gameEngine = new GameEngine();
+        this.gameEngine = gameEngine;
+        await gameEngine.init(this.$refs.target);
+        gameEngine.scene.add(gameEngine.transformControls.getHelper())
+    },
+    methods:{
+        async loadEnvironment(){
+            await this.expandScenarioData();
+            if (!this.object.gd){
+                this.object.gd = {
+                    items: []
+                };
+            }
+            if (this.scene.data.$environment.type == 'panorama2d'){
+                await gameEngine.loadPanorama(`/asset/default/${this.scene.data.$environment.asset.name}`);
+            }else{
+                let env = await gameEngine.load(`/asset/default/${this.scene.data.$environment.asset.name}`);
+                gameEngine.autoScale(env.scene, 10);
+                gameEngine.activeObjects.add(env.scene);
+            }
+            for (let i of this.scene.data.items) {
+                let gltf = await gameEngine.load(`/asset/default/${i.data.$go.asset.name}`);
+                let o = gltf.scene;
+                gameEngine.autoScale(o);
+                gameEngine.activeObjects.add(o);
+                const {position, scale, rotation} = o;
+                i.gd = {position, scale, rotation};
+                console.log(JSON.stringify(i.gd));
+                window.gameEngine = gameEngine;
+                //console.log(new gameEngine.$.Euler({"isEuler":true,"_x":0,"_y":0,"_z":0,"_order":"XYZ"}));
+            }
+        },
+        async expandScenarioData(){
+            this.scene.data.$environment = (await this.$api.gameObject.load(this.scene.data.environment)).data
+            for (let i of this.scene.data.items) {
+                i.data.$go = (await this.$api.gameObject.load(i.data.go)).data;
+            }
+        },
+        targetPointerDown(){
+            this.pointerDownTime = performance.now();
+        },
+        targetClick(e){
+            if (performance.now() - this.pointerDownTime < 200){
+                let intersects = gameEngine.intersect(e, this.$refs.target, gameEngine.activeObjects.children, true);
+                if (intersects.length){
+                    console.log('attaching controls to', intersects[0].object)
+                    gameEngine.transformControls.attach(intersects[0].object);
+                }else{
+                    gameEngine.transformControls.detach();
+                }
+            }
+        }
+    }
+}
+</script>
@@ -10,6 +10,7 @@ class GameEngine {
        const width = 1200, height = 800;

        const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10000);
+        this.raycaster = new THREE.Raycaster();
        camera.position.set(1, 0, 1);

        const scene = new THREE.Scene();
@@ -56,6 +57,10 @@ class GameEngine {
        this.camera = camera;
        this.controls = controls;
        this.mixer = mixer;
+
+        this.activeObjects = new THREE.Group();
+        scene.add(this.activeObjects);
+
        domNode.appendChild(renderer.domElement);

        let texture = await this.loadTexture('/static/textures/bck.webp');
@@ -92,6 +97,13 @@ class GameEngine {
        })
    }

+    async loadPanorama(url){
+        let t = await this.loadTexture(url);
+        t.mapping = THREE.EquirectangularReflectionMapping;
+        this.scene.background = t;
+        this.scene.environment = t;
+    }
+
    async captureScreenshot(type = 'image/webp', quality = 80){
        return new Promise((resolve, reject)=>{
            this.renderer.domElement.toBlob(resolve, type, quality)
@@ -107,6 +119,46 @@ class GameEngine {
    stop(){
        this.renderer.setAnimationLoop(null);
    }
+
+    getMouseVector(mouseEvent, domElement){
+        //console.log(mouseEvent, domElement)
+        const mouse = new THREE.Vector2();
+        if (this.renderType == 'VR'){
+            let x;
+            if (mouseEvent.offsetX > window.innerWidth / 2){
+                x = (mouseEvent.offsetX - window.innerWidth / 2) * 2
+            }else {
+                x = mouseEvent.offsetX * 2;
+            }
+            mouse.x = ( x / window.innerWidth ) * 2 - 1;
+            mouse.y = - ( mouseEvent.offsetY / window.innerHeight ) * 2 + 1;
+        }else{
+            mouse.x = ( mouseEvent.offsetX / domElement.clientWidth ) * 2 - 1;
+            mouse.y = - ( mouseEvent.offsetY / domElement.clientHeight ) * 2 + 1;
+        }
+        return mouse;
+    }
+
+    intersect(mouseEvent, domElement, objects, recursive = false, returnInputObjects = true){
+        let mouse = this.getMouseVector(mouseEvent, domElement);
+        this.raycaster.setFromCamera(mouse, this.camera);
+        console.log(objects)
+        let intersects = this.raycaster.intersectObjects(objects, recursive);
+        if (returnInputObjects && recursive){
+            intersects.forEach(o=>{
+                while (o.object && !objects.includes(o.object)) {
+                    o.object = o.object.parent;
+                }
+            })
+        }
+        return intersects;
+    }
+
+    autoScale(object, mk = 1){
+        let bb = new THREE.Box3().setFromObject(object);
+        let k = Math.max(bb.max.x - bb.min.x, bb.max.y - bb.min.y, bb.max.z - bb.min.z);
+        object.scale.multiplyScalar(mk/k);
+    }
 }

 export {GameEngine}
@@ -1,9 +1,84 @@
 <template>
-    
+    <v-container max-width="1400">
+        <v-tabs v-model="panel">
+            <v-tab value="game">
+                <v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? l.createGame : l.editGame }}
+            </v-tab>
+            <v-tab value="gameDesigner" v-if="scenario">
+                <v-icon icon="mdi-movie-open-outline"></v-icon> {{ l.gameDesigner }}
+            </v-tab>
+        </v-tabs>
+        <v-tabs-window v-model="panel">
+            <v-tabs-window-item value="game">
+                <v-form class="pa-4" v-model="valid">
+                    <v-text-field :label="l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
+                    <v-textarea :label="l.description" v-model="object.description"></v-textarea>
+                    <v-select :label="l.scenario" :items="scenarios" v-model="object.scenario" item-title="name" item-value="id"></v-select>
+                </v-form>
+            </v-tabs-window-item>
+            <v-tabs-window-item value="gameDesigner">
+                <GameDesigner v-model="object" :scenario="scenario" ref="gameDesigner" ></GameDesigner>
+            </v-tabs-window-item>
+        </v-tabs-window>
+        <v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="primary">{{ l.save }}</v-btn>
+    </v-container>
 </template>

 <script>
+
 export default {
-    
+    data() {
+        return {
+            object: {},
+            valid: false,
+            rules: {
+                required: v => v ? true : this.l.fieldRequired,
+                requiredFile: v => (v?.length || this.id != 'add') ? true : this.l.fieldRequired
+            },
+            loading: false,
+            panel: [],
+            scenarios: [],
+            scenario: null
+        }
+    },
+    async mounted(){
+        if (this.id && this.id != 'add') {
+            this.object = (await this.$api.game.load(this.id)).data;
+        }
+        this.scenarios = (await this.$api.scenario.search()).data.data;
+        await this.loadScenario()
+    },
+    computed: {
+        id() {
+            return this.$route.params?.id;
+        }
+    },
+    watch:{
+        async 'object.scenario'(n){
+            await this.loadScenario()
+        }
+    },
+    methods:{
+        async loadScenario(){
+            if (this.object.scenario){
+                this.scenario = (await this.$api.scenario.load(this.object.scenario)).data;
+            }else{
+                this.scenario = null;
+            }
+        },
+        async save(params) {
+            this.loading = true;
+            try {
+                let result = await this.$api.game.save(this.object);
+                Object.assign(this.object, result.data.object);
+                if (this.id == 'add') {
+                    this.$router.replace({ params: { id: this.object.id } });
+                }
+            } catch (err) {
+                console.error(err);
+            }
+            this.loading = false
+        },
+    }
 }
 </script>
@@ -0,0 +1,49 @@
+<template>
+    <v-container>
+        <v-row>
+            <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
+                <router-link :to="`/games/${v.id}`">
+                    <v-img :src="`/asset/thumb/${v.thumb?.[0]}.webp`"></v-img>
+                </router-link>
+                <div class="d-flex">
+                    <span class="flex-grow-1">{{ v.name }}</span>
+                    <v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/games/${v.id}`" color="primary"></v-btn>
+                    <v-btn density="compact" variant="text" icon="mdi-close" @click="confirmTarget = v; confirmDialog = true" color="red"></v-btn>
+                </div>
+            </v-col>
+        </v-row>
+    </v-container>
+    <v-dialog v-model="confirmDialog" width="auto">
+        <v-card  :title="`${l.confirmDeletionOf} ${ confirmTarget.name }?`">
+            <template v-slot:actions>
+                <v-btn @click="confirmDialog = false">{{ l.no }}</v-btn>
+                <v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ l.yes }}</v-btn>
+            </template>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+
+export default {
+    data(){
+        return {
+            items: [],
+            confirmDialog: false,
+            confirmTarget: null
+        }
+    },
+    
+    async created(){
+        this.items = (await this.$api.game.search()).data.data
+    },
+
+    methods:{
+        async remove(item){
+            await this.$api.game.remove(item.id);
+            this.confirmDialog = false;
+            this.items.splice(this.items.indexOf(item), 1);
+        }
+    }
+}
+</script>
@@ -46,6 +46,20 @@ export default {
                async remove(id){
                    return await $ax.delete(`/scenario/${id}`)
                }
+            },
+            game:{
+                async save(data){
+                    return await $ax.put('/game', data);
+                },
+                async load(id){
+                    return await $ax.get(`/game/${id}`);
+                },
+                async search(query){
+                    return await $ax.post('/game', query);
+                },
+                async remove(id){
+                    return await $ax.delete(`/game/${id}`)
+                }
            }
        }
    }
@@ -3,6 +3,8 @@ const lang = {
        _code: 'en',
        createGameObject: 'Add game object',
        editGameObject: 'Edit game object',
+        createGame: 'Add game',
+        editGame: 'Edit game',
        name: 'Name',
        description: 'Description',
        fieldRequired: 'Field is required',
@@ -23,11 +25,13 @@ const lang = {
        gameObjects: 'Objects',
        gameScenarios: 'Scenarios',
        gameRules: 'Rules',
+        gameDesigner: 'Game studio',
        games: 'Games',
        darkMode: 'Dark mode',
        confirmDeletionOf: 'Confirm deletion of',
        yes: 'Yes',
        no: 'No',
+        scenario: 'Scenario',
        createScenario: 'Create scenario',
        editScenario: 'Edit scenario',
        editScenes: 'Edit scenes',
@@ -38,6 +42,8 @@ const lang = {
        _code: 'bg',
        createGameObject: 'Добавяне на игрови обект',
        editGameObject: 'Редактиране на игрови обект',
+        createGame: 'Добавяне на игра',
+        editGame: 'Редактиране на игра',
        name: 'Име',
        description: 'Описание',
        fieldRequired: 'Полето е задължително',
@@ -58,11 +64,13 @@ const lang = {
        gameObjects: 'Обекти',
        gameScenarios: 'Сценарии',
        gameRules: 'Правила',
+        gameDesigner: 'Студио',
        games: 'Игри',
        darkMode: 'Тъмен режим',
        confirmDeletionOf: 'Потвърдете изтриването на',
        yes: 'Да',
        no: 'Не',
+        scenario: 'Сценарий',
        createScenario: 'Създаване на сценарий',
        editScenario: 'Редактиране на сценарий',
        editScenes: 'Редактиране на сцени',