👲🏼 🤱🏼 🚐 खेल "एक मल्टीप्लेयर ऑनलाइन गेम का विकास।" भाग 4: 3 डी में जा रहा है ⚱️ 🍝 ⭐️

भाग 1: वास्तुकला
भाग 2: प्रोटोकॉल
भाग 3: क्लाइंट-सर्वर इंटरैक्शन

हाल ही में, मैं एक उदाहरण के रूप में AWAY3D 4 इंजन का उपयोग करके 11 फ्लैश के साथ काम कर रहा हूं। इस इंजन पर रूसी में बहुत कम जानकारी है। व्यावहारिक रूप से इसके बारे में कुछ भी नहीं है। इसलिए मैंने इस बहुत ही दिलचस्प उत्पाद के बारे में कुछ लेख लिखने का फैसला किया। सरल हलकों और क्यूब्स के बारे में लिखना पूरी तरह से दिलचस्प नहीं है। मुझे एक वैक्यूम में गोलाकार घोड़ों पर चर्चा करना पसंद नहीं है।
सामान्य तौर पर, मैंने इंजन के विवरण को कम यथार्थवादी उदाहरण पर बनाने का फैसला किया। हम अपने खेल को शीर्ष 3 डी शूटर में स्थानांतरित करेंगे। और हम विकास जारी रखेंगे, लेकिन 3 डी प्रौद्योगिकियों के उपयोग के साथ।
बेशक, मुझे पता है कि एक अल्टरनेटिव 3 डी इंजन है। लेकिन मुझे कई कारणों से उनका उत्पाद पसंद नहीं है। हम लेख में उनकी चर्चा नहीं करेंगे; यदि आपके कोई प्रश्न हैं, तो आपका स्वागत है।

सामान्य तौर पर, हम एक विकल्प का विकल्प तैयार करेंगे ...

तो हम क्या पाना चाहते हैं?

हमारे 2D मल्टीप्लेयर गेम का 3D में अनुवाद करें।

चलिए शुरू करते हैं।

हम निम्नलिखित तकनीकों का उपयोग करेंगे:

एक मंच के रूप में फ्लैश 11
AWAY3D 4, 3 डी इंजन के रूप में
FlashDevelop 4 एक विकास के वातावरण के रूप में
ब्लेंडर 2.61 खेल वस्तुओं और बड़े पैमाने पर दुनिया के एक संपादक के रूप में।

AWAY3D क्यों? यह सरल है, स्रोत Gihub पर उपलब्ध है। पुस्तकालय सक्रिय रूप से विकसित हो रहा है (कमिट बहुत बार-बार होता है) और आप हमेशा कुछ ठीक कर सकते हैं या पूरक कर सकते हैं। ठीक है, तो स्रोत में शामिल करने के लिए उन्हें भेजें। समुदाय आपका आभारी रहेगा। साथ ही, लाइब्रेरी की पर्याप्त बड़ी विशेषताएं हैं। साथ ही उस पर किताबें हैं।

AWAY3D 4 क्या है? यह 11 फ्लैश के लिए एक 3 डी लाइब्रेरी है, जिसका अर्थ है कि वीडियो कार्ड के GPU का उपयोग करके वस्तुओं को प्रदर्शित करना। यह हमें मंच पर जटिल वस्तुओं को प्रकाश व्यवस्था, विभिन्न प्रभावों ... और यह सब एक सभ्य गति से दिखाने का अवसर देता है।
यह ध्यान दिया जाना चाहिए कि AWAY3D में Flash10 का एक संस्करण है, जिसमें सॉफ्टवेयर रेंडरिंग का उपयोग करके प्रदर्शन किया जाता है। चूंकि इस मामले में सभी गणना सीपीयू के कंधों पर गिरती हैं, इसलिए गति कई बार गिरती है। खैर, विभिन्न प्रभावों को आउटपुट करने की क्षमता बहुत कम हो गई है। लेकिन यह संस्करण सरल परियोजनाओं के लिए उपयोगी हो सकता है। 11 वीं फ्लैश के लिए अभी जारी किया गया है और सभी ने इसे स्थापित नहीं किया है। और सभी वीडियो कार्ड इसका समर्थन नहीं करते हैं।
लेकिन हर दिन स्थिति में सुधार हो रहा है, इसलिए हम प्रगति की धार पर हैं, 11 वें फ्लश के लिए नवीनतम संस्करण का उपयोग करेंगे।
उन लोगों के लिए, विवरण यहाँ सुविधाओं से मिल सकते हैं

हम परियोजना की वास्तुकला से परेशान नहीं होंगे। लेख का उद्देश्य प्रोग्रामिंग गाइड नहीं है, बल्कि प्रौद्योगिकी का परिचय है। भविष्य में, यदि लेख पाठकों से प्रतिक्रिया पाते हैं, तो वास्तुकला में सुधार के साथ रिफैक्टिंग के रूप में जारी रखना संभव है ... ठीक है, सामान्य तौर पर, परियोजना का विकास।

