Вращение спрайтов с пикселями столкновения

#javascript #2d #sprite #collision-detection #pixi.js

#javascript #2d #спрайт #обнаружение столкновений #pixi.js

Вопрос:

У меня проблема с моим приложением pixiJS. У меня есть много спрайтов, которые я могу перемещать в своей сцене. Моя цель — создать план со столкновениями между спрайтами, для этого я использую плагин bump и функцию rectangleCollision: https://github.com/kittykatattack/bump /

let collision = b.rectangleCollision(selectCont,c2,true,false,true);

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

Скриншот

Я думаю, что это проблема с границами спрайтов, но я понятия не имею.

У меня есть массив со всеми моими спрайтами, и у меня есть функция, когда я щелкаю правой кнопкой мыши по спрайту, он применяет вращение, и когда я хочу применить свое вращение, оно работает, но мое столкновение неверно 😥

 for (var j = 0; j < cont.length; j  ) {
  var c2 = cont[j];
  b.contain(c2, {x: 0, y: 0, width: 2400, height: 1800}, true);
  
  if(selectCont!=c2){
    if(activeCollision == true){
       let collision = b.hit(selectCont,c2,endCollision,false,true);
    }
  }
}

// function to apply a rotation to sprite
function rotate(){
  this.rotation -= Math.PI/4;
}
 

Ответ №1:

rotation Свойство sprites по умолчанию вращает спрайт вокруг верхней левой вершины, а не по центру. Точку поворота можно изменить с pivot помощью свойства sprites, как показано здесь:

 sprite.pivot.set(sprite.width/2,sprite.height/2);
 

При этом точка поворота спрайтов будет находиться прямо в центре самой себя.