I am developing an isometric game like Anno 1602. I have an isometric tilemap. The default tilesize is 64x31.

My goal is to show the area a building has influence to. For that I want to show a circle in isometric style around that building. Look at the picture below:

area around building

I need to find an algorithm which turns information about a building (width, height, radius in tiles) into a polygon containing screen coordinates of the outer parts of the dark area (see picture, I want the red points). For example, the data for the picture above would be:

w = 2; h = 2; r = 3

I tried creating circles with midpoint algorithm for each tile of the building. Merging all points together and running concave hull algorithm to get the outer most points. But this did not yield nice results.

What could be an approach to get points to create a polygon which resembles an isometric area around an object.

  • \$\begingroup\$ This looks like something you could solve with Bresenham's circle drawing algorithm and keeping the outer points of the pixel coordinates it produces. \$\endgroup\$
    – DMGregory
    Mar 10, 2022 at 11:35

1 Answer 1


The best way to approach this is to get the values of the coordinates to the x axis around the object, then generate the y coordinate using some simple math.

function genCircle(x,y,radius,precision){ // x and y are coordinates of object
  let arr=[];
  for(let i=-radius;i<=radius;i+=precision){
    let ty=(radius**2-(i)**2)/(y);
    arr.push([i+x,ty-y]); // One half of the circle
    arr.push([i+x,-ty-y]); // Get the negative coordinates for the other
  return arr; // Return an array of x and y values

The function above takes in x and y offset values, the radius of the circle, and the precision of the measurements. Simply apply this to your program and adjust the output accordingly, depending on how you process coordinates you may want to scale them to fit with the isometric perspective.

  • \$\begingroup\$ This does not give me the coordinates I am searching for. Using your algorithm creates the following picture: imgur.com/a/7tngKsO I created a polygon out of the points from the function after converting them from iso to screen coordinates. \$\endgroup\$
    – pr4xx
    Feb 13, 2021 at 19:27

You must log in to answer this question.

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