Improved map tile initialising

src/application/types.ts

@@ -184,7 +184,7 @@ export type Character = {
 
 export type MapCharacter = {
   character: Character
-  isMoving?: boolean
+  isMoving: boolean
 }
 
 export type CharacterItem = {

src/components/game/character/Character.vue

@@ -90,7 +90,9 @@ const updatePosition = (positionX: number, positionY: number, direction: Directi
       }
     },
     onUpdate: (tween) => {
+      // @ts-ignore
       currentPositionX.value = tween.targets[0].x
+      // @ts-ignore
       currentPositionY.value = tween.targets[0].y
     },
     onComplete: () => {
@@ -149,8 +151,6 @@ watch(
   }
 )
 
-watch(() => props.mapCharacter, updateSprite)
-
 const characterTypeStorage = new CharacterTypeStorage()
 characterTypeStorage.getSpriteId(props.mapCharacter.character.characterType!).then((spriteId) => {
   console.log(spriteId)
@@ -172,8 +172,7 @@ onMounted(() => {
     mapStore.setCharacterLoaded(true)
 
     // #146 : Set camera position to character, need to be improved still
-    // scene.cameras.main.startFollow(charContainer.value as Phaser.GameObjects.Container)
+    scene.cameras.main.startFollow(charContainer.value as Phaser.GameObjects.Container)
-    // scene.cameras.main.stopFollow()
   }
 
   updatePosition(props.mapCharacter.character.positionX, props.mapCharacter.character.positionY, props.mapCharacter.character.rotation)

src/components/game/map/Map.vue

@@ -1,26 +1,20 @@
 <template>
   <MapTiles :key="mapStore.mapId" @tileMap:create="tileMap = $event" />
-  <MapObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
+  <!--  <MapObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />-->
   <Characters v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
 </template>
 
 <script setup lang="ts">
-import type { Map, MapCharacter, mapLoadData, UUID } from '@/application/types'
+import type { MapCharacter, mapLoadData, UUID } from '@/application/types'
 import Characters from '@/components/game/map/Characters.vue'
 import MapTiles from '@/components/game/map/MapTiles.vue'
 import MapObjects from '@/components/game/map/PlacedMapObjects.vue'
-import { loadMapTilesIntoScene } from '@/composables/mapComposable'
-import { MapStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapStore } from '@/stores/mapStore'
-import { useScene } from 'phavuer'
+import { onUnmounted, shallowRef } from 'vue'
-import { onUnmounted, ref, shallowRef } from 'vue'
 
-const scene = useScene()
 const gameStore = useGameStore()
 const mapStore = useMapStore()
-const mapStorage = new MapStorage()
-const mapData = ref<Map>()
 
 const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
 

src/components/game/map/MapTiles.vue

@@ -1,5 +1,5 @@
 <template>
-  <Controls v-if="isInitialized" :layer="tileLayer" :depth="0" />
+  <Controls v-if="tileLayer" :layer="tileLayer" :depth="0" />
 </template>
 
 <script setup lang="ts">
@@ -11,17 +11,17 @@ import { FlattenMapArray, loadMapTilesIntoScene, setLayerTiles } from '@/composa
 import { MapStorage } from '@/storage/storages'
 import { useMapStore } from '@/stores/mapStore'
 import { useScene } from 'phavuer'
-import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { onBeforeUnmount, onMounted, shallowRef } from 'vue'
+
+import Tileset = Phaser.Tilemaps.Tileset
 
 const emit = defineEmits(['tileMap:create'])
-
 const scene = useScene()
 const mapStore = useMapStore()
 const mapStorage = new MapStorage()
 
-let tileMap: Phaser.Tilemaps.Tilemap
+const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
-let tileLayer: Phaser.Tilemaps.TilemapLayer
+const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
-let isInitialized = ref(false)
 
 function createTileMap(mapData: any) {
   const mapConfig = new Phaser.Tilemaps.MapData({
@@ -35,48 +35,41 @@ function createTileMap(mapData: any) {
 
   const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapConfig)
   emit('tileMap:create', newTileMap)
-
   return newTileMap
 }
 
-function createTileLayer(mapData: any) {
+function createTileLayer(currentTileMap: Phaser.Tilemaps.Tilemap, mapData: any) {
   const tilesArray = unduplicateArray(FlattenMapArray(mapData?.tiles ?? []))
 
-  const tilesetImages = Array.from(tilesArray).map((tile: any, index: number) => {
+  const tilesetImages = tilesArray.map((tile: any, index: number) => {
-    return tileMap.addTilesetImage(tile, tile, config.tile_size.width, config.tile_size.height, 1, 2, index + 1, { x: 0, y: -config.tile_size.height })
+    return currentTileMap.addTilesetImage(tile, tile, config.tile_size.width, config.tile_size.height, 1, 2, index + 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 }))
+  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 = tileMap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.height) as Phaser.Tilemaps.TilemapLayer
+
+  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
 }
 
-async function initialize() {
-  try {
-    await loadMapTilesIntoScene(mapStore.mapId as UUID, scene)
-    const mapData = await mapStorage.get(mapStore.mapId)
-    tileMap = createTileMap(mapData)
-    tileLayer = createTileLayer(mapData)
-    setLayerTiles(tileMap, tileLayer, mapData?.tiles)
-    isInitialized.value = true
-  } catch (error) {
-    console.error('Failed to initialize map:', error)
-  }
-}
-
 onMounted(() => {
-  initialize()
+  loadMapTilesIntoScene(mapStore.mapId as UUID, scene)
+    .then(() => mapStorage.get(mapStore.mapId))
+    .then((mapData) => {
+      tileMap.value = createTileMap(mapData)
+      tileLayer.value = createTileLayer(tileMap.value, mapData)
+      setLayerTiles(tileMap.value, tileLayer.value, mapData?.tiles)
+    })
+    .catch((error) => console.error('Failed to initialize map:', error))
 })
 
 onBeforeUnmount(() => {
-  if (!tileMap) return
+  if (!tileMap.value) return
-  tileMap.destroyLayer('tiles')
+  tileMap.value.destroyLayer('tiles')
-  tileMap.removeAllLayers()
+  tileMap.value.removeAllLayers()
-  tileMap.destroy()
+  tileMap.value.destroy()
 })
 </script>