forked from noxious/client
Make zone loading dynamic
This commit is contained in:
parent
89a781470b
commit
6065a9c77e
@ -1,16 +1,21 @@
|
||||
<template>
|
||||
<TilemapLayerC :tilemap="zone" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
|
||||
<Controls :layer="tiles" />
|
||||
<div v-if="zoneEditorStore.zone">
|
||||
<TilemapLayerC :tilemap="zoneTilemap" :tileset="tilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
|
||||
<Controls :layer="tiles" />
|
||||
|
||||
<Container>
|
||||
<Image v-for="object in zoneObjects" :key="object.object.id" :x="object.position_x" :y="object.position_y" :texture="object.object.id" :originY="Number(object.object.origin_x)" :originX="Number(object.object.origin_y)" />
|
||||
</Container>
|
||||
<Container>
|
||||
<Image v-for="object in zoneObjects" :key="object.object.id" :x="object.position_x" :y="object.position_y" :texture="object.object.id" :originY="Number(object.object.origin_x)" :originX="Number(object.object.origin_y)" />
|
||||
</Container>
|
||||
|
||||
<Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @save="save" />
|
||||
<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" />
|
||||
<Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @save="save" />
|
||||
<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" />
|
||||
</div>
|
||||
<div v-else>
|
||||
No zone selected. Please select a zone to edit.
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -25,31 +30,13 @@ import Toolbar from '@/components/utilities/zoneEditor/Toolbar.vue'
|
||||
import Tiles from '@/components/utilities/zoneEditor/Tiles.vue'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditor'
|
||||
import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
|
||||
import { placeTile, tileToWorldXY } from '@/services/zone'
|
||||
import { getTiles, placeTile, tileToWorldXY } from '@/services/zone'
|
||||
import { useAssetStore } from '@/stores/assets'
|
||||
import Objects from '@/components/utilities/zoneEditor/Objects.vue'
|
||||
import type { Object } from '@/types'
|
||||
import type { Object, Zone, ZoneObject } from '@/types'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import ZoneList from '@/components/utilities/zoneEditor/ZoneList.vue'
|
||||
|
||||
const scene = useScene()
|
||||
const socket = useSocketStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const assetStore = useAssetStore()
|
||||
|
||||
const zoneData = new Phaser.Tilemaps.MapData({
|
||||
width: zoneEditorStore.width,
|
||||
height: zoneEditorStore.height,
|
||||
tileWidth: config.tile_size.x,
|
||||
tileHeight: config.tile_size.y,
|
||||
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
|
||||
format: Phaser.Tilemaps.Formats.ARRAY_2D
|
||||
})
|
||||
|
||||
const tilesetImages: Tileset[] = []
|
||||
const zone = new Phaser.Tilemaps.Tilemap(scene, zoneData)
|
||||
const zoneObjects = ref<ZoneObject[]>([])
|
||||
|
||||
type ZoneObject = {
|
||||
id: number
|
||||
object: Object
|
||||
@ -57,74 +44,97 @@ type ZoneObject = {
|
||||
position_y: number
|
||||
}
|
||||
|
||||
/**
|
||||
* 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(zone.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, tileCount++) as Tileset)
|
||||
const scene = useScene()
|
||||
const socket = useSocketStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const assetStore = useAssetStore()
|
||||
|
||||
const zoneTilemap = ref<Phaser.Tilemaps.Tilemap | null>(null)
|
||||
const tiles = ref<TilemapLayer | null>(null)
|
||||
const tilesArray = ref<string[][]>([])
|
||||
const zoneObjects = ref<ZoneObject[]>([])
|
||||
|
||||
const tilesetImages: Tileset[] = []
|
||||
|
||||
socket.connection.emit('gm:zone_editor:zone:request', {zoneId: 1}, (response: Zone) => {
|
||||
zoneEditorStore.setZone(response)
|
||||
})
|
||||
tilesetImages.push(zone.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0) as Tileset)
|
||||
|
||||
const tiles = zone.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as TilemapLayer
|
||||
const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 'blank_tile'))
|
||||
|
||||
function eraser(tile: Phaser.Tilemaps.Tile) {
|
||||
if (zoneEditorStore.drawMode === 'tile') {
|
||||
placeTile(zone, tiles, tile.x, tile.y, 'blank_tile')
|
||||
zoneEditorStore.updateTile(tile.x, tile.y, 'blank_tile')
|
||||
}
|
||||
|
||||
if (zoneEditorStore.drawMode === 'object') {
|
||||
zoneObjects.value = zoneObjects.value.filter((object) => object.position_x !== tileToWorldXY(tiles, tile.x, tile.y).position_x && object.position_y !== tileToWorldXY(tiles, tile.x, tile.y).position_y)
|
||||
}
|
||||
}
|
||||
|
||||
function pencil(tile: Phaser.Tilemaps.Tile) {
|
||||
if (zoneEditorStore.drawMode === 'tile') {
|
||||
if (!zoneEditorStore.selectedTile) return
|
||||
placeTile(zone, tiles, tile.x, tile.y, zoneEditorStore.selectedTile)
|
||||
}
|
||||
|
||||
if (zoneEditorStore.drawMode === 'object') {
|
||||
if (zoneEditorStore.selectedObject === null) return
|
||||
zoneObjects.value.push({
|
||||
id: zoneObjects.value.length + 1,
|
||||
object: zoneEditorStore.selectedObject,
|
||||
position_x: tileToWorldXY(tiles, tile.x, tile.y).position_x,
|
||||
position_y: tileToWorldXY(tiles, tile.x, tile.y).position_y
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function paint(tile: Phaser.Tilemaps.Tile) {
|
||||
if (!zoneEditorStore.selectedTile) return
|
||||
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zone, tiles, x, y, zoneEditorStore.selectedTile)))
|
||||
}
|
||||
|
||||
function save() {
|
||||
if (!zoneEditorStore.name) return
|
||||
socket.connection.emit('gm:zone_editor:zone:update', {
|
||||
zoneId: socket.character.zoneId,
|
||||
name: zoneEditorStore.name,
|
||||
width: zoneEditorStore.width,
|
||||
height: zoneEditorStore.height,
|
||||
tiles: tiles.gidMap,
|
||||
function addMapTiles(width: number, height: number) {
|
||||
let tileCount = 1
|
||||
toRaw(assetStore.assets).forEach((asset) => {
|
||||
if (asset.group !== 'tiles') return
|
||||
tilesetImages.push(zoneTilemap.value!.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, tileCount++) as Tileset)
|
||||
})
|
||||
tilesetImages.push(zoneTilemap.value!.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0) as Tileset)
|
||||
|
||||
tiles.value = zoneTilemap.value.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as TilemapLayer
|
||||
|
||||
// Initialize tilesArray with the correct dimensions
|
||||
tilesArray.value = Array.from({ length: height }, () => Array.from({ length: width }, () => 'blank_tile'))
|
||||
}
|
||||
|
||||
// socket.connection.on('gm:zone_editor:zone:load', (data: Zone) => {
|
||||
// tileTilemap = generateTilemap(scene, data.width, data.height);
|
||||
// zoneEditorStore.setName(data.name)
|
||||
// zoneEditorStore.setWidth(data.width)
|
||||
// zoneEditorStore.setHeight(data.height)
|
||||
// })
|
||||
function initializeTilemap() {
|
||||
if (!zoneEditorStore.zone) {
|
||||
resetTilemap()
|
||||
return
|
||||
}
|
||||
|
||||
const { width, height } = zoneEditorStore.zone
|
||||
|
||||
const zoneData = new Phaser.Tilemaps.MapData({
|
||||
width,
|
||||
height,
|
||||
tileWidth: config.tile_size.x,
|
||||
tileHeight: config.tile_size.y,
|
||||
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
|
||||
format: Phaser.Tilemaps.Formats.ARRAY_2D
|
||||
})
|
||||
|
||||
zoneTilemap.value = new Phaser.Tilemaps.Tilemap(scene, zoneData)
|
||||
|
||||
// Clear existing tilesetImages
|
||||
tilesetImages.length = 0
|
||||
|
||||
// Reinitialize tilesetImages
|
||||
addMapTiles(width, height)
|
||||
|
||||
// Load tiles from zoneEditorStore
|
||||
zoneEditorStore.zone.tiles.forEach((row, y) => {
|
||||
row.forEach((tileId, x) => {
|
||||
const tileKey = tileId ? assetStore.assets.find(asset => asset.id === tileId)?.key : 'blank_tile'
|
||||
tilesArray.value[y][x] = tileKey || 'blank_tile'
|
||||
placeTile(zoneTilemap.value!, tiles.value!, x, y, tileKey || 'blank_tile')
|
||||
})
|
||||
})
|
||||
|
||||
// Load objects from zoneEditorStore
|
||||
if(zoneEditorStore.zone.zoneObjects) {
|
||||
// zoneObjects.value.push(...zoneEditorStore.zone.zoneObjects)
|
||||
}
|
||||
|
||||
// Center camera
|
||||
const centerY = (zoneTilemap.value.height * zoneTilemap.value.tileHeight) / 2
|
||||
const centerX = (zoneTilemap.value.width * zoneTilemap.value.tileWidth) / 2
|
||||
scene.cameras.main.centerOn(centerX, centerY)
|
||||
}
|
||||
|
||||
function resetTilemap() {
|
||||
zoneTilemap.value = null
|
||||
tiles.value = null
|
||||
tilesArray.value = []
|
||||
zoneObjects.value = []
|
||||
tilesetImages.length = 0
|
||||
}
|
||||
|
||||
const { objectList } = storeToRefs(zoneEditorStore)
|
||||
|
||||
watch(() => zoneEditorStore.zone, () => {
|
||||
initializeTilemap()
|
||||
}, { deep: true })
|
||||
|
||||
watch(objectList, (newObjects) => {
|
||||
// update objects inside zoneObjects and keep the position
|
||||
if (!zoneEditorStore.zone) return
|
||||
zoneObjects.value = zoneObjects.value.map((object) => {
|
||||
const newObject = newObjects.find((newObject) => newObject.id === object.object.id)
|
||||
if (!newObject) return object
|
||||
@ -132,17 +142,62 @@ watch(objectList, (newObjects) => {
|
||||
})
|
||||
})
|
||||
|
||||
function eraser(tile: Phaser.Tilemaps.Tile) {
|
||||
if (!zoneEditorStore.zone || !zoneTilemap.value || !tiles.value) return
|
||||
|
||||
if (zoneEditorStore.drawMode === 'tile') {
|
||||
placeTile(zoneTilemap.value, tiles.value, tile.x, tile.y, 'blank_tile')
|
||||
tilesArray.value[tile.y][tile.x] = 'blank_tile'
|
||||
}
|
||||
|
||||
if (zoneEditorStore.drawMode === 'object') {
|
||||
zoneObjects.value = zoneObjects.value.filter((object) => object.position_x !== tileToWorldXY(tiles.value!, tile.x, tile.y).position_x && object.position_y !== tileToWorldXY(tiles.value!, tile.x, tile.y).position_y)
|
||||
}
|
||||
}
|
||||
|
||||
function pencil(tile: Phaser.Tilemaps.Tile) {
|
||||
if (!zoneEditorStore.zone || !zoneTilemap.value || !tiles.value) return
|
||||
|
||||
if (zoneEditorStore.drawMode === 'tile') {
|
||||
if (!zoneEditorStore.selectedTile) return
|
||||
placeTile(zoneTilemap.value, tiles.value, tile.x, tile.y, zoneEditorStore.selectedTile)
|
||||
tilesArray.value[tile.y][tile.x] = zoneEditorStore.selectedTile
|
||||
}
|
||||
|
||||
if (zoneEditorStore.drawMode === 'object') {
|
||||
if (zoneEditorStore.selectedObject === null) return
|
||||
zoneObjects.value.push({
|
||||
id: zoneObjects.value.length + 1,
|
||||
object: zoneEditorStore.selectedObject,
|
||||
position_x: tileToWorldXY(tiles.value, tile.x, tile.y).position_x,
|
||||
position_y: tileToWorldXY(tiles.value, tile.x, tile.y).position_y
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function paint(tile: Phaser.Tilemaps.Tile) {
|
||||
if (!zoneEditorStore.zone || !zoneTilemap.value || !tiles.value || !zoneEditorStore.selectedTile) return
|
||||
|
||||
tilesArray.value.forEach((row, y) => row.forEach((_, x) => {
|
||||
placeTile(zoneTilemap.value!, tiles.value!, x, y, zoneEditorStore.selectedTile!)
|
||||
tilesArray.value[y][x] = zoneEditorStore.selectedTile!
|
||||
}))
|
||||
}
|
||||
|
||||
function save() {
|
||||
if (!zoneEditorStore.zone || !zoneTilemap.value) {
|
||||
console.warn('No zone selected or tilemap not initialized')
|
||||
return
|
||||
}
|
||||
console.log(getTiles(zoneTilemap.value))
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zone, tiles, x, y, 'blank_tile')))
|
||||
socket.connection.emit('gm:zone_editor:zone:request', { zoneId: socket.character.zoneId })
|
||||
initializeTilemap()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
resetTilemap()
|
||||
zoneEditorStore.reset()
|
||||
})
|
||||
|
||||
// center camera
|
||||
const centerY = (zone.height * zone.tileHeight) / 2
|
||||
const centerX = (zone.width * zone.tileWidth) / 2
|
||||
scene.cameras.main.centerOn(centerX, centerY)
|
||||
</script>
|
||||
@ -51,9 +51,11 @@ function fetchZones() {
|
||||
|
||||
function loadZone(id: number) {
|
||||
console.log('loadZone', id)
|
||||
socket.connection.emit('gm:zone_editor:zone:load', { zoneId: id }, () => {
|
||||
zoneEditorStore.toggleZoneListModal()
|
||||
})
|
||||
socket.connection.emit('gm:zone_editor:zone:request', { zoneId: id }, (response: Zone) => {
|
||||
console.log('!!zone', response)
|
||||
zoneEditorStore.setZone(response)
|
||||
});
|
||||
zoneEditorStore.toggleZoneListModal()
|
||||
}
|
||||
|
||||
function deleteZone(id: number) {
|
||||
|
||||
@ -32,4 +32,17 @@ export function placeTile(zone: Tilemap, layer: TilemapLayer, x: number, y: numb
|
||||
layer.putTileAt(tileImg.firstgid, x, y)
|
||||
}
|
||||
|
||||
export function getTiles(zone: Tilemap): string[][] {
|
||||
const tiles = []
|
||||
for (let y = 0; y < zone.height; y++) {
|
||||
const row = []
|
||||
for (let x = 0; x < zone.width; x++) {
|
||||
const tile = zone.getTileAt(x, y)
|
||||
row.push(!tile?.index ? 'blank_tile' : zone.tilesets[tile.index].name)
|
||||
}
|
||||
tiles.push(row)
|
||||
}
|
||||
return tiles
|
||||
}
|
||||
|
||||
export function generateTilemap(scene: Phaser.Scene, width: number, height: number) {}
|
||||
|
||||
@ -1,19 +1,14 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import type { Object, ZoneObject } from '@/types'
|
||||
import type { Object, ZoneObject, Zone } from '@/types'
|
||||
|
||||
export const useZoneEditorStore = defineStore('zoneEditor', {
|
||||
state: () => ({
|
||||
active: true,
|
||||
name: '',
|
||||
width: 10,
|
||||
height: 10,
|
||||
zone: null as Zone | null,
|
||||
tool: 'move',
|
||||
drawMode: 'tile',
|
||||
tileList: [] as string[],
|
||||
tiles: [] as string[][],
|
||||
objectList: [] as Object[],
|
||||
objects: [] as ZoneObject[],
|
||||
|
||||
selectedTile: '',
|
||||
selectedObject: null as Object | null,
|
||||
isZoneListModalShown: false,
|
||||
@ -24,14 +19,8 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
|
||||
toggleActive() {
|
||||
this.active = !this.active
|
||||
},
|
||||
setName(name: string) {
|
||||
this.name = name
|
||||
},
|
||||
setWidth(width: number) {
|
||||
this.width = width
|
||||
},
|
||||
setHeight(height: number) {
|
||||
this.height = height
|
||||
setZone(zone: Zone) {
|
||||
this.zone = zone
|
||||
},
|
||||
setTool(tool: string) {
|
||||
this.tool = tool
|
||||
@ -42,21 +31,9 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
|
||||
setTileList(tiles: string[]) {
|
||||
this.tileList = tiles
|
||||
},
|
||||
setTiles(tiles: string[][]) {
|
||||
this.tiles = tiles
|
||||
},
|
||||
updateTile(x: number, y: number, tile: string) {
|
||||
this.tiles[y][x] = tile
|
||||
},
|
||||
setObjectList(objects: Object[]) {
|
||||
this.objectList = objects
|
||||
},
|
||||
setObjects(objects: ZoneObject[]) {
|
||||
this.objects = objects
|
||||
},
|
||||
updateObject(index: number, object: ZoneObject) {
|
||||
this.objects[index] = object
|
||||
},
|
||||
setSelectedTile(tile: string) {
|
||||
this.selectedTile = tile
|
||||
},
|
||||
@ -74,13 +51,9 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
|
||||
this.isCreateZoneModalShown = !this.isCreateZoneModalShown
|
||||
},
|
||||
reset() {
|
||||
this.name = ''
|
||||
this.width = 10
|
||||
this.height = 10
|
||||
this.zone = null
|
||||
this.tileList = []
|
||||
this.tiles = []
|
||||
this.objectList = []
|
||||
this.objects = []
|
||||
this.tool = 'move'
|
||||
this.drawMode = 'tile'
|
||||
this.selectedTile = ''
|
||||
@ -91,9 +64,3 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* Resources:
|
||||
* https://www.html5gamedevs.com/topic/21908-phaser-is-there-any-tutorial-on-how-to-do-an-isometric-game/
|
||||
* http://murdochcarpenter.com/isometric-starling-part-i/
|
||||
*/
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user