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

Better variable namings

Browse Source
This commit is contained in:
Dennis Postma 2025-01-09 15:58:02 +01:00
parent 03fef60621
commit 7546116878
11 changed files with 301 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.example
View File

@ -1,5 +1,5 @@
VITE_NAME=Noxious VITE_NAME=Noxious
VITE_DEVELOPMENT=true VITE_DEVELOPMENT=true
VITE_SERVER_ENDPOINT=http://localhost:4000 VITE_SERVER_ENDPOINT=http://localhost:4000
VITE_TILE_SIZE_X=64 VITE_TILE_SIZE_WIDTH=64
VITE_TILE_SIZE_Y=32 VITE_TILE_SIZE_HEIGHT=32

189
package-lock.json generated
View File

@ -61,6 +61,20 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/@asamuzakjp/css-color": {
"version": "2.8.2",
"resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-2.8.2.tgz",
"integrity": "sha512-RtWv9jFN2/bLExuZgFFZ0I3pWWeezAHGgrmjqGGWclATl1aDe3yhCUaI0Ilkp6OCk9zX7+FjvDasEX8Q9Rxc5w==",
"dev": true,
"license": "MIT",
"dependencies": {
"@csstools/css-calc": "^2.1.1",
"@csstools/css-color-parser": "^3.0.7",
"@csstools/css-parser-algorithms": "^3.0.4",
"@csstools/css-tokenizer": "^3.0.3",
"lru-cache": "^11.0.2"
}
},
"node_modules/@babel/code-frame": { "node_modules/@babel/code-frame": {
"version": "7.26.2", "version": "7.26.2",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
@ -186,6 +200,121 @@
"node": ">=6.9.0" "node": ">=6.9.0"
} }
}, },
"node_modules/@csstools/color-helpers": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.0.1.tgz",
"integrity": "sha512-MKtmkA0BX87PKaO1NFRTFH+UnkgnmySQOvNxJubsadusqPEC2aJ9MOQiMceZJJ6oitUl/i0L6u0M1IrmAOmgBA==",
"dev": true,
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/csstools"
},
{
"type": "opencollective",
"url": "https://opencollective.com/csstools"
}
],
"license": "MIT-0",
"engines": {
"node": ">=18"
}
},
"node_modules/@csstools/css-calc": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-2.1.1.tgz",
"integrity": "sha512-rL7kaUnTkL9K+Cvo2pnCieqNpTKgQzy5f+N+5Iuko9HAoasP+xgprVh7KN/MaJVvVL1l0EzQq2MoqBHKSrDrag==",
"dev": true,
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/csstools"
},
{
"type": "opencollective",
"url": "https://opencollective.com/csstools"
}
],
"license": "MIT",
"engines": {
"node": ">=18"
},
"peerDependencies": {
"@csstools/css-parser-algorithms": "^3.0.4",
"@csstools/css-tokenizer": "^3.0.3"
}
},
"node_modules/@csstools/css-color-parser": {
"version": "3.0.7",
"resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-3.0.7.tgz",
"integrity": "sha512-nkMp2mTICw32uE5NN+EsJ4f5N+IGFeCFu4bGpiKgb2Pq/7J/MpyLBeQ5ry4KKtRFZaYs6sTmcMYrSRIyj5DFKA==",
"dev": true,
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/csstools"
},
{
"type": "opencollective",
"url": "https://opencollective.com/csstools"
}
],
"license": "MIT",
"dependencies": {
"@csstools/color-helpers": "^5.0.1",
"@csstools/css-calc": "^2.1.1"
},
"engines": {
"node": ">=18"
},
"peerDependencies": {
"@csstools/css-parser-algorithms": "^3.0.4",
"@csstools/css-tokenizer": "^3.0.3"
}
},
"node_modules/@csstools/css-parser-algorithms": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.4.tgz",
"integrity": "sha512-Up7rBoV77rv29d3uKHUIVubz1BTcgyUK72IvCQAbfbMv584xHcGKCKbWh7i8hPrRJ7qU4Y8IO3IY9m+iTB7P3A==",
"dev": true,
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/csstools"
},
{
"type": "opencollective",
"url": "https://opencollective.com/csstools"
}
],
"license": "MIT",
"engines": {
"node": ">=18"
},
"peerDependencies": {
"@csstools/css-tokenizer": "^3.0.3"
}
},
"node_modules/@csstools/css-tokenizer": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.3.tgz",
"integrity": "sha512-UJnjoFsmxfKUdNYdWgOB0mWUypuLvAfQPH1+pyvRJs6euowbFkFC6P13w1l8mJyi3vxYMxc9kld5jZEGRQs6bw==",
"dev": true,
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/csstools"
},
{
"type": "opencollective",
"url": "https://opencollective.com/csstools"
}
],
"license": "MIT",
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/aix-ppc64": { "node_modules/@esbuild/aix-ppc64": {
"version": "0.21.5", "version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@ -2486,9 +2615,9 @@
} }
}, },
"node_modules/browserslist": { "node_modules/browserslist": {
"version": "4.24.3", "version": "4.24.4",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.3.tgz", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
"integrity": "sha512-1CPmv8iobE2fyRMV97dAcMVegvvWKxmq94hkLiAkUGwKVTyDLw33K+ZxiFrREKmmps4rIw6grcCFCnTMSZ/YiA==", "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {
@ -2549,9 +2678,9 @@
} }
}, },
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001690", "version": "1.0.30001692",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001692.tgz",
"integrity": "sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==", "integrity": "sha512-A95VKan0kdtrsnMubMKxEKUKImOPSuCpYgxSQBo036P5YYgVIcOYJEgt/txJWqObiRQeISNCfef9nvlQ0vbV7A==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {
@ -2744,18 +2873,26 @@
} }
}, },
"node_modules/cssstyle": { "node_modules/cssstyle": {
"version": "4.1.0", "version": "4.2.1",
"resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.1.0.tgz", "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.2.1.tgz",
"integrity": "sha512-h66W1URKpBS5YMI/V8PyXvTMFT8SupJ1IzoIV8IeBC/ji8WVmrO8dGlTi+2dh6whmdk6BiKJLD/ZBkhWbcg6nA==", "integrity": "sha512-9+vem03dMXG7gDmZ62uqmRiMRNtinIZ9ZyuF6BdxzfOD+FdN5hretzynkn0ReS2DO2GSw76RWHs0UmJPI2zUjw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"rrweb-cssom": "^0.7.1" "@asamuzakjp/css-color": "^2.8.2",
"rrweb-cssom": "^0.8.0"
}, },
"engines": { "engines": {
"node": ">=18" "node": ">=18"
} }
}, },
"node_modules/cssstyle/node_modules/rrweb-cssom": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz",
"integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==",
"dev": true,
"license": "MIT"
},
"node_modules/csstype": { "node_modules/csstype": {
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@ -4343,11 +4480,14 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/lru-cache": { "node_modules/lru-cache": {
"version": "10.4.3", "version": "11.0.2",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.0.2.tgz",
"integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==", "integrity": "sha512-123qHRfJBmo2jXDbo/a5YOQrJoHF/GNQTLzQ5+IdK5pWpceK17yRc6ozlWd25FxvGKQbIUs91fDFkXmDHTKcyA==",
"dev": true, "dev": true,
"license": "ISC" "license": "ISC",
"engines": {
"node": "20 || >=22"
}
}, },
"node_modules/magic-string": { "node_modules/magic-string": {
"version": "0.30.17", "version": "0.30.17",
@ -4776,9 +4916,9 @@
"license": "BlueOak-1.0.0" "license": "BlueOak-1.0.0"
}, },
"node_modules/papaparse": { "node_modules/papaparse": {
"version": "5.4.1", "version": "5.5.0",
"resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.4.1.tgz", "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.5.0.tgz",
"integrity": "sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw==", "integrity": "sha512-rlVJyYL5QMvue8f/RNGpchWAiTc42GzJD/dqD/YgxJxmQ7TWQh5/7aN3p/aqxkYTRl/BkODi6Qsau1r2bt42JQ==",
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
@ -4869,6 +5009,13 @@
"url": "https://github.com/sponsors/isaacs" "url": "https://github.com/sponsors/isaacs"
} }
}, },
"node_modules/path-scurry/node_modules/lru-cache": {
"version": "10.4.3",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
"integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
"dev": true,
"license": "ISC"
},
"node_modules/path-type": { "node_modules/path-type": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@ -6192,9 +6339,9 @@
} }
}, },
"node_modules/update-browserslist-db": { "node_modules/update-browserslist-db": {
"version": "1.1.1", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.2.tgz",
"integrity": "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==", "integrity": "sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {
@ -6213,7 +6360,7 @@
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"escalade": "^3.2.0", "escalade": "^3.2.0",
"picocolors": "^1.1.0" "picocolors": "^1.1.1"
}, },
"bin": { "bin": {
"update-browserslist-db": "cli.js" "update-browserslist-db": "cli.js"

4
src/application/config.ts
View File

@ -3,7 +3,7 @@ export default {
development: import.meta.env.VITE_DEVELOPMENT === 'true', development: import.meta.env.VITE_DEVELOPMENT === 'true',
server_endpoint: import.meta.env.VITE_SERVER_ENDPOINT, server_endpoint: import.meta.env.VITE_SERVER_ENDPOINT,
tile_size: { tile_size: {
x: Number(import.meta.env.VITE_TILE_SIZE_X), width: Number(import.meta.env.VITE_TILE_SIZE_WIDTH),
y: Number(import.meta.env.VITE_TILE_SIZE_Y) height: Number(import.meta.env.VITE_TILE_SIZE_HEIGHT)
} }
} }

83
src/components/game/character/Character.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<ChatBubble :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" /> <ChatBubble :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
<Healthbar :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" /> <Healthbar :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
<Container ref="charContainer" :depth="isometricDepth" :x="currentX" :y="currentY"> <Container ref="charContainer" :depth="isometricDepth" :x="currentPositionX" :y="currentPositionY">
<!-- <CharacterHair :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />--> <!-- <CharacterHair :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />-->
<!-- <CharacterChest :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />--> <!-- <CharacterChest :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />-->
<Sprite ref="charSprite" :origin-y="1" :flipX="isFlippedX" /> <Sprite ref="charSprite" :origin-y="1" :flipX="isFlippedX" />
</Container> </Container>
</template> </template>
@ -37,28 +37,29 @@ const props = defineProps<{
const charContainer = refObj<Phaser.GameObjects.Container>() const charContainer = refObj<Phaser.GameObjects.Container>()
const charSprite = refObj<Phaser.GameObjects.Sprite>() const charSprite = refObj<Phaser.GameObjects.Sprite>()
const charSpriteId = ref('')
const gameStore = useGameStore() const gameStore = useGameStore()
const mapStore = useMapStore() const mapStore = useMapStore()
const scene = useScene() const scene = useScene()
const currentX = ref(0) const currentPositionX = ref(0)
const currentY = ref(0) const currentPositionY = ref(0)
const isometricDepth = ref(1) const isometricDepth = ref(1)
const isInitialPosition = ref(true) const isInitialPosition = ref(true)
const tween = ref<Phaser.Tweens.Tween | null>(null) const tween = ref<Phaser.Tweens.Tween | null>(null)
const updateIsometricDepth = (x: number, y: number) => { const updateIsometricDepth = (positionX: number, positionY: number) => {
isometricDepth.value = calculateIsometricDepth(x, y, 28, 94, true) isometricDepth.value = calculateIsometricDepth(positionX, positionY, 28, 94, true)
} }
const updatePosition = (x: number, y: number, direction: Direction) => { const updatePosition = (positionX: number, positionY: number, direction: Direction) => {
const targetX = tileToWorldX(props.tilemap, x, y) const newPositionX = tileToWorldX(props.tilemap, positionX, positionY)
const targetY = tileToWorldY(props.tilemap, x, y) const newPositionY = tileToWorldY(props.tilemap, positionX, positionY)
if (isInitialPosition.value) { if (isInitialPosition.value) {
currentX.value = targetX currentPositionX.value = newPositionX
currentY.value = targetY currentPositionY.value = newPositionY
isInitialPosition.value = false isInitialPosition.value = false
return return
} }
@ -67,52 +68,51 @@ const updatePosition = (x: number, y: number, direction: Direction) => {
tween.value.stop() tween.value.stop()
} }
const distance = Math.sqrt(Math.pow(targetX - currentX.value, 2) + Math.pow(targetY - currentY.value, 2)) const distance = Math.sqrt(Math.pow(newPositionX - currentPositionX.value, 2) + Math.pow(newPositionY - currentPositionY.value, 2))
if (distance >= config.tile_size.x / 1.1) { if (distance >= config.tile_size.width / 1.1) {
currentX.value = targetX currentPositionX.value = newPositionX
currentY.value = targetY currentPositionY.value = newPositionY
return return
} }
const duration = distance * 5.7 const duration = distance * 5.7
tween.value = props.tilemap.scene.tweens.add({ tween.value = props.tilemap.scene.tweens.add({
targets: { x: currentX.value, y: currentY.value }, targets: { x: currentPositionX.value, y: currentPositionY.value },
x: targetX, x: newPositionX,
y: targetY, y: newPositionY,
duration, duration,
ease: 'Linear', ease: 'Linear',
onStart: () => { onStart: () => {
if (direction === Direction.POSITIVE) { if (direction === Direction.POSITIVE) {
updateIsometricDepth(x, y) updateIsometricDepth(positionX, positionY)
} }
}, },
onUpdate: (tween) => { onUpdate: (tween) => {
currentX.value = tween.targets[0].x currentPositionX.value = tween.targets[0].x
currentY.value = tween.targets[0].y currentPositionY.value = tween.targets[0].y
}, },
onComplete: () => { onComplete: () => {
if (direction === Direction.NEGATIVE) { if (direction === Direction.NEGATIVE) {
updateIsometricDepth(x, y) updateIsometricDepth(positionX, positionY)
} }
} }
}) })
} }
const calcDirection = (oldX: number, oldY: number, newX: number, newY: number): Direction => { const calcDirection = (oldPositionX: number, oldPositionY: number, newPositionX: number, newPositionY: number): Direction => {
if (newY < oldY || newX < oldX) return Direction.NEGATIVE if (newPositionY < oldPositionY || newPositionX < oldPositionX) return Direction.NEGATIVE
if (newX > oldX || newY > oldY) return Direction.POSITIVE if (newPositionX > oldPositionX || newPositionY > oldPositionY) return Direction.POSITIVE
return Direction.UNCHANGED return Direction.UNCHANGED
} }
const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.rotation ?? 0)) const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.rotation ?? 0))
const charTexture = computed(() => { const charTexture = computed(() => {
const { rotation, characterType } = props.mapCharacter.character const spriteId = charSpriteId.value ?? 'idle_right_down'
const spriteId = characterType ?? 'idle_right_down'
const action = props.mapCharacter.isMoving ? 'walk' : 'idle' const action = props.mapCharacter.isMoving ? 'walk' : 'idle'
const direction = [0, 6].includes(rotation) ? 'left_up' : 'right_down' const direction = [0, 6].includes(props.mapCharacter.character.rotation) ? 'left_up' : 'right_down'
return `${spriteId}-${action}_${direction}` return `${spriteId}-${action}_${direction}`
}) })
@ -120,35 +120,33 @@ const charTexture = computed(() => {
const updateSprite = () => { const updateSprite = () => {
if (props.mapCharacter.isMoving) { if (props.mapCharacter.isMoving) {
charSprite.value!.anims.play(charTexture.value, true) charSprite.value!.anims.play(charTexture.value, true)
return } else {
charSprite.value!.anims.stop()
charSprite.value!.setFrame(0)
charSprite.value!.setTexture(charTexture.value)
} }
charSprite.value!.anims.stop()
charSprite.value!.setFrame(0)
charSprite.value!.setTexture(charTexture.value)
} }
watch( watch(
() => ({ () => ({
x: props.mapCharacter.character.positionX, positionX: props.mapCharacter.character.positionX,
y: props.mapCharacter.character.positionY, positionY: props.mapCharacter.character.positionY,
isMoving: props.mapCharacter.isMoving, isMoving: props.mapCharacter.isMoving,
rotation: props.mapCharacter.character.rotation rotation: props.mapCharacter.character.rotation
}), }),
(newValues, oldValues) => { (newValues, oldValues) => {
if (!newValues) return if (!newValues) return
if (!oldValues || newValues.x !== oldValues.x || newValues.y !== oldValues.y) { if (!oldValues || newValues.positionX !== oldValues.positionX || newValues.positionY !== oldValues.positionY) {
const direction = !oldValues ? Direction.POSITIVE : calcDirection(oldValues.x, oldValues.y, newValues.x, newValues.y) const direction = !oldValues ? Direction.POSITIVE : calcDirection(oldValues.positionX, oldValues.positionY, newValues.positionX, newValues.positionY)
updatePosition(newValues.x, newValues.y, direction) updatePosition(newValues.positionX, newValues.positionY, direction)
} }
// Handle animation updates // Handle animation updates
if (newValues.isMoving !== oldValues?.isMoving || newValues.rotation !== oldValues?.rotation) { if (newValues.isMoving !== oldValues?.isMoving || newValues.rotation !== oldValues?.rotation) {
updateSprite() updateSprite()
} }
}, }
{ deep: true }
) )
watch(() => props.mapCharacter, updateSprite) watch(() => props.mapCharacter, updateSprite)
@ -156,6 +154,7 @@ watch(() => props.mapCharacter, updateSprite)
const characterTypeStorage = new CharacterTypeStorage() const characterTypeStorage = new CharacterTypeStorage()
characterTypeStorage.getSpriteId(props.mapCharacter.character.characterType!).then((spriteId) => { characterTypeStorage.getSpriteId(props.mapCharacter.character.characterType!).then((spriteId) => {
console.log(spriteId) console.log(spriteId)
charSpriteId.value = spriteId
loadSpriteTextures(scene, spriteId) loadSpriteTextures(scene, spriteId)
.then(() => { .then(() => {
charSprite.value!.setTexture(charTexture.value) charSprite.value!.setTexture(charTexture.value)

10
src/components/game/map/MapTiles.vue
View File

@ -27,8 +27,8 @@ function createTileMap(mapData: any) {
const mapConfig = new Phaser.Tilemaps.MapData({ const mapConfig = new Phaser.Tilemaps.MapData({
width: mapData?.width, width: mapData?.width,
height: mapData?.height, height: mapData?.height,
tileWidth: config.tile_size.x, tileWidth: config.tile_size.width,
tileHeight: config.tile_size.y, tileHeight: config.tile_size.height,
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC, orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
format: Phaser.Tilemaps.Formats.ARRAY_2D format: Phaser.Tilemaps.Formats.ARRAY_2D
}) })
@ -43,12 +43,12 @@ function createTileLayer(mapData: any) {
const tilesArray = unduplicateArray(FlattenMapArray(mapData?.tiles ?? [])) const tilesArray = unduplicateArray(FlattenMapArray(mapData?.tiles ?? []))
const tilesetImages = Array.from(tilesArray).map((tile: any, index: number) => { const tilesetImages = Array.from(tilesArray).map((tile: any, index: number) => {
return tileMap.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y }) return tileMap.addTilesetImage(tile, tile, config.tile_size.width, config.tile_size.height, 1, 2, index + 1, { x: 0, y: -config.tile_size.height })
}) })
// Add blank tile // Add blank tile
tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y })) tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.width, config.tile_size.height, 1, 2, 0, { x: 0, y: -config.tile_size.height }))
const layer = tileMap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer const layer = tileMap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.height) as Phaser.Tilemaps.TilemapLayer
layer.setDepth(0) layer.setDepth(0)
layer.setCullPadding(2, 2) layer.setCullPadding(2, 2)

10
src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue
View File

@ -29,8 +29,8 @@ function createTileMap() {
const mapData = new Phaser.Tilemaps.MapData({ const mapData = new Phaser.Tilemaps.MapData({
width: mapEditorStore.map?.width, width: mapEditorStore.map?.width,
height: mapEditorStore.map?.height, height: mapEditorStore.map?.height,
tileWidth: config.tile_size.x, tileWidth: config.tile_size.width,
tileHeight: config.tile_size.y, tileHeight: config.tile_size.height,
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC, orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
format: Phaser.Tilemaps.Formats.ARRAY_2D format: Phaser.Tilemaps.Formats.ARRAY_2D
}) })
@ -48,12 +48,12 @@ function createTileLayer() {
const tilesArray = gameStore.getLoadedAssetsByGroup('tiles') const tilesArray = gameStore.getLoadedAssetsByGroup('tiles')
const tilesetImages = Array.from(tilesArray).map((tile: TextureData, index: number) => { const tilesetImages = Array.from(tilesArray).map((tile: TextureData, index: number) => {
return tileMap.addTilesetImage(tile.key, tile.key, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y }) return tileMap.addTilesetImage(tile.key, tile.key, config.tile_size.width, config.tile_size.height, 1, 2, index + 1, { x: 0, y: -config.tile_size.height })
}) as any }) as any
// Add blank tile // Add blank tile
tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y })) tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.width, config.tile_size.height, 1, 2, 0, { x: 0, y: -config.tile_size.height }))
const layer = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer const layer = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.height) as Phaser.Tilemaps.TilemapLayer
layer.setDepth(0) layer.setDepth(0)
layer.setCullPadding(2, 2) layer.setCullPadding(2, 2)

