noxious/client
3
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
src/components/World.vue
View File

@ -1,87 +1,74 @@
<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">
<template v-for="item in sortedItems" :key="item.id">
<Image
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)"
v-if="item.type === 'object'"
:x="tileToWorldX(zoneTilemap as any, item.position_x, item.position_y)"
:y="tileToWorldY(zoneTilemap as any, item.position_x, item.position_y)"
:texture="item.object.id"
:originY="Number(item.object.origin_x)"
:originX="Number(item.object.origin_y)"
:depth="item.depth"
/>
<Character :layer="zoneTilemap" v-for="character in zoneStore.characters" :key="character.id" :character="character" />
</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" />
<Character v-else :layer="zoneTilemap as any" :character="item" :depth="item.depth" />
</template>
</Container>
</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 { onBeforeMount, onBeforeUnmount, ref, toRaw, computed } from 'vue'
import Controls from '@/components/utilities/Controls.vue'
import { useGameStore } from '@/stores/game'
import { placeTile, setAllTiles, tileToWorldX, tileToWorldY } from '@/services/zone'
import { useAssetStore } from '@/stores/assets'
import type { Zone, ZoneEventTile, ZoneObject, Character as CharacterT } from '@/types'
import Tileset = Phaser.Tilemaps.Tileset
import type { Zone, ZoneObject, Character as CharacterT } from '@/types'
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
import { useZoneStore } from '@/stores/zone'
import Character from '@/components/sprites/Character.vue'
import { createZoneData, createTilesetImages, initializeZoneTiles, updateZoneTiles, calculateDepth, sortByDepth, tileToWorldX, tileToWorldY } from '@/services/zone'
const scene = useScene()
const gameStore = useGameStore()
const assetStore = useAssetStore()
const zoneStore = useZoneStore()
const zoneData = new Phaser.Tilemaps.MapData({
width: gameStore.character?.zone?.width ?? 10,
height: gameStore.character?.zone?.height ?? 10,
tileWidth: config.tile_size.x,
tileHeight: config.tile_size.y,
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
format: Phaser.Tilemaps.Formats.ARRAY_2D
})
const zoneData = createZoneData(gameStore.character?.zone?.width ?? 10, gameStore.character?.zone?.height ?? 10, config.tile_size.x, config.tile_size.y)
/**
* 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 tilesetImages = createTilesetImages(zoneTilemap, toRaw(assetStore.assets), config.tile_size)
const tiles = zoneTilemap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as TilemapLayer
const exampleTilesArray = Array.from({ length: gameStore.character?.zone?.width ?? 0 }, () => Array.from({ length: gameStore.character?.zone?.height ?? 0 }, () => 'blank_tile'))
const exampleTilesArray = initializeZoneTiles(zoneTilemap, tiles, gameStore.character?.zone?.width ?? 10, gameStore.character?.zone?.height ?? 10)
// Listen for player join events
const zoneObjects = ref<ZoneObject[]>([])
// Computed property that combines and sorts both objects and characters
const sortedItems = computed(() => {
const objects = zoneObjects.value.map((obj) => ({
...obj,
type: 'object' as const,
depth: calculateDepth(obj.position_x, obj.position_y, zoneTilemap.width)
}))
const characters = zoneStore.characters.map((char) => ({
...char,
type: 'character' as const,
depth: calculateDepth(char.position_x, char.position_y, zoneTilemap.width)
}))
return sortByDepth([...objects, ...characters], zoneTilemap.width)
})
// Event listeners
gameStore.connection?.on('zone:character:join', (data: CharacterT) => {
console.log('character:zone:join', data)
zoneStore.addCharacter(data)
})
// Listen for user:disconnect
gameStore.connection?.on('zone:character:leave', (character_id: number) => {
zoneStore.removeCharacter(character_id)
})
@ -92,36 +79,12 @@ gameStore.connection?.on('character:moved', (data: CharacterT) => {
})
onBeforeMount(() => {
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
zoneTiles = exampleTilesArray
if (gameStore.character?.zone ?? gameStore.character?.zone?.tiles) {
setAllTiles(zoneTilemap, tiles, gameStore.character?.zone?.tiles ?? [])
zoneTiles = gameStore.character?.zone?.tiles ?? []
// Determine the current zone dimensions
const currentZoneWidth = gameStore.character?.zone?.width ?? 0
const currentZoneHeight = gameStore.character?.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)
})
})
if (gameStore.character?.zone) {
updateZoneTiles(zoneTilemap, tiles, gameStore.character.zone)
}
zoneObjects.value = gameStore.character?.zone?.zoneObjects ?? []
// Original
type TResponse = {
zone: Zone
characters: CharacterT[]
@ -131,13 +94,12 @@ onBeforeMount(() => {
console.log(response)
zoneStore.setZone(response.zone)
zoneStore.setCharacters(response.characters)
setAllTiles(zoneTilemap, tiles, response.zone.tiles)
updateZoneTiles(zoneTilemap, tiles, response.zone)
zoneObjects.value = response.zone.zoneObjects
})
})
onBeforeUnmount(() => {
zoneEventTiles.value = []
zoneObjects.value = []
tiles.destroy()
zoneTilemap.removeAllLayers()

2
src/components/utilities/Controls.vue
View File

@ -1,5 +1,5 @@
<template>
<Image :depth="2" texture="waypoint" :x="waypoint.x" :y="waypoint.y" :visible="waypoint.visible" />
<Image :depth="1" texture="waypoint" :x="waypoint.x" :y="waypoint.y" :visible="waypoint.visible" />
</template>
<script setup lang="ts">

4
src/components/utilities/assetManager/partials/ObjectDetails.vue
View File

@ -74,8 +74,8 @@ const objectFrameWidth = ref(0)
const objectFrameHeight = ref(0)
function updateObjectIsAnimated(event: Event) {
const target = event.target as HTMLSelectElement;
objectIsAnimated.value = target.value === 'true';
const target = event.target as HTMLSelectElement
objectIsAnimated.value = target.value === 'true'
}
if (!selectedObject.value) {

4
src/components/utilities/assetManager/partials/SpriteList.vue
View File

@ -66,8 +66,8 @@ const spriteFrameWidth = ref(0)
const spriteFrameHeight = ref(0)
function updateSpriteIsAnimated(event: Event) {
const target = event.target as HTMLSelectElement;
spriteIsAnimated.value = target.value === 'true';
const target = event.target as HTMLSelectElement
spriteIsAnimated.value = target.value === 'true'
}
if (!selectedSprite.value) {

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)

70
src/services/zone.ts
View File

@ -2,6 +2,7 @@ import config from '@/config'
import Tilemap = Phaser.Tilemaps.Tilemap
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
import Tileset = Phaser.Tilemaps.Tileset
import type { Zone } from '@/types'
export function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y)
@ -40,3 +41,72 @@ export function setAllTiles(zone: Tilemap, layer: TilemapLayer, tiles: string[][
})
})
}
export const createZoneData = (width: number, height: number, tileWidth: number, tileHeight: number) => {
return new Phaser.Tilemaps.MapData({
width,
height,
tileWidth,
tileHeight,
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
format: Phaser.Tilemaps.Formats.ARRAY_2D
})
}
export const createTilesetImages = (zoneTilemap: Tilemap, assets: any[], tileSize: { x: number; y: number }) => {
const tilesetImages: Tileset[] = []
let tileCount = 1
assets.forEach((asset) => {
if (asset.group !== 'tiles') return
tilesetImages.push(zoneTilemap.addTilesetImage(asset.key, asset.key, tileSize.x, tileSize.y, 0, 0, tileCount++) as Tileset)
})
tilesetImages.push(zoneTilemap.addTilesetImage('blank_tile', 'blank_tile', tileSize.x, tileSize.y, 0, 0, 0) as Tileset)
return tilesetImages
}
export const initializeZoneTiles = (zoneTilemap: Tilemap, tiles: Phaser.Tilemaps.TilemapLayer, width: number, height: number) => {
const exampleTilesArray = Array.from({ length: width }, () => Array.from({ length: height }, () => 'blank_tile'))
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
return exampleTilesArray
}
export const updateZoneTiles = (zoneTilemap: Tilemap, tiles: Phaser.Tilemaps.TilemapLayer, zone: Zone) => {
if (zone.tiles) {
setAllTiles(zoneTilemap, tiles, zone.tiles)
const zoneTiles = zone.tiles
// Ensure zoneTiles matches the current zone dimensions, filling new spaces with 'blank_tile'
for (let y = 0; y < zone.height; y++) {
zoneTiles[y] = zoneTiles[y] || [] // Ensure the row exists
for (let x = 0; x < zone.width; 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)
})
})
return zoneTiles
}
return []
}
export const calculateDepth = (x: number, y: number, mapWidth: number) => {
return y * mapWidth + x
}
export const sortByDepth = <T extends { position_x: number; position_y: number } | { x: number; y: number }>(items: T[], mapWidth: number) => {
return [...items].sort((a, b) => {
const aX = 'position_x' in a ? a.position_x : a.x
const aY = 'position_y' in a ? a.position_y : a.y
const bX = 'position_x' in b ? b.position_x : b.x
const bY = 'position_y' in b ? b.position_y : b.y
return calculateDepth(aX, aY, mapWidth) - calculateDepth(bX, bY, mapWidth)
})
}

1
src/stores/zoneEditor.ts
View File

@ -21,6 +21,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
}),
actions: {
toggleActive() {
if (this.active) this.reset()
this.active = !this.active
},
setZone(zone: Zone) {