[SOLVED]Think im rendering wrong womehow (isometric)

Newbie & Debugging Questions
#1

Hi, this is my first post. I really hope you can help me.

Im making a isometric game, with a cartesian map. the map is loaded from an image file into an array. The screen class stands for the renderen and gets the pixels from a pixel array saved in a Sprite, and put that pixel value into the Screens pixel array, and the screens draws its own array onto the screen.

Screens renderTile method gets the isometric coordinates, and draws them onto the screen.

public void renderTile(int xp, int yp, Tile tile) {
		xp -= _xOffset;
		yp -= _yOffset;
		int color;
		for (int y = 0; y < tile.getSprite().getHeight(); y++) {
			int ya = y + yp;
			for (int x = 0; x < tile.getSprite().getWidth(); x++) {
				int xa = x + xp;
				if (xa < -tile.getSprite().getWidth() || xa >= _width || ya < 0
						|| ya >= _height) {
					break;
				}
				if (xa < 0) {
					xa = 0;
				}
				color = tile.getSprite().getPixels()[x + y
				                                     * tile.getSprite().getWidth()];

				if (color != 0xffff00ff) {
					_pixels[xa + ya * _width] = color;
				}
			}
		}
	}

Tiles render method takes the cartesian coordinates and convert them into isometric coordinates, and sends them into Screen, where they are draw as in the method above:

public void isometricRender(int x, int y, Screen screen) {
		int isoX = (x - y) / 2;
		int isoY = (x - y) / 2;
		screen.renderTile(isoX * WIDTH, isoY * HEIGHT, this);
	}

I really appriciate your help :slight_smile:

#2

Can you say a thing or two about how your code is failing? For example, is it not drawing at all, or drawing the wrong stuff, or drawing the wrong place, or giving error messages?

P.S. Welcome to JGO!

#3

Here is a link that really helped me with my now dead isometric game : http://gamedevelopment.tutsplus.com/tutorials/creating-isometric-worlds-a-primer-for-game-developers--gamedev-6511

If you really want here is the render code I had per tile (note 64 is the width of my tiles)

public void render(float ZOOM,float DISPLACEMENT_X,float DISPLACEMENT_Y,SpriteBatch batch){
	
	
	renderX = x * (64 - ZOOM);
	renderY =  y * (64 - ZOOM);
	

	
	batch.draw(spr,/* X position */ (renderX - renderY) + DISPLACEMENT_X, /* Y position */ ((renderX + renderY) / 2) + DISPLACEMENT_Y ,width - (ZOOM * 2), ((width - (ZOOM * 2)) * ratio) );
	
}

If you are looking at the code, the only things that will matter are where I’ve put the comments

#4

Thank you! :slight_smile:

Well it draws something. I have a picture of what it draws. The player is located at (0,0), but as you see, the drawing is wrong in some way :slight_smile:

https://dl.dropboxusercontent.com/u/12022353/iso_draw_wrong.png

#5

That is the tutorial I’ve been using, but when I apply the math (as in the code for the render method in Tile. I now see that I divide by 2 in the isoX, that I have ficed now, but it still looks very weird:

https://dl.dropboxusercontent.com/u/12022353/iso_draw_wrong2.png

the code for rendering tiles now looks like this:

	public void isometricRender(int x, int y, Screen screen) {
		int isoX = (x - y);
		int isoY = (x - y) / 2;
		screen.renderTile(isoX * WIDTH, isoY * HEIGHT, this);
	}

Maybe I should mention that the map is loaded into an 2d array, so the map is in cartesian coordinates.

#6

I don’t have time atm to read through much, but take a scroll through this thread: http://www.java-gaming.org/topics/isometric-game-design/33434/view.html

#7

Found one mistake more. The Tiles render method now looks like:

	public void isometricRender(int x, int y, Screen screen) {
		int isoX = (x - y);
		int isoY = (x + y) / 2;     //Was - (minus) before
		screen.renderTile(isoX * WIDTH, isoY * HEIGHT, this);
	}

Now it looks like this:

https://dl.dropboxusercontent.com/u/12022353/iso_draw_wrong3.png

It is like every second row hasn’t the right offset?

#8

I’ve changed the redering method in Tile to (got it from the link above (thanks):

	public void isometricRender(int x, int y, Screen screen) {
		int isoX = (x - y);
		int isoY = (x + y);
		screen.renderTile(isoX * (WIDTH / 2), isoY * (HEIGHT / 2), this);
	}

I get the follwing when I use the code from above:

https://dl.dropboxusercontent.com/u/12022353/iso_draw_wrong4.png

#9

Well that looks like its working? What is the array your providing look like?

#10

Yes, now it actually looks right.

The map array is a 2d array in cartesian coordinates, and is stoed in the Level class.

Now I need to increase the area of tiles that is drawn, and fix the controls. :slight_smile: