Improve isometric level support and add more demo examples

Author: gugiserman

assets/sprites/iso_grass_darker.png

@@ -5,26 +5,65 @@ kaboom()
 
 // Load assets
 loadSprite('grass', '/sprites/iso_grass.png')
+loadSprite('darker_grass', '/sprites/iso_grass_darker.png')
 
 gravity(0)
-camScale(0.4)
-camPos(vec2(0, 400))
-
-const GRID_LENGTH = 15
+camScale(0.33)
+camPos(vec2(100, 1000))
 
 const level = addIsometricLevel([
-	// Design the level layout with symbols
-	...Array.from({ length: GRID_LENGTH }).map(() =>
-		Array.from({ length: GRID_LENGTH }).map(() => '@').join('')
-	)
+	// Design the isometric level layout with symbols
+	// 15x15 grid in this case so we have a perfect tiled square diamond shaped map
+	'@@@@@@@@@@@@@@@',
+	'@@@@@@@@@@@@@@@',
+	'@@@@@@@@@@@@@@@',
+	'@@@@!@@@@!@@@@@',
+	'@@@@@@@@@@@@@@@',
+	'@@@@@@@@@@@@@@@',
+	'@@@@@!@@@!@@@@@',
+	'@@@@@@!!!@@@@@@',
+	'@@@@@@@@@@@@@@@',
+	'@@@@@@@@@@@@@@@',
+	'@@@@@@@@@@@@@@@',
+	'@@@@@@@@@@@@@@@',
+	'@@@@@@@@@@@@@@@',
+	'@@@@@@@@@@@@@@@',
+	'@@@@@@@@@@@@@@@',
 ], {
 	// 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('darker_grass'),
+	],
+})
+
+const level2 = addIsometricLevel([
+	// 15x9 grid
+	'@@@@@@@@@@@@@@@',
+	'@@@@@@@@@@@@@@@',
+	'@@@@@@@!@@@@@@@',
+	'@@@@@@@!@@@@@@@',
+	'@@@@@@@!@@@@@@@',
+	'@@@@@@@!@@@@@@@',
+	'@@@@@@@!@@@@@@@',
+	'@@@@@@@@@@@@@@@',
+	'@@@@@@@!@@@@@@@',
+	'@@@@@@@@@@@@@@@',
+	'@@@@@@@@@@@@@@@',
+], {
+	tileWidth: 144,
+	tileHeight: 71,
+	'@': () => [
+		sprite('grass'),
+	],
+	'!': () => [
+		sprite('darker_grass'),
+	],
+	// The position of the top left block
+	pos: vec2(0, 1200),
 })

demo/isometricLevel.js

@@ -2359,31 +2359,7 @@ function isometricGrid(isometricLevel: IsometricLevel, position: Vec2) {
 
 		id: "isometricGrid",
 		gridPos: position.clone(),
-
-		setGridPos(...args) {
-			const p = vec2(...args);
-			this.gridPos = p.clone();
-			this.pos = vec2(
-				isometricLevel.offset().x + this.gridPos.x * isometricLevel.gridWidth(),
-				isometricLevel.offset().y + this.gridPos.y * isometricLevel.gridHeight()
-			);
-		},
-
-		moveLeft() {
-			this.setGridPos(this.gridPos.add(vec2(-1, 0)));
-		},
-
-		moveRight() {
-			this.setGridPos(this.gridPos.add(vec2(1, 0)));
-		},
-
-		moveUp() {
-			this.setGridPos(this.gridPos.add(vec2(0, -1)));
-		},
-
-		moveDown() {
-			this.setGridPos(this.gridPos.add(vec2(0, 1)));
-		},
+		level: isometricLevel,
 
 	};
 
@@ -2497,10 +2473,6 @@ function addLevel(map: string[], opt: LevelOpt): Level {
 }
 
 function addIsometricLevel(map: string[], options: IsometricLevelOpt): IsometricLevel {
-	if (map.length % 2 === 0) {
-		throw new Error("Must provide isometric level map array of odd length.")
-	}
-
 	if (!options.tileWidth || !options.tileHeight) {
 		throw new Error("Must provide isometric level tile width & height.");
 	}
@@ -2527,7 +2499,7 @@ function addIsometricLevel(map: string[], options: IsometricLevelOpt): Isometric
 			return options.tileHeight;
 		},
 
-		fromIsometricGridCoordsToScreenPos: (row: number, col: number): Vec2 => {
+		fromIsometricCoordsToScreenPos: (row: number, col: number): Vec2 => {
 			return vec2((col - row) * halfTileWidth, (col + row) * halfTileHeight);
 		},
 
@@ -2552,8 +2524,8 @@ function addIsometricLevel(map: string[], options: IsometricLevelOpt): Isometric
 			}
 
 			const posComp = vec2(
-				offset.x + position.x * options.tileWidth,
-				offset.y + position.y * options.tileHeight
+				offset.x + position.x,
+				offset.y + position.y,
 			);
 
 			for (const comp of comps) {
@@ -2565,20 +2537,33 @@ function addIsometricLevel(map: string[], options: IsometricLevelOpt): Isometric
 				}
 			}
 
-			comps.push(origin(vec2(0.5, 0.5)));
-			comps.push(pos(position));
+			comps.push(pos(posComp));
 			comps.push(isometricGrid(this, position));
 
 			const object = add(comps);
 			objects.push(object);
 
 			return object;
 		},
+
+		width() {
+			return maxWidthInTiles * options.tileWidth;
+		},
+
+		height() {
+			return heightInTiles * options.tileHeight;
+		},
+
+		destroy() {
+			for (const someObject of objects) {
+				destroy(someObject);
+			}
+		},
 	};
 
 	for (let row = 0; row < heightInTiles; row++) {
 		for (let col = 0; col < maxWidthInTiles; col++) {
-			const position = isometricLevel.fromIsometricGridCoordsToScreenPos(row, col);
+			const position = isometricLevel.fromIsometricCoordsToScreenPos(row, col);
 			const rowContent: string = map[row]
 			const symbols: string[] = rowContent.split("");
 			const symbol = symbols[col]

src/kaboom.ts

@@ -3845,4 +3845,9 @@ export interface IsometricLevel {
 	gridWidth(): number,
 	gridHeight(): number,
 	offset(): Vec2,
+	fromIsometricCoordsToScreenPos(row: number, col: number): Vec2,
+	from2dTo1dIndex(row: number, col: number): number,
+	width(): number,
+	height(): number,
+	destroy(): void,
 }