Phaser का उपयोग करके स्प्राइटशीट से एक विशेष स्प्राइट प्रदर्शित करना

Question

मैं फेजर, एचटीएमएल 5 जेएस फ्रेमवर्क का उपयोग करके कार्ड गेम बनाने की कोशिश कर रहा हूं। क्योंकि मैं एक भयानक कलाकार हूं और अपना खुद का डिजाइन नहीं बना सकता, इसलिए मैं ऑनलाइन मिलने वाली कार्ड छवियों का मुफ्त स्प्रिटशीट का उपयोग कर रहा हूं। समस्या यह है, मुझे यह पता नहीं लग सकता है कि फेजर का उपयोग करके व्यक्तिगत कार्ड कैसे प्रदर्शित किया जाए।

मेरे द्वारा उपयोग की गई पिछली रूपरेखा में, मैं अपने द्वारा उपयोग की जाने वाली बड़ी स्प्राइट शीट से अलग-अलग छोटे स्प्राइट बनाने में सक्षम था। लेकिन मुझे यह पता नहीं चल सकता है कि फेजर में ऐसा कैसे करें, अगर यह बिल्कुल संभव है।

इसलिए मैंने स्प्रिटशीट के रूप में छवि को लोड करने में देखा, लेकिन ऐसा लगता है कि स्प्राइटशीट का उपयोग केवल एनीमेशन के लिए किया जाता है और आप वास्तव में स्प्राइटशीट के एक विशेष 'फ्रेम' को प्रदर्शित नहीं कर सकते हैं (कृपया गलत होने पर मुझे सही करें)।

मुझे लगता है कि मुझे जो करने की आवश्यकता है वह छवि को एक टिलमैप के रूप में लोड करना है, हालांकि, मैं जिस विशेष छवि का उपयोग कर रहा हूं, वह एक जसन फ़ाइल के साथ नहीं है जो लेआउट को निर्दिष्ट करती है (न ही मैं ऐसा कर पाया जो मुझे मिल गया)। जावास्क्रिप्ट के लिए नया होने के नाते मुझे फेजर स्रोत कोड को पढ़ने में परेशानी हो रही है यह देखने के लिए कि कैसे json फ़ाइल को स्वरूपित किया जाना चाहिए।

इसलिए सारांश में, फेजर में ताश के पत्तों की स्प्रिटशीट के अलग-अलग कार्ड को प्रदर्शित करने का सबसे अच्छा तरीका क्या है, यह देखते हुए कि मेरे पास एक जोंस फाइल नहीं है जो मानचित्र डेटा को निर्दिष्ट करता है?

Answer 1

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

स्प्राइटशीट एनिमेशन के लिए सीमित नहीं हैं, यह उनका उपयोग करने का सिर्फ एक तरीका है। एक एनीमेशन अलग-अलग समय में विभिन्न फ़्रेमों को प्रदर्शित करने का एक तरीका है। स्प्राइट के फ्रेम को मैन्युअल रूप से सेट करके, आप स्प्राइटशीट का एक विशिष्ट भाग प्रदर्शित कर सकते हैं।

Answer 2

फेज़र को दो प्रकार की स्प्राइट शीट का समर्थन प्राप्त है: "क्लासिक" वाले, जहाँ हर फ्रेम का आकार समान है, और "टेक्सचर एटलस" जो किसी तीसरे पक्ष के ऐप की मदद से बनाए जाते हैं जैसे कि टेक्सचर पैकर, शोएबॉक्स या फ्लैश सीसी और आते हैं। एक संबंधित json फ़ाइल के साथ।

आप "क्लासिक" वाले को लोड करते हैं game.load.spritesheetजहां आपको फ्रेम की चौड़ाई और ऊंचाई निर्दिष्ट करनी चाहिए, और वैकल्पिक रूप से मात्रा, यानी:

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

एक बनावट एटलस लोड करने के लिए आप उपयोग कर सकते हैं game.load.atlas। आपको Phaser उदाहरण रेपो में इसके बहुत सारे उदाहरण मिलेंगे।

एक बार लोड करने के बाद अपना स्प्राइट बनाएं:

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

यह फेजर को spriteSheetKeyइसकी बनावट के रूप में कुंजी के साथ छवि का उपयोग करने के लिए कहता है । डिफ़ॉल्ट रूप से यह स्प्राइट शीट के फ्रेम 0 पर कूद जाएगा, लेकिन आप इसे sprite.frameकिसी अन्य मान्य नंबर से बदल सकते हैं ।

यदि स्प्राइट एक बनावट एटलस का उपयोग कर रहा था, तो फ्रेम नाम के आधार पर फ्रेम को बदलना आसान है: sprite.frameName = 'card4'जहां फ्रेम नाम बिल्कुल बनावट एटलस जोंस फ़ाइल में निर्दिष्ट है (इसे खोलें और देखने के लिए इसे देखें!)।