updatec packages, tried getting cullPadding to work

package-lock.json

@@ -27,7 +27,7 @@
         "npm-run-all2": "^6.1.2",
         "phaser": "^3.80.1",
         "phaser3-rex-plugins": "^1.80.2",
-        "phavuer": "^0.15.6",
+        "phavuer": "^0.15.7",
         "prettier": "^3.0.3",
         "typescript": "~5.4.0",
         "vite": "^5.1.6",
@@ -1958,30 +1958,30 @@
       }
     },
     "node_modules/@volar/language-core": {
-      "version": "2.2.0-alpha.12",
+      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.0-alpha.12.tgz",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.0.tgz",
-      "integrity": "sha512-zgWof8q02kADyb4lalVzoqnvTs/wJRDul5qHl0VC2ZVXwes6j2ZYumjXqAW+8W1CQp8lfJkEn9Z6a5jvU6S7Jw==",
+      "integrity": "sha512-a8WG9+4OdeNDW4ywABZIM6S6UN7em8uIlM/BZ2pWQUYrVmX+m8sj/X+QadvO+Li/t/LjAqbWJQtVgxdpEWLALQ==",
       "dev": true,
       "dependencies": {
-        "@volar/source-map": "2.2.0-alpha.12"
+        "@volar/source-map": "2.2.0"
       }
     },
     "node_modules/@volar/source-map": {
-      "version": "2.2.0-alpha.12",
+      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.0-alpha.12.tgz",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.0.tgz",
-      "integrity": "sha512-d7vDWBE3Ijenff+f1GbWWvdXK4i0wsWsDnfry7G0Jwhbs2/q+NoQya27ZEc3Is0E5m7sOmgUOvRnLGLKEmWFBg==",
+      "integrity": "sha512-HQlPRlHOVqCCHK8wI76ZldHkEwKsjp7E6idUc36Ekni+KJDNrqgSqPvyHQixybXPHNU7CI9Uxd9/IkxO7LuNBw==",
       "dev": true,
       "dependencies": {
         "muggle-string": "^0.4.0"
       }
     },
     "node_modules/@volar/typescript": {
-      "version": "2.2.0-alpha.12",
+      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.0-alpha.12.tgz",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.0.tgz",
-      "integrity": "sha512-Ie4/Pj7NcIZWss+kteREZUYRU0jjiAmWCNoUJ7ViYQsYCrtiLMgPthha09V9zAyhk1rUGErF7/TLtAAX1VuflA==",
+      "integrity": "sha512-wC6l4zLiiCLxF+FGaHCbWlQYf4vMsnRxYhcI6WgvaNppOD6r1g+Ef1RKRJUApALWU46Yy/JDU/TbdV6w/X6Liw==",
       "dev": true,
       "dependencies": {
-        "@volar/language-core": "2.2.0-alpha.12",
+        "@volar/language-core": "2.2.0",
         "path-browserify": "^1.0.1"
       }
     },
