Menampilkan sprite tertentu dari spritesheet menggunakan Phaser

Saya mencoba membuat permainan kartu menggunakan Phaser, kerangka HTML5 JS. Karena saya seniman yang buruk dan tidak bisa mendesain sendiri, saya menggunakan spritesheet gratis untuk memainkan gambar kartu yang saya temukan online. Masalahnya adalah, sepertinya saya tidak tahu cara menampilkan kartu individual menggunakan Phaser.

Dalam kerangka sebelumnya yang saya gunakan, saya dapat membuat sprite yang lebih kecil dari lembar sprite yang lebih besar yang saya gunakan. Tapi saya tidak tahu bagaimana melakukannya di Phaser, jika itu mungkin.

Jadi saya melihat memuat gambar sebagai spritesheet, tetapi sepertinya spritesheets hanya digunakan untuk animasi dan Anda tidak dapat benar-benar menampilkan 'bingkai' spritesheet tertentu (tolong perbaiki saya jika saya salah).

Saya pikir apa yang perlu saya lakukan adalah memuat gambar sebagai tilemap, bagaimanapun, gambar tertentu yang saya gunakan tidak datang dengan file json yang menentukan tata letak (juga saya tidak dapat menemukan yang melakukannya). Menjadi baru dalam javascript, saya mengalami kesulitan membaca kode sumber Phaser untuk melihat bagaimana file json harus diformat.

Jadi, secara ringkas, apa cara terbaik untuk menampilkan kartu individual dari spritesheet kartu bermain di Phaser mengingat saya tidak memiliki file json yang menentukan data peta?

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

Spritesheets tidak terbatas pada animasi, itu hanya satu cara untuk menggunakannya. Animasi hanyalah cara untuk menampilkan bingkai yang berbeda pada waktu yang berbeda. Dengan mengatur secara manual bingkai sprite, Anda dapat menampilkan bagian tertentu dari spritesheet.

Phaser memiliki dukungan untuk dua jenis sprite sheet: "klasik", di mana setiap frame memiliki ukuran yang sama persis, dan "atlas tekstur" yang dibuat dengan bantuan aplikasi pihak ketiga seperti Texture Packer, Shoebox atau Flash CC dan datang dengan file json terkait.

Anda memuat yang "klasik" dengan game.load.spritesheettempat Anda harus menentukan lebar dan tinggi bingkai, dan secara opsional kuantitasnya, yaitu:

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

Untuk memuat atlas tekstur yang dapat Anda gunakan game.load.atlas. Anda akan menemukan banyak contoh ini di repo Phaser Examples.

Setelah dimuat, buat sprite Anda:

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

Ini memberitahu Phaser untuk menggunakan gambar dengan kunci spriteSheetKeysebagai teksturnya. Secara default ia akan melompat ke bingkai 0 dari lembar sprite, tetapi Anda dapat mengubahnya dengan sprite.frameke nomor yang valid lainnya.

Jika sprite menggunakan atlas tekstur, lebih mudah untuk mengubah bingkai berdasarkan nama bingkai: di sprite.frameName = 'card4'mana nama bingkai persis seperti yang ditentukan dalam file tekstur atlas json (buka dan lihat untuk melihat!).