Refactor isometric grid rendering

demo/isometricLevel.js

@@ -4,45 +4,25 @@
 kaboom()
 
 // Load assets
-loadSprite("grass", "/sprites/iso_grass.png")
+loadSprite('grass', '/sprites/iso_grass.png')
 
 gravity(0)
+camScale(0.2)
+camPos(-400, 200)
+
+const GRID_LENGTH = 15
 
 const level = addIsometricLevel([
 	// Design the level layout with symbols
-	"@",
-	"@@",
-	"@@@",
-	"@@@@",
-	"@@@@@",
-	"@@@@@@",
-	"@@@@@@@",
-	"@@@@@@@@",
-	"@@@@@@@@@",
-	"@@@@@@@@@@",
-	"@@@@@@@@@@@",
-	"@@@@@@@@@@@@",
-	"@@@@@@@@@@@@@",
-	"@@@@@@@@@@@@",
-	"@@@@@@@@@@@",
-	"@@@@@@@@@@",
-	"@@@@@@@@@",
-	"@@@@@@@@",
-	"@@@@@@@",
-	"@@@@@@",
-	"@@@@@",
-	"@@@@",
-	"@@@",
-	"@@",
-	"@",
+	...Array.from({ length: GRID_LENGTH }).map(() => Array.from({ length: GRID_LENGTH }).map(() => '@').join(''))
 ], {
 	// The size of each grid
 	tileWidth: 144,
 	tileHeight: 71,
 	// The position of the top left block
 	// pos: vec2(100, 200),
 	// Define what each symbol means (in components)
-	"@": () => [
-		sprite("grass"),
+	'@': () => [
+		sprite('grass'),
 	],
 })

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);
 		},
 
@@ -2577,15 +2577,11 @@ function addIsometricLevel(map: string[], options: IsometricLevelOpt): Isometric
 
 	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);
 		}
 	}