การแสดงสไปรต์เฉพาะจากสไปรต์ชีตโดยใช้ Phaser

ฉันกำลังพยายามสร้างเกมการ์ดโดยใช้ Phaser ซึ่งเป็นเฟรมเวิร์ก HTML5 JS เพราะฉันเป็นศิลปินที่แย่มากและไม่สามารถออกแบบของตัวเองได้ฉันจึงใช้สไปรต์แผ่นภาพเล่นไพ่ฟรีที่ฉันพบทางออนไลน์ ปัญหาคือฉันไม่สามารถหาวิธีแสดงบัตรแต่ละใบโดยใช้ Phaser

ในกรอบก่อนหน้านี้ที่ฉันใช้ฉันสามารถสร้างสไปรต์ขนาดเล็กทีละตัวจากแผ่นสไปรต์ขนาดใหญ่ที่ฉันใช้ แต่ฉันไม่สามารถหาวิธีที่จะทำได้ใน Phaser ถ้าเป็นไปได้

ดังนั้นฉันจึงมองไปที่การโหลดภาพเป็นแผ่นสไปรต์ แต่ดูเหมือนว่าสไปรต์แผ่นโฆษณานั้นใช้สำหรับการเคลื่อนไหวเท่านั้นและคุณไม่สามารถแสดง 'กรอบ' ของสไปรต์แผ่นโฆษณาที่เฉพาะเจาะจงได้จริงๆ

ฉันคิดว่าสิ่งที่ฉันต้องทำคือการโหลดภาพเป็น tilemap อย่างไรก็ตามภาพเฉพาะที่ฉันใช้ไม่ได้มาพร้อมกับไฟล์ json ที่ระบุรูปแบบ (ฉันไม่สามารถหาได้) เป็นสิ่งใหม่สำหรับ javascript ฉันมีปัญหาในการอ่านซอร์สโค้ดของ Phaser เพื่อดูว่าควรจัดรูปแบบไฟล์ json อย่างไร

โดยสรุปแล้ววิธีที่ดีที่สุดในการแสดงการ์ดแต่ละแผ่นของ spritesheet การเล่นไพ่ใน Phaser เป็นเพราะฉันไม่มีไฟล์ json ที่ระบุข้อมูลแผนที่

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

Spritesheets ไม่ได้ จำกัด อยู่กับอนิเมชั่นนั่นเป็นเพียงวิธีหนึ่งในการใช้งาน แอนิเมชันเป็นเพียงวิธีการแสดงเฟรมต่าง ๆ ในเวลาต่างกัน ด้วยการตั้งค่าเฟรมของสไปรต์ด้วยตนเองคุณสามารถแสดงส่วนเฉพาะของสไปรต์

Phaser รองรับแผ่นสไปรต์สองประเภท: "คลาสสิค" ซึ่งทุกเฟรมมีขนาดเท่ากันและ "พื้นผิวแผนที่" ซึ่งสร้างขึ้นด้วยความช่วยเหลือของแอพบุคคลที่สามเช่น Texture Packer, Shoebox หรือ Flash CC ด้วยไฟล์ json ที่เกี่ยวข้อง

คุณโหลดคน "คลาสสิค" game.load.spritesheetที่คุณต้องระบุความกว้างและความสูงของเฟรมและเลือกปริมาณเช่น:

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

ในการโหลดแผนที่พื้นผิวที่คุณสามารถgame.load.atlasใช้ได้ คุณจะพบตัวอย่างมากมายจากนี้ใน repo ตัวอย่างของ Phaser

เมื่อโหลดแล้วสร้างเทพดาของคุณ:

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

สิ่งนี้บอกให้ Phaser ใช้ภาพที่มีปุ่มspriteSheetKeyเป็นพื้นผิวของมัน โดยค่าเริ่มต้นมันจะข้ามไปที่เฟรม 0 ของแผ่นสไปรต์ แต่คุณสามารถเปลี่ยนได้sprite.frameหมายเลขที่ถูกต้องอื่น ๆ ได้

ถ้าเทพดาใช้แผนที่พื้นผิวง่ายต่อการเปลี่ยนเฟรมตามชื่อเฟรม: sprite.frameName = 'card4'โดยที่ชื่อเฟรมตรงตามที่ระบุไว้ในไฟล์เท็กซ์เจอร์ atlas json (เปิดขึ้นและดูเพื่อดู!)