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

Fully finished zone loading logic

Browse Source
This commit is contained in:
Dennis Postma 2024-07-07 15:42:54 +02:00
parent ead0da0a5e
commit 16d830df66
2 changed files with 65 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

198
src/components/utilities/zoneEditor/ZoneEditor.vue
View File

@ -1,12 +1,10 @@
<template> <template>
<div v-if="isLoaded"> <TilemapLayerC :tilemap="zoneTilemap" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
<TilemapLayerC :tilemap="zoneTilemap" :tileset="tilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" /> <Controls :layer="tiles" />
<Controls :layer="tiles" />
<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)" /> <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>
</div>
<Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @save="save" /> <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'" /> <Tiles v-if="((zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile') || zoneEditorStore.tool === 'paint'" />
@ -30,125 +28,54 @@ import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
import { getTiles, placeTile, tileToWorldXY } from '@/services/zone' import { getTiles, placeTile, tileToWorldXY } from '@/services/zone'
import { useAssetStore } from '@/stores/assets' import { useAssetStore } from '@/stores/assets'
import Objects from '@/components/utilities/zoneEditor/Objects.vue' import Objects from '@/components/utilities/zoneEditor/Objects.vue'
import type { Zone, ZoneObject } from '@/types' import type { Object } from '@/types'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import ZoneList from '@/components/utilities/zoneEditor/ZoneList.vue' import ZoneList from '@/components/utilities/zoneEditor/ZoneList.vue'
type ZoneObject = {
id: number
object: Object
position_x: number
position_y: number
}
const scene = useScene() const scene = useScene()
const socket = useSocketStore() const socket = useSocketStore()
const zoneEditorStore = useZoneEditorStore() const zoneEditorStore = useZoneEditorStore()
const assetStore = useAssetStore() const assetStore = useAssetStore()
const isLoaded = ref(false)
const zoneTilemap = ref<Phaser.Tilemaps.Tilemap | null>(null) const zoneData = new Phaser.Tilemaps.MapData({
const tiles = ref<TilemapLayer | null>(null) width: zoneEditorStore.zone?.width ?? 10,
const tilesArray = ref<string[][]>([]) height: zoneEditorStore.zone?.height ?? 10,
const zoneObjects = ref<ZoneObject[]>([]) tileWidth: config.tile_size.x,
tileHeight: config.tile_size.y,
const tilesetImages: Tileset[] = [] orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
format: Phaser.Tilemaps.Formats.ARRAY_2D
socket.connection.emit('gm:zone_editor:zone:request', {zoneId: 1}, (response: Zone) => {
zoneEditorStore.setZone(response)
}) })
function clearLayer(layer: Phaser.Tilemaps.TilemapLayer) { const tilesetImages: Tileset[] = []
const width = layer.layer.width; const zoneTilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
const height = layer.layer.height; const zoneObjects = ref<ZoneObject[]>([])
for (let y = 0; y < height; y++) { /**
for (let x = 0; x < width; x++) { * Walk through object and add them to the zone as tilesetImages
layer.removeTileAt(x, y, true, true); */
} 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)
function addMapTiles(width: number, height: number) { const tiles = zoneTilemap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as TilemapLayer
if (tiles.value) { const exampleTilesArray = Array.from({ length: zoneEditorStore.zone?.width ?? 10 }, () => Array.from({ length: zoneEditorStore.zone?.height ?? 10 }, () => 'blank_tile'))
clearLayer(tiles.value)
}
if (zoneTilemap.value) {
zoneTilemap.value?.removeAllLayers()
}
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'))
}
function initializeTilemap() {
isLoaded.value = false;
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)
isLoaded.value = true
}
function resetTilemap() {
zoneTilemap.value = null
tiles.value = null
tilesArray.value = []
zoneObjects.value = []
tilesetImages.length = 0
}
const { objectList } = storeToRefs(zoneEditorStore) const { objectList } = storeToRefs(zoneEditorStore)
watch(() => zoneEditorStore.zone, () => { /**
initializeTilemap() * Watch for object updates and update the zoneObjects
}, { deep: true }) */
watch(objectList, (newObjects) => { watch(objectList, (newObjects) => {
if (!zoneEditorStore.zone) return
zoneObjects.value = zoneObjects.value.map((object) => { zoneObjects.value = zoneObjects.value.map((object) => {
const newObject = newObjects.find((newObject) => newObject.id === object.object.id) const newObject = newObjects.find((newObject) => newObject.id === object.object.id)
if (!newObject) return object if (!newObject) return object
@ -157,61 +84,54 @@ watch(objectList, (newObjects) => {
}) })
function eraser(tile: Phaser.Tilemaps.Tile) { function eraser(tile: Phaser.Tilemaps.Tile) {
if (!zoneEditorStore.zone || !zoneTilemap.value || !tiles.value) return
if (zoneEditorStore.drawMode === 'tile') { if (zoneEditorStore.drawMode === 'tile') {
placeTile(zoneTilemap.value, tiles.value, tile.x, tile.y, 'blank_tile') placeTile(zoneTilemap, tiles, tile.x, tile.y, 'blank_tile')
tilesArray.value[tile.y][tile.x] = 'blank_tile'
} }
if (zoneEditorStore.drawMode === 'object') { 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) 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) { function pencil(tile: Phaser.Tilemaps.Tile) {
if (!zoneEditorStore.zone || !zoneTilemap.value || !tiles.value) return
if (zoneEditorStore.drawMode === 'tile') { if (zoneEditorStore.drawMode === 'tile') {
if (!zoneEditorStore.selectedTile) return if (!zoneEditorStore.selectedTile) return
placeTile(zoneTilemap.value, tiles.value, tile.x, tile.y, zoneEditorStore.selectedTile) placeTile(zoneTilemap, tiles, tile.x, tile.y, zoneEditorStore.selectedTile)
tilesArray.value[tile.y][tile.x] = zoneEditorStore.selectedTile
} }
if (zoneEditorStore.drawMode === 'object') { if (zoneEditorStore.drawMode === 'object') {
if (zoneEditorStore.selectedObject === null) return if (zoneEditorStore.selectedObject === null) return
// zoneObjects.value.push({ zoneObjects.value.push({
// id: zoneObjects.value.length + 1, id: zoneObjects.value.length + 1,
// object: zoneEditorStore.selectedObject, object: zoneEditorStore.selectedObject,
// position_x: tileToWorldXY(tiles.value, tile.x, tile.y).position_x, position_x: tileToWorldXY(tiles, tile.x, tile.y).position_x,
// position_y: tileToWorldXY(tiles.value, tile.x, tile.y).position_y position_y: tileToWorldXY(tiles, tile.x, tile.y).position_y
// }) })
} }
} }
function paint(tile: Phaser.Tilemaps.Tile) { function paint(tile: Phaser.Tilemaps.Tile) {
if (!zoneEditorStore.zone || !zoneTilemap.value || !tiles.value || !zoneEditorStore.selectedTile) return if (!zoneEditorStore.selectedTile) return
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, zoneEditorStore.selectedTile)))
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() { function save() {
if (!zoneEditorStore.zone || !zoneTilemap.value) { console.log(getTiles(zoneTilemap))
console.warn('No zone selected or tilemap not initialized')
return
}
console.log(getTiles(zoneTilemap.value))
} }
onBeforeMount(() => { onBeforeMount(() => {
initializeTilemap() exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
resetTilemap() tiles.destroy()
zoneEditorStore.reset() 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> </script>

6
src/screens/Game.vue
View File

@ -19,7 +19,7 @@
</Game> </Game>
<Game :config="gameConfig" @create="createGame" v-if="zoneEditorStore.active"> <Game :config="gameConfig" @create="createGame" v-if="zoneEditorStore.active">
<Scene name="main" @preload="preloadScene" @create="createScene"> <Scene name="main" @preload="preloadScene" @create="createScene">
<ZoneEditor v-if="isLoaded" /> <ZoneEditor v-if="isLoaded" :key="zoneEditorStore.zone?.id ?? 0" />
</Scene> </Scene>
</Game> </Game>
</div> </div>
@ -160,4 +160,8 @@ const createScene = (scene: Phaser.Scene) => {
}) })
}) })
} }
// watch(() => zoneEditorStore.zone, () => {
// isLoaded.value = false
// }, {deep:true});
</script> </script>