@@ -2187,12 +2187,12 @@
       }
     },
     "node_modules/@vue/language-core": {
-      "version": "2.0.15",
+      "version": "2.0.16",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.15.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.16.tgz",
-      "integrity": "sha512-a2n5Oc+PkWPX5zhnTkddH/hzPCrQmwUz1EwmFje3mqd+c8Ux+yCVEnAE2XtGQZoELgSWvY7EmJfidRbs+nR19Q==",
+      "integrity": "sha512-Bc2sexRH99pznOph8mLw2BlRZ9edm7tW51kcBXgx8adAoOcZUWJj3UNSsdQ6H9Y8meGz7BoazVrVo/jUukIsPw==",
       "dev": true,
       "dependencies": {
-        "@volar/language-core": "2.2.0-alpha.12",
+        "@volar/language-core": "~2.2.0",
         "@vue/compiler-dom": "^3.4.0",
         "@vue/shared": "^3.4.0",
         "computeds": "^0.0.1",
@@ -2873,9 +2873,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.751",
+      "version": "1.4.752",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.751.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.752.tgz",
-      "integrity": "sha512-2DEPi++qa89SMGRhufWTiLmzqyuGmNF3SK4+PQetW1JKiZdEpF4XQonJXJCzyuYSA6mauiMhbyVhqYAP45Hvfw==",
+      "integrity": "sha512-P3QJreYI/AUTcfBVrC4zy9KvnZWekViThgQMX/VpJ+IsOBbcX5JFpORM4qWapwWQ+agb2nYAOyn/4PMXOk0m2Q==",
       "dev": true
     },
     "node_modules/emoji-regex": {
@@ -4218,15 +4218,15 @@
       "dev": true
     },
     "node_modules/mlly": {
-      "version": "1.6.1",
+      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.0.tgz",
-      "integrity": "sha512-vLgaHvaeunuOXHSmEbZ9izxPx3USsk8KCQ8iC+aTlp5sKRSoZvwhHh5L9VbKSaVC6sJDqbyohIS76E2VmHIPAA==",
+      "integrity": "sha512-U9SDaXGEREBYQgfejV97coK0UL1r+qnF2SyO9A3qcI8MzKnsIFKHNVEkrDyNncQTKQQumsasmeq84eNMdBfsNQ==",
       "dev": true,
       "dependencies": {
         "acorn": "^8.11.3",
         "pathe": "^1.1.2",
-        "pkg-types": "^1.0.3",
+        "pkg-types": "^1.1.0",
-        "ufo": "^1.3.2"
+        "ufo": "^1.5.3"
       }
     },
     "node_modules/mrmime": {
@@ -4644,9 +4644,9 @@
       }
     },
     "node_modules/phaser3-rex-plugins": {
-      "version": "1.80.2",
+      "version": "1.80.3",
-      "resolved": "https://registry.npmjs.org/phaser3-rex-plugins/-/phaser3-rex-plugins-1.80.2.tgz",
+      "resolved": "https://registry.npmjs.org/phaser3-rex-plugins/-/phaser3-rex-plugins-1.80.3.tgz",
-      "integrity": "sha512-ZPA4c47WQRU6rqLdlOFizGU+ljtP4C2blhcpbYSsNMqNRHD7o8vRBEzEhl8w6CMGvcy+eVoA6v10cyL4eIZARw==",
+      "integrity": "sha512-j/z588woCzkByrr+n1NiH4we1eDGnO/zzdO3S9XgE9b65MMA3phUUcx9GHuLvH1nWTGc025W0xG0bSFv7ekDSw==",
       "dev": true,
       "dependencies": {
         "eventemitter3": "^3.1.2",
@@ -4665,9 +4665,9 @@
       "dev": true
     },
     "node_modules/phavuer": {
-      "version": "0.15.6",
+      "version": "0.15.7",
-      "resolved": "https://registry.npmjs.org/phavuer/-/phavuer-0.15.6.tgz",
+      "resolved": "https://registry.npmjs.org/phavuer/-/phavuer-0.15.7.tgz",
-      "integrity": "sha512-/eSRACJVrf3NwYw55fpokZzm6kFBCOiKdV/CAl0grjdlENRFhR0vAS9LAU8mcLGNPdqkQMzUY8eC7y8BfJ5J+A==",
+      "integrity": "sha512-TbLw0IvNVPBP+fkAqTkVGU4ft3V0jsxaezIfVrmkH/XevPHFun47g6iBY/UgYMdSnmMnShUBqRuU/z4n89lqIA==",
       "dev": true,
       "peerDependencies": {
         "phaser": "^3.70.0",
@@ -5598,9 +5598,9 @@
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.0.13",
+      "version": "1.0.14",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.14.tgz",
-      "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
+      "integrity": "sha512-JixKH8GR2pWYshIPUg/NujK3JO7JiqEEUiNArE86NQyrgUuZeTlZQN3xuS/yiV5Kb48ev9K6RqNkaJjXsdg7Jw==",
       "dev": true,
       "funding": [
         {
@@ -5617,7 +5617,7 @@
         }
       ],
       "dependencies": {
-        "escalade": "^3.1.1",
+        "escalade": "^3.1.2",
         "picocolors": "^1.0.0"
       },
       "bin": {
@@ -5899,9 +5899,9 @@
       }
     },
     "node_modules/vue-component-type-helpers": {
-      "version": "2.0.15",
+      "version": "2.0.16",
-      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.15.tgz",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.16.tgz",
-      "integrity": "sha512-jR/Hw52gzNQxMovJBsOQ/F9E1UQ8K1Np0CVG3RnueLkaCKqWuyL9XHl/5tUBAGJx+bk5xZ+co7vK23+Pzt75Lg==",
+      "integrity": "sha512-qisL/iAfdO++7w+SsfYQJVPj6QKvxp4i1MMxvsNO41z/8zu3KuAw9LkhKUfP/kcOWGDxESp+pQObWppXusejCA==",
       "dev": true
     },
     "node_modules/vue-eslint-parser": {
@@ -5939,13 +5939,13 @@
       }
     },
     "node_modules/vue-tsc": {
-      "version": "2.0.15",
+      "version": "2.0.16",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.15.tgz",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.16.tgz",
-      "integrity": "sha512-R7qcN33tJcNvo59g7ZuoZN1bbIe3rkDz4YjaK5kH/WxeyOZV4ynqa2IsQO4sCHXdx9hFTVDEXWuUgbGPuCz49A==",
+      "integrity": "sha512-/gHAWJa216PeEhfxtAToIbxdWgw01wuQzo48ZUqMYVEyNqDp+OYV9xMO5HaPS2P3Ls0+EsjguMZLY4cGobX4Ew==",
       "dev": true,
       "dependencies": {
-        "@volar/typescript": "2.2.0-alpha.12",
+        "@volar/typescript": "~2.2.0",
-        "@vue/language-core": "2.0.15",
+        "@vue/language-core": "2.0.16",
         "semver": "^7.5.4"
       },
       "bin": {

package.json

@@ -33,7 +33,7 @@
     "npm-run-all2": "^6.1.2",
     "phaser": "^3.80.1",
     "phaser3-rex-plugins": "^1.80.2",
-    "phavuer": "^0.15.6",
+    "phavuer": "^0.15.7",
     "prettier": "^3.0.3",
     "typescript": "~5.4.0",
     "vite": "^5.1.6",

src/components/Game.vue

@@ -15,8 +15,12 @@ import World from '@/components/World.vue'
 
 const gameConfig = {
   name: 'New Quest',
-  width: window.innerWidth,
+  scale: {
-  height: window.innerHeight,
+    mode: Phaser.Scale.FIT,
+    autoCenter: Phaser.Scale.CENTER_BOTH,
+    width: 800,
+    height: 800,
+  },
   type: Phaser.AUTO,
   pixelArt: true,
 }

src/components/World.vue

@@ -1,12 +1,13 @@
 <template>
-  <TilemapLayer :tilemap="map" :layerIndex="0" :tileset="data" />
+  <TilemapLayer ref="tilemapLayer" :tilemap="map" :layerIndex="0" :tileset="data" />
 <!--  <Sprite ref="player" texture="player" :x="playerX" :y="playerY" />-->
 </template>
 
 <script setup>
-import { Sprite, TilemapLayer, useScene } from 'phavuer'
+import { Sprite, TilemapLayer, useScene, useGame } from 'phavuer'
 import Player from '@/components/player/Player.vue'
 import { ref } from 'vue'
+import config from '@/config'
 
 const scene = useScene()
 const mapData = new Phaser.Tilemaps.MapData({
@@ -14,18 +15,19 @@ const mapData = new Phaser.Tilemaps.MapData({
   format: Phaser.Tilemaps.Formats.ARRAY_2D,
   width: 10,
   height: 10,
-  tileWidth: 64,
+  tileWidth: config.tile_size.x,
-  tileHeight: 32,
+  tileHeight: config.tile_size.y,
 });
 
-const { tileWidth, tileHeight, width: tileSizeWidth } = mapData;
+const { width: tileSizeWidth } = mapData;
 const { width, height } = scene.cameras.main;
 const map = new Phaser.Tilemaps.Tilemap(scene, mapData);
 const tileset = map.addTilesetImage('default', 'tiles');
-const layer = map.createBlankLayer('layer', tileset, -tileHeight + width / 2, height / 2 - (tileWidth * tileSizeWidth * 0.25));
+const layer = map.createBlankLayer('layer', tileset, -config.tile_size.x + width / 2, height / 2 - (config.tile_size.x * tileSizeWidth * 0.25));
+layer.cullPaddingX = 20;
+layer.cullPaddingY = 20;
 
-layer.cullPaddingX = 10;
+const game = useGame();
-layer.cullPaddingY = 10;
 
 const data = [
   [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
@@ -52,11 +54,27 @@ let playerX = ref(0)
 let playerY = ref(0)
 
 // W,S,A,D
+// Listen for keydown events
 scene.input.keyboard.on('keydown', function (event) {
-  if (event.key === 'a') { playerX.value -= 10; playerX.value -= 10; }
+  // Check which key was pressed
-  if (event.key === 'd') { playerX.value += 10; playerX.value += 10; }
+  switch (event.code) {
-  if (event.key === 'w') { playerY.value -= 10; playerY.value -= 10; }
+    case 'KeyW': // Move up and to the left
-  if (event.key === 's') { playerY.value += 10; playerY.value += 10; }
+      playerX.value -= config.tile_size.x / 2;
+      playerY.value -= config.tile_size.y / 2;
+      break;
+    case 'KeyS': // Move down and to the right
+      playerX.value += config.tile_size.x / 2;
+      playerY.value += config.tile_size.y / 2;
+      break;
+    case 'KeyA': // Move down and to the left
+      playerX.value -= config.tile_size.x / 2;
+      playerY.value += config.tile_size.y / 2;
+      break;
+    case 'KeyD': // Move up and to the right
+      playerX.value += config.tile_size.x / 2;
+      playerY.value -= config.tile_size.y / 2;
+      break;
+  }
 });
 
 /**
@@ -65,26 +83,4 @@ scene.input.keyboard.on('keydown', function (event) {
  * so the map is 640x320
  */
 
-function getDepth(tile) {
-  return 0;
-}
-
-function getTile(x, y, layers) {
-  if (layers.length === 0) return undefined;
-
-  const layer = layers.pop();
-  const tile = layer.getTileAtWorldXY(x, y);
-  if (tile) return tile;
-  else return this.getTile(x, y, layers);
-}
-
-function getTileAt(iX, iY, layers) {
-  if (layers.length === 0) return undefined;
-
-  const layer = layers.pop();
-  const tile = layer.getTileAt(iX, iY);
-  if (tile) return tile;
-  else return this.getTileAt(iX, iY, layers);
-}
-
 </script>

src/config.js

@@ -0,0 +1,19 @@
+export default {
+  name: 'New Quest',
+  websocket_url: 'ws://localhost:3000',
+  development: true,
+  width: 960,
+  height: 540,
+  tile_size: { x: 64, y: 32, z: 1 },
+  depth: {
+    ground: 0, // + y
+    bullet: 5000,
+    CEIL: 10000,
+    LIGHT: 20000,
+    DARKNESS: 21000,
+    SPEACH_BUBBLE: 50000,
+    UI_BG: 100000,
+    TALK: 110000,
+    TRANSITION: 900000
+  }
+}