समस्याओं से बचने के लिए, आपको यह सुनिश्चित करने की आवश्यकता है कि आपके पास नवीनतम फ्लैश और फ्लैशड्यूवल स्थापित है। यह सुनिश्चित करता है कि स्रोत कोड संकलित है और सही ढंग से चलता है।

AWAY3D आधार

FlashDevelop में AS3 प्रोजेक्ट बनाएं और AWAY3D लाइब्रेरी को इससे कनेक्ट करें। इंजन को कनेक्ट करना बेहद सरल है। GITHub परियोजना से AWAY3D स्रोतों को डाउनलोड करें और उन्हें हमारी परियोजना के src फ़ोल्डर में कॉपी करें। वह सब है।

AWAY3D में मंच पर क्या हो रहा है, इसकी समझ को और सरल बनाने के लिए, मैं एक चित्र दूंगा जो आपको दृश्य के स्थान को नेविगेट करने में मदद करेगा।

यह समन्वय अक्षों को दिखाता है, क्योंकि वे AWAY3D इंजन पर प्रस्तुत किए जाते हैं। यानी डिफ़ॉल्ट रूप से, आगे Z + है, और Y + ऊपर है।

इंजन के साथ काम करने का मूल सिद्धांत बहुत सरल है। आपको View3D दृश्य को इनिशियलाइज़ करना होगा। कैमरा सेट करें, जबकि हम मंच पर कैमरे की स्थिति का संकेत देते हैं। कैमरा दृश्य के हमारे दृश्य को प्रदर्शित करने के लिए जिम्मेदार वस्तु है। यानी हम स्क्रीन पर क्या देखेंगे, हमारी आँखें, इसलिए बोलने के लिए।
अगला, आपको प्रकाश स्रोत की स्थिति की आवश्यकता है। वे अलग-अलग हैं, बिंदु, बिखरे हुए, आदि। हम एक बिंदु स्रोत का उपयोग करेंगे (प्रकाश सभी दिशाओं में एक बिंदु से समान रूप से फैलता है), यह सूर्य को चित्रित करेगा। सिद्धांत रूप में, आप इसके बिना कर सकते हैं, लेकिन फिर मंच पर कोई छाया नहीं होगी।
दृश्य की गणना और प्रदर्शित करने के लिए, view.render () कमांड का उपयोग करें। इसे हर फ्रेम कहा जाना चाहिए। फिर आप मंच पर ऑब्जेक्ट बना सकते हैं और उन्हें हेरफेर कर सकते हैं।

शुरू करने के लिए, आइए एक सरल प्रोजेक्ट लिखें जो हमें एक क्यूब दिखाता है। यह समझना आवश्यक है कि यह आम तौर पर कैसे शुरू होता है और काम करता है। खैर, यह जांचने के लिए कि सब कुछ जुड़ा हुआ है और सही ढंग से काम कर रहा है।

जल कोड वह वर्ग है जो घन को प्रदर्शित करता है। सभी स्पष्टीकरण कोड में हैं। वह बहुत सरल है।

public class Main extends Sprite { //    private var view : View3D; //   public var light: PointLight; //   public var player: ObjectContainer3D; public function Main():void { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { removeEventListener(Event.ADDED_TO_STAGE, init); // entry point //   view = new View3D(); view.camera.y = 140; view.camera.z = -120; view.camera.rotationX = 50; addChild(view); //  addChild(new AwayStats(view)); //     addPlayer(); stage.addEventListener( Event.ENTER_FRAME, onEnterFrame ); } public function addPlayer():void { //   player = new ObjectContainer3D(); //      var bitmapData: BitmapData = new BitmapData(512, 512, false, 0x000000); bitmapData.perlinNoise(64, 64, 5, 0, false, true, BitmapDataChannel.RED); //    var material: BitmapMaterial = new BitmapMaterial(bitmapData); //     var mesh:Mesh = new Cube(material, 50, 50, 50); player.addChild(mesh); view.scene.addChild(player); } public function onEnterFrame( e:Event ):void { player.rotationX += .11; player.rotationY += .15; player.rotationZ += .19; view.render(); } }

परिणामस्वरूप, स्टार्टअप पर आपको निम्न चित्र देखना चाहिए।

यदि यह मामला नहीं है, तो यह देखने के लिए जांचें कि क्या आपने सब कुछ सही ढंग से किया है। इंस्टॉल किए गए फ्लैश और फ्लैशडेवलप के संस्करणों की जांच करें।

अब जब हम आश्वस्त हैं कि परियोजना शुरू हो रही है और काम कर रही है, तो हम अपने खिलौने में दूसरी बुनियादी बात करेंगे। अर्थात्, हम खेल में ब्लेंडर में बनाए गए मॉडल को लोड करेंगे। इस पर पूरा प्रोजेक्ट बनाया जाएगा।
इंटरनेट ब्लेंडर के साथ काम करने से सबक से भरा है, इसलिए हम इस पर ध्यान केंद्रित नहीं करेंगे। बस ब्लेंडर खोलें और इसमें एक मॉडल बनाएं जिसमें एक घन शामिल है। 20 से 20 के आकार के 20. 20. अब पूर्णरूपेण मॉडल बनाने का कोई मतलब नहीं है। आगे के पाठों में हम एक तैयार मॉडल लेंगे, जो इंटरनेट पर एक वैगन और एक छोटी गाड़ी है। और अब हमें यह सुनिश्चित करने की आवश्यकता है कि हमारे सभी पर्यावरण सही ढंग से काम करते हैं और मॉडल लोड हो रहे हैं।
हमारी परियोजना में हम 3DS मॉडल के प्रारूप का उपयोग करेंगे। एक बार मॉडल तैयार करने के बाद, इसे 3DS प्रारूप में निर्यात करें। अभी के लिए, परिणामस्वरूप फ़ाइल को प्रोजेक्ट के बिन फ़ोल्डर में डालें। तो उसको पाना आसान हो जाएगा।

अब आयात शुरू करते हैं।

AWAY3D में ऑब्जेक्ट लोड करना बहुत सरल है। सभी की जरूरत है कि Loader3D क्लास है। यह सार्वभौमिक है और सभी प्रारूपों को डाउनलोड करता है। यह निर्दिष्ट किया जा सकता है कि हम किस प्रारूप में ऑब्जेक्ट को लोड करेंगे, लेकिन यह आवश्यक नहीं है। पार्सर को निर्दिष्ट करने के लिए आप Parsers.enableAllBundled () कमांड का उपयोग कर सकते हैं, सभी प्रारूपों को स्वीकार कर सकते हैं। लोडर 3 डी खुद समझ जाएगा कि हम वास्तव में क्या जहाज करते हैं।
सिद्धांत रूप में, एक मॉडल को लोड करने में कोड की केवल 4 लाइनें लगती हैं।

