imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Improved map tile initialising

Browse Source
This commit is contained in:
Dennis Postma
2025-01-10 23:22:32 +01:00
parent 4067ec2585
commit 9de7af961e
5 changed files with 31 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/game/map/MapTiles.vue
View File

@ -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>