From 58993390a752ef340e9344edec276a9d27dd9000 Mon Sep 17 00:00:00 2001 From: Gustavo Giserman Date: Wed, 10 Nov 2021 17:35:38 -0300 Subject: [PATCH] Refactor isometric grid rendering --- demo/isometricLevel.js | 6 ++---- src/kaboom.ts | 23 +++++++++++++---------- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/demo/isometricLevel.js b/demo/isometricLevel.js index 956a50e1..371dc781 100644 --- a/demo/isometricLevel.js +++ b/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([ "@@@@@@@@@", "@@@@@@@@@@", "@@@@@@@@@@@", - "@@@@@@@@@@@@", - "@@@@@@@@@@@@@", - "@@@@@@@@@@@@", - "@@@@@@@@@@@", "@@@@@@@@@@", "@@@@@@@@@", "@@@@@@@@", diff --git a/src/kaboom.ts b/src/kaboom.ts index dc8a1917..0c33b25e 100644 --- a/src/kaboom.ts +++ b/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); } }