 Parsers.enableAllBundled(); loader = new Loader3D(); loader.addEventListener(LoaderEvent.RESOURCE_COMPLETE, onResourceComplete); loader.load(new URLRequest("model.3ds"));

यहां हमने संकेत दिया कि हम सभी प्रारूपों को स्वीकार करते हैं, एक लोडर 3 डी ऑब्जेक्ट बनाया और उसे बताया कि वास्तव में क्या डाउनलोड करने की आवश्यकता है। घटना LoaderEvent.RESOURCE_COMPLETE हमें बताएगा कि डाउनलोड प्रक्रिया पूरी हो गई है और आप मॉडल के साथ काम कर सकते हैं।
मूल संस्करण में, सब कुछ सरल है। लेकिन लोड करते समय, त्रुटियां हो सकती हैं या मॉडल को लोड करते समय, इसे किसी प्रकार की प्रसंस्करण की आवश्यकता होगी। सामान्य तौर पर, वास्तविक परियोजनाओं में, सब कुछ अधिक जटिल होता है। और इसके लिए, इंजन में यह सब है। आप घटना को लोडरइवेंट से जोड़ सकते हैं। LAD_ERROR, यह त्रुटि लोडिंग को पकड़ लेगा। या घटना LoaderEvent.ASSERT_COMPLETE, जो तब शुरू होती है जब मॉडल के प्रत्येक भाग को संसाधित किया जाता है। जब हम मॉडल के साथ और अधिक विस्तार से काम करते हैं, तो हम निम्नलिखित बारीकियों में इन बारीकियों का विश्लेषण करेंगे।

यहां दृश्य पर मॉडल लोड करने वाला कार्य कोड है।

 public class PlayerLoad { // 3D private var view:View3D; private var main: Main; // loader private var loader:Loader3D; public function PlayerLoad( view_:View3D, main_: Main ) { main = main_; //     view = view_; // ,      Parsers.enableAllBundled(); loader = new Loader3D(); loader.addEventListener(LoaderEvent.RESOURCE_COMPLETE, onResourceComplete); //    loader.load(new URLRequest("model.3ds")); } private function onResourceComplete(e:Event):void { //     main.player = ObjectContainer3D(e.target); //     view.scene.addChild( main.player ); } }

वर्ग मुख्य में यह भी आवश्यक है कि ऐडप्लेयर () विधि को निम्नलिखित के साथ बदलें

 public function addPlayer():void { //   var load: PlayerLoad = new PlayerLoad( view, this ); }

यदि आपने सब कुछ सही ढंग से किया है, तो स्टार्टअप पर आपको एक सफेद घूर्णन क्यूब दिखाई देगा।

यह परिचय था। जिसमें हमने परियोजना बनाई, आवश्यक पुस्तकालयों से जुड़ा, काम के माहौल की जाँच की और सुनिश्चित किया कि सब कुछ काम करता है।
यदि विषय दिलचस्प है, तो अगले भाग में मैं अधिक विस्तार से वर्णन करूंगा, कैमरे के साथ काम करना, वस्तुओं में हेरफेर करना और सामग्री के साथ काम करना।

सभी स्रोत गिहब पर उपलब्ध हैं

पुनश्च इसके अलावा, यह ब्याज के उन बिंदुओं को इंगित करने के लिए उपयोगी होगा जिन पर आपको ध्यान देना चाहिए।

खेल "एक मल्टीप्लेयर ऑनलाइन गेम का विकास।" भाग 4: 3 डी में जा रहा है

AWAY3D आधार

More articles: