feat(graphics): add TileMarker

src/graphics/TileMarker.ts

@@ -0,0 +1,52 @@
+import Phaser from 'phaser';
+
+export class TileMarker extends Phaser.GameObjects.Graphics {
+  private map!: Phaser.Tilemaps.Tilemap;
+  private worldLayer!: Phaser.Tilemaps.TilemapLayer;
+
+  constructor(
+    scene: Phaser.Scene,
+    map: Phaser.Tilemaps.Tilemap,
+    worldLayer: Phaser.Tilemaps.TilemapLayer,
+  ) {
+    super(scene);
+    this.map = map;
+    this.worldLayer = worldLayer;
+
+    this.lineStyle(5, 0xffffff, 1);
+    this.strokeRect(0, 0, map.tileWidth, map.tileHeight);
+    this.lineStyle(3, 0xff4f78, 1);
+    this.strokeRect(0, 0, map.tileWidth, map.tileHeight);
+
+    scene.add.existing(this);
+  }
+
+  update() {
+    const worldPoint = this.scene.input.activePointer.positionToCamera(
+      this.scene.cameras.main,
+    ) as Phaser.Math.Vector2;
+
+    const pointerTileXY = this.map.worldToTileXY(worldPoint.x, worldPoint.y)!;
+    const snappedWorldPoint = this.map.tileToWorldXY(
+      pointerTileXY.x,
+      pointerTileXY.y,
+    )!;
+    this.setPosition(snappedWorldPoint.x, snappedWorldPoint.y);
+
+    const { activePointer } = this.scene.input.manager;
+
+    // left-click draws tile
+    if (activePointer.leftButtonDown()) {
+      try {
+        this.worldLayer
+          .putTileAtWorldXY(225, worldPoint.x, worldPoint.y)
+          .setCollision(true);
+      } catch (error) {
+        // don't draw tile if outside of game world
+      }
+      // right-click removes tile
+    } else if (activePointer.rightButtonDown()) {
+      this.worldLayer.removeTileAtWorldXY(worldPoint.x, worldPoint.y);
+    }
+  }
+}

src/graphics/index.ts

@@ -0,0 +1 @@
+export * from './TileMarker';

src/index.ts

@@ -21,8 +21,8 @@ new Phaser.Game({
       debug: import.meta.env.DEV,
     },
   },
-  disableContextMenu: import.meta.env.PROD,
-  backgroundColor: '#000',
+  disableContextMenu: true,
+  transparent: true,
   scale: {
     mode: Phaser.Scale.FIT,
     autoCenter: Phaser.Scale.CENTER_BOTH,

src/scenes/Main.tsx

@@ -9,6 +9,7 @@ import {
   TilemapObject,
   TILESET_NAME,
 } from '../constants';
+import { TileMarker } from '../graphics';
 import { Player } from '../sprites';
 import { state } from '../state';
 
@@ -19,21 +20,18 @@ interface Sign extends Phaser.Physics.Arcade.StaticBody {
 export class Main extends Phaser.Scene {
   private player!: Player;
   private sign!: Sign;
+  private tileMarker!: Phaser.GameObjects.Graphics;
 
   constructor() {
     super(key.scene.main);
   }
 
   create() {
     const map = this.make.tilemap({ key: key.tilemap.tuxemon });
-
-    // Parameters are the name you gave the tileset in Tiled and
-    // the key of the tileset image in Phaser's cache (name used in preload)
     const tileset = map.addTilesetImage(TILESET_NAME, key.image.tuxemon)!;
 
-    // Parameters: layer name (or index) from Tiled, tileset, x, y
-    map.createLayer(TilemapLayer.BelowPlayer, tileset, 0, 0);
-    const worldLayer = map.createLayer(TilemapLayer.World, tileset, 0, 0)!;
+    map.createLayer(TilemapLayer.BelowPlayer, tileset);
+    const worldLayer = map.createLayer(TilemapLayer.World, tileset)!;
     const aboveLayer = map.createLayer(
       TilemapLayer.AbovePlayer,
       tileset,
@@ -45,13 +43,8 @@ export class Main extends Phaser.Scene {
     this.physics.world.bounds.width = worldLayer.width;
     this.physics.world.bounds.height = worldLayer.height;
 
-    // By default, everything gets depth sorted on the screen in the order we created things.
-    // We want the "Above Player" layer to sit on top of the player, so we explicitly give it a depth.
-    // Higher depths will sit on top of lower depth objects.
     aboveLayer.setDepth(Depth.AbovePlayer);
 
-    // Object layers in Tiled let you embed extra info into a map like a spawn point or custom collision shapes.
-    // In the tmx file, there's an object layer with a point named 'Spawn Point'.
     const spawnPoint = map.findObject(
       TilemapLayer.Objects,
       ({ name }) => name === TilemapObject.SpawnPoint,
@@ -71,17 +64,15 @@ export class Main extends Phaser.Scene {
     this.sign.text = sign.properties[0].value;
 
     this.player = new Player(this, spawnPoint.x!, spawnPoint.y!);
-
     this.enablePlayerSignInteraction();
-
-    // Watch the player and worldLayer for collisions
     this.physics.add.collider(this.player, worldLayer);
 
-    // Set the bounds of the camera
     this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
 
     render(<TilemapDebug tilemapLayer={worldLayer} />, this);
 
+    this.tileMarker = new TileMarker(this, map, worldLayer!);
+
     state.isTypewriting = true;
     render(
       <Typewriter
@@ -124,5 +115,6 @@ export class Main extends Phaser.Scene {
 
   update() {
     this.player.update();
+    this.tileMarker.update();
   }
 }