Refactor cameraControls and pointerHandlers, npm update, npm run format
This commit is contained in:
@ -32,5 +32,5 @@ const screen = computed(() => {
|
||||
})
|
||||
|
||||
// Disable right click
|
||||
addEventListener('contextmenu', event => event.preventDefault());
|
||||
addEventListener('contextmenu', (event) => event.preventDefault())
|
||||
</script>
|
||||
|
@ -250,9 +250,9 @@ function handleMove() {
|
||||
}
|
||||
|
||||
function handleRotate(objectId: string) {
|
||||
const object = zoneObjects.value.find(obj => obj.id === objectId);
|
||||
const object = zoneObjects.value.find((obj) => obj.id === objectId)
|
||||
if (object) {
|
||||
object.isRotated = !object.isRotated;
|
||||
object.isRotated = !object.isRotated
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<!-- Chat bubble -->
|
||||
<!-- Chat bubble -->
|
||||
<Container ref="charChatContainer" :depth="999" :x="currentX" :y="currentY">
|
||||
<RoundRectangle @create="createChatBubble" :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="20" />
|
||||
<Text @create="createChatText" text="" :origin-x="0.5" :origin-y="10.9" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />
|
||||
</Container>
|
||||
<!-- Character name and health -->
|
||||
<!-- Character name and health -->
|
||||
<Container :depth="999" :x="currentX" :y="currentY">
|
||||
<Text @create="createText" :text="character.name" :origin-x="0.5" :origin-y="9" />
|
||||
<RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" />
|
||||
<RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
|
||||
</Container>
|
||||
<!-- Character sprite -->
|
||||
<!-- Character sprite -->
|
||||
<Container ref="charContainer" :depth="isometricDepth" :x="currentX" :y="currentY">
|
||||
<Sprite ref="charSprite" :origin-y="1" :flipX="isFlippedX" :flipY="false" />
|
||||
</Container>
|
||||
|
@ -8,18 +8,10 @@ import { onBeforeUnmount, ref } from 'vue'
|
||||
import { usePointerHandlers } from '@/composables/usePointerHandlers'
|
||||
import { useCameraControls } from '@/composables/useCameraControls'
|
||||
|
||||
interface Props {
|
||||
layer: Phaser.Tilemaps.TilemapLayer
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const props = defineProps<{ layer: Phaser.Tilemaps.TilemapLayer }>()
|
||||
const scene = useScene()
|
||||
|
||||
const waypoint = ref({
|
||||
visible: false,
|
||||
x: 0,
|
||||
y: 0
|
||||
})
|
||||
const waypoint = ref({ visible: false, x: 0, y: 0 })
|
||||
|
||||
const { camera } = useCameraControls(scene)
|
||||
const { setupPointerHandlers, cleanupPointerHandlers } = usePointerHandlers(scene, props.layer, waypoint, camera)
|
||||
|
@ -1,81 +1,83 @@
|
||||
import { ref, type Ref } from 'vue'
|
||||
import { type Ref, ref } from 'vue'
|
||||
import { getTile, tileToWorldXY } from '@/composables/zoneComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import config from '@/config'
|
||||
|
||||
export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
|
||||
const gameStore = useGameStore()
|
||||
const lastDragTime = ref(Date.now())
|
||||
const dragTimeout = 250 // 250ms timeout for dragging, to prevent accidental clicks
|
||||
const pointerStartPosition = ref({ x: 0, y: 0 })
|
||||
const dragThreshold = 5 // pixels
|
||||
|
||||
function updateWaypoint(pointer: Phaser.Input.Pointer) {
|
||||
const { x: px, y: py } = camera.getWorldPoint(pointer.x, pointer.y)
|
||||
const pointerTile = getTile(px, py, layer)
|
||||
|
||||
waypoint.value.visible = !!pointerTile
|
||||
if (!pointerTile) return
|
||||
|
||||
const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
|
||||
waypoint.value.x = worldPoint.positionX
|
||||
waypoint.value.y = worldPoint.positionY + config.tile_size.y + 15
|
||||
function updateWaypoint(worldX: number, worldY: number) {
|
||||
const pointerTile = getTile(worldX, worldY, layer)
|
||||
if (pointerTile) {
|
||||
const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
|
||||
waypoint.value = {
|
||||
visible: true,
|
||||
x: worldPoint.positionX,
|
||||
y: worldPoint.positionY + config.tile_size.y + 15
|
||||
}
|
||||
} else {
|
||||
waypoint.value.visible = false
|
||||
}
|
||||
}
|
||||
|
||||
function dragZone(pointer: Phaser.Input.Pointer) {
|
||||
if (!gameStore.isPlayerDraggingCamera) return
|
||||
|
||||
// Check if action is actually a drag by checking if the pointer has moved
|
||||
if (pointer.prevPosition.x === pointer.x && pointer.prevPosition.y === pointer.y) return
|
||||
|
||||
const { x, y, prevPosition } = pointer
|
||||
const { scrollX, scrollY, zoom } = camera
|
||||
camera.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom)
|
||||
|
||||
// Check if camera has moved if not return
|
||||
if (camera.scrollX === scrollX && camera.scrollY === scrollY) return
|
||||
|
||||
lastDragTime.value = Date.now()
|
||||
function handlePointerDown(pointer: Phaser.Input.Pointer) {
|
||||
pointerStartPosition.value = { x: pointer.x, y: pointer.y }
|
||||
gameStore.setPlayerDraggingCamera(true)
|
||||
}
|
||||
|
||||
function handlePointerMove(pointer: Phaser.Input.Pointer) {
|
||||
dragZone(pointer)
|
||||
updateWaypoint(pointer)
|
||||
const { worldX, worldY } = pointer
|
||||
updateWaypoint(worldX, worldY)
|
||||
|
||||
if (gameStore.isPlayerDraggingCamera) {
|
||||
const distance = Phaser.Math.Distance.Between(pointerStartPosition.value.x, pointerStartPosition.value.y, pointer.x, pointer.y)
|
||||
|
||||
if (distance > dragThreshold) {
|
||||
const { x, y, prevPosition } = pointer
|
||||
const { scrollX, scrollY, zoom } = camera
|
||||
camera.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function clickTile(pointer: Phaser.Input.Pointer) {
|
||||
const currentTime = Date.now()
|
||||
if (currentTime - lastDragTime.value < dragTimeout) {
|
||||
return
|
||||
function handlePointerUp(pointer: Phaser.Input.Pointer) {
|
||||
const distance = Phaser.Math.Distance.Between(pointerStartPosition.value.x, pointerStartPosition.value.y, pointer.x, pointer.y)
|
||||
|
||||
if (distance <= dragThreshold) {
|
||||
const pointerTile = getTile(pointer.worldX, pointer.worldY, layer)
|
||||
if (pointerTile) {
|
||||
gameStore.connection?.emit('character:initMove', {
|
||||
positionX: pointerTile.x,
|
||||
positionY: pointerTile.y
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const { x: px, y: py } = camera.getWorldPoint(pointer.x, pointer.y)
|
||||
const pointerTile = getTile(px, py, layer)
|
||||
|
||||
if (!pointerTile) return
|
||||
|
||||
gameStore.connection?.emit('character:initMove', {
|
||||
positionX: pointerTile.x,
|
||||
positionY: pointerTile.y
|
||||
})
|
||||
gameStore.setPlayerDraggingCamera(false)
|
||||
}
|
||||
|
||||
function handleZoom(pointer: Phaser.Input.Pointer) {
|
||||
if (!(pointer.event instanceof WheelEvent) || !pointer.event.shiftKey) return
|
||||
|
||||
const deltaY = pointer.event.deltaY
|
||||
let zoomLevel = camera.zoom - deltaY * 0.005
|
||||
if(zoomLevel <= 1 || zoomLevel >= 3) return
|
||||
camera.setZoom(zoomLevel)
|
||||
if (pointer.event instanceof WheelEvent && pointer.event.shiftKey) {
|
||||
const deltaY = pointer.event.deltaY
|
||||
let zoomLevel = camera.zoom - deltaY * 0.005
|
||||
zoomLevel = Phaser.Math.Clamp(zoomLevel, 1, 3)
|
||||
camera.setZoom(zoomLevel)
|
||||
}
|
||||
}
|
||||
|
||||
const setupPointerHandlers = () => {
|
||||
scene.input.on(Phaser.Input.Events.POINTER_UP, clickTile)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
|
||||
}
|
||||
|
||||
const cleanupPointerHandlers = () => {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_UP, clickTile)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_UP, handlePointerUp)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
|
||||
}
|
||||
|
||||
|
@ -1,8 +1,8 @@
|
||||
import { computed, type Ref } from 'vue'
|
||||
import { getTile, tileToWorldXY } from '@/composables/zoneComposable'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import config from '@/config'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import config from '@/config'
|
||||
|
||||
export function useZoneEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
|
||||
const gameStore = useGameStore()
|
||||
@ -13,20 +13,24 @@ export function useZoneEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.
|
||||
const { x: px, y: py } = camera.getWorldPoint(pointer.x, pointer.y)
|
||||
const pointerTile = getTile(px, py, layer)
|
||||
|
||||
waypoint.value.visible = !!pointerTile
|
||||
if (!pointerTile) return
|
||||
|
||||
const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
|
||||
waypoint.value.x = worldPoint.positionX
|
||||
waypoint.value.y = worldPoint.positionY + config.tile_size.y + 15
|
||||
if (pointerTile) {
|
||||
const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
|
||||
waypoint.value = {
|
||||
visible: true,
|
||||
x: worldPoint.positionX,
|
||||
y: worldPoint.positionY + config.tile_size.y + 15
|
||||
}
|
||||
} else {
|
||||
waypoint.value.visible = false
|
||||
}
|
||||
}
|
||||
|
||||
function dragZone(pointer: Phaser.Input.Pointer) {
|
||||
if (!gameStore.isPlayerDraggingCamera) return
|
||||
|
||||
const { x, y, prevPosition } = pointer
|
||||
const { scrollX, scrollY, zoom } = camera
|
||||
camera.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom)
|
||||
if (gameStore.isPlayerDraggingCamera) {
|
||||
const { x, y, prevPosition } = pointer
|
||||
const { scrollX, scrollY, zoom } = camera
|
||||
camera.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom)
|
||||
}
|
||||
}
|
||||
|
||||
function handlePointerMove(pointer: Phaser.Input.Pointer) {
|
||||
@ -37,12 +41,13 @@ export function useZoneEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.
|
||||
}
|
||||
|
||||
function handleZoom(pointer: Phaser.Input.Pointer) {
|
||||
if (!(pointer.event instanceof WheelEvent) || !pointer.event.shiftKey) return
|
||||
|
||||
const deltaY = pointer.event.deltaY
|
||||
let zoomLevel = camera.zoom - deltaY * 0.005
|
||||
if(zoomLevel <= 0 || zoomLevel >= 3) return
|
||||
camera.setZoom(zoomLevel)
|
||||
if (pointer.event instanceof WheelEvent && pointer.event.shiftKey) {
|
||||
const deltaY = pointer.event.deltaY
|
||||
let zoomLevel = camera.zoom - deltaY * 0.005
|
||||
if (zoomLevel > 0 && zoomLevel < 3) {
|
||||
camera.setZoom(zoomLevel)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const setupPointerHandlers = () => {
|
||||
|
@ -1,34 +1,15 @@
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { watch } from 'vue'
|
||||
import { useZoneStore } from '@/stores/zoneStore'
|
||||
|
||||
export function useCameraControls(scene: Phaser.Scene): any {
|
||||
export function useCameraControls(scene: Phaser.Scene) {
|
||||
const gameStore = useGameStore()
|
||||
const zoneStore = useZoneStore()
|
||||
const camera = scene.cameras.main
|
||||
|
||||
function onPointerDown(pointer: Phaser.Input.Pointer) {
|
||||
if (gameStore.isPlayerDraggingCamera) return
|
||||
gameStore.setPlayerDraggingCamera(true)
|
||||
}
|
||||
|
||||
function onPointerUp() {
|
||||
if (!gameStore.isPlayerDraggingCamera) return
|
||||
gameStore.setPlayerDraggingCamera(false)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => zoneStore.characterLoaded,
|
||||
(characterLoaded) => {
|
||||
if (!characterLoaded) return
|
||||
// scene.cameras.main.startFollow(scene.children.getByName(gameStore.character!.name) as Phaser.GameObjects.Container);
|
||||
}
|
||||
)
|
||||
const onPointerDown = () => gameStore.setPlayerDraggingCamera(true)
|
||||
const onPointerUp = () => gameStore.setPlayerDraggingCamera(false)
|
||||
|
||||
scene.input.on(Phaser.Input.Events.POINTER_DOWN, onPointerDown)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerUp)
|
||||
|
||||
return {
|
||||
camera
|
||||
}
|
||||
return { camera }
|
||||
}
|
||||
|
@ -1,32 +1,23 @@
|
||||
import { computed, type Ref, watch } from 'vue'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { useGamePointerHandlers } from '@/composables/pointerHandlers/useGamePointerHandlers'
|
||||
import { useZoneEditorPointerHandlers } from '@/composables/pointerHandlers/useZoneEditorPointerHandlers'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useGamePointerHandlers } from './pointerHandlers/useGamePointerHandlers'
|
||||
import { useZoneEditorPointerHandlers } from './pointerHandlers/useZoneEditorPointerHandlers'
|
||||
|
||||
export function usePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
const gameHandlers = useGamePointerHandlers(scene, layer, waypoint, camera)
|
||||
const zoneEditorHandlers = useZoneEditorPointerHandlers(scene, layer, waypoint, camera)
|
||||
|
||||
const currentHandlers = computed(() => (zoneEditorStore.active ? zoneEditorHandlers : gameHandlers))
|
||||
|
||||
const setupPointerHandlers = () => {
|
||||
currentHandlers.value.setupPointerHandlers()
|
||||
}
|
||||
|
||||
const cleanupPointerHandlers = () => {
|
||||
currentHandlers.value.cleanupPointerHandlers()
|
||||
}
|
||||
const setupPointerHandlers = () => currentHandlers.value.setupPointerHandlers()
|
||||
const cleanupPointerHandlers = () => currentHandlers.value.cleanupPointerHandlers()
|
||||
|
||||
watch(
|
||||
() => zoneEditorStore.active,
|
||||
(newValue, oldValue) => {
|
||||
if (newValue !== oldValue) {
|
||||
cleanupPointerHandlers()
|
||||
setupPointerHandlers()
|
||||
}
|
||||
() => {
|
||||
cleanupPointerHandlers()
|
||||
setupPointerHandlers()
|
||||
}
|
||||
)
|
||||
|
||||
|
@ -1,9 +1,9 @@
|
||||
export default {
|
||||
name: import.meta.env.VITE_NAME,
|
||||
name: import.meta.env.VITE_NAME,
|
||||
development: import.meta.env.VITE_DEVELOPMENT === 'true',
|
||||
server_endpoint: import.meta.env.VITE_SERVER_ENDPOINT,
|
||||
tile_size: {
|
||||
x: Number(import.meta.env.VITE_TILE_SIZE_X),
|
||||
y: Number(import.meta.env.VITE_TILE_SIZE_Y),
|
||||
y: Number(import.meta.env.VITE_TILE_SIZE_Y)
|
||||
}
|
||||
}
|
||||
|
@ -61,7 +61,7 @@ const gameConfig = {
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
type: Phaser.AUTO, // AUTO, CANVAS, WEBGL, HEADLESS
|
||||
resolution: 5,
|
||||
resolution: 5
|
||||
}
|
||||
|
||||
const createGame = (game: Phaser.Game) => {
|
||||
@ -164,4 +164,4 @@ canvas {
|
||||
image-rendering: -webkit-crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
Reference in New Issue
Block a user