HTLM5 Canvas: убрать пробелы между повернутыми спрайтами - PullRequest
Новая
       23

HTLM5 Canvas: убрать пробелы между повернутыми спрайтами

0 голосов
/ 05 марта 2019

Итак, я делаю небольшую игру на космическом корабле, основанную на тайлах, и столкнулся с проблемой, когда спрайты тайлов вращаются во время вращения корабля, и между тайлами появляются небольшие промежутки.Я изучил это и обнаружил, что сглаживание может иметь какое-то отношение к нему, но после использования ctx.imageSmoothingEnabled= false; я все еще не вижу изменений.

Здесь все выглядит так, как должно, когда все находится на 90 градусовпод углом это выглядит хорошо:

Космический корабль без промежутков между спрайтами

Еще один пример с кораблем, хорошо выглядящим под углом 90 градусов

Однако, когда корабль вращается:

Разрыв между спрайтами

Вот пример «сетки», используемой для визуализации граництайлы:

сетка тайлов

В настоящее время я использую систему, которая «разбивает» большие спрайты тайлов 2x2 на 4 тайла 1x1.Я мог бы изменить его, чтобы рендерить всю плитку 2х2, и в основном обойти эту проблему, потому что это было бы гораздо менее очевидно, но мне интересно, есть ли решение, где не будет пробелов.

1 Ответ

0 голосов
/ 05 марта 2019

Вы можете просто визуализировать его один раз на закадровом холсте и вращать это полное изображение, вместо того, чтобы каждый раз составлять его.

// the main context
const ctx = canvas.getContext('2d');
// an off-screen canvas
const ship = document.createElement('canvas');
const ship_renderer = ship.getContext('2d');
ship.height = ship.width = 150; 
const sprites = new Image();
sprites.onload = begin;
sprites.src = 'https://i.stack.imgur.com/scISJ.png';
let angle = 0;


function begin() {
  drawShip(ship_renderer); // render once complete
  anim(); // rotate
}

// draw our sprites on given context
function drawShip(renderer) {
  for(let y=0; y<6; y++) {
    for(let x=0; x<6; x++) {
      renderer.drawImage(sprites,
        (x + y * 6) * 25, 0, 25, 25,
        x * 25, y * 25, 25, 25
      );
    }
  }
}

function anim() {
  ctx.clearRect(0,0,canvas.width, canvas.height);
  angle += Math.PI / 180;
  
  // draw our complete image on the left
  ctx.setTransform(1,0,0,1,75,75);
  ctx.rotate(angle);
  ctx.translate(-75, -75);
  ctx.drawImage(ship, 0, 0);

  // draw like OP on the right
  ctx.setTransform(1,0,0,1,225,75);
  ctx.rotate(angle);
  ctx.translate(-75, -75);
  drawShip(ctx);
  
  ctx.setTransform(1,0,0,1,0,0);
  requestAnimationFrame(anim);
}
canvas{
  background: black;
}
<canvas id="canvas"></canvas>
...