From 367d536c5293014511d29a738d8f836edeb4adf8 Mon Sep 17 00:00:00 2001 From: Dennis Postma Date: Sun, 12 Jan 2025 22:11:33 +0100 Subject: [PATCH] more shit --- .../gameMaster/mapEditor/MapEditor.vue | 5 +- .../mapEditor/mapPartials/MapTiles.vue | 104 ++++++++++-------- 2 files changed, 61 insertions(+), 48 deletions(-) diff --git a/src/components/gameMaster/mapEditor/MapEditor.vue b/src/components/gameMaster/mapEditor/MapEditor.vue index caf328b..222f412 100644 --- a/src/components/gameMaster/mapEditor/MapEditor.vue +++ b/src/components/gameMaster/mapEditor/MapEditor.vue @@ -23,11 +23,10 @@ import ObjectList from '@/components/gameMaster/mapEditor/partials/MapObjectList import MapSettings from '@/components/gameMaster/mapEditor/partials/MapSettings.vue' import TeleportModal from '@/components/gameMaster/mapEditor/partials/TeleportModal.vue' import TileList from '@/components/gameMaster/mapEditor/partials/TileList.vue' -// Components import Toolbar from '@/components/gameMaster/mapEditor/partials/Toolbar.vue' import { useGameStore } from '@/stores/gameStore' import { useMapEditorStore } from '@/stores/mapEditorStore' -import { onUnmounted, ref, shallowRef } from 'vue' +import { onUnmounted, shallowRef } from 'vue' const gameStore = useGameStore() const mapEditorStore = useMapEditorStore() @@ -58,8 +57,6 @@ function save() { placedMapObjects: mapEditorStore.map.placedMapObjects?.map(({ id, mapObject, depth, isRotated, positionX, positionY }) => ({ id, mapObject, depth, isRotated, positionX, positionY })) ?? [] } - console.log(data.mapEventTiles) - if (mapEditorStore.isSettingsModalShown) { mapEditorStore.toggleSettingsModal() } diff --git a/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue b/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue index 51d7c86..d9617c2 100644 --- a/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue +++ b/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue @@ -6,25 +6,30 @@ import config from '@/application/config' import type { TextureData } from '@/application/types' import Controls from '@/components/utilities/Controls.vue' -import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/mapComposable' +import { + createTileArray, + FlattenMapArray, + getTile, + loadMapTilesIntoScene, + placeTile, + setLayerTiles +} from '@/composables/mapComposable' import { useGameStore } from '@/stores/gameStore' import { useMapEditorStore } from '@/stores/mapEditorStore' import { useScene } from 'phavuer' -import { onMounted, onUnmounted, watch } from 'vue' +import { onMounted, onUnmounted, shallowRef, watch } from 'vue' +import { TileStorage } from '@/storage/storages' +import Tileset = Phaser.Tilemaps.Tileset const emit = defineEmits(['tileMap:create']) const scene = useScene() -const gameStore = useGameStore() const mapEditorStore = useMapEditorStore() -const tileMap = createTileMap() -const tileLayer = createTileLayer() +const tileStorage = new TileStorage() + +const tileMap = shallowRef() +const tileLayer = shallowRef() -/** - * A Tilemap is a container for Tilemap data. - * This isn't a display object, rather, it holds data about the map and allows you to add tilesets and tilemap layers to it. - * A map can have one or more tilemap layers, which are the display objects that actually render the tiles. - */ function createTileMap() { const mapData = new Phaser.Tilemaps.MapData({ width: mapEditorStore.map?.width, @@ -37,31 +42,34 @@ function createTileMap() { const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapData) emit('tileMap:create', newTileMap) - return newTileMap } -/** - * A Tileset is a combination of a single image containing the tiles and a container for data about each tile. - */ -function createTileLayer() { - const tilesArray = gameStore.getLoadedAssetsByGroup('tiles') +async function createTileLayer(currentTileMap: Phaser.Tilemaps.Tilemap) { + const tiles = await tileStorage.getAll() + const tilesetImages = [] - const tilesetImages = Array.from(tilesArray).map((tile: TextureData, index: number) => { - return tileMap.addTilesetImage(tile.key, tile.key, config.tile_size.width, config.tile_size.height, 1, 2, index + 1, { x: 0, y: -config.tile_size.height }) - }) as any + 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(tileMap.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 = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.height) as Phaser.Tilemaps.TilemapLayer + 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) { + if (!tileMap.value || !tileLayer.value) return + // Check if map is set if (!mapEditorStore.map) return @@ -81,17 +89,19 @@ function pencil(pointer: Phaser.Input.Pointer) { if (pointer.event.shiftKey) return // Check if there is a tile - const tile = getTile(tileLayer, pointer.worldX, pointer.worldY) + const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY) if (!tile) return // Place tile - placeTile(tileMap, tileLayer, tile.x, tile.y, mapEditorStore.selectedTile) + placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, mapEditorStore.selectedTile) // Adjust mapEditorStore.map.tiles mapEditorStore.map.tiles[tile.y][tile.x] = mapEditorStore.selectedTile } function eraser(pointer: Phaser.Input.Pointer) { + if (!tileMap.value || !tileLayer.value) return + // Check if map is set if (!mapEditorStore.map) return @@ -111,17 +121,19 @@ function eraser(pointer: Phaser.Input.Pointer) { if (pointer.event.altKey) return // Check if there is a tile - const tile = getTile(tileLayer, pointer.worldX, pointer.worldY) + const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY) if (!tile) return // Place tile - placeTile(tileMap, tileLayer, tile.x, tile.y, 'blank_tile') + placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, 'blank_tile') // Adjust mapEditorStore.map.tiles mapEditorStore.map.tiles[tile.y][tile.x] = 'blank_tile' } function paint(pointer: Phaser.Input.Pointer) { + if (!tileMap.value || !tileLayer.value) return + // Check if map is set if (!mapEditorStore.map) return @@ -141,14 +153,16 @@ function paint(pointer: Phaser.Input.Pointer) { if (pointer.event.altKey) return // Set new tileArray with selected tile - setLayerTiles(tileMap, tileLayer, createTileArray(tileMap.width, tileMap.height, mapEditorStore.selectedTile)) + setLayerTiles(tileMap.value, tileLayer.value, createTileArray(tileMap.value.width, tileMap.value.height, mapEditorStore.selectedTile)) // Adjust mapEditorStore.map.tiles - mapEditorStore.map.tiles = createTileArray(tileMap.width, tileMap.height, mapEditorStore.selectedTile) + mapEditorStore.map.tiles = createTileArray(tileMap.value.width, tileMap.value.height, mapEditorStore.selectedTile) } // When alt is pressed, and the pointer is down, select the tile that the pointer is over function tilePicker(pointer: Phaser.Input.Pointer) { + if (!tileMap.value || !tileLayer.value) return + // Check if map is set if (!mapEditorStore.map) return @@ -168,29 +182,30 @@ function tilePicker(pointer: Phaser.Input.Pointer) { if (!pointer.event.altKey) return // Check if there is a tile - const tile = getTile(tileLayer, pointer.worldX, pointer.worldY) + const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY) if (!tile) return // Select the tile mapEditorStore.setSelectedTile(mapEditorStore.map.tiles[tile.y][tile.x]) } -watch( - () => mapEditorStore.shouldClearTiles, - (shouldClear) => { - if (shouldClear && mapEditorStore.map) { - const blankTiles = createTileArray(tileMap.width, tileMap.height, 'blank_tile') - setLayerTiles(tileMap, tileLayer, blankTiles) +watch(() => mapEditorStore.shouldClearTiles, (shouldClear) => { + if (shouldClear && mapEditorStore.map && tileMap.value && tileLayer.value) { + const blankTiles = createTileArray(tileMap.value.width, tileMap.value.height, 'blank_tile') + setLayerTiles(tileMap.value, tileLayer.value, blankTiles) mapEditorStore.map.tiles = blankTiles mapEditorStore.resetClearTilesFlag() } } ) -onMounted(() => { - if (!mapEditorStore.map?.tiles) { - return - } +onMounted(async () => { + if (!mapEditorStore.map?.tiles) return + + await loadMapTilesIntoScene(mapEditorStore.map.id, scene) + + tileMap.value = createTileMap() + tileLayer.value = await createTileLayer(tileMap.value) // First fill the entire map with blank tiles using current map dimensions const blankTiles = createTileArray(mapEditorStore.map.width, mapEditorStore.map.height, 'blank_tile') @@ -199,14 +214,13 @@ onMounted(() => { const mapTiles = mapEditorStore.map.tiles for (let y = 0; y < mapEditorStore.map.height; y++) { for (let x = 0; x < mapEditorStore.map.width; x++) { - // Only copy if the source tiles array has this position if (mapTiles[y] && mapTiles[y][x] !== undefined) { blankTiles[y][x] = mapTiles[y][x] } } } - setLayerTiles(tileMap, tileLayer, blankTiles) + setLayerTiles(tileMap.value, tileLayer.value, blankTiles) scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil) scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser) @@ -220,8 +234,10 @@ onUnmounted(() => { scene.input.off(Phaser.Input.Events.POINTER_DOWN, paint) scene.input.off(Phaser.Input.Events.POINTER_DOWN, tilePicker) - tileMap.destroyLayer('tiles') - tileMap.removeAllLayers() - tileMap.destroy() + if (tileMap.value) { + tileMap.value.destroyLayer('tiles') + tileMap.value.removeAllLayers() + tileMap.value.destroy() + } })