noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Don't use Vue3 ref's for storing map data

Browse Source
This commit is contained in:
Dennis Postma
2024-09-18 20:55:37 +02:00
parent 43a59c8f7c
commit ddb0e8bf3a
4 changed files with 167 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/zone/Tiles.vue
View File

@ -18,9 +18,9 @@ const scene = useScene()
const camera = ref(scene.cameras.main)
const { zone } = storeToRefs(zoneStore)
const zoneTilemap = ref(createTilemap())
const tiles = ref(createTileLayer())
const tileArray = ref(createTileArray())
const zoneTilemap = createTilemap()
const tiles = createTileLayer()
let tileArray = createTileArray()
function createTilemap() {
const zoneData = new Phaser.Tilemaps.MapData({
@ -41,12 +41,12 @@ 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.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, { x: 0, y: -config.tile_size.y }))
const layer = zoneTilemap.value.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
tilesetImages.push(zoneTilemap.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.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
layer.setDepth(0)
@ -59,16 +59,16 @@ function createTileArray() {
onBeforeMount(() => {
if (zone.value?.tiles) {
setAllTiles(zoneTilemap.value, tiles.value, zone.value.tiles)
tileArray.value = zone.value.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
setAllTiles(zoneTilemap, tiles, zone.value.tiles)
tileArray = zone.value.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
} else {
tileArray.value.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap.value, tiles.value, x, y, 'blank_tile')))
tileArray.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
}
})
onBeforeUnmount(() => {
tiles.value?.destroy()
zoneTilemap.value.removeAllLayers()
zoneTilemap.value.destroy()
tiles?.destroy()
zoneTilemap.removeAllLayers()
zoneTilemap.destroy()
})
</script>