debugging

src/components/Game.vue

@@ -12,6 +12,7 @@
 import 'phaser';
 import { Game, Scene } from 'phavuer'
 import World from '@/components/World.vue'
+import Pointer = Phaser.Input.Pointer
 
 const gameConfig = {
   name: 'New Quest',
@@ -41,13 +42,13 @@ const preloadScene = (scene: Phaser.Scene) => {
 const bootScene = (scene: Phaser.Scene) => {
   // Camera drag system
   let cam = scene.cameras.main;
-  scene.input.on("pointermove", function (p) {
+  scene.input.on("pointermove", function (pointer: Pointer) {
-    if (!p.isDown) return;
+    if (!pointer.isDown) return;
-    cam.scrollX -= (p.x - p.prevPosition.x) / cam.zoom;
+    cam.scrollX -= (pointer.x - pointer.prevPosition.x) / cam.zoom;
-    cam.scrollY -= (p.y - p.prevPosition.y) / cam.zoom;
+    cam.scrollY -= (pointer.y - pointer.prevPosition.y) / cam.zoom;
   });
 
-  const grid = scene.add.grid(0, 0, window.innerWidth, window.innerHeight, 64, 32, 0, 0, 0xff00ff, 0.5).setOrigin(0, 0);
+  const grid = scene.add.grid(0, 0, window.innerWidth, window.innerHeight, 64, 32, 0, 0, 0xff0000, 0.5).setOrigin(0, 0);
 
   window.addEventListener('resize', () => {
     grid.setSize(window.innerWidth, window.innerHeight);

src/components/World.vue

@@ -5,8 +5,12 @@
 
 <script setup lang="ts">
 import { refObj, TilemapLayer, useScene } from 'phavuer'
-import Player from '@/components/player/Player.vue'
+import Player from '@/components/sprites/player/Player.vue'
 import config from '@/config'
+import type { Ref } from 'vue'
+import GameObject = Phaser.GameObjects.GameObject
+import Layer = Phaser.GameObjects.Layer
+import Tileset = Phaser.Tilemaps.Tileset
 
 const scene = useScene()
 const mapData = new Phaser.Tilemaps.MapData({
@@ -21,10 +25,16 @@ const mapData = new Phaser.Tilemaps.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 tileset: Tileset|null = map.addTilesetImage('default', 'tiles');
-const layer = map.createBlankLayer('layer', tileset, -config.tile_size.x + width / 2, height / 2 - (config.tile_size.x * tileSizeWidth * 0.25));
+const layer: Layer|null = map.createBlankLayer('layer', tileset);
+layer.fixedToCamera = false;
 
-const tilemapLayer = refObj();
+scene.cameras.main.scrollX = - map.widthInPixels / 2;
+scene.cameras.main.scrollY = - map.heightInPixels / 2;
+
+console.log(layer);
+
+const tilemapLayer: Ref<GameObject|undefined> = refObj();
 
 const data = [
   [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
@@ -44,4 +54,17 @@ data.forEach((row, y) => {
     layer.putTileAt(tile, x, y);
   });
 });
+
+// center camera
+const centerY = (map.height * map.tileHeight) / 2
+const centerX = (map.width * map.tileWidth) / 2
+scene.cameras.main.centerOn(centerX, centerY)
+
+
+/**
+ * Resources
+ * https://gist.github.com/veleek/3be73dc61d5f5a80abc0f72c3ffe390e
+ * https://gamedev.stackexchange.com/questions/116485/how-to-center-a-tilemap-in-phaser
+ * 
+ */
 </script>

src/components/sprites/player/Player.vue

@@ -1,6 +1,6 @@
 <template>
+  <Image texture="waypoint" :x="waypoint.x" :y="waypoint.x" :visible="waypoint.visible" />
   <Sprite ref="sprite" texture="player" :x :y />
-  <Image ref="waypoint" texture="waypoint" :x="waypoint_x" :y="waypoint_y" :visible="waypoint_visible" />
 </template>
 
 <script lang="ts" setup>
@@ -13,39 +13,34 @@ import config from '@/config'
  * the map is 10x10
  * so the map is 640x320
  */
-
-// const props = defineProps({
-//   x: Number,
-//    y: Number
-// })
-
 const props = defineProps({
   layer: Phaser.Tilemaps.TilemapLayer
 })
+
 const scene = useScene()
-const waypoint = refObj();
+
+const pointer_tile = ref(undefined);
+const waypoint = ref({
+  visible: false,
+  x: 0,
+  y: 0,
+})
+
 const x = ref(0);
 const y = ref(0);
-const current_tile = ref(undefined);
-
-const waypoint_visible = ref(false);
-const waypoint_x = ref(0);
-const waypoint_y = ref(0);
 
 const onPointerMove = (e: Phaser.Input.Pointer) => {
-  const px = scene.cameras.main.worldView.x + e.x - 32;
+  const px = scene.cameras.main.worldView.x + e.x;
   const py = scene.cameras.main.worldView.y + e.y;
 
-  console.log(px, py);
+  pointer_tile.value = getTile(px, py, props.layer);
+  waypoint.value.visible = true;
 
-  current_tile.value = getTile(px, py, props.layer);
+  if (pointer_tile.value !== undefined) {
-  console.log(props.layer);
+    // Convert tile coordinates to world coordinates
-  console.log(current_tile.value);
+    const worldPoint = props.layer.tileToWorldXY(pointer_tile.value.x, pointer_tile.value.y);
-  waypoint_visible.value = true;
+    waypoint.value.x = worldPoint.x;
-
+    waypoint.value.y = worldPoint.y;
-  if (current_tile.value !== undefined) {
-    waypoint_x.value = current_tile.value.pixelX;
-    waypoint_y.value = current_tile.value.pixelY + 32;
   }
 };