From af3e9d2b4d735914f3edf952e8fcd18be5130856 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Mon, 16 Sep 2024 18:56:08 +0200
Subject: [PATCH] Map fixes

---
 .../gameMaster/zoneEditor/ZoneEditor.vue      | 17 ++++++----
 src/components/sprites/Character.vue          | 34 +++++++++----------
 src/components/zone/Objects.vue               |  4 +--
 src/components/zone/Tiles.vue                 | 10 +++---
 4 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/src/components/gameMaster/zoneEditor/ZoneEditor.vue b/src/components/gameMaster/zoneEditor/ZoneEditor.vue
index 0b1bbce..e7d99f7 100644
--- a/src/components/gameMaster/zoneEditor/ZoneEditor.vue
+++ b/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))
-  tilesetImages.push(zoneTilemap.value.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0))
+  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, { 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
 }
 
diff --git a/src/components/sprites/Character.vue b/src/components/sprites/Character.vue
index b3ea906..b72e2d5 100644
--- a/src/components/sprites/Character.vue
+++ b/src/components/sprites/Character.vue
@@ -1,14 +1,14 @@
 <template>
   <Container :depth="999" v-if="props.character" :x="currentX" :y="currentY">
     <!--    Start chat bubble -->
-<!--    <RoundRectangle :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="5" />-->
-<!--    <Text @create="createText" :text="`This is a chat message 🤯👋`" :origin-x="0.5" :origin-y="10.9" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />-->
+    <!--    <RoundRectangle :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="5" />-->
+    <!--    <Text @create="createText" :text="`This is a chat message 🤯👋`" :origin-x="0.5" :origin-y="10.9" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />-->
     <!--    End chat bubble -->
     <Text @create="createText" :text="props.character.name" :origin-x="0.5" :origin-y="9" />
     <RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" />
     <RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
   </Container>
-<!--  <Text :text="isometricDepth" :depth="isometricDepth" :x="currentX" :y="currentY" />-->
+  <!--  <Text :text="isometricDepth" :depth="isometricDepth" :x="currentX" :y="currentY" />-->
   <Container :depth="isometricDepth" v-if="props.character" :x="currentX" :y="currentY">
     <Image v-if="!props.character.characterType" texture="character" :origin-y="1" />
     <Sprite v-else :texture="charTexture" :play="props.character.isMoving ? charTexture : undefined" :origin-y="1" :flipX="props.character.rotation === 6 || props.character.rotation === 4" :flipY="false" />
@@ -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);
-  console.log(isometricDepth.value);
+  isometricDepth.value = calculateIsometricDepth(x, y, width, height, isCharacter)
+  console.log(isometricDepth.value)
 }
 
 const updatePosition = (x: number, y: number, direction: Direction) => {
@@ -91,7 +91,7 @@ const updatePosition = (x: number, y: number, direction: Direction) => {
       duration: duration,
       ease: 'Linear',
       onStart: () => {
-        if(direction === Direction.POSITIVE) {
+        if (direction === Direction.POSITIVE) {
           calculateLocalDepth(x, y, 28, 94, true)
         }
       },
@@ -100,7 +100,7 @@ const updatePosition = (x: number, y: number, direction: Direction) => {
         currentY.value = tween.targets[0].y ?? 0
       },
       onComplete: () => {
-        if(direction === Direction.NEGATIVE) {
+        if (direction === Direction.NEGATIVE) {
           calculateLocalDepth(x, y, 28, 94, true)
         }
       }
@@ -113,11 +113,11 @@ watch(
   (newChar, oldChar) => {
     if (!newChar) return
     if (!oldChar || newChar.positionX !== oldChar.positionX || newChar.positionY !== oldChar.positionY) {
-      if(!oldChar) {
-        updatePosition(newChar.positionX, newChar.positionY, Direction.POSITIVE);
+      if (!oldChar) {
+        updatePosition(newChar.positionX, newChar.positionY, Direction.POSITIVE)
       } else {
-        const direction = calcDirection(oldChar.positionX, oldChar.positionY, newChar.positionX, newChar.positionY);
-        updatePosition(newChar.positionX, newChar.positionY, direction);
+        const direction = calcDirection(oldChar.positionX, oldChar.positionY, newChar.positionX, newChar.positionY)
+        updatePosition(newChar.positionX, newChar.positionY, direction)
       }
     }
   },
@@ -125,13 +125,13 @@ watch(
 )
 
 const calcDirection = (oldX, oldY, newX, newY) => {
-  if(newY < oldY || newX < oldX) {
-    return Direction.NEGATIVE;
+  if (newY < oldY || newX < oldX) {
+    return Direction.NEGATIVE
   }
-  if(newX > oldX || newY > oldY) {
-    return Direction.POSITIVE;
+  if (newX > oldX || newY > oldY) {
+    return Direction.POSITIVE
   }
-  return Direction.NOCHANGE;
+  return Direction.NOCHANGE
 }
 
 const charTexture = computed(() => {
diff --git a/src/components/zone/Objects.vue b/src/components/zone/Objects.vue
index f681b28..7a9047d 100644
--- a/src/components/zone/Objects.vue
+++ b/src/components/zone/Objects.vue
@@ -1,6 +1,6 @@
 <template>
-    <Image v-for="object in zoneStore.zone?.zoneObjects" :depth="calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight)" :key="object.id" v-bind="getObjectImageProps(object)" />
-<!--    <Text v-for="object in zoneStore.zone?.zoneObjects" :key="object.id" :depth="99999" :text="Math.ceil(calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight))" v-bind="getObjectProps(object)" />-->
+  <Image v-for="object in zoneStore.zone?.zoneObjects" :depth="calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight)" :key="object.id" v-bind="getObjectImageProps(object)" />
+  <!--    <Text v-for="object in zoneStore.zone?.zoneObjects" :key="object.id" :depth="99999" :text="Math.ceil(calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight))" v-bind="getObjectProps(object)" />-->
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/zone/Tiles.vue b/src/components/zone/Tiles.vue
index c52c923..1232b01 100644
--- a/src/components/zone/Tiles.vue
+++ b/src/components/zone/Tiles.vue
@@ -1,6 +1,6 @@
 <template>
-<!--  Disabled for now since it bottlenecks performance -->
-<!--  <TilemapLayer :tilemap="zoneTilemap" :tileset="tileArray" :layerIndex="0" :cull-padding="0" />-->
+  <!--  Disabled for now since it bottlenecks performance -->
+  <!--  <TilemapLayer :tilemap="zoneTilemap" :tileset="tileArray" :layerIndex="0" :cull-padding="0" />-->
   <Controls :layer="tiles" :depth="0" />
 </template>
 
@@ -44,14 +44,14 @@ function createTileLayer() {
   const uniqueTiles = new Set(tilesFromZone.flat().filter(Boolean))
 
   const tilesetImages = Array.from(uniqueTiles).map((tile, index) => {
-    return zoneTilemap.value.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 0, 0, index + 1, {x: 0, y: -config.tile_size.y})
+    return zoneTilemap.value.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 0, 0, index + 1, { x: 0, y: -config.tile_size.y })
   }) 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
 }