Hi all, my question is about how I would best go about rendering a scene of isometric tiles, while not attempting to render tiles outside of the viewport.
What I currently have is a 15x15 array of tiles, that I’m using nested for loops to cycle through. I’m transforming the position of each tile using the formula below and rendering them to the screen:
int isoX = (x - y) / 2;
int isoY = x + y;
display.drawImage(isoX * TILEWIDTH, isoY * (TILEHEIGHT >> 1), TILEWIDTH, TILEHEIGHT);
This renders as expected as a diamond shape, with +X leading to the bottom right and +Y leading to the bottom left. This is illustrated by the image below:
This issue is that I’m completely stumped about how I would go about rendering a square of tiles, with the ability to clip tiles that aren’t within the viewport. Notice the large black areas in the image above.
I like the idea of rendering a diamond shaped map, although ideally, rather than not rendering a tile at all, I’d like to loop over (somehow) the area that this tile would occupy and set it to render a default or “edge of map” tile, such as a boundary defining tile like impassable trees.
If this is possible, then I’m hoping that it wouldn’t be that greater stretch to use this information to then decide which tiles lie outside of the viewport.
I’ve looked through a few tutorials, although my understanding of this area is very sketchy. Would anyone mind walking me through how I could achieve these goals logically?