fuck

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -3,10 +3,14 @@
   <Controls :layer="tiles" />
 
   <Container :depth="2">
-    <Image v-for="object in zoneObjects" :key="object.object.id" :x="object.position_x" :y="object.position_y" :texture="object.object.id" :originY="Number(object.object.origin_x)" :originX="Number(object.object.origin_y)" />
+    <Image v-for="object in zoneObjects" :key="object.object.id" :x="tileToWorldX(zoneTilemap, object.position_x, object.position_y)" :y="tileToWorldY(zoneTilemap, object.position_x, object.position_y)" :texture="object.object.id" :originY="Number(object.object.origin_x)" :originX="Number(object.object.origin_y)" />
   </Container>
 
-  <Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @save="save" />
+  <Container :depth="3">
+<!--    <Image v-for="object in zoneObjects" :key="object.object.id" :x="object.position_x" :y="object.position_y" :texture="object.object.id" />-->
+  </Container>
+
+  <Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @clear="clear" @save="save" />
   <Tiles v-if="((zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile') || zoneEditorStore.tool === 'paint'" />
   <Objects v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'object'" />
   <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
@@ -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<ZoneObject[]>([])
+const zoneEventTiles = ref<ZoneEventTile[]>([])
 
 /**
  * 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(() => {

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

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