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