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

Finished automatic depth sorting

Browse Source
This commit is contained in:
Dennis Postma
2024-07-22 18:09:56 +02:00
parent 71e5069857
commit 1bdc83fab1
7 changed files with 136 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,30 +1,30 @@
<template>
<TilemapLayerC :tilemap="zoneTilemap" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
<TilemapLayerC :tilemap="zoneTilemap" :tileset="exampleTilesArray as any" :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"
v-for="object in sortedZoneObjects"
:key="object.object.id"
:x="tileToWorldX(zoneTilemap, object.position_x, object.position_y)"
:y="tileToWorldY(zoneTilemap, object.position_x, object.position_y)"
:x="tileToWorldX(zoneTilemap as any, object.position_x, object.position_y)"
:y="tileToWorldY(zoneTilemap as any, object.position_x, object.position_y)"
:texture="object.object.id"
:originY="Number(object.object.origin_x)"
:originX="Number(object.object.origin_y)"
:depth="object.depth ?? calculateDepth(object.position_x, object.position_y, zoneTilemap.width)"
@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" />
<Image v-for="zoneEventTile in zoneEventTiles" :key="zoneEventTile.id" :x="tileToWorldX(zoneTilemap as any, 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'" />
<Tiles v-if="(zoneEditorStore.tool === 'pencil' && zoneEditorStore.drawMode === 'tile') || zoneEditorStore.tool === 'paint'" />
<Objects v-if="zoneEditorStore.tool === 'pencil' && zoneEditorStore.drawMode === 'object'" />
<ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
<ZoneList v-if="zoneEditorStore.isZoneListModalShown" />
</template>
@ -32,7 +32,7 @@
<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 { onBeforeMount, onBeforeUnmount, ref, toRaw, computed, watch } from 'vue'
import Controls from '@/components/utilities/Controls.vue'
import { useGameStore } from '@/stores/game'
import Toolbar from '@/components/utilities/zoneEditor/partials/Toolbar.vue'
@ -40,7 +40,7 @@ import Tiles from '@/components/utilities/zoneEditor/partials/Tiles.vue'
import SelectedZoneObject from '@/components/utilities/zoneEditor/partials/SelectedZoneObject.vue'
import { useZoneEditorStore } from '@/stores/zoneEditor'
import ZoneSettings from '@/components/utilities/zoneEditor/partials/ZoneSettings.vue'
import { placeTile, setAllTiles, tileToWorldX, tileToWorldY } from '@/services/zone'
import { calculateDepth, placeTile, setAllTiles, tileToWorldX, tileToWorldY, sortByDepth } from '@/services/zone'
import { useAssetStore } from '@/stores/assets'
import Objects from '@/components/utilities/zoneEditor/partials/Objects.vue'
import type { Zone, ZoneEventTile, ZoneObject } from '@/types'
@ -67,22 +67,15 @@ const zoneData = new Phaser.Tilemaps.MapData({
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
*/
// Sort zoneObjects by their calculated depth
const sortedZoneObjects = computed(() => sortByDepth(zoneObjects.value, zoneTilemap.width))
let tileCount = 1
toRaw(assetStore.assets).forEach((asset) => {
if (asset.group !== 'tiles') return
@ -95,9 +88,6 @@ const exampleTilesArray = Array.from({ length: zoneEditorStore.zone?.width ?? 0
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)
@ -113,9 +103,6 @@ function eraser(tile: Phaser.Tilemaps.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
})
@ -172,7 +159,7 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
}
function paint(tile: Phaser.Tilemaps.Tile) {
if (zoneEditorStore.selectedTile === null) return
if (!zoneEditorStore.selectedTile) 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)))
}
@ -203,9 +190,9 @@ function save() {
}))
}
gameStore.connection.emit('gm:zone_editor:zone:update', data)
gameStore.connection?.emit('gm:zone_editor:zone:update', data)
gameStore.connection.emit('gm:zone_editor:zone:request', { zoneId: zoneEditorStore.zone.id }, (response: Zone) => {
gameStore.connection?.emit('gm:zone_editor:zone:request', { zoneId: zoneEditorStore.zone.id }, (response: Zone) => {
zoneEditorStore.setZone(response)
})
@ -242,19 +229,16 @@ onBeforeMount(() => {
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
zoneTiles[y] = zoneTiles[y] || []
for (let x = 0; x < currentZoneWidth; x++) {
zoneTiles[y][x] = zoneTiles[y][x] || 'blank_tile' // Fill missing tiles with 'blank_tile'
zoneTiles[y][x] = zoneTiles[y][x] || '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)