Skip to content

Commit

Permalink
fix: properly get/set clicked tile position
Browse files Browse the repository at this point in the history 
get clicked tile position by checking if it's within the bounds of each tile in the viewport.
  • Loading branch information
@seifer8ff
seifer8ff committed Jun 13, 2024
1 parent 52f695c commit 2443c12
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 366 deletions.
188 changes: 20 additions & 168 deletions dist/app.js
View file

Large diffs are not rendered by default.

157 changes: 13 additions & 144 deletions src/camera.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -426,155 +426,24 @@ export class Camera {
}
// this.ui.components.tileSelectionIndicator.handleClick(x, y);
const tilePos = this.screenToTilePos(x, y);

this.selectTileAt(tilePos.x, tilePos.y);
if (tilePos) {
this.selectTileAt(tilePos.x, tilePos.y);
}
};

public screenToTilePos(x: number, y: number): Point {
// offset from center of viewport/container
const scale = this.ui.gameDisplay.stage.scale.x;
const pivot = this.ui.gameDisplay.stage.pivot;
const viewport = this.viewportUnpadded;
// calculate initial pivot based on map size and tile size
const screenCenterX = this.ui.gameCanvasContainer.clientWidth / 2;
const screenCenterY = this.ui.gameCanvasContainer.clientHeight / 2;
const pivotX = pivot.x;
const pivotY = pivot.y;

const centerTileX = viewport.center.x;
const centerTileY = viewport.center.y;
const centerTileScreenX = centerTileX * Tile.size;
const centerTileScreenY = centerTileY * Tile.size;
console.log("centerScreenX", centerTileScreenX);
const pivotDiffX = pivotX - centerTileScreenX;
const pivotDiffY = pivotY - centerTileScreenY;
console.log("pivotDiffX", pivotDiffX);

// const pixelOffsetFromTileCenter = pivot.x % Tile.size;
// console.log("pixel offset from tile center", pixelOffsetFromTileCenter);

// take into account how offset the stage is from the center of the tile
console.log(
"calculate offset, pivot, tile size, scale",
pivot.x,
Tile.size,
scale
);

const screenCenterXScaled = (screenCenterX - pivotDiffX) / scale;
const screenCenterYScaled = (screenCenterY - pivotDiffY) / scale;
const scaledClickOffsetX = x / scale - screenCenterXScaled;
const scaledClickOffsetY = y / scale - screenCenterYScaled;

const tileOffsetX = Math.round(scaledClickOffsetX / Tile.size);
const tileOffsetY = Math.round(scaledClickOffsetY / Tile.size);
const tileX = viewport.center.x + tileOffsetX;
const tileY = viewport.center.y + tileOffsetY;
return new Point(tileX, tileY);
for (const key of this.viewportTilesUnpadded) {
const point = MapWorld.keyToPoint(key);
const sprite = this.game.renderer.getFromCache(point, Layer.TERRAIN);
if (sprite) {
const bounds = sprite.getBounds();
if (bounds.contains(x, y)) {
return point;
}
}
}
}

// public screenToTilePos(x: number, y: number): Point {
// // offset from center of viewport/container
// const scale = this.ui.gameDisplay.stage.scale.x;
// const pivot = this.ui.gameDisplay.stage.pivot;
// const viewport = this.getViewportInTiles(false);
// // calculate initial pivot based on map size and tile size
// const initialPivotX = (this.game.gameSize.width * Tile.size) / 2;
// const initialPivotY = (this.game.gameSize.height * Tile.size) / 2;
// const screenCenterX = this.ui.gameCanvasContainer.clientWidth / 2;
// const screenCenterY = this.ui.gameCanvasContainer.clientHeight / 2;
// const pivotX = pivot.x;
// const pivotY = pivot.y;

// const centerTileX = viewport.center.x;
// const centerTileY = viewport.center.y;
// const centerScreenX = centerTileX * Tile.size;
// const centerScreenY = centerTileY * Tile.size;
// console.log("centerScreenX", centerScreenX);
// const pivotDiffX = pivotX - centerScreenX;
// const pivotDiffY = pivotY - centerScreenY;
// console.log("pivotDiffX", pivotDiffX);

// // const pixelOffsetFromTileCenter = pivot.x % Tile.size;
// // console.log("pixel offset from tile center", pixelOffsetFromTileCenter);

// // take into account how offset the stage is from the center of the tile
// console.log(
// "calculate offset, pivot, tile size, scale",
// pivot.x,
// Tile.size,
// scale
// );

// const screenCenterXScaled = (screenCenterX - pivotDiffX) / scale;
// const screenCenterYScaled = (screenCenterY - pivotDiffY) / scale;
// const scaledClickOffsetX = x / scale - screenCenterXScaled;
// const scaledClickOffsetY = y / scale - screenCenterYScaled;

// const tileOffsetX = Math.round(scaledClickOffsetX / Tile.size);
// const tileOffsetY = Math.round(scaledClickOffsetY / Tile.size);
// const tileX = viewport.center.x + tileOffsetX;
// const tileY = viewport.center.y + tileOffsetY;
// return new Point(tileX, tileY);
// }

// public screenToTilePos(x: number, y: number): Point {
// // offset from center of viewport/container
// const scale = this.ui.gameDisplay.stage.scale.x;
// const pivot = this.ui.gameDisplay.stage.pivot;
// const viewport = this.getViewportInTiles(false);
// let centerX = this.ui.gameCanvasContainer.clientWidth / 2;
// const centerY = this.ui.gameCanvasContainer.clientHeight / 2;
// // take into account how offset the stage is from the center of the tile

