Isometric Helper Algorithms

When developing an isometric games/graphics engine, one of the key requirements is the ability to take a pixel on the screen, and figure out to which square in your isometric map that pixel corresponds.

If you are new to working with isometric tiles, figuring out how to do this conversion can be a little frustrating. Many of the solutions you will find on the web are optimised for a particular size of tile, such as 64×32 or 16×16. It is important to realise the ration of the tile’s sides is important in your calculations.

The following algorithms do not represent the most optimal method of conversion, but they have been designed to be relatively agnostic to the size and dimensions of tiles.

Convert Screen Space to Map Space

Inputs

  • float2 screenPoint — The point (pixel/coordinate) in screen space you wish to convert.
  • int tileScreenWidth — The width (in pixels) of a tile in screen space.
  • int tileScreenHeight — The height of a tile in screen space.
  • float2 screenOriginPoint — The top-left most point in screen space of the top-left most tile in map space. Where the tiles start drawing.
  • float2 screenOffset — How far (x/y) screen space has been shifted from the origin point. Used for scrolling.

Outputs

  • float2 mapPoint – The calculated point (grid reference) in map space.
double tw, th, tx, ty;
double sx, sy;

tw = tileScreenWidth;
th = tileScreenHeight;

sx = screenPoint.X - (screenOriginPoint.X + screenOffset.X);
sy = screenPoint.Y - (screenOriginPoint.Y + screenOffset.Y);

tx = Math.Round((sx / tw) + (sy / th)) - 1;
ty = Math.Round((-sx / tw) + (sy / th));

mapPoint.x = tx;
mapPoint.y = ty;

Convert Map Space to Screen Space

Inputs

  • float2 mapPoint – The point (grid reference) in map space you wish to convert.
  • int tileScreenWidth — The width (in pixels) of a tile in screen space.
  • int tileScreenHeight — The height of a tile in screen space.
  • float2 screenOriginPoint — The top-left most point in screen space of the top-left most tile in map space. Where the tiles start drawing.
  • float2 screenOffset — How far (x/y) screen space has been shifted from the origin point. Used for scrolling.

Outputs

  • float2 screenPoint – The calculated point (pixel/coordinate) in screen space.
double tw, th, tx, ty;
double sx, sy;

tw = tileScreenWidth;
th = tileScreenHeight;

tx = mapPoint.X;
ty = mapPoint.Y;

sx = Math.Truncate((tw / 2) * tx - (tw / 2) * ty) + (screenOriginPoint.X + screenOffset.X);
sy = Math.Truncate((th / 2) * tx + (th / 2) * ty) + (screenOriginPoint.Y + screenOffset.Y);

screenPoint.x = sx;
screenPoint.y = sy;

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *