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

Restored placed map object selection and implemented object snapping to tile coordinates

Browse Source
This commit is contained in:
Andrei
2025-02-01 18:44:00 -06:00
parent 4adcf8d61d
commit 7daefb74eb
8 changed files with 90 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/game/map/MapTiles.vue
View File

@ -3,17 +3,13 @@
</template>
<script setup lang="ts">
import config from '@/application/config'
import type { Map as MapT, UUID } from '@/application/types'
import { unduplicateArray } from '@/application/utilities'
import Controls from '@/components/utilities/Controls.vue'
import { loadMapTilesIntoScene, setLayerTiles } from '@/composables/mapComposable'
import { createTileMap, createTileLayer, loadMapTilesIntoScene, setLayerTiles } from '@/composables/mapComposable'
import { MapStorage } from '@/storage/storages'
import { useMapStore } from '@/stores/mapStore'
import { useScene } from 'phavuer'
import { onBeforeUnmount, shallowRef } from 'vue'
import Tileset = Phaser.Tilemaps.Tileset
import type { UUID } from '@/application/types'
const emit = defineEmits(['tileMap:create'])
const scene = useScene()
@ -23,43 +19,12 @@ const mapStorage = new MapStorage()
const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
function createTileMap(map: MapT) {
const mapConfig = new Phaser.Tilemaps.MapData({
width: map.width,
height: map.height,
tileWidth: config.tile_size.width,
tileHeight: config.tile_size.height,
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
format: Phaser.Tilemaps.Formats.ARRAY_2D
})
const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapConfig)
emit('tileMap:create', newTileMap)
return newTileMap
}
function createTileLayer(currentTileMap: Phaser.Tilemaps.Tilemap, mapData: any) {
const tilesArray = unduplicateArray(mapData?.tiles.flat())
const tilesetImages = tilesArray.map((tile: string, index: number) => {
return currentTileMap.addTilesetImage(tile, tile, config.tile_size.width, config.tile_size.height, 1, 2, index + 1, { x: 0, y: -config.tile_size.height })
})
// Add blank tile
tilesetImages.push(currentTileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.width, config.tile_size.height, 1, 2, 0, { x: 0, y: -config.tile_size.height }))
const layer = currentTileMap.createBlankLayer('tiles', tilesetImages as Tileset[], 0, config.tile_size.height) as Phaser.Tilemaps.TilemapLayer
layer.setDepth(0)
layer.setCullPadding(2, 2)
return layer
}
loadMapTilesIntoScene(mapStore.mapId as UUID, scene)
.then(() => mapStorage.get(mapStore.mapId))
.then((mapData) => {
if (!mapData || !mapData?.tiles) return
tileMap.value = createTileMap(mapData)
tileMap.value = createTileMap(scene, mapData)
emit('tileMap:create', tileMap.value)
tileLayer.value = createTileLayer(tileMap.value, mapData)
setLayerTiles(tileMap.value, tileLayer.value, mapData.tiles)
})

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

@ -9,25 +9,46 @@ import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composabl
import { useGameStore } from '@/stores/gameStore'
import { Image, useScene } from 'phavuer'
import { computed, onMounted } from 'vue'
import config from '@/application/config'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
const props = defineProps<{
tilemap: Phaser.Tilemaps.Tilemap
placedMapObject: PlacedMapObject
}>()
const gameStore = useGameStore()
const scene = useScene()
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),
x: tileToWorldX(props.tilemap, props.placedMapObject.positionX, props.placedMapObject.positionY),
y: tileToWorldY(props.tilemap, props.placedMapObject.positionX, props.placedMapObject.positionY),
...calculateObjectPlacement(props.placedMapObject,true),
flipX: props.placedMapObject.isRotated,
texture: props.placedMapObject.mapObject.id,
originY: Number(props.placedMapObject.mapObject.originX),
originX: Number(props.placedMapObject.mapObject.originY)
originX: props.placedMapObject.mapObject.originX,
originY: props.placedMapObject.mapObject.originY
}))
function calculateObjectPlacement(mapObj: PlacedMapObject, tileCenterSnap: boolean) : {x: number; y: number} {
let position : {x: number; y: number}
if (tileCenterSnap) {
let halfTileWidth = config.tile_size.width/2
position = {
x: Math.ceil((mapObj.positionX-config.tile_size.height)/halfTileWidth) * halfTileWidth,
y: Math.ceil((mapObj.positionY-config.tile_size.height)/halfTileWidth) * halfTileWidth,
}
}
else {
position = { x: mapObj.positionX, y: mapObj.positionY }
}
return {
x: position.x-mapObj.mapObject.frameWidth/2,
y: position.y-mapObj.mapObject.frameHeight/2
}
}
onMounted(async () => {
await loadTexture(scene, {
key: props.placedMapObject.mapObject.id,
@ -39,8 +60,5 @@ onMounted(async () => {
} as TextureData).catch((error) => {
console.error('Error loading texture:', error)
})
if (!props.placedMapObject) return
scene.add.sprite(props.placedMapObject.positionX, props.placedMapObject.positionY, imageProps.value.texture);
})
</script>