I'm trying to render some tiles in an isometric view, I'm using Java with the Slick2D library.

float xoff, yoff;
int half = 64;

public void render(GameContainer gc, StateBasedGame sbg, Graphics g) throws SlickException {
    for (int x = 0; x < width; x++) {
        for (int y = 0; y < height; y++) {
            int xa = (x * half) - (y * half);
            int ya = (y * half) + (x * half);
            xa -= xoff;
            ya -= yoff;
            tiles[x + y * width].render(gc, sbg, g, xa, ya);

Basically I'm iterating through a 2d array of tiles (the tile is just a class with the render method), the xa and ya being passed will draw an image at that exact co-ordinate, there isn't much going on in the render method. The thing that seems to be messing up is the math for making it render in an isometric view, it kind of works, but the tiles look like bricks because it's not pushed down more on the y axis.

broken rendering

Am I doing something wrong in my rendering that will cause this behaviour shown in the image? The tiles heigh is too skinny, but the tiles are overlapping and aren't being pushed down far enough.

The image might look like it's working, but the tile is actually 128x128, but it's rendering like it's 128x64.

  • \$\begingroup\$ I think I've figured it out actually, on the ya co-ordinate, the half variable would actually be the depth of the tile, so instead of doing half the tile height, I do the entire tile height and it seems to render fine. \$\endgroup\$ – mosmo Nov 9 '15 at 22:09

Your Answer

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

Browse other questions tagged or ask your own question.