Phaser kullanarak sprite sayfasından belirli bir hareketli grafiği görüntüleme

Phaser, HTML5 JS çerçevesi kullanarak bir kart oyunu yapmaya çalışıyorum. Korkunç bir sanatçı olduğum ve kendimi tasarlayamadığım için, çevrimiçi bulduğum ücretsiz bir oyun kartı resimleri sprites sayfası kullanıyorum. Sorun şu ki, Phaser kullanarak bireysel kartların nasıl gösterileceğini anlayamıyorum.

Kullandığım önceki çerçevede, kullandığım daha büyük hareketli grafik sayfasından bireysel daha küçük hareketli görüntüler oluşturabildim. Ama mümkünse Phaser'da bunu nasıl yapacağımı anlayamıyorum.

Bu yüzden görüntüyü spritesheet olarak yüklemeye baktım, ancak spritesheets sadece animasyon için kullanıldı ve spritesheet'in belirli bir 'çerçevesini' gerçekten görüntüleyemezsiniz (yanlışsam lütfen düzeltin).

Ne yapmam gerektiğini bir tilemap olarak görüntü yüklemek olduğunu düşünüyorum, ancak, kullandığım belirli görüntü düzeni belirten bir json dosyası ile gelmedi (ne de bir tane bulabilirim). Javascript yeni olmak json dosyasının nasıl biçimlendirilmesi gerektiğini görmek için Phaser kaynak kodunu okumakta sorun yaşıyorum.

Özetle, harita verilerini belirten bir json dosyasına sahip olmadığım göz önüne alındığında, Phaser'da oyun kartları spritesheet'in ayrı bir kartını görüntülemenin en iyi yolu nedir?

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

Sprite sayfaları yalnızca animasyonlarla sınırlı değildir, bu sadece onları kullanmanın bir yoludur. Animasyon, farklı kareleri farklı zamanlarda görüntülemenin bir yoludur. Hareketli grafik çerçevesini manuel olarak ayarlayarak hareketli grafik sayfasının belirli bir bölümünü görüntüleyebilirsiniz.

Phaser'ın iki tür sprite sayfası desteği vardır: her karenin tam olarak aynı boyutta olduğu "klasik" olanlar ve Texture Packer, Shoebox veya Flash CC gibi bir üçüncü taraf uygulaması yardımıyla oluşturulan ve "doku atlasları" ile ilişkili bir json dosyası.

Sen ile "klasik" olanları yüklemek game.load.spritesheetEğer genişlik ve çerçevelerin yüksekliği ve isteğe bağlı olarak miktar, yani belirtmelisiniz burada:

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

Bir doku atlası yüklemek için kullanabilirsiniz game.load.atlas. Phaser Örnekleri deposunda bunun birçok örneğini bulacaksınız.

Yüklendikten sonra hareketli grafiğinizi oluşturun:

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

Bu Phaser'a görüntüyü anahtarla spriteSheetKeybirlikte doku olarak kullanmasını söyler . Varsayılan olarak hareketli grafik sayfasının 0 karesine atlar, ancak sprite.framegeçerli başka bir sayıyla değiştirebilirsiniz.

Hareketli grafik bir doku atlası kullanıyorsa, kare adını çerçeve adına göre değiştirmek daha kolaydır: sprite.frameName = 'card4'çerçeve adı tam olarak doku atlas json dosyasında belirtildiği gibidir (açın ve görmek için bakın!).