controls component

src/components/Controls.vue

@@ -0,0 +1,61 @@
+<template>
+  <Image texture="waypoint" :x="waypoint.x" :y="waypoint.y" :visible="waypoint.visible" />
+</template>
+<script setup lang="ts">
+import { Image, useScene } from 'phavuer'
+import { ref } from 'vue'
+import config from '@/config'
+
+const scene = useScene()
+const pointer_tile = ref(undefined);
+const props = defineProps({
+  layer: Phaser.Tilemaps.TilemapLayer
+})
+const waypoint = ref({
+  visible: false,
+  x: 0,
+  y: 0,
+})
+
+function onPointerMove(pointer: Phaser.Input.Pointer) {
+  const px = scene.cameras.main.worldView.x + pointer.x;
+  const py = scene.cameras.main.worldView.y + pointer.y;
+
+  pointer_tile.value = getTile(px, py, props.layer);
+  if (pointer_tile.value) {
+    waypoint.value.visible = true;
+
+    // Convert tile coordinates to world coordinates
+    const worldPoint = props.layer.tileToWorldXY(pointer_tile.value.x, pointer_tile.value.y);
+    waypoint.value.x = worldPoint.x + config.tile_size.y;
+    waypoint.value.y = worldPoint.y + config.tile_size.y;
+  } else {
+    waypoint.value.visible = false;
+  }
+}
+
+scene.input.on(Phaser.Input.Events.POINTER_MOVE, onPointerMove);
+
+function getTile (x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
+  const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y);
+
+  console.log(x,y);
+  console.log('tile', tile);
+
+  if (!tile) {
+    return undefined;
+  }
+
+  return tile;
+}
+
+function getTileAt (iX: number, iY: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
+  const tile: Phaser.Tilemaps.Tile = layer.getTileAt(iX, iY);
+  if (tile) return tile;
+  else return undefined;
+}
+
+function getDepth(tile: Phaser.Tilemaps.Tile): number {
+  return 32;
+}
+</script>

src/components/World.vue

@@ -1,6 +1,7 @@
 <template>
   <TilemapLayer ref="tilemapLayer" :tilemap="map" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" :tileset="data" />
-  <Player :layer="tilemapLayer" />
+  <Player />
+  <Controls :layer="layer" />
 </template>
 
 <script setup lang="ts">
@@ -9,6 +10,7 @@ import Player from '@/components/sprites/player/Player.vue'
 import config from '@/config'
 import type { Ref } from 'vue'
 import Tileset = Phaser.Tilemaps.Tileset
+import Controls from '@/components/Controls.vue'
 
 const scene = useScene()
 const mapData = new Phaser.Tilemaps.MapData({
@@ -23,6 +25,11 @@ const mapData = new Phaser.Tilemaps.MapData({
 const { width: tileSizeWidth } = mapData;
 const { width, height } = scene.cameras.main;
 const map = new Phaser.Tilemaps.Tilemap(scene, mapData);
+/**
+ * 1 tile is 64x32
+ * the map is 10x10
+ * so the map is 640x320
+ */
 const tileset: (Tileset|null) = map.addTilesetImage('default', 'tiles');
 // const layer: (Layer|null) = map.createBlankLayer('layer', tileset);
 

src/components/sprites/player/Player.vue

@@ -1,79 +1,12 @@
 <template>
-  <Image texture="waypoint" :x="waypoint.x" :y="waypoint.y" :visible="waypoint.visible" />
   <Sprite ref="sprite" texture="player" :x :y />
 </template>
 
 <script lang="ts" setup>
-import { Image, onPreUpdate, refObj, Sprite, useScene } from 'phavuer'
+import { Sprite, useScene } from 'phavuer'
 import { ref } from 'vue'
-import config from '@/config'
-
-/**
- * 1 tile is 64x32
- * the map is 10x10
- * so the map is 640x320
- */
-const props = defineProps({
-  layer: Phaser.Tilemaps.TilemapLayer
-})
 
 const scene = useScene()
-
-const pointer_tile = ref(undefined);
-const waypoint = ref({
-  visible: false,
-  x: 0,
-  y: 0,
-})
-
 const x = ref(0);
 const y = ref(0);
-
-const onPointerMove = (e: Phaser.Input.Pointer) => {
-  const px = scene.cameras.main.worldView.x + e.x;
-  const py = scene.cameras.main.worldView.y + e.y;
-
-  pointer_tile.value = getTile(px, py, props.layer);
-  if (pointer_tile.value) {
-    waypoint.value.visible = true;
-
-    // Convert tile coordinates to world coordinates
-    const worldPoint = props.layer.tileToWorldXY(pointer_tile.value.x, pointer_tile.value.y);
-    waypoint.value.x = worldPoint.x + 32;
-    waypoint.value.y = worldPoint.y + 32;
-  } else {
-    waypoint.value.visible = false;
-  }
-};
-
-
-
-
-onPreUpdate(() => {
-
-})
-
-scene.input.on(Phaser.Input.Events.POINTER_MOVE, onPointerMove);
-
-function getTile (x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
-  const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y);
-  console.log(x,y);
-  if (tile) {
-    console.log('tile', tile);
-    return tile;
-  } else {
-    console.log('tile', tile);
-    return undefined;
-  }
-}
-
-function getTileAt (iX: number, iY: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
-  const tile: Phaser.Tilemaps.Tile = layer.getTileAt(iX, iY);
-  if (tile) return tile;
-  else return undefined;
-}
-
-function getDepth(tile: Phaser.Tilemaps.Tile): number {
-  return 32;
-}
 </script>