트럼프 카드와 같이 이미지를 여러 개 준비하고 스프라이트화하는 경우, 그들을 한 장의 큰 이미지에 정리하여 잘라내기의 정보와 함께 취급하는 것이 최적화의 정석입니다.
그러한 형식을 일반적으로 텍스처 아틀라스(스프라이트 시트)라고 부르는 것 같습니다.

실제로 텍스처 아틀라스를 만들어 봅시다.

텍스처 아틀라스 만들기

텍스처 아틀라스는 이미지 파일과 json 파일 세트로 만듭니다.

df5.png


HMG 대부호에서는 이러한 PNG 파일을 준비했습니다.
카드 한 장의 크기는 100x150픽셀이며 이미지 전체에서 1300x750픽셀입니다.
그리고 이 화상 데이터내의 좌상의 스페이드의 A로부터 순서대로 일련번호의 이름(0.png ~ 55.png)을 붙여 정보화합니다.

json 파일의 내용은 다음과 같습니다.

df5.json

{
    "frames": {
        "0.png": {　　　　　　　　　　// 参照するための名前を指定
            "frame": {
                "x": 0,
                "y": 0,
                "w": 100,
                "h": 150
            },
            "rotated": false,
            "trimmed": false,
            "spriteSourceSize": {
                "x": 0,
                "y": 0,
                "w": 100,
                "h": 150
            },
            "sourceSize": {
                "w": 100,
                "h": 150
            }
        },
        "1.png": {
            "frame": {
                "x": 100,
                "y": 0,
                "w": 100,
                "h": 150
            },
            "rotated": false,
            "trimmed": false,
            "spriteSourceSize": {
                "x": 0,
                "y": 0,
                "w": 100,
                "h": 150
            },
            "sourceSize": {
                "w": 100,
                "h": 150
            }
        },

　：
繰り返し
　：

    },
    "meta": {
        "image": "df5.png",
        "size": {
            "w": 1300,
            "h": 750
        },
        "scale": "1"
    }
}

텍스처(잘라내는 화상 단위)의 이름과 위치와 사이즈를 매수분 반복해, 마지막으로 참조하는 화상 파일명과 전체 사이즈를 추가합니다.
(같은 부분의 반복이 많기 때문에 이것들을 자동적으로 생성하는 스크립트를 짜 두면 나중에 즐길 수 있습니다)

이것으로 텍스처 아틀라스가 완성되었습니다.

텍스처 아틀라스 로드 및 사용

먼저 PIXI.js의 로더 기능을 사용하여 텍스처 아틀라스를 로드합니다.

PIXI.loader
    .add("assets/df5.json")　　// jsonファイルのパスを指定
    .load(function (loader, res) {
        f_cb_done();　　　　// 読み込み完了後に呼び出すコールバック関数
    });

읽기 완료하지 않으면 데이터를 처리할 수 없기 때문에 이와 같이 콜백을 사용하여 종료 후의 처리를 킥합니다.
로드가 끝나면 나머지는 이름으로 참조하면 됩니다.

var texture = PIXI.Texture.fromFrame("0.png");　　// テクスチャアトラスからテクスチャを名前で切り出す
var sprite = new PIXI.Sprite(texture);　　　　　　　// テクスチャを指定してスプライトを生成

그리고는 전회와 같이, 스테이지에 추가해 주면 OK입니다.
이번에는 조금 기울여 표시해 봅시다.

var degree = 20;
sprite.rotation = degree * Math.PI / 180;

스프라이트의 rotation 속성에 각도를 지정하면 스프라이트가 회전합니다.
지정하는 단위는 라디안으로, 0~360도 대신에 0~2π의 범위로 지정하게 됩니다.
도에서 라디안으로 변환하는 자체 함수를 준비하면 편리합니다.

실행 결과 샘플


PIXI.js를 사용하여 만든 브라우저 게임 (하이브리드 앱)
리버시

실제로 설치하고 플레이 후 스토어에서 리뷰 해 주시면 기쁩니다.