Merge pull request #12 from QADRAX/fix/TrasposeTilemap

Fix/traspose tilemap

Author: QADRAX

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-super-tilemap",
   "license": "MIT",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "private": false,
   "description": "React implementation of a low-level 2D tilemap board optimized for high-performance rendering in web browsers",
   "author": "Carlos Cuadra",

src/__stories__/demos/sprites/DemoSpriteOffset.tsx

@@ -42,16 +42,16 @@ const sprites: SpriteDefinition[] = [
       height: 2,
     },
     offset: {
-      col: -0.5,
-      row: 0.5,
+      col: 0.5,
+      row: -0.5,
     },
   },
 ];
 
 const scheme: string[][][] = [
   [['grass'], ['grass'], ['grass']],
-  [['grass'], ['grass', 'building', 'selector'], ['ocean']],
-  [['grass'], ['ocean'], ['ocean']],
+  [['grass'], ['grass', 'building'], ['ocean']],
+  [['grass', 'selector'], ['ocean'], ['ocean']],
 ];
 
 export const DemoSpriteOffset = () => {

src/render/Render.ts

@@ -69,11 +69,11 @@ export function renderTileMap({
   if (schema && spriteMap) {
     // Calculate first and last visible columns and rows
 
-    const firstVisibleCol = Math.floor(-cameraPosition.x / tileSizePx);
-    const lastVisibleCol = Math.ceil((canvasWidthPx - cameraPosition.x) / tileSizePx);
+    const firstVisibleCol = Math.floor(-cameraPosition.y / tileSizePx);
+    const lastVisibleCol = Math.ceil((canvasHeightPx - cameraPosition.y) / tileSizePx);
 
-    const firstVisibleRow = Math.floor(-cameraPosition.y / tileSizePx);
-    const lastVisibleRow = Math.ceil((canvasHeightPx - cameraPosition.y) / tileSizePx);
+    const firstVisibleRow = Math.floor(-cameraPosition.x / tileSizePx);
+    const lastVisibleRow = Math.ceil((canvasWidthPx- cameraPosition.x) / tileSizePx);
 
     // Calculate the max number of layers
 
@@ -102,8 +102,8 @@ export function renderTileMap({
             continue;
           }
 
-          const x = c * tileSizePx + cameraPosition.x;
-          const y = r * tileSizePx + cameraPosition.y;
+          const x = r * tileSizePx + cameraPosition.x;
+          const y = c * tileSizePx + cameraPosition.y;
 
           const spriteKey = layers[l];
           if (spriteKey) {
@@ -113,8 +113,8 @@ export function renderTileMap({
               const spriteSize = sprite.size;
               const spriteWidthPx = spriteSize.width * tileSizePx;
               const spriteHeightPx = spriteSize.height * tileSizePx;
-              const spriteX = x + tileSizePx * sprite.offset.col;
-              const spriteY = y + tileSizePx * sprite.offset.row;
+              const spriteX = x + tileSizePx * sprite.offset.row;
+              const spriteY = y + tileSizePx * sprite.offset.col;
 
               const frame = sprite.getFrame(timestamp);
               bufferCtx.drawImage(
@@ -151,9 +151,9 @@ export function renderTileMap({
         const spriteWidthPx = spriteSize.width * tileSizePx;
         const spriteHeightPx = spriteSize.height * tileSizePx;
         const spriteX =
-          element.tilePosition.col * tileSizePx + cameraPosition.x + tileSizePx * sprite.offset.col;
+          element.tilePosition.row * tileSizePx + cameraPosition.x + tileSizePx * sprite.offset.row;
         const spriteY =
-          element.tilePosition.row * tileSizePx + cameraPosition.y + tileSizePx * sprite.offset.row;
+          element.tilePosition.col * tileSizePx + cameraPosition.y + tileSizePx * sprite.offset.col;
 
         const frame = sprite.getFrame(timestamp);
         bufferCtx.drawImage(

src/types/SpriteDefinition.ts

@@ -10,9 +10,11 @@ import { TilePosition } from './TilePosition';
  *
  * The rest of the images will be used for animation.
  *
- * If there is only one image, the animation will be disabled.
+ * If there is only one image, the animation will not be disabled.
  *
  * The images must have the same size.
+ * 
+ * You can define the imageSrc as a base64.
  *
  * @example
  *
@@ -22,6 +24,7 @@ import { TilePosition } from './TilePosition';
  *      "https://example.com/image1.png",
  *      "https://example.com/image2.png",
  *      "https://example.com/image3.png",
+ *      "data:image/png;base64,iVBORw0K...",
  *   ],
  *   animationDelay: 1000,
  *   tileSize: { width: 1, height: 1 },
@@ -41,14 +44,16 @@ export type SpriteDefinition = {
    *
    * The rest of the images will be used for animation.
    *
-   * If there is only one image, the animation will be disabled
+   * If there is only one image, the animation will not be disabled.
+   * 
    * The images must have the same size.
    *
    * @example
    * imagesSrc: [
    *    "https://example.com/image1.png",
    *    "https://example.com/image2.png",
    *    "https://example.com/image3.png",
+   *    "data:image/png;base64,iVBORw0K...",
    * ],
    */
   imagesSrc: string[];
@@ -57,7 +62,7 @@ export type SpriteDefinition = {
    *
    * If not provided, the default value will be used.
    *
-   * If there is only one image, the animation will be disabled.
+   * If there is only one image, the animation will not be disabled.
    *
    * The delay must be greater than 0.
    *

src/utils/positions.ts

@@ -18,8 +18,8 @@ export function getTilePosition(
   };
 
   const tilePosition: TilePosition = {
-    col: relativeMousePosition.x / tileSize,
-    row: relativeMousePosition.y / tileSize,
+    col: relativeMousePosition.y / tileSize,
+    row: relativeMousePosition.x / tileSize,
   };
 
   return tilePosition;
@@ -31,8 +31,8 @@ export function getAbsolutePosition(
   tileSize: number
 ): Position {
   const relativeTilePosition: Position = {
-    x: tilePosition.col * tileSize,
-    y: tilePosition.row * tileSize,
+    x: tilePosition.row * tileSize,
+    y: tilePosition.col * tileSize,
   };
 
   const mousePosition: Position = {
@@ -100,8 +100,8 @@ export function getCameraPositionByTilePosition(
   canvasSize: Size
 ): Position {
   const relativeTilePosition: Position = {
-    x: tilePosition.col * tileSize + tileSize / 2,
-    y: tilePosition.row * tileSize + tileSize / 2,
+    x: tilePosition.row * tileSize + tileSize / 2,
+    y: tilePosition.col * tileSize + tileSize / 2,
   };
 
   const relativeCenterPosition: Position = {
@@ -118,14 +118,14 @@ export function getCameraPositionByTilePosition(
 }
 
 export function getDistance(p1: TilePosition, p2: TilePosition): number {
-  const dx = p1.col - p2.col;
-  const dy = p1.row - p2.row;
+  const dx = p1.row - p2.row;
+  const dy = p1.col - p2.col;
   return Math.sqrt(dx * dx + dy * dy);
 }
 
 export function getDirection(p1: TilePosition, p2: TilePosition): Direction {
-  const dx = p1.col - p2.col;
-  const dy = p1.row - p2.row;
+  const dx = p1.row - p2.row;
+  const dy = p1.col - p2.col;
 
   if (Math.abs(dx) > Math.abs(dy)) {
     return dx > 0 ? 'west' : 'east';

src/utils/sizes.ts

@@ -7,8 +7,8 @@ export function getTileSize(zoom: number, tileSize: number = DEFAULT_TILE_SIZE):
 }
 
 export function getMapSize(mapDimensions: MapDimensions, tileSize: number): Size {
-  const width = mapDimensions.cols * tileSize;
-  const height = mapDimensions.rows * tileSize;
+  const width = mapDimensions.rows * tileSize;
+  const height = mapDimensions.cols * tileSize;
 
   return {
     width,
@@ -23,8 +23,8 @@ export function getMapDimensions(schema?: string[][][]): MapDimensions {
       rows: 0,
     };
   }
-  const cols = schema.length;
-  const rows = schema[0]?.length ?? 0;
+  const rows = schema.length;
+  const cols = schema[0]?.length ?? 0;
 
   const dims: MapDimensions = {
     cols,