1. 홈
  2. 질의 응답
  3. Rotated Rectangle hit 확인 HTML5 + Javascript 및 Canvas의 고정 모양 사각형이있는 점

Rotated Rectangle hit 확인 HTML5 + Javascript 및 Canvas의 고정 모양 사각형이있는 점

2013-02-20 1 views
0

안녕하세요, 차 모양 Rectangle을 다음과 같이 그리는 자동차 게임을 만들고 있습니다. xP와 yP는 JavaScript의 키보드 이벤트에서 동적으로 나오므로 회전도 마찬가지입니다.Rotated Rectangle hit 확인 HTML5 + Javascript 및 Canvas의 고정 모양 사각형이있는 점

ctxDrift.clearRect(0, 0, 426, 754); 
ctxDrift.save(); 
ctxDrift.beginPath(); 
ctxDrift.translate(xP-car.getWidth()/2, yP-car.getHeight()/2); 
ctxDrift.rotate((Math.PI/180) * car.getRotation()); 
ctxDrift.translate(-xP, -yP); 
ctxDrift.rect(xP-car.getWidth()/2, yP-car.getHeight()/2, car.getWidth(), car.getHeight()); 
ctxDrift.fillStyle = 'yellow'; 
ctxDrift.fill(); 
ctxDrift.restore();

이제 회전하지 않는 사각형 모양의 장애물이 있습니다. 이제 어떻게이 두 객체 사이의 히트를 확인할 수 있습니까? 또는 회전하는 경우 직사각형 점을 다른 직사각형 안에 배치하는 방법을 말하면됩니까?

출처

2013-02-20 VarunJi

답변

1

가장 쉬운 방법은 사각형 경계 상자를 회전하여 충돌 검사를 수행하기 전에 더 이상 회전시키지 않는 것입니다. 그런 다음 이미지가 그려지기 전에 다시 회전하십시오.

넓은 위상 테스트 (폭이 좁은 위상 검사가 필요한지 신속하고 저렴한 검사)에 사용할 수있는 회전하지 않는 경계 상자를 사용하는 것이 더 좋습니다.

축 정렬 경계 상자 또는 줄여서 AABB로 알려져 있습니다. 입니다. 이렇게하면 충돌 감지 코드가 크게 단순 해집니다.

업데이트 : 발견 : this link 유용 할 수도 있습니다.

출처

2013-02-20 21:55:15 Jarrod

1

충돌 테스트를 시작하기 전에도 : 캔버스는 캔버스에서 개체의 위치를 ​​추적하지 않습니다. 은 누적 된 .translate() 및 .rotate()를 수동으로 추적해야합니다. 각 사용자 키보드 이벤트에 대한 변환 행렬 변경 사항을 8 처하여이를 수행하십시오. 그런 다음 변환을 하나의 최종 변환 행렬로 축적하여 시작 히트 테스트에 사용할 수 있습니다.

거기에서 충돌 테스트의 수학은 빠르게 복잡해집니다!

가장 단순한 충돌 검사는 각 사각형을 원으로 둘러싼 다음 원 중심점이 2 개의 원 반경의 합계 내에 있는지 계산하는 것입니다. 아마도 http://www.sfml-dev.org/wiki/en/sources/simple_collision_detection

:

당신은 더 나은 충돌 테스트를 원하는 당신이 제비 수학의를 통해 웨이드하고자하는 경우 
function CirclesCollide(x1,y1,radius1,x2,y2,radius2){ 
    return (Math.sqrt((x2-x1) * (x2-x1) + (y2-y1) * (y2-y1)) < (radius1 + radius2)); 
}

가 여기에 3 개 충돌 테스트의 좋은 소스입니다 : 코드는 다음과 같습니다 가장 좋은 해결책은 FabricJs와 같은 캔버스 라이브러리를 사용하는 것입니다.이 라이브러리는 캔버스에 개체가있는 위치를 추적하고 사용자에게 히트 테스트를 제공합니다. 이대로 쉽게!

var theyAreColliding = myCar.intersectsWithObject(myObstical);

출처

2013-02-21 01:10:24 markE

+0

원 충돌 감지 오히려 느린 여기 내 자신의 로직을 추가했습니다. 이런 종류의 테스트를 수행하는 것은 분명히 광범위한 단계 (거친) 충돌 검사를 수행하는 데 적합하지만 수학을 간단하게 (그리고 빠르게) 유지하고 AABB 사각형을 사용하지 않는 이유는 무엇입니까? – Jarrod

+0

@ Jarrod : 음 ... 원형 충돌은 ** 빠릅니다 ** (단지 1 Math.sqrt 및 일부 + - *) 및 ** 간단한 ** (단 1 줄의 코드!)입니다. 거친 충돌 테스트에 동의하지만, OP가 시작되는 것은 간단합니다. 자동차의 긴면이 대부분 앞으로 진행되기 때문에 원의 부정확성이 최소화됩니다 (직사각형과 원 사이의 최소 공간). AABB를 포함하여 "더 나은"테스트를 제안했음을 주목하십시오. 그러나 이러한 코드, 수학 및 CPU 사이클이 훨씬 더 비쌉니다. 또한 AABB 테두리 상자는 45,135,225,315도에서 정사각형이되어 거의 원만큼 정확하지 않습니다! BTW, 나는 AABB를 좋아하고 사용한다! 비용이 많이들뿐입니다! – markE

+0

'Math.sqrt'는 매우 비쌉니다. 봐봐. – Jarrod

관련 문제

 관련 문제