Как вы определяете в JavaScript, если изображение находится за пределами видимого холста после его поворота?

Question

Я пишу игру на холсте, которая включает в себя много спрайтов на холсте за один раз. В некоторых случаях спрайты не видны и для сохранения циклов рендеринга я не отрисовываю их на холсте, если игрок их не увидит. Это отлично работает для спрайтов, которые не вращаются, но как только они поворачиваются (особенно прямоугольники), я не могу более точно определить, все ли они на видимом холсте.

Вот что я делал до сих пор, как часть моего основного рендеринга цикла:

  if (image !== null) { 
      ctx.save(); 
      ctx.translate(this.x, this.y); 
      ctx.rotate(this.rotation * Math.PI/180); 
      ctx.drawImage(image, 0,0, this.width, this.height); 
      ctx.restore(); 
     } 

Перед тем, как вынести спрайт, используя код выше, я определить, если она видна с помощью этого кода:

  // Only draw sprite sthat are visible to the player. 
     if (sprite.x + boundingBox >= 0 && sprite.y + boundingBox >= 0 && sprite.x <= this.width && sprite.y <= this.height) { 
      sprite.draw(this.gameConsole.ctx); 
     } 

Что происходит, когда я поворачиваю неравномерный спрайт, например, прямоугольник, ширина и высота больше не правильны, поскольку они предполагают, что они находятся в невращающемся состоянии. Как вы подходите к этой проблеме?

Answer 1

Можно вычислить диагональ и использовать, чтобы определить, виден ли спрайт

var diagonal = Math.sqrt(boundingBox * boundingBox * 2); 

if (sprite.x + diagonal >= 0 && sprite.y + diagonal >= 0 && sprite.x <= this.width && sprite.y <= this.height) { 
    sprite.draw(this.gameConsole.ctx); 
} 

Answer 2

вращение говорит, что, когда точка Р является угловой точкой (один из 4-х) неоднородных спрайтов в результате R после поворота

a = this.rotation * (PI/180) 

с помощью матрицы поворота

Rx = Px * cos(a) + Py * -sin(a) 
Ry = Px * sin(a) + Py * cos(a) 

, чтобы вы могли проверить, если R находится внутри холста.

если вы используете ctx.setTransform вместо поворачивать вы можете делать все это сразу, то есть тест первый, оказывать в случае необходимости;)