Skip to content

Commit

Permalink
Improve isometric level support and add more demo examples
Browse files Browse the repository at this point in the history
  • Loading branch information
gugiserman committed Nov 11, 2021
1 parent 9ae7145 commit ec02286
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 45 deletions.
Binary file added assets/sprites/iso_grass_darker.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
59 changes: 49 additions & 10 deletions demo/isometricLevel.js
Original file line number Diff line number Diff line change
Expand Up @@ -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),
})
55 changes: 20 additions & 35 deletions src/kaboom.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,

};

Expand Down Expand Up @@ -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.");
}
Expand All @@ -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);
},

Expand All @@ -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) {
Expand All @@ -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]
Expand Down
5 changes: 5 additions & 0 deletions src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}

0 comments on commit ec02286

Please sign in to comment.