Grid is now updating with dynamic points

Author: serbanghita

packages/demos/tiled-rendering/README.md

@@ -6,4 +6,8 @@ Example of rendering individual tiles:
 ![Basic rendering of layers](resources/demo1.png)
 
 Example of rendering collision tiles:  
-![Basic rendering of layers](resources/demo2.png)
+![Basic rendering of layers](resources/demo2.png)
+
+Example of random points moving on a static grid
+interacting with themselves and colliding with static tiles:  
+![Basic rendering of layers](resources/demo3.png)

packages/demos/tiled-rendering/resources/demo3.png

@@ -28,13 +28,18 @@ export default class MoveSystem extends System {
       let futureX = tile.properties.x + randomInt(-1, 1);
       let futureY = tile.properties.y + randomInt(-1, 1);
 
+      const currentTile = tile.properties.tile;
       const futureTile = getTileFromCoordinates(futureX, futureY, matrixComponent.properties);
-      if (matrix[futureTile] === 0) {
+      if (currentTile === futureTile || matrix[futureTile] === 0) {
         tile.properties.x = futureX;
         tile.properties.y = futureY;
         tile.properties.point.x = futureX;
         tile.properties.point.y = futureY;
         tile.properties.tile = futureTile;
+
+        // Update the tile on the "matrix".
+        matrix[currentTile] = 0;
+        matrix[futureTile] = 2;
       }
     });
   }

packages/demos/tiled-rendering/src/MoveSystem.ts

@@ -5,10 +5,9 @@ import { PreRenderTiledMapSystem } from "@serbanghita-gamedev/renderer";
 import { IsTiledMap, Renderable } from "@serbanghita-gamedev/component";
 import { loadSprites } from "./assets";
 import { Point, Rectangle } from "@serbanghita-gamedev/geometry";
-import { randomInt } from "./helpers";
 import IsMatrix from "./IsMatrix";
 import { TiledMap } from "@serbanghita-gamedev/tiled";
-import { getTileCoordinates } from "@serbanghita-gamedev/matrix";
+import { getTileCoordinates, getTileFromCoordinates } from "@serbanghita-gamedev/matrix";
 import { QuadTree } from "@serbanghita-gamedev/quadtree";
 import QuadTreeSystem from "./QuadTreeSystem";
 import IsCollisionTile from "./IsCollisionTile";
@@ -84,10 +83,22 @@ async function setup() {
     const x = event.clientX | 0;
     const y = event.clientY | 0;
 
+    const map = world.getEntity("map");
+    if (!map) {
+      throw new Error(`Map entity has not been defined yet.`);
+    }
+    const mapMatrix = map.getComponent(IsMatrix);
+    const tile = getTileFromCoordinates(x, y, mapMatrix.properties);
+
+    if (mapMatrix.properties.matrix[tile] !== 0) {
+      return;
+    }
+
     const playerId = `player-${x}-${y}`;
     const player = world.createEntity(playerId);
     const point = new Point(x, y, playerId);
-    player.addComponent(IsCollisionTile, { x, y, point });
+
+    player.addComponent(IsCollisionTile, { x, y, point, tile });
     player.addComponent(IsRenderedInForeground);
     player.addComponent(IsPlayer);
     quadtree.addPoint(point);