noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/gameMaster/GmTools.vue
View File

@ -19,17 +19,15 @@ import { onMounted, ref } from 'vue'
const zoneEditorStore = useZoneEditorStore()
const gameStore = useGameStore()
const modalWidth = ref(200);
const modalHeight = ref(160);
const modalWidth = ref(200)
const modalHeight = ref(160)
let posXY = ref({x: 0, y: 0});
let posXY = ref({ x: 0, y: 0 })
onMounted(() => {
window.addEventListener('resize', () => {
posXY.value = customPositionGmPanel(modalWidth.value);
posXY.value = customPositionGmPanel(modalWidth.value)
})
})
const customPositionGmPanel = (modalWidth: number) => {
@ -43,5 +41,4 @@ const customPositionGmPanel = (modalWidth: number) => {
}
posXY.value = customPositionGmPanel(modalWidth.value)
</script>

12
src/components/gameMaster/zoneEditor/ZoneEditor.vue
View File

@ -29,15 +29,7 @@ import { Container, Image, useScene } from 'phavuer'
import { storeToRefs } from 'pinia'
import { useGameStore } from '@/stores/gameStore'
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
import {
calculateIsometricDepth,
loadAssets,
placeTile,
setAllTiles,
sortByIsometricDepth,
tileToWorldX,
tileToWorldY
} from '@/composables/zoneComposable'
import { calculateIsometricDepth, loadAssets, placeTile, setAllTiles, sortByIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
import { ZoneEventTileType, type ZoneObject, type ZoneEventTile, type Zone } from '@/types'
import { uuidv4 } from '@/utilities'
import config from '@/config'
@ -323,5 +315,5 @@ const setSelectedZoneObject = (zoneObject: ZoneObject | null) => {
onBeforeMount(async () => {
await gameStore.fetchAllZoneAssets()
await loadAssets(scene)
});
})
</script>

22
src/components/gameMaster/zoneEditor/partials/Toolbar.vue
View File

@ -68,9 +68,7 @@
<div class="w-px bg-cyan"></div>
<button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')" v-if="zoneEditorStore.zone">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" /> <span class="ml-2.5">(Z)</span>
</button>
<button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')" v-if="zoneEditorStore.zone"><img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" /> <span class="ml-2.5">(Z)</span></button>
</div>
<div class="flex gap-2.5 ml-auto">
@ -169,8 +167,8 @@ function handleClick(tool: string) {
zoneEditorStore.setTool(tool)
}
selectPencilOpen.value = tool === 'pencil' ? !selectPencilOpen.value : false;
selectEraserOpen.value = tool === 'eraser' ? !selectEraserOpen.value : false;
selectPencilOpen.value = tool === 'pencil' ? !selectPencilOpen.value : false
selectEraserOpen.value = tool === 'eraser' ? !selectEraserOpen.value : false
}
// Key bindings
@ -180,15 +178,15 @@ function initKeyShortcuts(event: KeyboardEvent) {
if (document.activeElement?.tagName === 'INPUT') return
const keyActions: any = {
'm': 'move',
'p': 'pencil',
'e': 'eraser',
'b': 'paint',
'z': 'settings'
};
m: 'move',
p: 'pencil',
e: 'eraser',
b: 'paint',
z: 'settings'
}
if (keyActions.hasOwnProperty(event.key)) {
handleClick(keyActions[event.key]);
handleClick(keyActions[event.key])
}
}

24
src/components/sprites/Character.vue
View File

