From 367d536c5293014511d29a738d8f836edeb4adf8 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
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<Phaser.Tilemaps.Tilemap>()
+const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
-/**
- * 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()
+ }
})
</script>