283 lines
11 KiB
Vue
283 lines
11 KiB
Vue
<template>
|
|
<TilemapLayerC :tilemap="zoneTilemap" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
|
|
<Controls :layer="tiles" />
|
|
|
|
<Container :depth="2">
|
|
<Image
|
|
:tint="zoneEditorStore.selectedZoneObject?.id === object.id ? 0x00ff00 : 0xffffff"
|
|
v-for="object in zoneObjects"
|
|
:depth="object.depth"
|
|
:key="object.object.id"
|
|
:x="tileToWorldX(zoneTilemap, object.position_x, object.position_y)"
|
|
:y="tileToWorldY(zoneTilemap, object.position_x, object.position_y)"
|
|
:texture="object.object.id"
|
|
:originY="Number(object.object.origin_x)"
|
|
:originX="Number(object.object.origin_y)"
|
|
@pointerup="() => zoneEditorStore.setSelectedZoneObject(object)"
|
|
/>
|
|
</Container>
|
|
|
|
<Container :depth="3">
|
|
<Image v-for="zoneEventTile in zoneEventTiles" :key="zoneEventTile.id" :x="tileToWorldX(zoneTilemap, zoneEventTile.position_x, zoneEventTile.position_y)" :y="tileToWorldY(zoneTilemap, zoneEventTile.position_x, zoneEventTile.position_y)" :texture="zoneEventTile.type" />
|
|
</Container>
|
|
|
|
<Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @clear="clear" @save="save" />
|
|
<SelectedZoneObject v-if="zoneEditorStore.selectedZoneObject" @update_depth="updateZoneObjectDepth" @delete="deleteZoneObject" @move="() => console.log('lol')" />
|
|
<Tiles v-if="((zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile') || zoneEditorStore.tool === 'paint'" />
|
|
<Objects v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'object'" />
|
|
<ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
|
|
<ZoneList v-if="zoneEditorStore.isZoneListModalShown" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import config from '@/config'
|
|
import { Container, Image, TilemapLayer as TilemapLayerC, useScene } from 'phavuer'
|
|
import { onBeforeMount, onBeforeUnmount, ref, toRaw, watch } from 'vue'
|
|
import Controls from '@/components/utilities/Controls.vue'
|
|
import { useGameStore } from '@/stores/game'
|
|
import Toolbar from '@/components/utilities/zoneEditor/Toolbar.vue'
|
|
import Tiles from '@/components/utilities/zoneEditor/Tiles.vue'
|
|
import SelectedZoneObject from '@/components/utilities/zoneEditor/SelectedZoneObject.vue'
|
|
import { useZoneEditorStore } from '@/stores/zoneEditor'
|
|
import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
|
|
import { placeTile, setAllTiles, tileToWorldX, tileToWorldY } from '@/services/zone'
|
|
import { useAssetStore } from '@/stores/assets'
|
|
import Objects from '@/components/utilities/zoneEditor/Objects.vue'
|
|
import type { Zone, ZoneEventTile, ZoneObject } from '@/types'
|
|
import { storeToRefs } from 'pinia'
|
|
import ZoneList from '@/components/utilities/zoneEditor/ZoneList.vue'
|
|
import Tileset = Phaser.Tilemaps.Tileset
|
|
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
|
|
|
|
function uuidv4() {
|
|
return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) => (+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16))
|
|
}
|
|
|
|
const scene = useScene()
|
|
const gameStore = useGameStore()
|
|
const zoneEditorStore = useZoneEditorStore()
|
|
const assetStore = useAssetStore()
|
|
|
|
const zoneData = new Phaser.Tilemaps.MapData({
|
|
width: zoneEditorStore.zone?.width ?? 10,
|
|
height: zoneEditorStore.zone?.height ?? 10,
|
|
tileWidth: config.tile_size.x,
|
|
tileHeight: config.tile_size.y,
|
|
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
|
|
format: Phaser.Tilemaps.Formats.ARRAY_2D
|
|
})
|
|
|
|
/**
|
|
* These variables are used to store the tileset images and the tilemap
|
|
* The tilesetImages are used to store the tileset images
|
|
* The zoneTilemap is used to store the tilemap
|
|
* The zoneTiles are used to store the tile data
|
|
* The zoneObjects are used to store the object data
|
|
*/
|
|
const tilesetImages: Tileset[] = []
|
|
const zoneTilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
|
|
let zoneTiles = [] as string[][]
|
|
const zoneObjects = ref<ZoneObject[]>([])
|
|
const zoneEventTiles = ref<ZoneEventTile[]>([])
|
|
|
|
/**
|
|
* Walk through object and add them to the zone as tilesetImages
|
|
*/
|
|
let tileCount = 1
|
|
toRaw(assetStore.assets).forEach((asset) => {
|
|
if (asset.group !== 'tiles') return
|
|
tilesetImages.push(zoneTilemap.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, tileCount++) as Tileset)
|
|
})
|
|
tilesetImages.push(zoneTilemap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0) as Tileset)
|
|
|
|
const tiles = zoneTilemap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as TilemapLayer
|
|
const exampleTilesArray = Array.from({ length: zoneEditorStore.zone?.width ?? 0 }, () => Array.from({ length: zoneEditorStore.zone?.height ?? 0 }, () => 'blank_tile'))
|
|
|
|
const { objectList } = storeToRefs(zoneEditorStore)
|
|
|
|
/**
|
|
* Watch for object updates and update the zoneObjects
|
|
*/
|
|
watch(objectList, (newObjects) => {
|
|
zoneObjects.value = zoneObjects.value.map((object) => {
|
|
const newObject = newObjects.find((newObject) => newObject.id === object.object.id)
|
|
if (!newObject) return object
|
|
return { ...object, object: newObject }
|
|
})
|
|
})
|
|
|
|
function eraser(tile: Phaser.Tilemaps.Tile) {
|
|
if (zoneEditorStore.drawMode === 'tile') {
|
|
placeTile(zoneTilemap, tiles, tile.x, tile.y, 'blank_tile')
|
|
zoneTiles[tile.y][tile.x] = 'blank_tile'
|
|
}
|
|
|
|
if (zoneEditorStore.drawMode === 'object') {
|
|
/**
|
|
* @TODO : when reloaded in zone editor, these aren't removed
|
|
*/
|
|
zoneObjects.value = zoneObjects.value.filter((object) => {
|
|
return object.position_x !== tile.x || object.position_y !== tile.y
|
|
})
|
|
}
|
|
|
|
if (zoneEditorStore.drawMode === 'blocking tile') {
|
|
zoneEventTiles.value = zoneEventTiles.value.filter((zoneTileEvent) => {
|
|
return zoneTileEvent.position_x !== tile.x || zoneTileEvent.position_y !== tile.y
|
|
})
|
|
}
|
|
}
|
|
|
|
function pencil(tile: Phaser.Tilemaps.Tile) {
|
|
if (zoneEditorStore.drawMode === 'tile') {
|
|
if (zoneEditorStore.selectedTile === null) return
|
|
placeTile(zoneTilemap, tiles, tile.x, tile.y, zoneEditorStore.selectedTile.id)
|
|
zoneTiles[tile.y][tile.x] = zoneEditorStore.selectedTile.id
|
|
}
|
|
|
|
if (zoneEditorStore.drawMode === 'object') {
|
|
if (zoneEditorStore.zone === null) return
|
|
if (zoneEditorStore.selectedObject === null) return
|
|
|
|
zoneObjects.value.push({
|
|
id: uuidv4(),
|
|
zoneId: zoneEditorStore.zone.id,
|
|
zone: zoneEditorStore.zone,
|
|
objectId: zoneEditorStore.selectedObject.id,
|
|
object: zoneEditorStore.selectedObject,
|
|
depth: zoneEditorStore.objectDepth,
|
|
position_x: tile.x,
|
|
position_y: tile.y
|
|
})
|
|
|
|
// remove duplicates based on object, pos x and y
|
|
zoneObjects.value = zoneObjects.value.filter((object, index, self) => index === self.findIndex((t) => t.objectId === object.objectId && t.position_x === object.position_x && t.position_y === object.position_y))
|
|
}
|
|
|
|
if (zoneEditorStore.drawMode === 'blocking tile') {
|
|
if (zoneEditorStore.zone === null) return
|
|
|
|
zoneEventTiles.value.push({
|
|
id: uuidv4(),
|
|
zoneId: zoneEditorStore.zone.id,
|
|
zone: zoneEditorStore.zone,
|
|
type: 'BLOCK',
|
|
position_x: tile.x,
|
|
position_y: tile.y
|
|
})
|
|
|
|
// remove duplicates based on type, pos x and y
|
|
zoneEventTiles.value = zoneEventTiles.value.filter((zoneTileEvent, index, self) => index === self.findIndex((t) => t.type === zoneTileEvent.type && t.position_x === zoneTileEvent.position_x && t.position_y === zoneTileEvent.position_y))
|
|
}
|
|
}
|
|
|
|
function paint(tile: Phaser.Tilemaps.Tile) {
|
|
if (zoneEditorStore.selectedTile === null) return
|
|
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, zoneEditorStore.selectedTile.id)))
|
|
zoneTiles.forEach((row, y) => row.forEach((tile, x) => (zoneTiles[y][x] = zoneEditorStore.selectedTile.id)))
|
|
}
|
|
|
|
function save() {
|
|
if (!zoneEditorStore.zone) return
|
|
|
|
const data = {
|
|
zoneId: zoneEditorStore.zone.id,
|
|
name: zoneEditorStore.zone.name,
|
|
width: zoneEditorStore.zone.width,
|
|
height: zoneEditorStore.zone.height,
|
|
tiles: zoneTiles,
|
|
zoneEventTiles: toRaw(zoneEventTiles.value).map((tile) => ({
|
|
id: tile.id,
|
|
zoneId: tile.zoneId,
|
|
type: tile.type,
|
|
position_x: tile.position_x,
|
|
position_y: tile.position_y
|
|
})),
|
|
zoneObjects: toRaw(zoneObjects.value).map((obj) => ({
|
|
id: obj.id,
|
|
zoneId: obj.zoneId,
|
|
objectId: obj.objectId,
|
|
depth: obj.depth,
|
|
position_x: obj.position_x,
|
|
position_y: obj.position_y
|
|
}))
|
|
}
|
|
|
|
gameStore.connection.emit('gm:zone_editor:zone:update', data)
|
|
|
|
gameStore.connection.emit('gm:zone_editor:zone:request', { zoneId: zoneEditorStore.zone.id }, (response: Zone) => {
|
|
zoneEditorStore.setZone(response)
|
|
})
|
|
|
|
if (zoneEditorStore.isSettingsModalShown) {
|
|
zoneEditorStore.toggleSettingsModal()
|
|
}
|
|
}
|
|
|
|
function clear() {
|
|
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
|
|
zoneTiles = exampleTilesArray
|
|
zoneEventTiles.value = []
|
|
zoneObjects.value = []
|
|
}
|
|
|
|
function updateZoneObjectDepth(depth: number) {
|
|
zoneObjects.value = zoneObjects.value.map((object) => {
|
|
if (object.id === zoneEditorStore.selectedZoneObject?.id) {
|
|
return { ...object, depth }
|
|
}
|
|
return object
|
|
})
|
|
}
|
|
|
|
function deleteZoneObject(objectId: string) {
|
|
zoneObjects.value = zoneObjects.value.filter((object) => object.id !== objectId)
|
|
}
|
|
|
|
onBeforeMount(() => {
|
|
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
|
|
zoneTiles = exampleTilesArray
|
|
|
|
if (zoneEditorStore.zone && zoneEditorStore.zone.tiles) {
|
|
setAllTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles)
|
|
zoneTiles = zoneEditorStore.zone.tiles
|
|
|
|
// Determine the current zone dimensions
|
|
const currentZoneWidth = zoneEditorStore.zone.width ?? 0
|
|
const currentZoneHeight = zoneEditorStore.zone.height ?? 0
|
|
|
|
// Ensure zoneTiles matches the current zone dimensions, filling new spaces with 'blank_tile'
|
|
for (let y = 0; y < currentZoneHeight; y++) {
|
|
zoneTiles[y] = zoneTiles[y] || [] // Ensure the row exists
|
|
for (let x = 0; x < currentZoneWidth; x++) {
|
|
zoneTiles[y][x] = zoneTiles[y][x] || 'blank_tile' // Fill missing tiles with 'blank_tile'
|
|
}
|
|
}
|
|
|
|
// Update the tilemap with any new 'blank_tile' entries
|
|
zoneTiles.forEach((row, y) => {
|
|
row.forEach((tileId, x) => {
|
|
placeTile(zoneTilemap, tiles, x, y, tileId)
|
|
})
|
|
})
|
|
}
|
|
|
|
zoneEventTiles.value = zoneEditorStore.zone?.zoneEventTiles ?? []
|
|
zoneObjects.value = zoneEditorStore.zone?.zoneObjects ?? []
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
zoneEventTiles.value = []
|
|
zoneObjects.value = []
|
|
tiles.destroy()
|
|
zoneTilemap.removeAllLayers()
|
|
zoneTilemap.destroy()
|
|
zoneEditorStore.reset()
|
|
})
|
|
|
|
// center camera
|
|
const centerY = (zoneTilemap.height * zoneTilemap.tileHeight) / 2
|
|
const centerX = (zoneTilemap.width * zoneTilemap.tileWidth) / 2
|
|
scene.cameras.main.centerOn(centerX, centerY)
|
|
</script>
|