// const pixelOffsetFromTileCenter = pivot.x % Tile.size;
// console.log("pixel offset from tile center", pixelOffsetFromTileCenter);
// // const scaledTileSizeX = Tile.size / scale;
// // const centerTileOffsetX =
// // ((pivot.x * 100000) % Math.round(Tile.size * 100000)) / 100000;

// const centerTileOffsetY = pivot.y % (Tile.size / scale);
// const centerTileOffsetX = pixelOffsetFromTileCenter;
// console.log("centerTileOffsetX", centerTileOffsetX);
// console.log("pivotX, scaledtilesize, ", pivot.x, Tile.size / scale);
// centerX -= centerTileOffsetX;

// const centerXScaled = centerX / scale;
// const centerYScaled = centerY / scale;
// const scaledClickOffsetX = (x + centerTileOffsetX) / scale - centerXScaled;
// const scaledClickOffsetY = (y - centerTileOffsetY) / scale - centerYScaled;
// // console.log("scaledClickOffsetX", scaledClickOffsetX);

// const tileOffsetX = Math.round(scaledClickOffsetX / Tile.size);
// const tileOffsetY = Math.round(scaledClickOffsetY / Tile.size);
// const tileX = viewport.center.x + tileOffsetX;
// const tileY = viewport.center.y + tileOffsetY;
// return new Point(tileX, tileY);
// }

// public screenToTilePos(x: number, y: number): Point {
// // offset from center of viewport/container
// const scale = this.ui.gameDisplay.stage.scale.x;
// const pivot = this.ui.gameDisplay.stage.pivot;
// const viewport = this.getViewportInTiles(false);
// const centerX = this.ui.gameCanvasContainer.clientWidth / 2;
// const centerY = this.ui.gameCanvasContainer.clientHeight / 2;
// // take into account how offset the stage is from the center of the tile
// const centerTileOffsetX = pivot.x % Tile.size;
// const centerTileOffsetY = pivot.y % Tile.size;

// const centerXScaled = centerX / scale;
// const centerYScaled = centerY / scale;
// const scaledClickOffsetX = (x - centerTileOffsetX) / scale - centerXScaled;
// const scaledClickOffsetY = (y - centerTileOffsetY) / scale - centerYScaled;

// const tileOffsetX = Math.round(scaledClickOffsetX / Tile.size);
// const tileOffsetY = Math.round(scaledClickOffsetY / Tile.size);
// const tileX = viewport.center.x + tileOffsetX;
// const tileY = viewport.center.y + tileOffsetY;
// return new Point(tileX, tileY);
// }

private handlePanStart = (g: TinyGesture) => {
// console.log("pan start", g.velocityX, g.velocityY);
// console.log(
Expand Down
54 changes: 0 additions & 54 deletions src/web-components/indicator-tile-selection.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,58 +142,4 @@ export class IndicatorTileSelection extends HTMLElement {
this.isVisible = visible;
this.style.display = visible ? "block" : "none";
}

public handleClick(x: number, y: number) {
console.log("handle click", x, y);
const clickedPos = this.screenToTilePos(x, y);
console.log("clicked pos", clickedPos);
const clickedTile = this.game.map.getTile(clickedPos.x, clickedPos.y);
console.log("clicked tile", clickedTile);
this.game.map.setTile(clickedPos.x, clickedPos.y, Tile.shrub);
}

public screenToTilePos(x: number, y: number): Point {
// offset from center of viewport/container
const scale = this.game.userInterface.gameDisplay.stage.scale.x;
const pivot = this.game.userInterface.gameDisplay.stage.pivot;
const viewport = this.game.userInterface.camera.getViewport().padded;
// calculate initial pivot based on map size and tile size
const screenCenterX =
this.game.userInterface.gameCanvasContainer.clientWidth / 2;
const screenCenterY =
this.game.userInterface.gameCanvasContainer.clientHeight / 2;
const pivotX = pivot.x;
const pivotY = pivot.y;

const centerTileX = viewport.center.x;
const centerTileY = viewport.center.y;
const centerTileScreenX = centerTileX * Tile.size;
const centerTileScreenY = centerTileY * Tile.size;
console.log("--- centerScreenX", centerTileScreenX);
const pivotDiffX = pivotX - centerTileScreenX;
const pivotDiffY = pivotY - centerTileScreenY;
console.log("--- pivotDiffX", pivotDiffX);

// const pixelOffsetFromTileCenter = pivot.x % Tile.size;
// console.log("pixel offset from tile center", pixelOffsetFromTileCenter);

// take into account how offset the stage is from the center of the tile
console.log(
"--- calculate offset, pivot, tile size, scale",
pivot.x,
Tile.size,
scale
);

const screenCenterXScaled = (screenCenterX - pivotDiffX) / scale;
const screenCenterYScaled = (screenCenterY - pivotDiffY) / scale;
const scaledClickOffsetX = x / scale - screenCenterXScaled;
const scaledClickOffsetY = y / scale - screenCenterYScaled;

const tileOffsetX = Math.round(scaledClickOffsetX / Tile.size);
const tileOffsetY = Math.round(scaledClickOffsetY / Tile.size);
const tileX = viewport.center.x + tileOffsetX;
const tileY = viewport.center.y + tileOffsetY;
return new Point(tileX, tileY);
}
}

0 comments on commit 2443c12

Please sign in to comment.