Map fixes

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -7,8 +7,7 @@
     <Objects />
     <ZoneSettings />
     <TeleportModal v-if="shouldShowTeleportModal" />
-<!--    Disabled for now since it bottlenecks performance -->
+
-<!--    <TilemapLayerC :tilemap="zoneTilemap as Tilemap" :tileset="tileArray as any" :layerIndex="0" :cull-padding="3" />-->
     <Controls :layer="tiles as TilemapLayer" />
 
     <Container :depth="2">
@@ -25,7 +24,7 @@
 
 <script setup lang="ts">
 import { computed, onBeforeMount, onUnmounted, ref, watch } from 'vue'
-import { Container, Image, TilemapLayer as TilemapLayerC, useScene } from 'phavuer'
+import { Container, Image, useScene } from 'phavuer'
 import { storeToRefs } from 'pinia'
 import { useGameStore } from '@/stores/game'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
@@ -69,18 +68,22 @@ function createTilemap() {
     tileWidth: config.tile_size.x,
     tileHeight: config.tile_size.y,
     orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
-    format: Phaser.Tilemaps.Formats.ARRAY_2D,
+    format: Phaser.Tilemaps.Formats.ARRAY_2D
   })
   const tilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
   return tilemap
 }
 
 function createTileLayer() {
-  const tilesetImages = assetStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.value.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, index + 1))
+  const tilesetImages = assetStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.value.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, index + 1, { x: 0, y: -config.tile_size.y }))
-  tilesetImages.push(zoneTilemap.value.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0))
+  tilesetImages.push(zoneTilemap.value.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0, { x: 0, y: -config.tile_size.y }))
+
   const layer = zoneTilemap.value.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
-  //set layerindex
+
   layer.setDepth(0)
+  layer.setCullPadding(2, 2)
+  layer.setOrigin(0.2, 0.5)
+
   return layer
 }
 

src/components/sprites/Character.vue

@@ -37,15 +37,15 @@ const props = withDefaults(defineProps<Props>(), {
   character: undefined
 })
 
-const isometricDepth = ref(calculateIsometricDepth(props.character.positionX, props.character.positionY, 28, 94, true));
+const isometricDepth = ref(calculateIsometricDepth(props.character.positionX, props.character.positionY, 28, 94, true))
 const currentX = ref(0)
 const currentY = ref(0)
 const tween = ref<Phaser.Tweens.Tween | null>(null)
 const isInitialPosition = ref(true)
 
 const calculateLocalDepth = (x: number, y: number, width: number, height: number, isCharacter: boolean) => {
-  isometricDepth.value = calculateIsometricDepth(x, y, width, height, isCharacter);
+  isometricDepth.value = calculateIsometricDepth(x, y, width, height, isCharacter)
-  console.log(isometricDepth.value);
+  console.log(isometricDepth.value)
 }
 
 const updatePosition = (x: number, y: number, direction: Direction) => {
@@ -114,10 +114,10 @@ watch(
     if (!newChar) return
     if (!oldChar || newChar.positionX !== oldChar.positionX || newChar.positionY !== oldChar.positionY) {
       if (!oldChar) {
-        updatePosition(newChar.positionX, newChar.positionY, Direction.POSITIVE);
+        updatePosition(newChar.positionX, newChar.positionY, Direction.POSITIVE)
       } else {
-        const direction = calcDirection(oldChar.positionX, oldChar.positionY, newChar.positionX, newChar.positionY);
+        const direction = calcDirection(oldChar.positionX, oldChar.positionY, newChar.positionX, newChar.positionY)
-        updatePosition(newChar.positionX, newChar.positionY, direction);
+        updatePosition(newChar.positionX, newChar.positionY, direction)
       }
     }
   },
@@ -126,12 +126,12 @@ watch(
 
 const calcDirection = (oldX, oldY, newX, newY) => {
   if (newY < oldY || newX < oldX) {
-    return Direction.NEGATIVE;
+    return Direction.NEGATIVE
   }
   if (newX > oldX || newY > oldY) {
-    return Direction.POSITIVE;
+    return Direction.POSITIVE
   }
-  return Direction.NOCHANGE;
+  return Direction.NOCHANGE
 }
 
 const charTexture = computed(() => {

src/components/zone/Tiles.vue

@@ -48,10 +48,10 @@ function createTileLayer() {
   }) as any
 
   // Add blank tile
-  tilesetImages.push(zoneTilemap.value.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0))
+  tilesetImages.push(zoneTilemap.value.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0, { x: 0, y: -config.tile_size.y }))
   const layer = zoneTilemap.value.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
   layer.setDepth(0)
-  layer.setCullPadding(0)
+  layer.setCullPadding(2, 2)
   layer.setOrigin(0.2, 0.5)
   return layer
 }