From ec0228682772ff54b2c3b3714dc4b10abc4c4b5c Mon Sep 17 00:00:00 2001 From: Gustavo Giserman Date: Wed, 10 Nov 2021 23:54:30 -0300 Subject: [PATCH] Improve isometric level support and add more demo examples --- assets/sprites/iso_grass_darker.png | Bin 0 -> 2437 bytes demo/isometricLevel.js | 59 +++++++++++++++++++++++----- src/kaboom.ts | 55 ++++++++++---------------- src/types.ts | 5 +++ 4 files changed, 74 insertions(+), 45 deletions(-) create mode 100644 assets/sprites/iso_grass_darker.png diff --git a/assets/sprites/iso_grass_darker.png b/assets/sprites/iso_grass_darker.png new file mode 100644 index 0000000000000000000000000000000000000000..596fa6e4f28aa333e994c3a2ce5e33639e5554b8 GIT binary patch literal 2437 zcmcgue{2&~9KUuOY(-4Fb;iwVuD79X;d;N??s`zzkIr?3;@GN;`6ImDUAvREclK`V zM>Ih)%rJuGN6;aLMTQ1{0KuQ2IDdf@5O9h{5R=IOMbU_YqQUsC>na#f;vY7>-n;ic z@ALh9KkxhAbxFglx{0P@6M`TU>;1k)cu&BqE_WRK{rbWE1ia-b{<$iGOeoMV1F~lA z^$0R2r_kgrvmu-qK3ALVJYUtet2ULLnXnB&2a_D zfKns2N&fD**wj5M$al}@Jpwj;8alO;g9K4g188S75>vTOFP7rvU|a7dFf;|x=6kU! zJs{c~Xh3V^xQMzPB+iqh8?Ep-D7Ul1#Y{$NlBNifCMXw9QJjnBCW^gt$iE zZRuF>$&0mVn!*u8M@NUFgK^05FhO}d9-V`xafraxu9yZo@t9gN#^4iGJ}xPmB*##l z5wyzfniqpgM^lI@8QPedwh0BGDtI=lj5jLp|EHKpn-n{3p^K+<52)pmZBgm5=tzLp&28&8aX1z zVPL3^xwyZ+rluh-holG`P#f#2(fZmNH|24=aoRzp+-zW3!dJ*XJNB4su^N`~&c|36QPKE_I z%ZeUc@Hkz#ha>?mup(8#x&;xCtz&Gr$0fKWLF8gqU6lYCX(!LO@*xptgbD_CvQ8TJ zxLg#@Fiu)vNStp!d31{Z>1*j{&XuMp{erW0IzQgFUITjAPQKzTe^%N zR~0!uzoSirr2kMQqtR74q;-I}SQUoeT}2%dSCX%S1^+DGEiyD!;f7{;M1VsNN!-H- z0Czco$g_;gP4n)t_ntIbiJ|7$vge!z~_8S(cL zOpRT17{kR(b-@!}Z)RRC@FDYZ5@XP*IDGZAeS2~$f*9crtqOLoJ^e*p>^;(2JG=bg zR_4Irt>xi)Z#Ms7FMOo+{PClGIfX5(GW*E1!NL5!=gga5o3y^+%eT4_(@JGTtLA)_ zn`bC9ezG)T{i{w5uUb7}Vj10kC%fTnPmk5oK)}Ysi>!GEZ)G=}?pbIx9Gnar+aDe& zI#|xqpCzUmhm3V6@>kqa*)qKQ?y57$Zj-HVf`7GP?&1<=ViH3MMY!2M*EmwRY@fAs z!osKDUf#EGpr|3p(uWdGBewQ|a=T>ovF#fd4H(SBFK;jo&8Y18_}LAKI}vOxg+Jsh zFc0sO$_I)T=7s}J=+bN-%N3iXZ1mlaJ~#Wl2FtRg+pA9*dX>nhIYT#A_8eP(SE2>6 zEIY6Uy~p5VsqNVt$C-!Uf59|VguV;PE@YLB?^T*NO&;(vS$ud$)!~BSEwA2G<~2k= z$b0mTbHC^P?6zC-r)>W92LJv_|98!22gz-Sednh0Y~pT%edlvWmbY!Iu0C^giwfdd zJtNOc;bX_gMW#$>5YC^By~C7rer zgL$hlnPVHtGY^@Pg|-okdB~WYWE&|mx8x*UHmkwBCZ{ahX3aAf=agA(R*U&mPFbnV xT4cU&v9 - 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), }) diff --git a/src/kaboom.ts b/src/kaboom.ts index c9817887d..f76251bbe 100644 --- a/src/kaboom.ts +++ b/src/kaboom.ts @@ -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,8 +2537,7 @@ 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); @@ -2574,11 +2545,25 @@ function addIsometricLevel(map: string[], options: IsometricLevelOpt): Isometric 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] diff --git a/src/types.ts b/src/types.ts index 5e8012d4a..288cb38c3 100644 --- a/src/types.ts +++ b/src/types.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, }