diff --git a/src/components/utilities/zoneEditor/ZoneEditor.vue b/src/components/utilities/zoneEditor/ZoneEditor.vue index 60003ac..d895397 100644 --- a/src/components/utilities/zoneEditor/ZoneEditor.vue +++ b/src/components/utilities/zoneEditor/ZoneEditor.vue @@ -3,10 +3,14 @@ - + - + + + + + @@ -23,10 +27,10 @@ import Toolbar from '@/components/utilities/zoneEditor/Toolbar.vue' import Tiles from '@/components/utilities/zoneEditor/Tiles.vue' import { useZoneEditorStore } from '@/stores/zoneEditor' import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue' -import { placeTile, setAllTiles, tileToWorldXY } from '@/services/zone' +import { placeTile, setAllTiles, tileToWorldX, tileToWorldXY, tileToWorldY } from '@/services/zone' import { useAssetStore } from '@/stores/assets' import Objects from '@/components/utilities/zoneEditor/Objects.vue' -import type { ZoneObject } from '@/types' +import type { ZoneEventTile, ZoneObject } from '@/types' import { storeToRefs } from 'pinia' import ZoneList from '@/components/utilities/zoneEditor/ZoneList.vue' import Tileset = Phaser.Tilemaps.Tileset @@ -47,24 +51,17 @@ const zoneData = new Phaser.Tilemaps.MapData({ }) /** - * This array is used to store the tileset images + * These variables are used to store the tileset images and the tilemap + * The tilesetImages are used to store the tileset images + * The zoneTilemap is used to store the tilemap + * The zoneTiles are used to store the tile data + * The zoneObjects are used to store the object data */ const tilesetImages: Tileset[] = [] - -/** - * Create a new tilemap which will be used to draw the zone - */ const zoneTilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData) - -/** - * This array is used to store the tileset key for each tile in the zone - */ let zoneTiles = [] as string[][]; - -/** - * This array is used to store the objects in the zone - */ const zoneObjects = ref([]) +const zoneEventTiles = ref([]) /** * Walk through object and add them to the zone as tilesetImages @@ -99,9 +96,11 @@ function eraser(tile: Phaser.Tilemaps.Tile) { } if (zoneEditorStore.drawMode === 'object') { + /** + * @TODO : when reloaded in zone editor, these aren't removed + */ zoneObjects.value = zoneObjects.value.filter((object) => { - const worldXY = tileToWorldXY(tiles, tile.x, tile.y) - return object.position_x !== worldXY.position_x || object.position_y !== worldXY.position_y + return object.position_x !== tile.x || object.position_y !== tile.y }) } } @@ -123,13 +122,27 @@ function pencil(tile: Phaser.Tilemaps.Tile) { zone: zoneEditorStore.zone, objectId: zoneEditorStore.selectedObject.id, object: zoneEditorStore.selectedObject, - position_x: tileToWorldXY(tiles, tile.x, tile.y).position_x, - position_y: tileToWorldXY(tiles, tile.x, tile.y).position_y + position_x: tile.x, + position_y: tile.y }) + // console.log(tileToWorldX(zoneTilemap, tile.x), tileToWorldY(zoneTilemap, tile.y)) + console.log(tile.x, tile.y); + console.log(tileToWorldX(tiles, tile.x, tile.y), tileToWorldY(tiles, tile.x, tile.y)) + // remove duplicates based on object, pos x and y zoneObjects.value = zoneObjects.value.filter((object, index, self) => index === self.findIndex((t) => t.objectId === object.objectId && t.position_x === object.position_x && t.position_y === object.position_y)) } + + if (zoneEditorStore.drawMode === 'blocking tile') { + zoneEventTiles.value.push({ + id: Math.random(), + zoneId: zoneEditorStore.zone.id, + zone: zoneEditorStore.zone, + position_x: tile.x, + position_y: tile.y + }) + } } function paint(tile: Phaser.Tilemaps.Tile) { @@ -153,6 +166,12 @@ function save() { }) } +function clear() { + exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile'))) + zoneTiles = exampleTilesArray + zoneObjects.value = [] +} + onBeforeMount(() => { exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile'))) zoneTiles = exampleTilesArray @@ -162,6 +181,7 @@ onBeforeMount(() => { zoneTiles = zoneEditorStore.zone.tiles } zoneObjects.value = zoneEditorStore.zone?.zoneObjects ?? [] + zoneEventTiles.value = zoneEditorStore.zone?.zoneEventTiles ?? [] }) onBeforeUnmount(() => { diff --git a/src/services/zone.ts b/src/services/zone.ts index 9f8fc47..d771098 100644 --- a/src/services/zone.ts +++ b/src/services/zone.ts @@ -9,15 +9,6 @@ export function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLaye return tile } -export function tileToWorldX(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number) { - const worldPoint = layer.tileToWorldX(pos_x) - return worldPoint + config.tile_size.y -} - -export function tileToWorldY(layer: Phaser.Tilemaps.TilemapLayer, pos_y: number) { - return layer.tileToWorldY(pos_y) -} - export function tileToWorldXY(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number, pos_y: number) { const worldPoint = layer.tileToWorldXY(pos_x, pos_y) const position_x = worldPoint.x + config.tile_size.y @@ -26,6 +17,16 @@ export function tileToWorldXY(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number return { position_x, position_y } } +export function tileToWorldX(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number, pos_y: number): number { + const worldPoint = layer.tileToWorldXY(pos_x, pos_y); + return worldPoint.x + config.tile_size.y; +} + +export function tileToWorldY(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number, pos_y: number): number { + const worldPoint = layer.tileToWorldXY(pos_x, pos_y); + return worldPoint.y; +} + export function placeTile(zone: Tilemap, layer: TilemapLayer, x: number, y: number, tileName: string) { const tileImg = zone.getTileset(tileName) as Tileset if (!tileImg) return diff --git a/src/types.ts b/src/types.ts index 29ceba8..a12bde5 100644 --- a/src/types.ts +++ b/src/types.ts @@ -76,6 +76,7 @@ export type Zone = { width: number height: number tiles: any // Using 'any' for Json type, consider using a more specific type if possible + zoneEventTiles: ZoneEventTile[] zoneObjects: ZoneObject[] characters: Character[] chats: Chat[] @@ -93,6 +94,15 @@ export type ZoneObject = { position_y: number } +export type ZoneEventTile = { + id: number + zoneId: number + zone: Zone + type: "WARP" | "NPC" | "ITEM" + position_x: number + position_y: number +} + export type Chat = { id: number characterId: number