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

2
src/components/gameMaster/mapEditor/Map.vue
View File

@ -1,6 +1,6 @@
<template>
<MapTiles ref="mapTiles" @tileMap:create="tileMap = $event" />
<PlacedMapObjects ref="mapObjects" v-if="tileMap" :tileMap="tileMap as Phaser.Tilemaps.Tilemap" />
<PlacedMapObjects ref="mapObjects" v-if="tileMap" />
<MapEventTiles ref="eventTiles" v-if="tileMap" :tileMap="tileMap as Phaser.Tilemaps.Tilemap" />
</template>

43
src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue
View File

@ -5,16 +5,13 @@
<script setup lang="ts">
import config from '@/application/config'
import Controls from '@/components/utilities/Controls.vue'
import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/mapComposable'
import { createTileMap, createTileLayer, createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/mapComposable'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { TileStorage } from '@/storage/storages'
import { useScene } from 'phavuer'
import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
import Tileset = Phaser.Tilemaps.Tileset
const emit = defineEmits(['tileMap:create'])
const scene = useScene()
const mapEditor = useMapEditorComposable()
const tileStorage = new TileStorage()
@ -42,39 +39,6 @@ let currentCommand: EditorCommand | null = null
let commandIndex = ref(0)
let originTiles: string[][] = []
function createTileMap() {
const mapData = new Phaser.Tilemaps.MapData({
width: mapEditor.currentMap.value?.width,
height: mapEditor.currentMap.value?.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, mapData)
emit('tileMap:create', newTileMap)
return newTileMap
}
async function createTileLayer(currentTileMap: Phaser.Tilemaps.Tilemap) {
const tiles = await tileStorage.getAll()
const tilesetImages = []
for (const tile of tiles) {
tilesetImages.push(currentTileMap.addTilesetImage(tile.id, tile.id, config.tile_size.width, config.tile_size.height, 1, 2, tilesetImages.length + 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
}
function pencil(pointer: Phaser.Input.Pointer) {
let map = mapEditor.currentMap.value
if (!map) return
@ -268,8 +232,9 @@ onMounted(async () => {
//Clone
originTiles = cloneArray(mapEditor.currentMap.value.tiles)
tileMap.value = createTileMap()
tileLayer.value = await createTileLayer(tileMap.value)
tileMap.value = createTileMap(scene, mapEditor.currentMap.value)
emit('tileMap:create', tileMap.value)
tileLayer.value = createTileLayer(tileMap.value, mapEditor.currentMap.value)
setLayerTiles(tileMap.value, tileLayer.value, mapState.tiles)
})

35
src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue
View File

@ -1,25 +1,19 @@
<template>
<SelectedPlacedMapObjectComponent v-if="selectedPlacedMapObject" :placedMapObject="selectedPlacedMapObject" :selectedPlacedMapObject="selectedPlacedMapObject" @move="moveMapObject" @rotate="rotatePlacedMapObject" @delete="deletePlacedMapObject" />
<PlacedMapObject :tilemap="tileMap" v-for="placedMapObject in mapEditor.currentMap.value?.placedMapObjects" :tileMap="tileMap" :placedMapObject :selectedPlacedMapObject :movingPlacedMapObject @pointerup="clickPlacedMapObject(placedMapObject)" />
<SelectedPlacedMapObjectComponent v-if="mapEditor.selectedPlacedObject.value" :placedMapObject="mapEditor.selectedPlacedObject.value" @move="moveMapObject" @rotate="rotatePlacedMapObject" @delete="deletePlacedMapObject(mapEditor.selectedMapObject.value!.id, mapEditor.currentMap.value!)" />
<PlacedMapObject v-for="placedMapObject in mapEditor.currentMap.value?.placedMapObjects" :placedMapObject @pointerdown="clickPlacedMapObject(placedMapObject)" />
</template>
<script setup lang="ts">
import type { Map as MapT, PlacedMapObject as PlacedMapObjectT, TextureData } from '@/application/types'
import type { Map as MapT, PlacedMapObject as PlacedMapObjectT } from '@/application/types'
import { uuidv4 } from '@/application/utilities'
import PlacedMapObject from '@/components/game/map/partials/PlacedMapObject.vue'
import SelectedPlacedMapObjectComponent from '@/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { useScene } from 'phavuer'
import { ref, watch } from 'vue'
import { uuidv4 } from '@/application/utilities'
const scene = useScene()
const mapEditor = useMapEditorComposable()
const selectedPlacedMapObject = ref<PlacedMapObjectT | null>(null)
const movingPlacedMapObject = ref<PlacedMapObjectT | null>(null)
const props = defineProps<{
tileMap: Phaser.Tilemaps.Tilemap
}>()
defineExpose({ handlePointer })
@ -42,8 +36,7 @@ function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
// Add new object to mapObjects
map.placedMapObjects.push(newPlacedMapObject)
selectedPlacedMapObject.value = newPlacedMapObject
console.log(map.placedMapObjects)
mapEditor.selectedPlacedObject.value = newPlacedMapObject
}
function eraser(pointer: Phaser.Input.Pointer, map: MapT) {
@ -69,20 +62,20 @@ function objectPicker(pointer: Phaser.Input.Pointer, map: MapT) {
}
function moveMapObject(id: string, map: MapT) {
movingPlacedMapObject.value = map.placedMapObjects.find((object) => object.id === id) as PlacedMapObjectT
mapEditor.movingPlacedObject.value = map.placedMapObjects.find((object) => object.id === id) as PlacedMapObjectT
function handlePointerMove(pointer: Phaser.Input.Pointer) {
if (!movingPlacedMapObject.value) return
if (!mapEditor.movingPlacedObject.value) return
movingPlacedMapObject.value.positionX = pointer.worldX
movingPlacedMapObject.value.positionY = pointer.worldY
mapEditor.movingPlacedObject.value.positionX = pointer.worldX
mapEditor.movingPlacedObject.value.positionY = pointer.worldY
}
scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
function handlePointerUp() {
scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
movingPlacedMapObject.value = null
mapEditor.movingPlacedObject.value = null
}
scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
@ -101,12 +94,12 @@ function rotatePlacedMapObject(id: string, map: MapT) {
}
function deletePlacedMapObject(id: string, map: MapT) {
map.placedMapObjects = map.placedMapObjects.filter((object) => object.id !== id)
selectedPlacedMapObject.value = null
map.placedMapObjects.filter((object) => object.id !== id)
mapEditor.selectedPlacedObject.value = null
}
function clickPlacedMapObject(placedMapObject: PlacedMapObjectT) {
selectedPlacedMapObject.value = placedMapObject
mapEditor.selectedPlacedObject.value = placedMapObject
// If alt is pressed, select the object
if (scene.input.activePointer.event.altKey) {
@ -165,7 +158,7 @@ watch(
})
// Update the map with the new mapObjects
map.placedMapObjects = [...map.placedMapObjects, ...updatedMapObjects]
map.placedMapObjects.concat(updatedMapObjects)
// Update mapObject if it's set
if (mapEditor.selectedMapObject.value) {