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?


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

  • \$\begingroup\$ Oh thank you very much, this offset was missing, but it somehow scrolls very weird. dl.dropboxusercontent.com/u/13341521/scroll.mp4 \$\endgroup\$ – Raildex Jun 25 '15 at 12:11
  • \$\begingroup\$ I see two problems. The first is that it looks like the offset is reversed - you're adding it instead of subtracting it. Also, you didn't modify the end condition of your loop. You need to draw tile_number + num_visible, not just num_visible as it still assumes your loop begins at tile_num 0. \$\endgroup\$ – Sandalfoot Jun 25 '15 at 17:47
  • \$\begingroup\$ Thank you for your help, but the problem remains unsolved. My method now looks like this: pastebin.com/dVWZyUeq \$\endgroup\$ – Raildex Jun 25 '15 at 21:02
  • \$\begingroup\$ You're calculating a negative offset and then subtracting it from the draw coordinates instead of adding it. That's what's giving you the reversed offset adjustment. Change lines 18 and 19 to "+ offsetX", or just remove the - signs from your offset calculation. \$\endgroup\$ – Sandalfoot Jun 25 '15 at 21:10
  • 1
    \$\begingroup\$ Possibly. At this point you're going to have to dig in and do some debugging to see where the problem lies. I'd definitely start with that method. Also, you are calculating the number of vertically visible rows using view.getWidth() instead of view getHeight() - which isn't even really necessary because you're not trying to draw across the entire height of the screen. \$\endgroup\$ – Sandalfoot Jun 25 '15 at 21:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.