@ -8,8 +8,7 @@
<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>
<!-- <Text :text="isometricDepth" :depth="isometricDepth" :x="currentX" :y="currentY" />-->
<Container :depth="isometricDepth" v-if="props.character" :x="currentX" :y="currentY">
<Container :depth="isometricDepth" v-if="props.character" :x="currentX" :y="currentY" ref="charContainer">
<Image v-if="!props.character.characterType" texture="character" :origin-y="1" />
<Sprite v-else :texture="charTexture" :play="props.character.isMoving ? charTexture : undefined" :origin-y="1" :flipX="props.character.rotation === 6 || props.character.rotation === 4" :flipY="false" />
</Container>
@ -29,6 +28,8 @@ enum Direction {
NOCHANGE
}
const charContainer = ref<Phaser.GameObjects.Container | null>(null)
interface Props {
layer: Phaser.Tilemaps.TilemapLayer
character?: CharacterT
@ -38,14 +39,15 @@ const props = withDefaults(defineProps<Props>(), {
character: undefined
})
const isometricDepth = ref(calculateIsometricDepth(props.character.positionX, props.character.positionY, 28, 94, true))
const gameStore = useGameStore()
const scene = useScene()
const isometricDepth = ref(calculateIsometricDepth(props.character!.positionX, props.character!.positionY, 28, 94, true))
const currentX = ref(0)
const currentY = ref(0)
const gameStore = useGameStore();
const tween = ref<Phaser.Tweens.Tween | null>(null)
const isInitialPosition = ref(true)
const calculateLocalDepth = (x: number, y: number, width: number, height: number, isCharacter: boolean) => {
isometricDepth.value = calculateIsometricDepth(x, y, width, height, isCharacter)
}
@ -54,11 +56,6 @@ const updatePosition = (x: number, y: number, direction: Direction) => {
const targetX = tileToWorldX(props.layer, x, y)
const targetY = tileToWorldY(props.layer, x, y)
// Used for camera resize calculation to center on Character.
if(gameStore.character) {
gameStore.character.relativePosition = { x: targetX, y: targetY };
}
if (isInitialPosition.value) {
currentX.value = targetX
currentY.value = targetY
@ -165,6 +162,13 @@ const createText = (text: Phaser.GameObjects.Text) => {
}
onMounted(() => {
/**
* @TODO: Put this at an appropriate place not in this component
*/
// Check if player is this character, then lock with camera
if (props.character && props.character.id === gameStore.character?.id) {
scene.cameras.main.startFollow(charContainer.value as Phaser.GameObjects.Container)
}
if (props.character) {
updatePosition(props.character.positionX, props.character.positionY, Direction.POSITIVE)
}

8
src/components/zone/Zone.vue
View File

@ -26,7 +26,6 @@ type zoneLoadData = {
characters: CharacterT[]
}
gameStore.connection!.emit('zone:character:join', async (response: zoneLoadData) => {
// Fetch assets for new zone
await gameStore.fetchZoneAssets(response.zone.id)
@ -35,7 +34,6 @@ gameStore.connection!.emit('zone:character:join', async (response: zoneLoadData)
// Set zone and characters
zoneStore.setZone(response.zone)
zoneStore.setCharacters(response.characters)
scene.cameras.main.setScroll(-(scene.cameras.main.worldView.width/2) - gameStore.character.relativePosition.x, -(scene.cameras.main.worldView.height/2) + gameStore.character.relativePosition.y)
})
// Event listeners
@ -57,12 +55,6 @@ gameStore.connection!.on('zone:character:teleport', async (data: zoneLoadData) =
zoneStore.setZone(data.zone)
zoneStore.setCharacters(data.characters)
const character = gameStore.character;
// Position character centered on zone change or teleport
const posX = tileToWorldX(tileMap.value, character.positionX, character.positionY)
const posY = tileToWorldY(tileMap.value, character.positionX, character.positionY)
scene.cameras.main.setScroll(-(scene.cameras.main.worldView.width/2) + posX, -(scene.cameras.main.worldView.height/2) + posY)
})
gameStore.connection!.on('zone:character:join', async (data: ExtendedCharacterT) => {

34
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) {
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) {
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 = () => {

24
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) {
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
}
}

4
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 {

2
src/config.ts
View File

@ -1,4 +1,4 @@
const dev: boolean = false
const dev: boolean = true
export default {
name: 'New Quest',

2
src/screens/Game.vue
View File

@ -145,7 +145,7 @@ const createScene = async (scene: Phaser.Scene) => {
frames: scene.anims.generateFrameNumbers(asset.key, { start: 0, end: 4 }),
repeat: -1
})
});
})
}
onBeforeUnmount(() => {

19
src/stores/gameStore.ts
View File

@ -13,7 +13,8 @@ export const useGameStore = defineStore('game', {
user: null as User | null,
character: null as Character | null,
isGmPanelOpen: false,
isMovingCamera: false,
isPlayerDraggingCamera: false,
isCameraFollowingCharacter: false,
isChatOpen: false,
isUserPanelOpen: false
}),
@ -93,11 +94,17 @@ export const useGameStore = defineStore('game', {
toggleGmPanel() {
this.isGmPanelOpen = !this.isGmPanelOpen
},
toggleMovingCamera() {
this.isMovingCamera = !this.isMovingCamera
togglePlayerDraggingCamera() {
this.isPlayerDraggingCamera = !this.isPlayerDraggingCamera
},
setMovingCamera(moving: boolean) {
this.isMovingCamera = moving
setPlayerDraggingCamera(moving: boolean) {
this.isPlayerDraggingCamera = moving
},
toggleCameraFollowingCharacter() {
this.isCameraFollowingCharacter = !this.isCameraFollowingCharacter
},
setCameraFollowingCharacter(following: boolean) {
this.isCameraFollowingCharacter = following
},
toggleChat() {
this.isChatOpen = !this.isChatOpen
@ -145,7 +152,7 @@ export const useGameStore = defineStore('game', {
this.user = null
this.character = null
this.isGmPanelOpen = false
this.isMovingCamera = false
this.isPlayerDraggingCamera = false
this.isChatOpen = false
this.isUserPanelOpen = false
}

1
src/types.ts
View File

@ -142,7 +142,6 @@ export type Character = {
role: string
positionX: number
positionY: number
relativePosition: {x: number, y: number}
rotation: number
zoneId: number
zone: Zone