2
\$\begingroup\$

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:

img
(source: gyazo.com)

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

img12
(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):

Imgur

this is the rock tile (112x74):

Imgur2

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);
    }
}
\$\endgroup\$
5
  • \$\begingroup\$ 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. \$\endgroup\$
    – Khopa
    Jul 4, 2014 at 11:59
  • \$\begingroup\$ Actual size of the image. slick.ninjacave.com/javadoc/org/newdawn/slick/Image.html \$\endgroup\$
    – Ben Beri
    Jul 4, 2014 at 12:03
  • \$\begingroup\$ And you are using bottom left coordinates to draw ? \$\endgroup\$
    – Khopa
    Jul 4, 2014 at 12:06
  • \$\begingroup\$ 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. \$\endgroup\$
    – Khopa
    Jul 4, 2014 at 12:12
  • \$\begingroup\$ @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 [1][0] example: gyazo.com/2f31afcd8804b6a68c3dc7b030160432 \$\endgroup\$
    – Ben Beri
    Jul 4, 2014 at 12:19

1 Answer 1

2
\$\begingroup\$

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();
\$\endgroup\$
9
  • \$\begingroup\$ Added my engine \$\endgroup\$
    – Ben Beri
    Jul 4, 2014 at 12:02
  • \$\begingroup\$ Nothing really changes when I add that under my formula, it's all on the same position. \$\endgroup\$
    – Ben Beri
    Jul 4, 2014 at 12:05
  • \$\begingroup\$ @BenBeri Sorry, but you aren't really giving us much to work with. Can you please add your actual drawing code? \$\endgroup\$
    – Philipp
    Jul 4, 2014 at 12:08
  • \$\begingroup\$ Added more information \$\endgroup\$
    – Ben Beri
    Jul 4, 2014 at 12:12
  • \$\begingroup\$ Let me know if a Github repo will help here, I don't know if it's the place to give github sources though. \$\endgroup\$
    – Ben Beri
    Jul 4, 2014 at 12:14

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .