Tile Picking Interaction

Tile Picking & Interaction

Overview

Picking is screen->grid with the camera inverse applied first. This skill turns a pointer position into the exact tile under it, with a highlight and hit-test that respects camera pan/zoom.

When to Use

• Clicking selects the wrong tile.
• You need hover highlight or click-to-place.
• Picking ignores camera pan/zoom.

Process

1. Take the pointer position in screen space.
2. Apply the inverse camera transform (see camera-pan-zoom-controls).
3. Apply screen->grid from isometric-grid-math and round to a tile.
4. Clamp the result to map bounds and check walkable if needed.
5. Draw a highlight on the picked tile for feedback.
6. On click, dispatch the tile coord to the gameplay handler.
7. Test picking at multiple zoom levels and pan offsets.

const world = screenToWorld(pointer, cam);
const tile = worldToGrid(world, W, H); // then round

Rationalizations (Stop Lying to Yourself)

Red Flags - STOP if you catch yourself:

• Picking that ignores camera pan/zoom.
• No rounding so edge tiles mis-select.
• No visual highlight feedback.

Verification

You are NOT done until every box is checked:

• Picked tile is correct at any pan and zoom.
• Hover highlight matches the actual selected tile.
• Clicks dispatch the right grid coordinate.