noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Split depth map object demo

Browse Source
This commit is contained in:
Andrei Bornstein
2025-03-03 14:38:10 -06:00
parent 84b34c4f85
commit 84f8db5e10
2 changed files with 70 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/game/map/partials/PlacedMapObject.vue
View File

@ -1,22 +1,22 @@
<template>
<Container v-if="mapObject && gameStore.isTextureLoaded(props.placedMapObject.mapObject as string)" v-bind="containerProps">
<Image v-bind="imageProps" />
</Container>
<ImageGroup v-bind="groupProps" v-if="mapObject && gameStore.isTextureLoaded(props.placedMapObject.mapObject as string)">
</ImageGroup>
</template>
<script setup lang="ts">
import config from '@/application/config'
import type { MapObject, PlacedMapObject } from '@/application/types'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { calculateIsometricDepth, loadMapObjectTextures, tileToWorldXY } from '@/services/mapService'
import { MapObjectStorage } from '@/storage/storages'
import { useGameStore } from '@/stores/gameStore'
import { Container, Image, Sprite, useScene } from 'phavuer'
import { computed, onMounted, ref, useTemplateRef, watch } from 'vue'
import { useScene } from 'phavuer'
import { computed, onMounted, ref, watch } from 'vue'
import Tilemap = Phaser.Tilemaps.Tilemap
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
import ImageGroup from '@/components/gameMaster/mapEditor/mapPartials/ImageGroup.vue'
const props = defineProps<{
placedMapObject: PlacedMapObject
tileMap: Tilemap
@ -30,9 +30,11 @@ const mapEditor = useMapEditorComposable()
const mapObject = ref<MapObject>()
const partitionedImages = ref<Phaser.GameObjects.Image[]>([])
const partitionOffsets = [1, -1]
const groupProps = computed(() => ({
...calculateObjectPlacement(props.placedMapObject),
mapObj: mapObject.value,
obj: props.placedMapObject,
}))
async function initialize() {
if (!props.placedMapObject.mapObject) return
@ -55,14 +57,6 @@ async function initialize() {
await loadMapObjectTextures([_mapObject], scene)
}
function createImagePartition(startX: number, endX: number, depthOffset: number) {
let pos = calculateObjectPlacement(props.placedMapObject);
const img = scene.add.image(pos.x, pos.y, mapObject.value!.id);
img.setCrop(startX, 0, endX, mapObject.value!.frameHeight)
img.setDepth(calculateIsometricDepth(props.placedMapObject.positionX, props.placedMapObject.positionY) + depthOffset)
return img
}
function calculateObjectPlacement(mapObj: PlacedMapObject): { x: number; y: number } {
let position = tileToWorldXY(props.tileMapLayer, mapObj.positionX, mapObj.positionY)
@ -72,22 +66,6 @@ function calculateObjectPlacement(mapObj: PlacedMapObject): { x: number; y: numb
}
}
const containerProps = computed(() => ({
...calculateObjectPlacement(props.placedMapObject),
width: mapObject.value!.frameWidth,
height: mapObject.value!.frameHeight
}))
const imageProps = computed(() => ({
alpha: mapEditor.movingPlacedObject.value?.id == props.placedMapObject.id || mapEditor.selectedMapObject.value?.id == props.placedMapObject.id ? 0.5 : 1,
tint: mapEditor.selectedPlacedObject.value?.id == props.placedMapObject.id ? 0x00ff00 : 0xffffff,
depth: calculateIsometricDepth(props.placedMapObject.positionX, props.placedMapObject.positionY),
flipX: props.placedMapObject.isRotated,
texture: mapObject.value!.id,
originX: mapObject.value!.originX,
originY: mapObject.value!.originY
}))
watch(
() => mapEditor.refreshMapObject.value,
async () => {