From 9de7af961ec551e6a7cc43ad3c4def72cbf1cd76 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Fri, 10 Jan 2025 23:22:32 +0100
Subject: [PATCH] Improved map tile initialising
---
src/application/types.ts | 2 +-
src/components/game/character/Character.vue | 7 ++-
src/components/game/map/Map.vue | 12 ++---
src/components/game/map/MapTiles.vue | 55 +++++++++------------
src/composables/useCharacter.ts | 0
5 files changed, 31 insertions(+), 45 deletions(-)
create mode 100644 src/composables/useCharacter.ts
diff --git a/src/application/types.ts b/src/application/types.ts
index b3dc3f3..071b32c 100644
--- a/src/application/types.ts
+++ b/src/application/types.ts
@@ -184,7 +184,7 @@ export type Character = {
export type MapCharacter = {
character: Character
- isMoving?: boolean
+ isMoving: boolean
}
export type CharacterItem = {
diff --git a/src/components/game/character/Character.vue b/src/components/game/character/Character.vue
index e0a0aea..0147a94 100644
--- a/src/components/game/character/Character.vue
+++ b/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.stopFollow()
+ scene.cameras.main.startFollow(charContainer.value as Phaser.GameObjects.Container)
}
updatePosition(props.mapCharacter.character.positionX, props.mapCharacter.character.positionY, props.mapCharacter.character.rotation)
diff --git a/src/components/game/map/Map.vue b/src/components/game/map/Map.vue
index 884f074..7c86e5a 100644
--- a/src/components/game/map/Map.vue
+++ b/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, ref, shallowRef } from 'vue'
+import { onUnmounted, 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>()
diff --git a/src/components/game/map/MapTiles.vue b/src/components/game/map/MapTiles.vue
index a864adf..ddbca72 100644
--- a/src/components/game/map/MapTiles.vue
+++ b/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
-let tileLayer: Phaser.Tilemaps.TilemapLayer
-let isInitialized = ref(false)
+const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
+const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
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) => {
- return tileMap.addTilesetImage(tile, tile, config.tile_size.width, config.tile_size.height, 1, 2, index + 1, { x: 0, y: -config.tile_size.height })
+ const tilesetImages = tilesArray.map((tile: any, index: number) => {
+ 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 }))
- const layer = tileMap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.height) as Phaser.Tilemaps.TilemapLayer
+ 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 = 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
- tileMap.destroyLayer('tiles')
- tileMap.removeAllLayers()
- tileMap.destroy()
+ if (!tileMap.value) return
+ tileMap.value.destroyLayer('tiles')
+ tileMap.value.removeAllLayers()
+ tileMap.value.destroy()
})
</script>
diff --git a/src/composables/useCharacter.ts b/src/composables/useCharacter.ts
new file mode 100644
index 0000000..e69de29