Can't seem to figure out how to make my map view scroll...

Hey,

I’ve just about completed the code that renders a map to the JFrame but I can’t seem to figure out how to make the map scroll as the player moves along it. I’ve got everything else working as far as I know (not rendering what’s outside the view, rendering tiles, etc…).

Could someone take a look at the code below and see if you can see what I might need to do to get the map to move with the player? I’m taking out the huge switch statement but the main code will be below.

package valkryst.area.map;

import java.awt.Graphics;

import valkryst.area.Area;
import valkryst.area.AreaLoader;
import valkryst.area.map.tile.GrassTile;
import valkryst.area.map.tile.VoidTile;
import valkryst.core.graphics.Frame;
import valkryst.entity.Player;

/**
 * This class adds the map to the pixel array that will be rendered onto the screen.
 * 
 * @author Valkryst
 * --- Last Edit 11-Oct-2013
 */
public class RenderMap {
	private static VoidTile voidTile = new VoidTile();
	private static GrassTile grassTile = new GrassTile();
	
     /**
	 * Renders the map to the canvas.
	 * @param g The graphics object to use to render things to the canvas with.
	 * @param area The area that the player is currently in.
	 * @param p The player.
	 * @param width The width of the canvas.
	 * @param height The height of the canvas.
	 */
	public static void render(final Graphics g, final Area area, final Player p, final int width, final int height) {
		if(width > 0 && height > 0) { // If there is no room on the screen to render the map then don't bother rendering it.
			for(int y = 0 + (int)p.getTileY() - 1; y < (int)p.getTileY() + (height >> 5) + 2; y++) {
				for(int x = 0 + (int)p.getTileX() - 1; x < (int)p.getTileX() + (width >> 5) + 2; x++) {
					try {
						switch(AreaLoader.toArray()[y].substring(x, x+1)) {
							case "A": {
								g.drawImage(grassTile.getTileImage(), x * 32 * Frame.SCALE, y * 32 * Frame.SCALE, null);
								break;
							}
                                                        // Cut out about a hundred lines of switch statement.
							default: {
								g.drawImage(voidTile.getTileImage(), x * 32 * Frame.SCALE, y * 32 * Frame.SCALE, null);
							} 
						}
					} catch(Exception e) {
						continue;
					}
				}
			}
		}
	}
}

The player moves in pixels and every time the player moves 32 pixels the tileX and tileY change.
tileX and tileY represent where the player is on the map.
height and width are the height and width of the canvas.

Thanks for any replies.

You need a starting coordinate to start drawing your tiles. Then you can move that point around, and reference it when drawing your tiles.

So, When you move the player by X, you move that point by -X. Of course, all your tiles need to be drawn relative to that point.

Alright, so let’s assume I set the starting coords to the tile at (0,0) and that the player is currently standing at (5,5). Now, the player moves to the tile to the right which puts him at (6,5). This is what I assume you’re saying so-far and it makes sense.

Now, to move the entire map +1 to the right where on my for loops would I place the “xOffset” which will be assumed to be +1 to the xOffset to make it move like this? I’m thinking it would go something like this…

for(int y = yOffset + (int)p.getTileY() - 1; y < (int)p.getTileY() + (height >> 5) + 2; y++) {
            for(int x = xOffset + (int)p.getTileX() - 1; x < (int)p.getTileX() + (width >> 5) + 2; x++) {

But I can’t test that until I alter my entire program to work with the offsets.

The offset is applied to the final position that you draw each tile.

g.drawImage(grassTile.getTileImage(), x * 32 * Frame.SCALE, y * 32 * Frame.SCALE, null);

I guess that’s where it is. If you are scrolling the map by tile size, then you’d scale the offset by 32.

That seemed to do the trick. Thanks for the help!