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

Question

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[0][1], this happens:

_{(source: gyazo.com)}

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

_{(source: gyazo.com)}

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[15][10];
    
    public Nature() {
        tiles[9][9] = new Tile(9, 9, 0, 0, Tiles.ROCK);
//      tiles[0][0] = new Tile(0, -22, Tiles.ROCK);
//      tiles[0][1] = new Tile(0, -22, Tiles.ROCK);
    }
    
    @Override
    public void render(Graphics g) {
        for (int i = 0; i < this.tiles[0].length; i++){
            for (int j = 0; j < this.tiles[1].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);
    }
}

Answer 1

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();