충돌 감지 설정 (SDK for Cocos Creator)

업데이트： 2023/03/14

여기에서는 입력된 좌표에서 모델 충돌 감지를 취득하는 방법을 설명합니다.
「SDK 가져오기」를 수행한 프로젝트에 추가하는 것을 전제로 한 설명입니다.

개요

충돌 감지를 취득하려면 Cubism SDK에서는 Raycast라는 구성 요소를 사용합니다.

Raycast를 설정하려면 다음 세 가지를 수행합니다.

1. Raycast를 실행하는 구성 요소 연결
2. 충돌 감지에 사용할 아트메쉬를 지정
3. CubismRaycaster.raycast로부터 판정 결과 취득

Raycast를 실행하는 구성 요소 연결

모델의 루트가 되는 Node에, 충돌 감지 처리를 실시하는 [CubismRaycaster]라고 하는 컴퍼넌트를 연결합니다.

충돌 감지에 사용할 아트메쉬를 지정

[모델]/Drawables/ 아래에는 그려지는 아트메쉬 하나하나를 관리하는 Node가 배치되어 있습니다.
Node의 이름은 파라미터의 ID입니다.

이 Node 중에서 충돌 감지용 범위로서 취급하는 것에 [CubismRaycastable]을 연결합니다.

CubismRaycastable에서는 연결한 메쉬의 충돌 감지 범위를 선택할 수 있습니다.

• Bounding Box : 그 메쉬를 둘러싸는 직사각형을 충돌 감지로 합니다. Triangles보다 부하가 가볍습니다.
• Triangles : 그 메쉬의 형상을 충돌 감지로 합니다. 범위를 정확하게 판정하고 싶은 경우는 이쪽을 설정해 주세요.

CubismRaycaster.raycast로부터 판정 결과 취득

마지막으로, 모델의 루트에 연결한 CubismRaycaster의 Raycast()를 사용해 충돌 감지의 결과를 취득합니다.

「CubismHitTest」라는 TypeScript 스크립트를 작성하고 코드를 다음과 같이 추가하여 모델의 루트에 연결합니다.

import { _decorator, Component, Node, input, Input, EventTouch, Camera } from 'cc';
import CubismRaycaster from '../../Framework/Raycasting/CubismRaycaster';
import CubismRaycastHit from '../../Framework/Raycasting/CubismRaycastHit';
const { ccclass, property } = _decorator;

@ccclass('CubismHitTest')
export class CubismHitTest extends Component {
  @property({ type: Camera, visible: true })
  public _camera: Camera = new Camera;

  protected start() {
    input.on(Input.EventType.TOUCH_START,this.onTouchStart,this);
  }

  public onTouchStart(event: EventTouch) {
    const raycaster = this.getComponent(CubismRaycaster);

    if (raycaster == null) {
      return;
    }

    // Get up to 4 results of collision detection.
    const results = new Array<CubismRaycastHit>(4);

    // Cast ray from pointer position.
    const ray = this._camera.screenPointToRay(event.getLocationX(), event.getLocationY());
    const hitCount = raycaster.raycast2(ray, results);

    // Show results.
    let resultsText = hitCount.toString();
    for (var i = 0; i < hitCount; i++)
    {
      resultsText += "\n" + results[i].drawable?.name;
    }

    console.log(resultsText);
  }
}

이상으로 설정이 완료됩니다.

이 상태에서 실행 중에 Game 뷰에서 CubismRaycastable이 연결된 메쉬를 클릭하면, 충돌 감지 결과를 Console 뷰에 출력합니다.

실행 예

D_PSD_16<CubismDrawable>
D_PSD_15<CubismDrawable>
D_PSD_14<CubismDrawable>
D_PSD_07<CubismDrawable>