# Scrolling background tiles in an isometric environment?

I'm working on my first game and I've run across an issue, when the character moves around, the "camera" is supposed to follow but I don't know how to make the computer draw only the necessary tiles.

Here is what I currently have

    public void drawBack(Graphics2D g2d) {
int x = mvmt.getX(),
y = mvmt.getY();

int charOffX = mvmt.getCharCamX(),     //the difference between the top
charOffY = mvmt.getCharCamY();     //left corner and where the
//character is drawn

for(
int startCoordX = ????,
startCoordY = ????,
startTileMapX = ????,
startTileMapY = ????;
startTileMapX < width && startCoordX <= 3 * screenWidth;
) {
for(
int drawCoordX = startCoordX,
drawCoordY = startCoordY,
tileMapX = startTileMapX,
tileMapY = startTileMapY;
tileMapY < height && drawCoordY <= screenHeight;
) {
if(tile.getTileMap(tileMapX, tileMapY, 1) == 1) {
g2d.drawImage(tile.getTile(tileMapX, tileMapY), drawCoordX, drawCoordY, 32, 32, null);

}

}

}


I need the tile map to line up with where the character is. Thanks so much in advance, this one really has me scratching my head!

• Can't you just check if the tiles are within the screen and if they are not then don't draw them? – Klemmensen Feb 19 '17 at 16:55
• How do you recommend doing that? – Charlie Landrigan Feb 20 '17 at 0:46
• you can use an inverse isometric function to convert from screen space to iso space for the 4 corners of the screen. Then loop across the relevant isometric tiles. edit: i should add, there is a little more math involved if you want to do it this way because the iso tiles that fit on the screen dont form an axis-aligned quad in isospace. an easier solution would be to step along the screen and pick the tiles. – Kyy13 Jul 20 '18 at 15:31

What I would do is to have a number stored for both width and height of the display in pixel space (which is what j2d works with, makes it easy). You can go about this using the JFrame's getWidth() call. Then, you'll need the player position, which I assume you already have. Then, create a value (let's call it cameraPos) that shows where the top right of the screen is by doing player.getX() - (frame.getWidth() / 2) and the same for the y axis. This is assuming your player is centered on screen. Then, we can finally figure out what to render.

cameraPos.x = player.getX() - (frame.getWidth() / 2);
cameraPos.y = player.getY() - (frame.getHeight() / 2);


Then, you can say something like

if(tile.getX() * tile.getWidth > cameraPos.getX() - tile.getWidth &&
cameraPos.getX + frame.getWidth() < tile.getWidth * tile.getX() + tile.getWidth())
//Do the same for y axis
{

render();

}


If you're asking on how to offset the tiles, just subtract the cameraPos from whatever tile you're drawing.

• Keep in mind that executing that if-statement for every tile of a very large map which is mostly offscreen can take considerable CPU time. So if you want to support large maps on low-spec hardware, then you might still want to use a for-loop to limit the checking to those tiles which at least have a chance to be on-screen. – Philipp Mar 29 '19 at 14:27