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

Showing placed map object works in both game and map editor, updated types, cleaned some logic

Browse Source
This commit is contained in:
Dennis Postma
2025-02-05 02:27:18 +01:00
parent 027fdd7dac
commit d2b6d8dcb3
12 changed files with 134 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,16 +1,16 @@
<template>
<Image v-if="gameStore.isTextureLoaded(props.placedMapObject.mapObject.id)" v-bind="imageProps" />
<Image v-if="mapObject && gameStore.isTextureLoaded(props.placedMapObject.mapObject as string)" v-bind="imageProps" />
</template>
<script setup lang="ts">
import config from '@/application/config'
import type { PlacedMapObject, TextureData } from '@/application/types'
import type { MapObject, PlacedMapObject } from '@/application/types'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { calculateIsometricDepth, tileToWorldXY } from '@/services/mapService'
import { loadTexture } from '@/services/textureService'
import { calculateIsometricDepth, loadMapObjectTextures, tileToWorldXY } from '@/services/mapService'
import { MapObjectStorage } from '@/storage/storages'
import { useGameStore } from '@/stores/gameStore'
import { Image, useScene } from 'phavuer'
import { computed, onMounted } from 'vue'
import { computed, onMounted, ref } from 'vue'
import Tilemap = Phaser.Tilemaps.Tilemap
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
@ -21,38 +21,55 @@ const props = defineProps<{
tileMapLayer: TilemapLayer
}>()
const gameStore = useGameStore()
const scene = useScene()
const gameStore = useGameStore()
const mapEditor = useMapEditorComposable()
const imageProps = computed(() => ({
alpha: mapEditor.movingPlacedObject.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, props.placedMapObject.mapObject.frameWidth, props.placedMapObject.mapObject.frameHeight),
...calculateObjectPlacement(props.placedMapObject),
flipX: props.placedMapObject.isRotated,
texture: props.placedMapObject.mapObject.id,
originX: props.placedMapObject.mapObject.originX,
originY: props.placedMapObject.mapObject.originY
}))
const mapObject = ref<MapObject>()
async function initialize() {
if (!props.placedMapObject.mapObject) return
/**
* Check if mapObject is an string or object, if its an object we assume its a mapObject and change it to a string
* We do this because this component is shared with the map editor, which gets sent the mapObject as an object by the server
*/
if (typeof props.placedMapObject.mapObject === 'object') {
// @ts-ignore
props.placedMapObject.mapObject = props.placedMapObject.mapObject.id
}
const mapObjectStorage = new MapObjectStorage()
const _mapObject = await mapObjectStorage.get(props.placedMapObject.mapObject)
if (!_mapObject) return
mapObject.value = _mapObject
await loadMapObjectTextures([_mapObject], scene)
}
function calculateObjectPlacement(mapObj: PlacedMapObject): { x: number; y: number } {
let position = tileToWorldXY(props.tileMapLayer, mapObj.positionX, mapObj.positionY)
return {
x: position.worldPositionX - mapObj.mapObject.frameWidth / 2,
y: position.worldPositionY - mapObj.mapObject.frameHeight / 2 + config.tile_size.height
x: position.worldPositionX - mapObject.value!.frameWidth / 2,
y: position.worldPositionY - mapObject.value!.frameHeight / 2 + config.tile_size.height
}
}
loadTexture(scene, {
key: props.placedMapObject.mapObject.id,
data: '/textures/map_objects/' + props.placedMapObject.mapObject.id + '.png',
group: 'map_objects',
updatedAt: props.placedMapObject.mapObject.updatedAt,
frameWidth: props.placedMapObject.mapObject.frameWidth,
frameHeight: props.placedMapObject.mapObject.frameHeight
} as TextureData).catch((error) => {
console.error('Error loading texture:', error)
const imageProps = computed(() => ({
alpha: mapEditor.movingPlacedObject.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, mapObject.value!.frameWidth, mapObject.value!.frameHeight),
...calculateObjectPlacement(props.placedMapObject),
flipX: props.placedMapObject.isRotated,
texture: mapObject.value!.id,
originX: mapObject.value!.originX,
originY: mapObject.value!.originY
}))
onMounted(async () => {
await initialize()
})
</script>