Here's an example of something existing:

(source: puzzlepirates.com)

I tried to replicate this:

I know that the diameter for that ship's circle is 6 blocks (as u the circle is overlapping the edges of the 6ths blocks, which also counts).

I know that the size of the isometric tile is 64*48.

So I replicated that, and that's the output I get:


You can see a few problems:

  • The size of the ellipse is not the same, even though I use the provided size information.
  • Even if the size is the same, the edges does not end at the same locations, as in the provided image.

Here's my implementation, I am sure I have done the math wrong, as usual:

// The vessel radius (diameter / 2)
int radious = vessel.getInfluenceRadius();

// Calculate the size of the ellipse
int width = radious * GameTile.TILE_WIDTH;
int height = radious * GameTile.TILE_HEIGHT;

// Draw ellipse, centered around vessel where xx and yy is where the vessel starts drawing
renderer.ellipse(xx - width / 2 + vessel.getRegionWidth() / 2, yy - height / 2 + vessel.getRegionHeight() / 2, width, height);

What did I do wrong in the calculation? You can see that the ship in the real preview covers 29 blocks (including the small corners on north/south/west/east, and my preview only covers .. like 13.

  • \$\begingroup\$ you debugged and checked that vessel.getInfluenceRadius() returns 3 (6/2) and all the other values are the expected values? What means getRegionWidth() and getRegionHeight and what are their values? You are always using int and no floats or decimal somewhere in those methods? \$\endgroup\$
    – monty
    Oct 13, 2017 at 6:54
  • \$\begingroup\$ Nice work by the way. Looks cool. I like it :-) \$\endgroup\$
    – monty
    Oct 13, 2017 at 6:59
  • \$\begingroup\$ Yes its the data i took from the game's wiki. And the region width and height is just the size of the sprite, it is used to position the circle, it has no affect on the width/height of the ellipse. Currently I cheap fixed it by changing the diameter for each sihp, with floats, but that is bad practice! \$\endgroup\$
    – Ben Beri
    Oct 13, 2017 at 15:26
  • \$\begingroup\$ You were able to fix it by using floats? \$\endgroup\$
    – monty
    Oct 16, 2017 at 6:41

1 Answer 1


.ellipse() uses width and height (2 diameters, you are giving it radius.

Also, notice that on the original, it is 6 blocks diagonally. but from top to bottom is only about 4 blocks. Your graphic is exactly 3 blocks from top to bottom. Are your sprites diamond-shaped? TILE_SIZE is measuring the sprite height, but if you're using iso tiles that is the diagonal. Just dividing by sqrt(2) will probably give you the right value


You must log in to answer this question.

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