Zone editor GUI (WIP), added a few helper functions

This commit is contained in:
2024-06-10 17:46:25 +02:00
parent 8227dfe4b3
commit 58bff2010f
12 changed files with 190 additions and 47 deletions

View File

@ -1,13 +1,14 @@
<template>
<Image texture="waypoint" :x="waypoint.x" :y="waypoint.y" :visible="waypoint.visible" />
</template>
<script setup lang="ts">
import { Image, useScene } from 'phavuer'
import { ref } from 'vue'
import config from '@/config'
import { getTile, tileToWorldXY } from '@/services/zone'
const scene = useScene()
const pointer_tile = ref(undefined)
const props = defineProps({
layer: Phaser.Tilemaps.TilemapLayer
})
@ -21,34 +22,19 @@ function onPointerMove(pointer: Phaser.Input.Pointer) {
const px = scene.cameras.main.worldView.x + pointer.x
const py = scene.cameras.main.worldView.y + pointer.y
pointer_tile.value = getTile(px, py, props.layer)
if (pointer_tile.value) {
waypoint.value.visible = true
// Convert tile coordinates to world coordinates
const worldPoint = props.layer.tileToWorldXY(pointer_tile.value.x, pointer_tile.value.y)
waypoint.value.x = worldPoint.x + config.tile_size.y
waypoint.value.y = worldPoint.y + config.tile_size.y + 15
} else {
const pointer_tile = getTile(px, py, props.layer) as Phaser.Tilemaps.Tile
if (!pointer_tile) {
waypoint.value.visible = false
return
}
waypoint.value.visible = true
// Convert tile coordinates to world coordinates
const worldPoint = tileToWorldXY(props.layer, pointer_tile.x, pointer_tile.y)
waypoint.value.x = worldPoint.position_x
waypoint.value.y = worldPoint.position_y + config.tile_size.y + 15
}
scene.input.on(Phaser.Input.Events.POINTER_MOVE, onPointerMove)
function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y)
if (!tile) return undefined;
return tile
}
function getTileAt(iX: number, iY: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
const tile: Phaser.Tilemaps.Tile = layer.getTileAt(iX, iY)
if (tile) return tile
else return undefined
}
function getDepth(tile: Phaser.Tilemaps.Tile): number {
return 32
}
</script>