From 75461168780cff0b735b894c569ebda13f4192f0 Mon Sep 17 00:00:00 2001 From: Dennis Postma Date: Thu, 9 Jan 2025 15:58:02 +0100 Subject: [PATCH] Better variable namings --- .env.example | 4 +- package-lock.json | 189 ++++++++++++++++-- src/application/config.ts | 4 +- src/components/game/character/Character.vue | 83 ++++---- src/components/game/map/MapTiles.vue | 10 +- .../mapEditor/mapPartials/MapTiles.vue | 10 +- src/composables/gameComposable.ts | 15 +- src/composables/mapComposable.ts | 40 ++-- .../pointerHandlers/useGamePointerHandlers.ts | 74 ++++--- .../useMapEditorPointerHandlers.ts | 11 +- src/composables/spriteComposable.ts | 0 11 files changed, 301 insertions(+), 139 deletions(-) create mode 100644 src/composables/spriteComposable.ts diff --git a/.env.example b/.env.example index d9a1301..1fa7302 100644 --- a/.env.example +++ b/.env.example @@ -1,5 +1,5 @@ VITE_NAME=Noxious VITE_DEVELOPMENT=true VITE_SERVER_ENDPOINT=http://localhost:4000 -VITE_TILE_SIZE_X=64 -VITE_TILE_SIZE_Y=32 \ No newline at end of file +VITE_TILE_SIZE_WIDTH=64 +VITE_TILE_SIZE_HEIGHT=32 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 7d55fd8..6027364 100644 --- a/package-lock.json +++ b/package-lock.json @@ -61,6 +61,20 @@ "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": { "version": "7.26.2", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz", @@ -186,6 +200,121 @@ "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": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", @@ -2486,9 +2615,9 @@ } }, "node_modules/browserslist": { - "version": "4.24.3", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.3.tgz", - "integrity": "sha512-1CPmv8iobE2fyRMV97dAcMVegvvWKxmq94hkLiAkUGwKVTyDLw33K+ZxiFrREKmmps4rIw6grcCFCnTMSZ/YiA==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz", + "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==", "dev": true, "funding": [ { @@ -2549,9 +2678,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001690", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz", - "integrity": "sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==", + "version": "1.0.30001692", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001692.tgz", + "integrity": "sha512-A95VKan0kdtrsnMubMKxEKUKImOPSuCpYgxSQBo036P5YYgVIcOYJEgt/txJWqObiRQeISNCfef9nvlQ0vbV7A==", "dev": true, "funding": [ { @@ -2744,18 +2873,26 @@ } }, "node_modules/cssstyle": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.1.0.tgz", - "integrity": "sha512-h66W1URKpBS5YMI/V8PyXvTMFT8SupJ1IzoIV8IeBC/ji8WVmrO8dGlTi+2dh6whmdk6BiKJLD/ZBkhWbcg6nA==", + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.2.1.tgz", + "integrity": "sha512-9+vem03dMXG7gDmZ62uqmRiMRNtinIZ9ZyuF6BdxzfOD+FdN5hretzynkn0ReS2DO2GSw76RWHs0UmJPI2zUjw==", "dev": true, "license": "MIT", "dependencies": { - "rrweb-cssom": "^0.7.1" + "@asamuzakjp/css-color": "^2.8.2", + "rrweb-cssom": "^0.8.0" }, "engines": { "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": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", @@ -4343,11 +4480,14 @@ "license": "MIT" }, "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==", + "version": "11.0.2", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.0.2.tgz", + "integrity": "sha512-123qHRfJBmo2jXDbo/a5YOQrJoHF/GNQTLzQ5+IdK5pWpceK17yRc6ozlWd25FxvGKQbIUs91fDFkXmDHTKcyA==", "dev": true, - "license": "ISC" + "license": "ISC", + "engines": { + "node": "20 || >=22" + } }, "node_modules/magic-string": { "version": "0.30.17", @@ -4776,9 +4916,9 @@ "license": "BlueOak-1.0.0" }, "node_modules/papaparse": { - "version": "5.4.1", - "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.4.1.tgz", - "integrity": "sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw==", + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.5.0.tgz", + "integrity": "sha512-rlVJyYL5QMvue8f/RNGpchWAiTc42GzJD/dqD/YgxJxmQ7TWQh5/7aN3p/aqxkYTRl/BkODi6Qsau1r2bt42JQ==", "dev": true, "license": "MIT" }, @@ -4869,6 +5009,13 @@ "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": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", @@ -6192,9 +6339,9 @@ } }, "node_modules/update-browserslist-db": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz", - "integrity": "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.2.tgz", + "integrity": "sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==", "dev": true, "funding": [ { @@ -6213,7 +6360,7 @@ "license": "MIT", "dependencies": { "escalade": "^3.2.0", - "picocolors": "^1.1.0" + "picocolors": "^1.1.1" }, "bin": { "update-browserslist-db": "cli.js" diff --git a/src/application/config.ts b/src/application/config.ts index 93ac6a1..71cfd55 100644 --- a/src/application/config.ts +++ b/src/application/config.ts @@ -3,7 +3,7 @@ export default { 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) + width: Number(import.meta.env.VITE_TILE_SIZE_WIDTH), + height: Number(import.meta.env.VITE_TILE_SIZE_HEIGHT) } } diff --git a/src/components/game/character/Character.vue b/src/components/game/character/Character.vue index d1db69b..adcea29 100644 --- a/src/components/game/character/Character.vue +++ b/src/components/game/character/Character.vue @@ -1,9 +1,9 @@ @@ -37,28 +37,29 @@ const props = defineProps<{ const charContainer = refObj() const charSprite = refObj() +const charSpriteId = ref('') const gameStore = useGameStore() const mapStore = useMapStore() const scene = useScene() -const currentX = ref(0) -const currentY = ref(0) +const currentPositionX = ref(0) +const currentPositionY = ref(0) const isometricDepth = ref(1) const isInitialPosition = ref(true) const tween = ref(null) -const updateIsometricDepth = (x: number, y: number) => { - isometricDepth.value = calculateIsometricDepth(x, y, 28, 94, true) +const updateIsometricDepth = (positionX: number, positionY: number) => { + isometricDepth.value = calculateIsometricDepth(positionX, positionY, 28, 94, true) } -const updatePosition = (x: number, y: number, direction: Direction) => { - const targetX = tileToWorldX(props.tilemap, x, y) - const targetY = tileToWorldY(props.tilemap, x, y) +const updatePosition = (positionX: number, positionY: number, direction: Direction) => { + const newPositionX = tileToWorldX(props.tilemap, positionX, positionY) + const newPositionY = tileToWorldY(props.tilemap, positionX, positionY) if (isInitialPosition.value) { - currentX.value = targetX - currentY.value = targetY + currentPositionX.value = newPositionX + currentPositionY.value = newPositionY isInitialPosition.value = false return } @@ -67,52 +68,51 @@ const updatePosition = (x: number, y: number, direction: Direction) => { 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) { - currentX.value = targetX - currentY.value = targetY + if (distance >= config.tile_size.width / 1.1) { + currentPositionX.value = newPositionX + currentPositionY.value = newPositionY return } const duration = distance * 5.7 tween.value = props.tilemap.scene.tweens.add({ - targets: { x: currentX.value, y: currentY.value }, - x: targetX, - y: targetY, + targets: { x: currentPositionX.value, y: currentPositionY.value }, + x: newPositionX, + y: newPositionY, duration, ease: 'Linear', onStart: () => { if (direction === Direction.POSITIVE) { - updateIsometricDepth(x, y) + updateIsometricDepth(positionX, positionY) } }, onUpdate: (tween) => { - currentX.value = tween.targets[0].x - currentY.value = tween.targets[0].y + currentPositionX.value = tween.targets[0].x + currentPositionY.value = tween.targets[0].y }, onComplete: () => { if (direction === Direction.NEGATIVE) { - updateIsometricDepth(x, y) + updateIsometricDepth(positionX, positionY) } } }) } -const calcDirection = (oldX: number, oldY: number, newX: number, newY: number): Direction => { - if (newY < oldY || newX < oldX) return Direction.NEGATIVE - if (newX > oldX || newY > oldY) return Direction.POSITIVE +const calcDirection = (oldPositionX: number, oldPositionY: number, newPositionX: number, newPositionY: number): Direction => { + if (newPositionY < oldPositionY || newPositionX < oldPositionX) return Direction.NEGATIVE + if (newPositionX > oldPositionX || newPositionY > oldPositionY) return Direction.POSITIVE return Direction.UNCHANGED } const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.rotation ?? 0)) const charTexture = computed(() => { - const { rotation, characterType } = props.mapCharacter.character - const spriteId = characterType ?? 'idle_right_down' + const spriteId = charSpriteId.value ?? 'idle_right_down' 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}` }) @@ -120,35 +120,33 @@ const charTexture = computed(() => { const updateSprite = () => { if (props.mapCharacter.isMoving) { 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( () => ({ - x: props.mapCharacter.character.positionX, - y: props.mapCharacter.character.positionY, + positionX: props.mapCharacter.character.positionX, + positionY: props.mapCharacter.character.positionY, isMoving: props.mapCharacter.isMoving, rotation: props.mapCharacter.character.rotation }), (newValues, oldValues) => { if (!newValues) return - if (!oldValues || newValues.x !== oldValues.x || newValues.y !== oldValues.y) { - const direction = !oldValues ? Direction.POSITIVE : calcDirection(oldValues.x, oldValues.y, newValues.x, newValues.y) - updatePosition(newValues.x, newValues.y, direction) + if (!oldValues || newValues.positionX !== oldValues.positionX || newValues.positionY !== oldValues.positionY) { + const direction = !oldValues ? Direction.POSITIVE : calcDirection(oldValues.positionX, oldValues.positionY, newValues.positionX, newValues.positionY) + updatePosition(newValues.positionX, newValues.positionY, direction) } // Handle animation updates if (newValues.isMoving !== oldValues?.isMoving || newValues.rotation !== oldValues?.rotation) { updateSprite() } - }, - { deep: true } + } ) watch(() => props.mapCharacter, updateSprite) @@ -156,6 +154,7 @@ watch(() => props.mapCharacter, updateSprite) const characterTypeStorage = new CharacterTypeStorage() characterTypeStorage.getSpriteId(props.mapCharacter.character.characterType!).then((spriteId) => { console.log(spriteId) + charSpriteId.value = spriteId loadSpriteTextures(scene, spriteId) .then(() => { charSprite.value!.setTexture(charTexture.value) diff --git a/src/components/game/map/MapTiles.vue b/src/components/game/map/MapTiles.vue index 22f473b..dcdf5de 100644 --- a/src/components/game/map/MapTiles.vue +++ b/src/components/game/map/MapTiles.vue @@ -27,8 +27,8 @@ function createTileMap(mapData: any) { const mapConfig = new Phaser.Tilemaps.MapData({ width: mapData?.width, height: mapData?.height, - tileWidth: config.tile_size.x, - tileHeight: config.tile_size.y, + tileWidth: config.tile_size.width, + tileHeight: config.tile_size.height, orientation: Phaser.Tilemaps.Orientation.ISOMETRIC, format: Phaser.Tilemaps.Formats.ARRAY_2D }) @@ -43,12 +43,12 @@ function createTileLayer(mapData: any) { const tilesArray = unduplicateArray(FlattenMapArray(mapData?.tiles ?? [])) 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 - 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 })) - const layer = tileMap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer + 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.height) as Phaser.Tilemaps.TilemapLayer layer.setDepth(0) layer.setCullPadding(2, 2) diff --git a/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue b/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue index 76e2a6c..51d7c86 100644 --- a/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue +++ b/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue @@ -29,8 +29,8 @@ function createTileMap() { const mapData = new Phaser.Tilemaps.MapData({ width: mapEditorStore.map?.width, height: mapEditorStore.map?.height, - tileWidth: config.tile_size.x, - tileHeight: config.tile_size.y, + tileWidth: config.tile_size.width, + tileHeight: config.tile_size.height, orientation: Phaser.Tilemaps.Orientation.ISOMETRIC, format: Phaser.Tilemaps.Formats.ARRAY_2D }) @@ -48,12 +48,12 @@ function createTileLayer() { const tilesArray = gameStore.getLoadedAssetsByGroup('tiles') 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 // 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 })) - const layer = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer + 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.height) as Phaser.Tilemaps.TilemapLayer layer.setDepth(0) layer.setCullPadding(2, 2) diff --git a/src/composables/gameComposable.ts b/src/composables/gameComposable.ts index 2df61c8..5efd737 100644 --- a/src/composables/gameComposable.ts +++ b/src/composables/gameComposable.ts @@ -26,6 +26,7 @@ export async function loadTexture(scene: Phaser.Scene, textureData: TextureData) // If asset is not found, download it if (!texture) { + console.log('Downloading texture:', textureData.key) await textureStorage.download(textureData) 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) { + console.log('Loading sprite action:', sprite.id + '-' + sprite_action.action) + const key = sprite.id + '-' + sprite_action.action await loadTexture(scene, { - key: sprite_action.id + '_' + sprite_action.action, + key, data: '/textures/sprites/' + sprite.id + '/' + sprite_action.action + '.png', group: sprite_action.isAnimated ? 'sprite_animations' : 'sprites', updatedAt: sprite_action.updatedAt, @@ -87,15 +90,15 @@ export async function loadSpriteTextures(scene: Phaser.Scene, sprite_id: string) if (!sprite_action.isAnimated) continue // 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 - const anim = scene.textures.get(sprite_action.key) - scene.textures.addSpriteSheet(sprite_action.key, anim, { frameWidth: sprite_action.frameWidth ?? 0, frameHeight: sprite_action.frameHeight ?? 0 }) + const anim = scene.textures.get(key) + scene.textures.addSpriteSheet(key, anim, { frameWidth: sprite_action.frameWidth ?? 0, frameHeight: sprite_action.frameHeight ?? 0 }) scene.anims.create({ - key: sprite_action.key, + key: key, 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 }) } diff --git a/src/composables/mapComposable.ts b/src/composables/mapComposable.ts index 8311394..07644fd 100644 --- a/src/composables/mapComposable.ts +++ b/src/composables/mapComposable.ts @@ -9,50 +9,50 @@ import TilemapLayer = Phaser.Tilemaps.TilemapLayer import Tileset = Phaser.Tilemaps.Tileset import Tile = Phaser.Tilemaps.Tile -export function getTile(layer: TilemapLayer | Tilemap, x: number, y: number): Tile | undefined { - const tile = layer.getTileAtWorldXY(x, y) +export function getTile(layer: TilemapLayer | Tilemap, positionX: number, positionY: number): Tile | undefined { + const tile = layer.getTileAtWorldXY(positionX, positionY) if (!tile) return undefined return tile } -export function tileToWorldXY(layer: TilemapLayer | Tilemap, pos_x: number, pos_y: number) { - const worldPoint = layer.tileToWorldXY(pos_x, pos_y) +export function tileToWorldXY(layer: TilemapLayer | Tilemap, positionX: number, positionY: number) { + const worldPoint = layer.tileToWorldXY(positionX, positionY) if (!worldPoint) return { positionX: 0, positionY: 0 } - const positionX = worldPoint.x + config.tile_size.y - const positionY = worldPoint.y + const worldPositionX = worldPoint.x + config.tile_size.height + const worldPositionY = worldPoint.y - return { positionX, positionY } + return { worldPositionX, worldPositionY } } -export function tileToWorldX(layer: TilemapLayer | Tilemap, pos_x: number, pos_y: number): number { - const worldPoint = layer.tileToWorldXY(pos_x, pos_y) +export function tileToWorldX(layer: TilemapLayer | Tilemap, positionX: number, positionY: number): number { + const worldPoint = layer.tileToWorldXY(positionX, positionY) 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 { - const worldPoint = layer.tileToWorldXY(pos_x, pos_y) +export function tileToWorldY(layer: TilemapLayer | Tilemap, positionX: number, positionY: number): number { + const worldPoint = layer.tileToWorldXY(positionX, positionY) 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 * @param map * @param layer - * @param x - * @param y + * @param positionX + * @param positionY * @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 if (!tileImg) { 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[][]) { @@ -69,12 +69,12 @@ export function createTileArray(width: number, height: number, tile: string = 'b 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) => { - const baseDepth = x + y +export const calculateIsometricDepth = (positionX: number, positionY: number, width: number = 0, height: number = 0, isCharacter: boolean = false) => { + const baseDepth = positionX + positionY if (isCharacter) { 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[][]) { diff --git a/src/composables/pointerHandlers/useGamePointerHandlers.ts b/src/composables/pointerHandlers/useGamePointerHandlers.ts index 3095e46..29a6b3f 100644 --- a/src/composables/pointerHandlers/useGamePointerHandlers.ts +++ b/src/composables/pointerHandlers/useGamePointerHandlers.ts @@ -10,15 +10,17 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema function updateWaypoint(worldX: number, worldY: number) { const pointerTile = getTile(layer, worldX, worldY) - 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 { + if (!pointerTile) { 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) { - const { worldX, worldY } = pointer - updateWaypoint(worldX, worldY) + updateWaypoint(pointer.worldX, pointer.worldY) - if (gameStore.game.isPlayerDraggingCamera) { - const distance = Phaser.Math.Distance.Between(pointerStartPosition.value.x, pointerStartPosition.value.y, pointer.x, pointer.y) + if (!gameStore.game.isPlayerDraggingCamera) return - 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) - } - } + const distance = Phaser.Math.Distance.Between( + pointerStartPosition.value.x, + pointerStartPosition.value.y, + 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) { - 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) + + 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 = () => { diff --git a/src/composables/pointerHandlers/useMapEditorPointerHandlers.ts b/src/composables/pointerHandlers/useMapEditorPointerHandlers.ts index 1ff1f78..35901a7 100644 --- a/src/composables/pointerHandlers/useMapEditorPointerHandlers.ts +++ b/src/composables/pointerHandlers/useMapEditorPointerHandlers.ts @@ -15,10 +15,12 @@ export function useMapEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.T if (pointerTile) { const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y) + if (!worldPoint.positionX || !worldPoint.positionY) return + waypoint.value = { visible: true, x: worldPoint.positionX, - y: worldPoint.positionY + config.tile_size.y + 15 + y: worldPoint.positionY + config.tile_size.height + 15 } } else { waypoint.value.visible = false @@ -26,11 +28,8 @@ export function useMapEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.T } function dragMap(pointer: Phaser.Input.Pointer) { - if (gameStore.game.isPlayerDraggingCamera) { - const { x, y, prevPosition } = pointer - const { scrollX, scrollY, zoom } = camera - camera.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom) - } + if (!gameStore.game.isPlayerDraggingCamera) return + camera.setScroll(camera.scrollX - (pointer.x - pointer.prevPosition.x) / camera.zoom, scrollY - (pointer.y - pointer.prevPosition.y) / camera.zoom) } function handlePointerMove(pointer: Phaser.Input.Pointer) { diff --git a/src/composables/spriteComposable.ts b/src/composables/spriteComposable.ts new file mode 100644 index 0000000..e69de29