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

npm run format, started working on follow player logic, refactor some camera logic

Browse Source
This commit is contained in:
Dennis Postma
2024-09-22 02:14:32 +02:00
parent 42291b93eb
commit 9b592d6c7c
14 changed files with 101 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/composables/pointerHandlers/useGamePointerHandlers.ts
View File

@ -3,27 +3,31 @@ 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: Ref<Phaser.Cameras.Scene2D.Camera>, isDragging: Ref<boolean>) {
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()
function updateWaypoint(pointer: Phaser.Input.Pointer) {
const { x: px, y: py } = camera.value.getWorldPoint(pointer.x, pointer.y)
const { x: px, y: py } = camera.getWorldPoint(pointer.x, pointer.y)
const pointerTile = getTile(px, py, layer)
waypoint.value.visible = !!pointerTile
if (pointerTile) {
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) {
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 dragZone(pointer: Phaser.Input.Pointer) {
if (isDragging.value) {
const { x, y, prevPosition } = pointer
const { scrollX, scrollY, zoom } = camera.value
camera.value.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom)
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)
}
function handlePointerMove(pointer: Phaser.Input.Pointer) {
@ -32,22 +36,26 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
}
function clickTile(pointer: Phaser.Input.Pointer) {
const { x: px, y: py } = camera.value.getWorldPoint(pointer.x, pointer.y)
const { x: px, y: py } = camera.getWorldPoint(pointer.x, pointer.y)
const pointerTile = getTile(px, py, layer)
if (pointerTile) {
gameStore.connection?.emit('character:initMove', {
positionX: pointerTile.x,
positionY: pointerTile.y
})
if (!pointerTile) {
return
}
gameStore.connection?.emit('character:initMove', {
positionX: pointerTile.x,
positionY: pointerTile.y
})
}
function handleZoom({ event, deltaY }: Phaser.Input.Pointer) {
if (event instanceof WheelEvent && event.shiftKey) {
scene.scale.setZoom(scene.scale.zoom - deltaY * 0.01)
camera.value = scene.cameras.main
return
}
scene.scale.setZoom(scene.scale.zoom - deltaY * 0.01)
camera = scene.cameras.main
}
const setupPointerHandlers = () => {

28
src/composables/pointerHandlers/useZoneEditorPointerHandlers.ts
View File

@ -2,28 +2,32 @@ import { computed, type Ref, ref } from 'vue'
import { getTile, tileToWorldXY } from '@/composables/zoneComposable'
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
import config from '@/config'
import { useGameStore } from '@/stores/gameStore'
export function useZoneEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Ref<Phaser.Cameras.Scene2D.Camera>, isDragging: Ref<boolean>) {
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()
const zoneEditorStore = useZoneEditorStore()
const isMoveTool = computed(() => zoneEditorStore.tool === 'move')
function updateWaypoint(pointer: Phaser.Input.Pointer) {
const { x: px, y: py } = camera.value.getWorldPoint(pointer.x, pointer.y)
const { x: px, y: py } = camera.getWorldPoint(pointer.x, pointer.y)
const pointerTile = getTile(px, py, layer)
waypoint.value.visible = !!pointerTile
if (pointerTile) {
const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
waypoint.value.x = worldPoint.positionX
waypoint.value.y = worldPoint.positionY + config.tile_size.y + 15
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 dragZone(pointer: Phaser.Input.Pointer) {
if (isDragging.value) {
if (gameStore.isPlayerDraggingCamera) {
const { x, y, prevPosition } = pointer
const { scrollX, scrollY, zoom } = camera.value
camera.value.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom)
const { scrollX, scrollY, zoom } = camera
camera.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom)
}
}
@ -35,10 +39,12 @@ export function useZoneEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.
}
function handleZoom({ event, deltaY }: Phaser.Input.Pointer) {
if (event instanceof WheelEvent && event.shiftKey) {
scene.scale.setZoom(scene.scale.zoom - deltaY * 0.01)
camera.value = scene.cameras.main
if (event! instanceof WheelEvent && !event.shiftKey) {
return
}
scene.scale.setZoom(scene.scale.zoom - deltaY * 0.01)
camera = scene.cameras.main
}
const setupPointerHandlers = () => {

21
src/composables/useCameraControls.ts
View File

@ -3,35 +3,22 @@ import { useGameStore } from '@/stores/gameStore'
export function useCameraControls(scene: Phaser.Scene): any {
const gameStore = useGameStore()
const camera = ref(scene.cameras.main)
const isDragging = ref(false)
// Resize center camera on character.
window.addEventListener('resize', () => {
console.log('woep')
// Need to change camera position next frame
setTimeout(() => {
scene.cameras.main.setScroll(-(scene.cameras.main.worldView.width/2) + gameStore.character.relativePosition.x, -(scene.cameras.main.worldView.height/2) + gameStore.character.relativePosition.y)
}, 0)
})
const camera = scene.cameras.main
function onPointerDown(pointer: Phaser.Input.Pointer) {
if (pointer.event instanceof MouseEvent || pointer.event.shiftKey) {
isDragging.value = true
gameStore.setMovingCamera(true)
gameStore.setPlayerDraggingCamera(true)
}
}
function onPointerUp() {
isDragging.value = false
gameStore.setMovingCamera(false)
gameStore.setPlayerDraggingCamera(false)
}
scene.input.on(Phaser.Input.Events.POINTER_DOWN, onPointerDown)
scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerUp)
return {
camera,
isDragging
camera
}
}

6
src/composables/zoneComposable.ts
View File

@ -61,11 +61,11 @@ export const sortByIsometricDepth = <T extends { positionX: number; positionY: n
export const loadAssets = (scene: Phaser.Scene): Promise<void> => {
return new Promise((resolve) => {
const gameStore = useGameStore()
let addedLoad = false;
let addedLoad = false
gameStore.assets.forEach((asset) => {
if (scene.load.textureManager.exists(asset.key)) return
addedLoad = true;
addedLoad = true
if (asset.group === 'sprite_animations') {
scene.load.spritesheet(asset.key, config.server_endpoint + asset.url, { frameWidth: asset.frameWidth ?? 0, frameHeight: asset.frameHeight ?? 0 })
} else {
@ -73,7 +73,7 @@ export const loadAssets = (scene: Phaser.Scene): Promise<void> => {
}
})
if(addedLoad) {
if (addedLoad) {
scene.load.start()
scene.load.on(Phaser.Loader.Events.COMPLETE, () => {
resolve()