PIXI 충돌 검출-PIXI 문서 번역(6)

당신 은 지금 다양한 도형 대상 을 어떻게 만 드 는 지 알 고 있 지만,당신 은 그들 로 무엇 을 할 수 있 습 니까?재 미 있 는 일 은 간단 한 충돌 검사 시스템 을 구축 하 는 것 이다.사용자 정의 함수 hitTestRectangle 을 사용 하여 두 사각형 Pixi sprites 가 접촉 하 는 지 확인 할 수 있 습 니 다.

hitTestRectangle(spriteOne, spriteTwo)

겹 치면 hitTestRectangle 은 true 로 돌아 갑 니 다.hitTestRectangle 과 if 문 구 를 사용 하여 두 요정 의 충돌 을 검사 할 수 있 습 니 다.

if (hitTestRectangle(cat, box)) {
  //There's a collision
} else {
  //There's no collision
}

보시 다시 피 hitTestRectangle 은 거대 한 우주 로 들 어 가 는 게임 디자인 의 앞문 입 니 다.
collisionDetection.html 파일 examples 폴 더 에서 이 파일 을 실행 하고 사용 하 는 작업 예제 hitTestRectangle 을 가 져 옵 니 다.화살표 키 로 고양 이 를 이동한다.고양이 가 상자 에 닿 으 면 상자 가 빨 개 집 니 다."때 려!"텍스트 대상 으로 표시 합 니 다.
[img]http://dl2.iteye.com/upload/attachment/0123/3480/e593d90c-7e24-35a8-ba58-4bd4f82a0369.png[/img]
이 요소 들 을 만 드 는 모든 코드 와 고양 이 를 움 직 이 는 키보드 제어 시스템 을 보 았 습 니 다.유일한 새로운 것 은 함수 hitTestRectangle 내부 에서 사용 하 는 방식 play 로 충돌 을 검사 하 는 것 입 니 다.

function play() {

  //use the cat's velocity to make it move
  cat.x += cat.vx;
  cat.y += cat.vy;

  //check for a collision between the cat and the box
  if (hitTestRectangle(cat, box)) {

    //if there's a collision, change the message text
    //and tint the box red
    message.text = "hit!";
    box.tint = 0xff3300;

  } else {

    //if there's no collision, reset the message
    //text and the box's color
    message.text = "No collision...";
    box.tint = 0xccff99;
  }
}

이 play 함 수 는 1 초 에 60 번 씩 게임 순환 으로 호출 되 기 때문에 이 if 문 구 는 cat 와 box 간 의 충돌 을 계속 검사 합 니 다.hitTestRectangle 이 true 라면 텍스트 message 대상 은 setText 에"Hit"를 표시 하 는 데 사 용 됩 니 다.

message.text = "hit!";

그리고 상자 의 tint 속성 을 16 진수 빨간색 값 으로 설정 하여 상자 의 색 을 녹색 에서 빨간색 으로 변경 합 니 다.

box.tint = 0xff3300;

충돌 이 없 으 면 메시지 와 상 자 는 원본 상태 로 유 지 됩 니 다.

message.text = "no collision...";
box.tint = 0xccff99;

이 코드 는 매우 간단 하지만,갑자기 당신 은 완전히 활발 한 상호작용 세 계 를 만 들 었 습 니 다.얘 는 거의 마술 같 아!아마도 놀 라 운 것 은,당신 이 지금 필요 로 하 는 모든 기술 을 가지 고 게임 과 Pixi 를 만 들 기 시작 했다 는 것 입 니 다!
hitTestRectangle 함수
그런데 hitTestRectangle 기능 은 어때요?그것 은 무엇 을 합 니까?그것 은 어떻게 일 합 니까?어떻게 작업 하 는 지 에 대한 충돌 검출 알고리즘 의 세부 사항 은 본 튜 토리 얼 의 범 위 를 약간 초과 하 였 다.가장 중요 한 것 은 네가 그것 을 어떻게 사용 하 는 지 아 는 것 이다.하지만 참고 하 세 요.궁금 하 시 면 완전한 hitTestRectangle 함수 정의 입 니 다.댓 글 에서 뭐 하 는 지 알 수 있어 요?

function hitTestRectangle(r1, r2) {

  //Define the variables we'll need to calculate
  var hit, combinedHalfWidths, combinedHalfHeights, vx, vy;

  //hit will determine whether there's a collision
  hit = false;

  //Find the center points of each sprite
  r1.centerX = r1.x + r1.width / 2;
  r1.centerY = r1.y + r1.height / 2;
  r2.centerX = r2.x + r2.width / 2;
  r2.centerY = r2.y + r2.height / 2;

  //Find the half-widths and half-heights of each sprite
  r1.halfWidth = r1.width / 2;
  r1.halfHeight = r1.height / 2;
  r2.halfWidth = r2.width / 2;
  r2.halfHeight = r2.height / 2;

  //Calculate the distance vector between the sprites
  vx = r1.centerX - r2.centerX;
  vy = r1.centerY - r2.centerY;

  //Figure out the combined half-widths and half-heights
  combinedHalfWidths = r1.halfWidth + r2.halfWidth;
  combinedHalfHeights = r1.halfHeight + r2.halfHeight;

  //Check for a collision on the x axis
  if (Math.abs(vx) < combinedHalfWidths) {

    //A collision might be occuring. Check for a collision on the y axis
    if (Math.abs(vy) < combinedHalfHeights) {

      //There's definitely a collision happening
      hit = true;
    } else {

      //There's no collision on the y axis
      hit = false;
    }
  } else {

    //There's no collision on the x axis
    hit = false;
  }

  //`hit` will be either `true` or `false`
  return hit;
};