15
src/composables/gameComposable.ts
View File

@ -26,6 +26,7 @@ export async function loadTexture(scene: Phaser.Scene, textureData: TextureData)
// If asset is not found, download it // If asset is not found, download it
if (!texture) { if (!texture) {
console.log('Downloading texture:', textureData.key)
await textureStorage.download(textureData) await textureStorage.download(textureData)
texture = await textureStorage.get(textureData.key) texture = await textureStorage.get(textureData.key)
} }
@ -70,8 +71,10 @@ export async function loadSpriteTextures(scene: Phaser.Scene, sprite_id: string)
} }
for await (const sprite_action of sprite.spriteActions) { for await (const sprite_action of sprite.spriteActions) {
console.log('Loading sprite action:', sprite.id + '-' + sprite_action.action)
const key = sprite.id + '-' + sprite_action.action
await loadTexture(scene, { await loadTexture(scene, {
key: sprite_action.id + '_' + sprite_action.action, key,
data: '/textures/sprites/' + sprite.id + '/' + sprite_action.action + '.png', data: '/textures/sprites/' + sprite.id + '/' + sprite_action.action + '.png',
group: sprite_action.isAnimated ? 'sprite_animations' : 'sprites', group: sprite_action.isAnimated ? 'sprite_animations' : 'sprites',
updatedAt: sprite_action.updatedAt, updatedAt: sprite_action.updatedAt,
@ -87,15 +90,15 @@ export async function loadSpriteTextures(scene: Phaser.Scene, sprite_id: string)
if (!sprite_action.isAnimated) continue if (!sprite_action.isAnimated) continue
// Check if animation already exists // Check if animation already exists
if (scene.anims.get(sprite_action.key)) continue if (scene.anims.get(key)) continue
// Add the animation to the scene // Add the animation to the scene
const anim = scene.textures.get(sprite_action.key) const anim = scene.textures.get(key)
scene.textures.addSpriteSheet(sprite_action.key, anim, { frameWidth: sprite_action.frameWidth ?? 0, frameHeight: sprite_action.frameHeight ?? 0 }) scene.textures.addSpriteSheet(key, anim, { frameWidth: sprite_action.frameWidth ?? 0, frameHeight: sprite_action.frameHeight ?? 0 })
scene.anims.create({ scene.anims.create({
key: sprite_action.key, key: key,
frameRate: sprite_action.frameRate, frameRate: sprite_action.frameRate,
frames: scene.anims.generateFrameNumbers(sprite_action.key, { start: 0, end: sprite_action.frameCount! - 1 }), frames: scene.anims.generateFrameNumbers(key, { start: 0, end: sprite_action.frameCount! - 1 }),
repeat: -1 repeat: -1
}) })
} }

40
src/composables/mapComposable.ts
View File

@ -9,50 +9,50 @@ import TilemapLayer = Phaser.Tilemaps.TilemapLayer
import Tileset = Phaser.Tilemaps.Tileset import Tileset = Phaser.Tilemaps.Tileset
import Tile = Phaser.Tilemaps.Tile import Tile = Phaser.Tilemaps.Tile
export function getTile(layer: TilemapLayer | Tilemap, x: number, y: number): Tile | undefined { export function getTile(layer: TilemapLayer | Tilemap, positionX: number, positionY: number): Tile | undefined {
const tile = layer.getTileAtWorldXY(x, y) const tile = layer.getTileAtWorldXY(positionX, positionY)
if (!tile) return undefined if (!tile) return undefined
return tile return tile
} }
export function tileToWorldXY(layer: TilemapLayer | Tilemap, pos_x: number, pos_y: number) { export function tileToWorldXY(layer: TilemapLayer | Tilemap, positionX: number, positionY: number) {
const worldPoint = layer.tileToWorldXY(pos_x, pos_y) const worldPoint = layer.tileToWorldXY(positionX, positionY)
if (!worldPoint) return { positionX: 0, positionY: 0 } if (!worldPoint) return { positionX: 0, positionY: 0 }
const positionX = worldPoint.x + config.tile_size.y const worldPositionX = worldPoint.x + config.tile_size.height
const positionY = worldPoint.y const worldPositionY = worldPoint.y
return { positionX, positionY } return { worldPositionX, worldPositionY }
} }
export function tileToWorldX(layer: TilemapLayer | Tilemap, pos_x: number, pos_y: number): number { export function tileToWorldX(layer: TilemapLayer | Tilemap, positionX: number, positionY: number): number {
const worldPoint = layer.tileToWorldXY(pos_x, pos_y) const worldPoint = layer.tileToWorldXY(positionX, positionY)
if (!worldPoint) return 0 if (!worldPoint) return 0
return worldPoint.x + config.tile_size.x / 2 return worldPoint.x + config.tile_size.width / 2
} }
export function tileToWorldY(layer: TilemapLayer | Tilemap, pos_x: number, pos_y: number): number { export function tileToWorldY(layer: TilemapLayer | Tilemap, positionX: number, positionY: number): number {
const worldPoint = layer.tileToWorldXY(pos_x, pos_y) const worldPoint = layer.tileToWorldXY(positionX, positionY)
if (!worldPoint) return 0 if (!worldPoint) return 0
return worldPoint.y + config.tile_size.y * 1.5 return worldPoint.y + config.tile_size.height * 1.5
} }
/** /**
* Can also be used to replace tiles * Can also be used to replace tiles
* @param map * @param map
* @param layer * @param layer
* @param x * @param positionX
* @param y * @param positionY
* @param tileName * @param tileName
*/ */
export function placeTile(map: Tilemap, layer: TilemapLayer, x: number, y: number, tileName: string) { export function placeTile(map: Tilemap, layer: TilemapLayer, positionX: number, positionY: number, tileName: string) {
let tileImg = map.getTileset(tileName) as Tileset let tileImg = map.getTileset(tileName) as Tileset
if (!tileImg) { if (!tileImg) {
tileImg = map.getTileset('blank_tile') as Tileset tileImg = map.getTileset('blank_tile') as Tileset
} }
layer.putTileAt(tileImg.firstgid, x, y) layer.putTileAt(tileImg.firstgid, positionX, positionY)
} }
export function setLayerTiles(map: Tilemap, layer: TilemapLayer, tiles: string[][]) { export function setLayerTiles(map: Tilemap, layer: TilemapLayer, tiles: string[][]) {
@ -69,12 +69,12 @@ export function createTileArray(width: number, height: number, tile: string = 'b
return Array.from({ length: height }, () => Array.from({ length: width }, () => tile)) return Array.from({ length: height }, () => Array.from({ length: width }, () => tile))
} }
export const calculateIsometricDepth = (x: number, y: number, width: number = 0, height: number = 0, isCharacter: boolean = false) => { export const calculateIsometricDepth = (positionX: number, positionY: number, width: number = 0, height: number = 0, isCharacter: boolean = false) => {
const baseDepth = x + y const baseDepth = positionX + positionY
if (isCharacter) { if (isCharacter) {
return baseDepth // @TODO: Fix collision, this is a hack return baseDepth // @TODO: Fix collision, this is a hack
} }
return baseDepth + (width + height) / (2 * config.tile_size.x) return baseDepth + (width + height) / (2 * config.tile_size.width)
} }
export function FlattenMapArray(tiles: string[][]) { export function FlattenMapArray(tiles: string[][]) {

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

@ -10,15 +10,17 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
function updateWaypoint(worldX: number, worldY: number) { function updateWaypoint(worldX: number, worldY: number) {
const pointerTile = getTile(layer, worldX, worldY) const pointerTile = getTile(layer, worldX, worldY)
if (pointerTile) { 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 waypoint.value.visible = false
return
}
const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
if (!worldPoint.worldPositionX || !worldPoint.worldPositionX) return
waypoint.value = {
visible: true,
x: worldPoint.worldPositionX,
y: worldPoint.worldPositionY + config.tile_size.height + 15
} }
} }
@ -28,34 +30,46 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
} }
function handlePointerMove(pointer: Phaser.Input.Pointer) { function handlePointerMove(pointer: Phaser.Input.Pointer) {
const { worldX, worldY } = pointer updateWaypoint(pointer.worldX, pointer.worldY)
updateWaypoint(worldX, worldY)
if (gameStore.game.isPlayerDraggingCamera) { if (!gameStore.game.isPlayerDraggingCamera) return
const distance = Phaser.Math.Distance.Between(pointerStartPosition.value.x, pointerStartPosition.value.y, pointer.x, pointer.y)
if (distance > dragThreshold) { const distance = Phaser.Math.Distance.Between(
const { x, y, prevPosition } = pointer pointerStartPosition.value.x,
const { scrollX, scrollY, zoom } = camera pointerStartPosition.value.y,
camera.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom) pointer.x,
} pointer.y
} )
if (distance <= dragThreshold) return
camera.setScroll(
camera.scrollX - (pointer.x - pointer.prevPosition.x) / camera.zoom,
camera.scrollY - (pointer.y - pointer.prevPosition.y) / camera.zoom
)
} }
function handlePointerUp(pointer: Phaser.Input.Pointer) { 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(layer, pointer.worldX, pointer.worldY)
if (pointerTile) {
gameStore.connection?.emit('map:character:move', {
positionX: pointerTile.x,
positionY: pointerTile.y
})
}
}
gameStore.setPlayerDraggingCamera(false) gameStore.setPlayerDraggingCamera(false)
const distance = Phaser.Math.Distance.Between(
pointerStartPosition.value.x,
pointerStartPosition.value.y,
pointer.x,
pointer.y
)
if (distance > dragThreshold) return
const pointerTile = getTile(layer, pointer.worldX, pointer.worldY)
if (!pointerTile) return
console.log(pointerTile.x, pointerTile.y)
gameStore.connection?.emit('map:character:move', {
positionX: pointerTile.x,
positionY: pointerTile.y
})
} }
const setupPointerHandlers = () => { const setupPointerHandlers = () => {

11
src/composables/pointerHandlers/useMapEditorPointerHandlers.ts
View File

@ -15,10 +15,12 @@ export function useMapEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.T
if (pointerTile) { if (pointerTile) {
const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y) const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
if (!worldPoint.positionX || !worldPoint.positionY) return
waypoint.value = { waypoint.value = {
visible: true, visible: true,
x: worldPoint.positionX, x: worldPoint.positionX,
y: worldPoint.positionY + config.tile_size.y + 15 y: worldPoint.positionY + config.tile_size.height + 15
} }
} else { } else {
waypoint.value.visible = false waypoint.value.visible = false
@ -26,11 +28,8 @@ export function useMapEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.T
} }
function dragMap(pointer: Phaser.Input.Pointer) { function dragMap(pointer: Phaser.Input.Pointer) {
if (gameStore.game.isPlayerDraggingCamera) { if (!gameStore.game.isPlayerDraggingCamera) return
const { x, y, prevPosition } = pointer camera.setScroll(camera.scrollX - (pointer.x - pointer.prevPosition.x) / camera.zoom, scrollY - (pointer.y - pointer.prevPosition.y) / camera.zoom)
const { scrollX, scrollY, zoom } = camera
camera.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom)
}
} }
function handlePointerMove(pointer: Phaser.Input.Pointer) { function handlePointerMove(pointer: Phaser.Input.Pointer) {

0
src/composables/spriteComposable.ts Normal file
View File