Phaser를 사용하여 스프라이트 시트에서 특정 스프라이트 표시

HTML5 JS 프레임 워크 인 Phaser를 사용하여 카드 게임을 만들려고합니다. 나는 끔찍한 예술가이고 내 자신을 디자인 할 수 없기 때문에 온라인에서 찾은 무료 스프라이트 카드 놀이 카드를 사용하고 있습니다. 문제는 Phaser를 사용하여 개별 카드를 표시하는 방법을 알 수없는 것입니다.

이전에 사용한 프레임 워크에서, 내가 사용했던 더 큰 스프라이트 시트에서 개별적인 작은 스프라이트를 만들 수있었습니다. 그러나 가능하다면 Phaser에서 어떻게 할 수 있는지 알 수 없습니다.

따라서 이미지를 스프라이트 시트로로드하는 것을 보았지만 스프라이트 시트는 애니메이션에만 사용되며 실제로 스프라이트 시트의 특정 '프레임'을 표시 할 수없는 것 같습니다 (잘못되면 수정하십시오).

필자가해야 할 일은 이미지를 타일 맵으로로드하는 것이지만 사용중인 특정 이미지에는 레이아웃을 지정하는 json 파일이 포함되어 있지 않습니다 (그렇지 않은 것을 찾지 못했습니다). 자바 스크립트를 처음 사용하므로 json 파일의 형식을 지정하는 방법을 확인하기 위해 Phaser 소스 코드를 읽는 데 문제가 있습니다.

요약하면, 맵 데이터를 지정하는 json 파일이 없다는 것을 감안할 때 Phaser에서 카드 놀이 스프라이트 시트의 개별 카드를 표시하는 가장 좋은 방법은 무엇입니까?

var sprite = game.add.sprite(x, y, 'spritesheet_name');
sprite.frame = 0;

스프라이트 시트는 애니메이션에만 국한되지 않고 애니메이션을 사용하는 한 가지 방법 일뿐입니다. 애니메이션은 다른 시간에 다른 프레임을 표시하는 방법입니다. 스프라이트의 프레임을 수동으로 설정하면 스프라이트 시트의 특정 부분을 표시 할 수 있습니다.

Phaser는 두 가지 유형의 스프라이트 시트를 지원합니다 : 모든 프레임이 동일한 크기의 "클래식", 텍스처 팩커, Shoebox 또는 Flash CC와 같은 타사 앱의 도움을 받아 생성 된 "텍스처 아틀라스" 관련 json 파일과 함께.

"클래식" game.load.spritesheet프레임을로드하여 프레임의 너비와 높이 및 선택적으로 수량을 지정해야합니다.

game.load.spritesheet('uniqueKey', 'assets/sprites/metalslug_mummy37x45.png', 37, 45, 18);

텍스처 아틀라스를로드하려면을 사용할 수 있습니다 game.load.atlas. Phaser Examples repo에서 이에 대한 많은 예제를 찾을 수 있습니다.

일단로드되면 스프라이트를 만듭니다 :

var sprite = game.add.sprite(x, y, 'spriteSheetKey');

그러면 페이저가 키 spriteSheetKey를 텍스처로 사용하여 이미지를 사용하도록합니다 . 기본적으로 스프라이트 시트의 프레임 0으로 이동하지만 sprite.frame다른 유효한 숫자로 변경할 수 있습니다 .

스프라이트가 텍스처 아틀라스를 사용하는 경우 프레임 이름을 기반으로 프레임을 변경하는 것이 더 쉽습니다. sprite.frameName = 'card4'여기서 프레임 이름은 텍스처 아틀라스 json 파일에 지정된 것과 동일합니다 (여기를 열어서보십시오!).