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\$
  • 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 '16 at 10:58
  • \$\begingroup\$ I want to have like this: link \$\endgroup\$ – Josef Kuchař Jun 30 '16 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 '16 at 11:55
  • \$\begingroup\$ Yea, it is in edit (i think, it is a half pixel problem) \$\endgroup\$ – Josef Kuchař Jun 30 '16 at 12:07
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\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.