1
\$\begingroup\$

I'm trying to render isometric terrain in javascript. Currently, my tiles are being drawn with small gaps between them:

Current look, with small gaps between tiles

I want the tiles to line up with no pixel gaps in between:

Example of how it should look

My rendering function is like this:

var screenX = (x * 60 / 2) + (y * 60 / 2);
var screenY = (y * 30 / 2) - (x * 30 / 2);
console.log(screenX, screenY);
context.drawImage(img, screenX, screenY, 60, 30);

Btw, my image is 30x15.

Can you help me with this problem?

EDIT:

var screenX = (x * 56 / 2) + (y * 56 / 2);
var screenY = (y * 28 / 2) - (x * 28 / 2);
console.log(screenX, screenY);
context.drawImage(img, screenX, screenY, 60, 30);

It works, but I want to find a general solution

\$\endgroup\$
4
  • 1
    \$\begingroup\$ What is the problem you're trying to fix? What is it about the image that you'd like to be different? \$\endgroup\$
    – DMGregory
    Jun 30, 2016 at 10:58
  • \$\begingroup\$ I want to have like this: link \$\endgroup\$ Jun 30, 2016 at 11:19
  • \$\begingroup\$ What if you subtract the border width from the image in your expression, i.e. something like 58 instead of 60 - have you tried it? \$\endgroup\$
    – wondra
    Jun 30, 2016 at 11:55
  • \$\begingroup\$ Yea, it is in edit (i think, it is a half pixel problem) \$\endgroup\$ Jun 30, 2016 at 12:07

1 Answer 1

1
\$\begingroup\$

I have it :)

var blockHeight = 15;
var blockWidth = 30;
var zoom = 2;
for (var x = 0; x < 10; x++) {
   for (var y = 0; y < 10; y++) {
      var screenX = Math.floor((x * (blockWidth * zoom - zoom * 2) / 2) + (y * (blockWidth * zoom - zoom * 2) / 2));
      var screenY = Math.floor((y * (blockHeight * zoom - zoom * 1) / 2) - (x * (blockHeight * zoom - zoom * 1) / 2));
      context.drawImage(img, screenX, screenY, blockWidth * zoom, blockHeight * zoom);
   }
}
\$\endgroup\$

You must log in to answer this question.

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