>

게임 프로그래밍 과정에 Box2D를 사용하고 있는데, 투명도에 따라 스프라이트의 강체/고정 장치에 가장 적합한 모양과 크기를 선택할 수 있는지 궁금합니다.

새 컨텐츠를 쉽게 추가 할 수 있다는 아이디어로 구축하려고했습니다 (적, 지형 등의 모든 데이터는 XML 문서에 저장 됨). 이로 인해 모든 적에게 새로운 직업이 없습니다. 픽스쳐 모양은 일반적인 솔루션이어야하지만 게임을 플레이 할 때 스프라이트에 사실적으로 매핑되기 때문에 픽스쳐 모양을 만들기가 어렵습니다. 내가 지금까지 생각해 낸 가장 좋은 해결책은 투명하지 않은 픽셀의 대부분이 스프라이트에서 어디에 있는지 알아 내고 그 모양을 만드는 것입니다.

이 같은 것이 존재합니까? 그렇지 않다면 구현하기가 어려울까요?

  • 답변 # 1

    나는 이것을 시도했다.단단한이지만 나는 그것을했습니다.

    왼쪽은 김프이고 오른쪽 위는 Box2D 디버그 렌더러이고 오른쪽 아래는 빌드 쉘입니다

    참조 용 코드 저장소

    전체 코드는 여기 github에 있습니다. 그것은 많은 파일에 흩어져 있으므로 여기에 넣는 것이 조금 큽니다. 이 기술에 대한 설명은 아래를 참조하십시오.

    어떻게?

    ImageMagick, Potrace, Node.js (poly2tri.js 및 단순화 -js 포함), 그리고 저녁 두 시간을 사용했습니다.

    이것은 다른 도구에서도 가능하므로 일반적인 방법으로 단계를 진행하겠습니다.

    <올>

    입력 이미지를 그립니다.

    모양에만 관심이 있기 때문에 알파 채널을 추출합니다.

    convert infile.png -alpha extract outfile.png
    
    

    알파의 문턱 값 (75 % 불투명도 이하의 모든 것을 0 %로, 나머지는 100 %로 밀어 넣기)

    convert infile.png -threshold 75% -negate outfile.png
    
    

    이것은 거의 보이지 않는 부분을 제거합니다.

    다음 단계의 Potrace는 검은 픽셀을 추적해야하는 것으로 이해하기 때문에 이미지를 부정했습니다.

    벡터 형식으로 추적

    올바른 옵션을 사용하면 Potrace에서 쉽게 읽을 수있는 PostScript 파일을 출력합니다.

    potrace --longcoding --postscript --tight --alphamax=0 \
      --cleartext --output=outfile.ps infile.bmp
    

    경로 데이터를 JSON 데이터 구조로 파싱하기 위해 상당히 흥미롭지 않은 Node.js 스크립트를 작성했습니다.

    경로 데이터의 모양을보기 위해 D3.js에서 JSON을 던졌습니다. 충분히 ...

    경로를 단순화하고 삼각 분할합니다.

    간단한 다음 poly2tri를 통해 꽤 간단한 Node.js 호출

    Box2D에 넣으십시오!

    각 삼각형 세트의 바디를 만들고 삼각형을 고정구로 추가하십시오. 각 삼각형의 정점을 시계 반대 방향으로 처리해야합니다.

    성공!

    구멍이있는 모양

    때때로 여기에 하나의 링처럼 이미지에 구멍이 있습니다 —

    위키 미디어 사용자 Xander에게 감사합니다!

    PostScript 경로 데이터는 일련의 경로 ( rlineto )와 같은 상황을 나타냅니다. / moveto 명령 다음에 closepath 첫 번째 경로가 둘러싸는 경로이고 나머지는 모두 구멍입니다. 그런 다음 해당 경로 그룹은 fill 에 의해 종료됩니다.  명령.

    다음과 같이 보입니다 :

    <x> <y> moveto
    <x> <y> rlineto
    <x> <y> rlineto
    [ ... more rlineto ... ]
    closepath
    <x> <y> moveto
    <x> <y> rlineto
    <x> <y> rlineto
    [ ... more rlineto ... ]
    closepath
    fill
    
    

    파싱, 단순화 및 플롯했을 때의 모습은 다음과 같습니다.

    파란색 경로는 둘러싸는 경로입니다. 빨간색은 구멍입니다.

    이미지에 임의로 많은 구멍이있을 수 있습니다 :

    poly2tri에는 소금의 가치가있는 다른 들로네 삼각 분할 라이브러리와 같이 생성 된 경로에 구멍을 추가 할 수있는 방법이 있습니다.

    마지막으로 Box2D의 링은 좋은 척도입니다 :

  • 답변 # 2

    R.U.B.E. 이것을한다. 이 기능은 v1.6.0 이후 샘플러 추가에 포함되었습니다. 이 튜토리얼 비디오는 수행 방법에 대한 설명을 제공합니다.

    테스트하기 위해 비교를 위해 Anko와 Xander의 이미지를 사용했습니다.

    먼저 검과 심장 지팡이의 이미지를 RUBE (v1.7.0에 있음)로 가져 와서 그 위에 샘플러 (대 시선으로 표시)를 만들었습니다.

    이 작업이 완료되면 선택한 샘플러의 속성 창에서 임계 값 알파 값을 설정할 수 있습니다.

    위에서 볼 수 있듯이 모양의 예상 윤곽을 보여주는 녹색 윤곽이 나타납니다. 그런 다음 특수 편집 모드를 사용하여 조명기 외곽선에서 키 포인트를 선택하십시오. 키 포인트의 위치에 따라 윤곽의 다른 영역에서 조명기 정점의 밀도를 증가시킬 수 있습니다. 제어점이 다른 영역에있을 때 RUBE가 생성 한 몇 가지 조명기를 보여주었습니다.

    단일 모양의 이미지에서 새 바디를 만드는 바로 가기도 있습니다 (자세한 내용은 비디오 참조).

    현재 구멍을 제대로 처리하지 못합니다 :

    요약

    다음은 Anko 솔루션과 비교 한 것입니다 :

    +---------------+----------------------------+-------------------------+
    |               | Anko's image-to-box2d-body |         R.U.B.E         |
    +---------------+----------------------------+-------------------------+
    | Platform      | Linux, Mac, and Windows    | Linux, Mac, and Windows |
    | GUI           | No                         | Yes                     |
    | Price         | Free                       | ~$35 USD                |
    | Open-source   | Yes                        | No                      |
    | Handles Holes | Yes                        | No                      |
    | Dependencies  | Yes (See github page)      | No                      |
    +---------------+----------------------------+-------------------------+
    
    

  • 이전 unity - 스크립트에서 2 개의 트리거를 어떻게 구별 할 수 있습니까?
  • 다음 android - libgdx 스프라이트 배치