How to only render whats on screen (Tilemap, Java2D)

Question

I have some problems with my rendering of a 2Dimensional Map.

for (int col = 0; col <= view.getWidth () / Tile.TILE_SIZE; col ++)
    {
        for (int row = 0; row <= view.getHeight () / Tile.TILE_SIZE; row ++)
        {
            if (checkBounds ((int) topLeftX + col, (int) topLeftY + row))
            {//tiles is an array of Tiles, tiles1 is the mapData
                g.drawImage ((tiles[tiles1[(int) topLeftX + col][(int) topLeftY + row]].getImage ()), col * Tile.TILE_SIZE, row * Tile.TILE_SIZE, null);
            }
        }
    }

But the scrolling of the map is not smooth (tiles move in a TILE_SIZE distance and not with pixelmovement).

Someone has an idea on how to solve this?

Answer 1

You need a finer-grained method of moving your viewport. What you're doing now is essentially moving it by the size of a single tile every time you scroll, when what you want is a smaller increment.

You do this by using a camera object represented by an x, y coordinate. Update its position with your scrollIncrement, then use that as the starting point for the row/col variables of your loop. By dividing/modding the coordinate by the size of your tile, you will get the data you need.

For example;

row = camera.y / TILE_SIZE;
col = camera.x / TILE_SIZE;

offsetX = -camera.x % TILE_SIZE;
offsetY = -camera.y % TILE_SIZE;

Then you start your render loop at row, col and offset the rendering of each tile by offsetX and offsetY, rendering a number of tiles equal to (in your case) screenWidth / TILE_SIZE. That should give you the effect you want.

To clarify that last bit, your columns for-loop should look something like this;

for (int col = starting_tile; col++; col < starting_tile + (screenWidth / TILE_SIZE)

Also relevant:

How to Use World Coordinates