forked from noxious/client
79 lines
2.5 KiB
Vue
79 lines
2.5 KiB
Vue
<template>
|
|
<TilemapLayer :tilemap="zoneTilemap" :tileset="tileArray" :layerIndex="0" :cull-padding="10" />
|
|
<Controls :layer="tiles" :depth="0" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import config from '@/config'
|
|
import { TilemapLayer, useScene } from 'phavuer'
|
|
import { useAssetStore } from '@/stores/assets'
|
|
import { useZoneStore } from '@/stores/zone'
|
|
import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
|
|
import { storeToRefs } from 'pinia'
|
|
import { placeTile, setAllTiles } from '@/services/zone'
|
|
import Controls from '@/components/utilities/Controls.vue'
|
|
|
|
const emit = defineEmits(['tilemap:create'])
|
|
|
|
const assetStore = useAssetStore()
|
|
const zoneStore = useZoneStore()
|
|
const scene = useScene()
|
|
|
|
const { zone } = storeToRefs(zoneStore)
|
|
const zoneTilemap = ref(createTilemap())
|
|
const tiles = ref(createTileLayer())
|
|
const tileArray = ref(createTileArray())
|
|
|
|
function createTilemap() {
|
|
const zoneData = new Phaser.Tilemaps.MapData({
|
|
width: zone.value?.width,
|
|
height: zone.value?.height,
|
|
tileWidth: config.tile_size.x,
|
|
tileHeight: config.tile_size.y,
|
|
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
|
|
format: Phaser.Tilemaps.Formats.ARRAY_2D
|
|
})
|
|
const tilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
|
|
emit('tilemap:create', tilemap)
|
|
return tilemap
|
|
}
|
|
|
|
function createTileLayer() {
|
|
const tilesFromZone = zone.value?.tiles || []
|
|
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)
|
|
})
|
|
|
|
// Add blank tile
|
|
tilesetImages.push(zoneTilemap.value.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0))
|
|
|
|
return zoneTilemap.value.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
|
|
}
|
|
|
|
function createTileArray() {
|
|
return Array.from({ length: zone.value?.width ?? 0 }, () =>
|
|
Array.from({ length: zone.value?.height ?? 0 }, () => 'blank_tile')
|
|
)
|
|
}
|
|
|
|
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')
|
|
)
|
|
} else {
|
|
tileArray.value.forEach((row, y) =>
|
|
row.forEach((_, x) => placeTile(zoneTilemap.value, tiles.value, x, y, 'blank_tile'))
|
|
)
|
|
}
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
tiles.value?.destroy()
|
|
zoneTilemap.value.removeAllLayers()
|
|
zoneTilemap.value.destroy()
|
|
})
|
|
</script> |