Tile based scrolling advice

Java 2D
#1

Hi everyone,
I’ve got a game I’m trying to make. What I have so far is a sort of 200 by 200 tile map inside my level class, set up like this:


byte[] tiles = new byte[200 * 200];

This then populates the map with the grass tile:


for(int y = 0; y < MAP_HEIGHT; y++)
{
	for(int x = 0; x < MAP_WIDTH; x++)
	{
		tiles[y * MAP_WIDTH + x] = Grass.id;
	}
}

Then the render method in my level class, which sets all the pixels to the screen is set out like this:


	public void render(Screen screen)
	{
		int xx = player.getXCoord() - 5;
		int yy = player.getYCoord() + 5;
		
		for(int y = 0; y < 11; y++)
		{
			for(int x = 0; x < 11; x++)
			{
				int tileId = tiles[yy * MAP_WIDTH + xx];
				
				if(tileId == Grass.id)
				{
					s.drawTile(Grass.spriteSheetCoords(), x * 8, y * 8);
				}
				
				xx++;
			}
			yy--;
			xx -= 11;
		}
	}

Ignoring for the moment the blatant inefficiencies in the code above, I’m just wonder how I would go about creating a scrolling effect for walking?
What’s confusing me at the moment is that the tiles array maps things out in tiles, which are 8 by 8 icon sized images extracted from a spritesheet, which is how I’m rendering them to the screen. Although the player’s coordinates are in pixels, so when the player moves left, for example, their x coord is reduced by 1. They may still be on the same tile, though.

Anyone who can give me any advice on how to go about this would be doing me a big favour. Thanks!

#2

What you need to do is not confuse logic and rendering. Logic-wise, your tiles should have absolute values. Render-wise, you want a variable to offset the X and Y to create the scrolling effect. Every time the player moves, you update the xOffset and yOffset variables with negative the player position minus half the player’s width or height plus half the width or height of the window. Then, before the map is rendered, just simply make a call to Graphics2D.translate(offsetX,offsetY) to translate, or offset, the “world”.


xOffset = -(player.getX()+player.getWidth()/2) + windowWidth/2;
yOffset = -(player.getY()+player.getHeight()/2) + windowHeight/2;