Refactor isometric grid rendering

demo/isometricLevel.js

@@ -7,6 +7,8 @@ kaboom()
 loadSprite("grass", "/sprites/iso_grass.png")
 
 gravity(0)
+camScale(0.4)
+camPos(-400, 200)
 
 const level = addIsometricLevel([
 	// Design the level layout with symbols
@@ -21,10 +23,6 @@ const level = addIsometricLevel([
 	"@@@@@@@@@",
 	"@@@@@@@@@@",
 	"@@@@@@@@@@@",
-	"@@@@@@@@@@@@",
-	"@@@@@@@@@@@@@",
-	"@@@@@@@@@@@@",
-	"@@@@@@@@@@@",
 	"@@@@@@@@@@",
 	"@@@@@@@@@",
 	"@@@@@@@@",

src/kaboom.ts

@@ -2508,8 +2508,8 @@ function addIsometricLevel(map: string[], options: IsometricLevelOpt): Isometric
 	const objects: GameObj[] = [];
 	const offset = vec2(options.pos || vec2(0));
 
-	const halfTileWidth = options.tileWidth / 2;
-	const halfTileHeight = options.tileHeight / 2;
+	const halfTileWidth = Math.floor(options.tileWidth / 2);
+	const halfTileHeight = Math.floor(options.tileHeight / 2);
 
 	const maxWidthInTiles = map.reduce((width, row): number => Math.max(width, row.length), 0)
 	const heightInTiles = map.length;
@@ -2527,7 +2527,7 @@ function addIsometricLevel(map: string[], options: IsometricLevelOpt): Isometric
 			return options.tileHeight;
 		},
 
-		fromIsometricCoordinatesToScreenPos: (row: number, col: number): Vec2 => {
+		fromIsometricGridCoordsToScreenPos: (row: number, col: number): Vec2 => {
 			return vec2((col - row) * halfTileWidth, (col + row) * halfTileHeight);
 		},
 
@@ -2575,17 +2575,20 @@ function addIsometricLevel(map: string[], options: IsometricLevelOpt): Isometric
 		},
 	};
 
+	// const hitbox = [
+	//   new PIXI.Point(0, -tile.halfHeight),
+	//   new PIXI.Point(tile.width - tile.halfWidth, 0),
+	//   new PIXI.Point(0, tile.halfHeight),
+	//   new PIXI.Point(-tile.halfWidth, 0),
+	// ]
+
 	for (let row = 0; row < heightInTiles; row++) {
 		for (let col = 0; col < maxWidthInTiles; col++) {
-			const position = isometricLevel.fromIsometricCoordinatesToScreenPos(row, col);
-			const index = isometricLevel.from2dTo1dIndex(row, col);
-			const symbols: string = map[index] || '';
+			const position = isometricLevel.fromIsometricGridCoordsToScreenPos(row, col);
+			const rowContent: string = map[row]
+			const symbols: string[] = rowContent.split("");
 			const symbol = symbols[col]
 
-			if (!symbol) {
-				break
-			}
-
 			isometricLevel.spawn(position, symbol);
 		}
 	}