Problems with Player Centering in Isometric Style Game

Newbie & Debugging Questions
#1

OK, so I have the game working, and I’m drawing the isometric tiles to the screen alright, but now I can’t figure out how to keep my character in the center tile of the screen.

This kind of shows how the map would be rendered if not for the if statement limiting it to the red window.

So I guess like I said I can’t figure out how to render the tiles around the player from the map array and have the player centered. Doing that in a regular tile game was easy.


public void render(Graphics g)
	{
		g.setColor(Color.DARK_GRAY);
		g.fillRect(0, 0, windowWidth, windowHeight);
		
		for(int y = -(windowHeight / tile.height); y <  (windowHeight / tile.height) + 2; y++) // I have no idea of how I got the math for the x and y for loops but it works so far
		{
			for(int x = -tile.width; x < (windowWidth / tile.width) * 4; x++)
			{


				if(((x - y) * (tile.width / 2)) > (0 - tile.width) //This makes it only render the tiles that fit in the window
						&& ((x + y) * (tile.height/2)) > (0 - tile.height)
						&& ((x - y) * (tile.width / 2)) < windowWidth
						&& ((x + y) * (tile.height/2)) < windowHeight)

				{
					temp = new ImageIcon("sprites/Tiles/" + map[(keyCursorX + mapX) + 10][(keyCursorY + mapY) + 10] + ".PNG").getImage(); //The map is actually a array of strings for now but I might change it soon. 

					g.drawImage(temp, ((x - y) * (tile.width / 2)), ((x + y) * (tile.height/2)), null); // Draws the sprite onto the canvas
						
						if(keyCursorX == x && keyCursorY == y)
						{
							g.drawImage(tileHighlight, ((x - y) * (tile.width / 2)), ((x + y) * (tile.height/2)), null); // This is actually want to be centered around
						}
						
						for(GameObjects go : objects) // Extra objects...
						{
							if(x == go.x && y == go.y)
							{
								g.drawImage(go.sprite, ((x - y) * (tile.width / 2)), ((x + y) * (tile.height / 2)) - (go.sprite.getHeight(null) - (tile.height / 2)), null);
							}
							
						}
				}
				mapX++;
			}
			mapX = 0;
			mapY++;
		}
		mapX = 0;
		mapY = 0;
	}

How I have it right now is just the character is represented as a green highlight around the tile. This has actually bothered me for over a week and I’m about to give up and go back to regular tiles. Any help would be appreciated.

#2

This is actually more involved than you would imagine:

  1. firstly how are you representing your map? i.e. is it a simple 2d array rotated 45 degrees? or a more memory efficient data structure?
  2. do you have, and understand, the translation from map coordinate space to screen coordinate space?

centering the player on the tile should not be a conceptually difficult problem:
x = tile image width/2 -player image width/2
y = tile image height/2 - player image height

For outlining the player selected tile i would simply render another “tile” at the selected tile coordinates where the image is a mostly transparent image with the outline of a tile.

#3

Yeah you know what, I might have been making it more difficult than it needed to be. I do get how to translate it from map to screen, it was just trying to get it to stay centered in the middle of the screen and have the map move around him. It’s actually an array of strings just for the background tiles such as grass and dirt rotated 45 degrees. Then, everything else such as trees will be loaded as objects from an array list. I’m gonna play around with it a some more since you got my head straightened out a little but could you give me an example of some more efficient data structures? I guess I could look it up as well.