# Drawing tile images with bigger height on floor tiles on 2.5D isometric map

Hello I am creating my first isometric game. I have floor tiles which are 112*56 in size.

This is a simple strategy game I am making, it's an existing game, I just copied the idea for practice since I don't have anything else to do.

Each game object should be located inside the floor tile, like floor tile is the base, it can't be outside of it. All entities will be inside one floor tile, or separated.

When I try to place a rock in tiles, this happens:

When I try to place it at tiles (corner) this happens (With red borders, so you can see offsets):

I am not really sure what creates this big padding when the tiles go further. The further they are, the bigger padding they will have from the tile I think.

I use this formula to locate tiles:

    int x = (this.x * width / 2) - (this.y * width / 2);
int y = (this.x * height / 2) + (this.y * height / 2);

x = i
y = j


I've tried making offY variable, where it does imageHeight - floorTileHeight = 18, and then do int y = offY - (... formula for y ...) but no luck, the position is always randomised. Works for one position, won't work for further position.

this is the water floor tile (112x56): this is the rock tile (112x74): I've added red borders so you can see how big it is.

What is causing this padding between tiles when I place them?

# EDIT

I am using Slick2D game library.

# EDIT 2

In my program, my graphics are separated into Layers. Each layer implements Layer.

I have the layer Board, which is responsible about everything that happens on the board, the floor, it's entities, and nature objects.

That layer Board, has 2 more sub-layers in it, Nature and Entity.

Currently I am having problems with the Nature layer, which is responsible for drawing nature objects like Rocks, flowers, and more.

public class Nature implements Layer {

private Tile[][] tiles = new Tile;

public Nature() {
tiles = new Tile(9, 9, 0, 0, Tiles.ROCK);
//      tiles = new Tile(0, -22, Tiles.ROCK);
//      tiles = new Tile(0, -22, Tiles.ROCK);
}

@Override
public void render(Graphics g) {
for (int i = 0; i < this.tiles.length; i++){
for (int j = 0; j < this.tiles.length; j++){
Tile tile = this.tiles[i][j];

if (tile == null)
continue;

tile.render(g);
}
}
}

@Override
public void update() {
// TODO Auto-generated method stub

}

}


The actual tile class which does the drawing:

public class Tile {

private int offX;
private int offY;

private int x;
private int y;

public TileSprite sprite;

public Tile(int x, int y, Tiles tile) {
this(x, y, 0, 0, tile);
}

public Tile(int x, int y, int offX, int offY, Tiles tile) {
this.x = x;
this.y = y;
this.offX = offX;
this.offY = offY;
this.sprite = new TileSprite(tile);
}

public int getOffX() {
return this.offX;
}

public int getOffY() {
return this.offY;
}

public TileSprite getSprite() {
return this.sprite;
}

public int getWidth() {
return this.sprite.getSprite().getWidth();
}

public int getHeight() {
return this.sprite.getSprite().getHeight();
}

public void render(Graphics g) {
int width = this.getWidth();
int height = this.getHeight();

int x = (this.x * width / 2) - (this.y * width / 2);
int y = (this.x * height / 2) + (this.y * height / 2);

x -= width / 2;
y -= height;

g.drawImage(this.sprite.getImage(), x, y);
}
}

• Are "height" and "width" constant values or the actual size of the image ? If you are using bottom left corner as image origin, you should consider always using the ground tiles' size to draw. – Khopa Jul 4 '14 at 11:59
• Actual size of the image. slick.ninjacave.com/javadoc/org/newdawn/slick/Image.html – Ben Beri Jul 4 '14 at 12:03
• And you are using bottom left coordinates to draw ? – Khopa Jul 4 '14 at 12:06
• By the way, you multiply by 74 your y value when you render rocks, and by 56 when you render water tiles. So for example when you render the rock at Y=9, you end up with an offset of ((74-56)*9) pixels with the water tile. – Khopa Jul 4 '14 at 12:12
• @Khopa I tried to do height - offY, it works for most coordinates, but is missing a few pixels when it's on the corners like  example: gyazo.com/2f31afcd8804b6a68c3dc7b030160432 – Ben Beri Jul 4 '14 at 12:19

in your Tile.render function you are multiplying the coordinates with the (half) width and height of the current image. But keep in mind that the grid-size of your world is fixed to the size of a normal tile. When you move an object 2 units to the left, its own size is irrelevant. Only the size of the unit matters.

Calculate the position based on the size of a normal tile, and then calculate the offset based on the actual size of the tile.

private static final int GRID_WIDTH = 112;
private static final int GRID_HEIGHT = 56;

public void render(Graphics g) {

int x = (this.x * GRID_WIDTH / 2) - (this.y * GRID_WIDTH / 2) - this.getWidth() / 2;
int y = (this.x * GRID_HEIGHT / 2) + (this.y * GRID_HEIGHT / 2) - this.getHeight();

• Added my engine – Ben Beri Jul 4 '14 at 12:02
• Nothing really changes when I add that under my formula, it's all on the same position. – Ben Beri Jul 4 '14 at 12:05
• @BenBeri Sorry, but you aren't really giving us much to work with. Can you please add your actual drawing code? – Philipp Jul 4 '14 at 12:08