By name: tile-picking-interaction description: Use when converting a mouse/touch position into the correct isometric tile for selection, highlighting, and placement. license: MIT
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
- Take the pointer position in screen space.
- Apply the inverse camera transform (see
camera-pan-zoom-controls). - Apply screen->grid from
isometric-grid-mathand round to a tile. - Clamp the result to map bounds and check walkable if needed.
- Draw a highlight on the picked tile for feedback.
- On click, dispatch the tile coord to the gameplay handler.
- 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)
| Excuse | Reality |
|---|---|
| "I will skip the camera inverse" | Then picking breaks the moment you pan/zoom. Always invert. |
| "No need to highlight" | Players need feedback on what they will click. Highlight. |
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.