Phaserを使用してスプライトシートから特定のスプライトを表示する

HTML5 JSフレームワークであるPhaserを使ってカードゲームを作ろうとしています。私はひどいアーティストで自分ではデザインできないので、オンラインで見つけたトランプの画像の無料のスプライトシートを使用しています。問題は、Phaserを使用して個々のカードを表示する方法を理解できないようです。

以前使用していたフレームワークでは、使用した大きなスプライトシートから小さなスプライトを個別に作成できました。しかし、それが可能であれば、私はPhaserでそれを行う方法を理解できません。

したがって、画像をスプライトシートとしてロードすることを検討しましたが、スプライトシートはアニメーションのみに使用されているようで、スプライトシートの特定の「フレーム」を実際に表示することはできません（私が間違っている場合は修正してください）。

私がする必要があるのはタイルマップとして画像をロードすることだと思いますが、私が使用している特定の画像には、レイアウトを指定するjsonファイルが付属していませんでした。javascriptの初心者なので、Phaserのソースコードを読んでjsonファイルのフォーマットを確認するのに問題があります。

要約すると、マップデータを指定するjsonファイルがない場合、Phaserでトランプのスプライトシートの個々のカードを表示する最良の方法は何ですか？

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

スプライトシートはアニメーションに限定されず、それを使用する1つの方法にすぎません。アニメーションは、さまざまなフレームをさまざまなタイミングで表示する方法にすぎません。スプライトのフレームを手動で設定すると、スプライトシートの特定の部分を表示できます。

Phaserは、2種類のスプライトシートをサポートしています。すべてのフレームが正確に同じサイズである「クラシック」のものと、テクスチャパッカー、Shoebox、Flash CCなどのサードパーティアプリを使用して作成された「テクスチャアトラス」です。関連付けられたjsonファイル。

game.load.spritesheetフレームの幅と高さ、およびオプションで数量を指定する必要がある場所で「クラシック」なものをロードします。つまり、

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

テクスチャアトラスをロードするには、を使用できますgame.load.atlas。この例は、Phaser Examplesリポジトリに多数あります。

ロードしたら、スプライトを作成します。

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

これはspriteSheetKey、テクスチャとしてキーを持つ画像を使用するようにPhaserに指示します。デフォルトでは、スプライトシートのフレーム0にジャンプしますがsprite.frame、他の有効な番号に変更できます。

スプライトがテクスチャアトラスを使用していた場合、フレーム名に基づいてフレームを変更する方が簡単ですsprite.frameName = 'card4'。フレーム名は、テクスチャアトラスjsonファイルで指定されているとおりです（開いて確認してください）。