मैंने React Native पर अपना पहला Android गेम कैसे बनाया

नमस्ते। मैं प्रोगोस्लिंग हूँ। मैं आपको बताऊंगा कि मैंने React Native में अपना पहला मोबाइल गेम कैसे लिखा। यह सब तब शुरू हुआ जब मुझे अपने गेम के लिए मुफ्त छवि संसाधन मिले। उन्होंने मुझे गेम बनाने के लिए प्रेरित किया। यहाँ पानी, नाव, मछुआरा और बादल के संसाधन हैं।

React-native में कई समुदाय-मान्यता प्राप्त पुस्तकालय हैं जो तत्वों की गति को एनिमेट करने के लिए आमतौर पर उपयोग किए जाते हैं। आमतौर पर यह: react-native-reanimated और react-native-redash होते हैं। लेकिन हाल ही में react-native-skia आया है। जो react-native-reanimated, react-native-redash के साथ एकीकरण की पेशकश करता है। इसमें Canvas भी शामिल है, जो हमारे ड्राइंग का आधार होगा।

पूरा गेम <Image> घटक का उपयोग करके बनाया गया है। जिसमें मैं वर्तमान फ्रेम के अनुसार चित्र की स्थिति बदलता हूँ। यह कैसे काम करता है? मैंने <Image /> को <Group /> के साथ लपेटा ताकि अतिरिक्त फ्रेम को ट्रिम करना और clip प्रॉप्स का उपयोग करके केवल वर्तमान फ्रेम को प्रदर्शित करना संभव हो सके।

यह अंतिम एनिमेशन जैसा दिखता है।

पानी एक छवि है जो एक समूह में संयोजित होती है और इस समूह की स्थिति useTiming फ़ंक्शन के अनुसार बदलती है। प्रत्येक पानी की छवि के लिए, वर्तमान फ्रेम useTiming के अनुसार बदलता है। यह पानी की गति एनिमेशन को अधिक रोचक बनाता है।

चम्मच की गति का एनिमेशन। useTouchHandler पर निर्भर करता है और बस नाव की स्थिति में +10 या -10 जोड़ता है, इस पर निर्भर करता है कि उपयोगकर्ता ने स्क्रीन के किस तरफ क्लिक किया। नाव की रोइंग एनिमेशन भी useTouchHandler से शुरू होती है और runTiming फ़ंक्शन वर्तमान फ्रेम को बदलता है।

मछली खींचने का एनिमेशन useTouchHandler से शुरू होता है, नाव की रोइंग एनिमेशन के समान। लेकिन खींचने के एनिमेशन में runTiming फ़ंक्शन में एक विशेषता है, एक कॉलबैक जोड़ा जाता है जिसमें जाँच होती है। यदि मछली पकड़ने की छड़ी की स्थिति और मछली की स्थिति मेल खाती है, तो उपयोगकर्ता को +1 अंक मिलता है। अंक सामान्य setState का उपयोग करके गणना की जाती है।

अच्छा, अंतिम एक प्रारंभिक मोडल विंडो है। यह <Modal /> घटक है।

आप इस गेम को Google Play पर रेट कर सकते हैं और गेम साइट की जाँच करें। गेम का नाम फिशिंग पिक्सेल आर्ट है। क्या आपने कभी react native का उपयोग करके गेम बनाने की कोशिश की है? आप क्या बदलने और अनुकूलित करने की सिफारिश करेंगे?