एक वीडियो पर आधारित डेमो :
उदाहरण 1 - आप एक बड़े मशरूम हैं, और टैबलेट हर जगह हैं (जैसे एसिड पार्टी में)
उदाहरण 2 - ट्रक चला रहा आदमी
उदाहरण 3 - दोषपूर्ण ईंटों को कुएँ में फेंकना
उदाहरण 4 - रोबोट बैटल (PvP)

डुप्लिकेट सर्वर: 1 , 2 , 3 , 4


हाय हाबरा! यह स्टालिनग्राद गेम इंजन के बारे में तीसरा लेख है। पिछले लेखों में, आपने और मैंने पहले ही DHTML और कुछ असंतुष्ट वास्तुकला का बलात्कार किया है। यह लेख दो भागों में होगा - अभ्यास और सिद्धांत। यदि आप एक वेब डेवलपर नहीं हैं, तो आप तुरंत सिद्धांत के माध्यम से फ्लिप कर सकते हैं (शायद यह आपके लिए दिलचस्प होगा या कुछ सलाह लिखेंगे)।

पिछले लेखों में क्या माना गया था:
उत्पादन को अंतिम रूप दिया
JS -> EXE -> CHM -> APK
वास्तुकला के बारे में
हथियार का विश्लेषण
कैमरा पार्सिंग

पहला गेम लिख रहे हैं

एक खेल बनाने का उदाहरण:

<div id="TV"><div> 

 var S = StalinGrad, //  ,    Russia = S.world(), //   ORT = S.camera(Russia, "TV"), //   Vova = S.people("robot1"); //   S.map(Russia, "Moscow"); //     S.module.controller(Vova); //     ORT.bind(Vova); //     Russia.add(Vova); //     

क्या होता है इसका डेमो यहां पाया जा सकता है ।



अधिक की उम्मीद है? लेकिन अगले 10 हजार पत्रों का विश्लेषण करेंगे कि यहां क्या लिखा गया है। आप इसमें और पिछले लेखों में डेमो कोड देख सकते हैं। लिपियों को लगभग हर जगह 20 से कम लाइनों में फिट किया जाता है। शायद आप में से कुछ पूछेंगे कि लेख का शीर्षक यह क्यों नहीं है: "- एक मिनट में जावास्क्रिप्ट में गेम कैसे लिखें?"। क्योंकि हम सभी (अच्छी तरह से, या 95%) अच्छी तरह से जानते हैं कि यह सिर्फ एक डेमो है। खेल के उत्पादन में जाने के लिए, आपको अभी भी मॉड्यूल, खेल इंटरफ़ेस, मेनू, मिशन, स्तरों के बीच वीडियो, स्क्रीनसेवर, संदेश, एक भूखंड के बारे में सोचना, स्तर के नक्शे के माध्यम से सोचना और बॉट का एक गुच्छा बनाना, विभिन्न प्रबंधकों और डिजाइनरों के साथ चर्चा करना, एक फटकार प्राप्त करना होगा। ग्राहक से, 100 जादू कीड़े को ठीक करें, "सीटी और फेक" के सभी प्रकार के लिए "पास्ता कोड" का एक गुच्छा लिखें। और रिलीज के दिन, ग्राहक आपको एक छोटा संशोधन करने और आधे प्रोजेक्ट को फिर से बनाने के लिए कहेंगे (इसके अलावा, केवल बैसाखी के साथ, क्योंकि ऐसा करने के लिए कोई और समय नहीं है)। हम कह सकते हैं कि स्टालिनग्राद उन लोगों के लिए नहीं है जो 20 मिनट में एक एचटीएमएल 5 गेम लिखते हैं, लेकिन उन लोगों के लिए जो कई दिनों / हफ्तों / महीनों के लिए जावास्क्रिप्ट का मजाक उड़ाते हैं।

हमने पिछले लेख में आपके साथ काम के सामान्य तर्क पर चर्चा की है, लेकिन इसमें हम प्रत्येक पंक्ति और एपीआई पर एक नज़र डालते हैं।

कैसे एक दुनिया बनाने के लिए

 StalinGrad.world(); 

प्रत्येक दुनिया में मानक मापदंडों का एक सेट होता है, उदाहरण के लिए: लंबाई, ऊंचाई, दिन का समय, गुरुत्वाकर्षण, वायु घर्षण, आदि। यहां, ऑब्जेक्ट बनाते समय, आप अपने पैरामीटर निम्न तरीके से सेट कर सकते हैं:

 var temp = StalinGrad.world({ frictionOfTheAir: 0.01, //   gravitation: 88.2, //  jiffy: 0.05, //  ""  .  meter: 10, //  ""  .  max: { x: 3300, //   y: 400, //   speed: { x: 20, //     X y: 20 //     Y } }, respawn: { //   ,      x: 0, //       —       y: 0 } ...  .. }); 

दुनिया में प्रत्येक वस्तु का अपना एपीआई है। इसमें सबसे महत्वपूर्ण कार्य हैं: दुनिया में वस्तुओं को जोड़ने और उन्हें हटाने के लिए, क्रमशः जोड़ें () और निकालें ()।

कैसे एक वस्तु बनाने के लिए

ऑब्जेक्ट बनाने के लिए सामान्य योजना:

 StalinGrad._("_"); 

उदाहरण के लिए, वर्ण:

 StalinGrad.people("nyancat"); StalinGrad.people("ninja"); StalinGrad.people("mushroom"); 

या कुछ और:

 StalinGrad.block("brick"); StalinGrad.material("floor"); StalinGrad.weapon("portal"); 

इस निर्माण के साथ, प्रत्येक ऑब्जेक्ट को निर्देशांक x = 0 और y = 0. प्राप्त होता है इसलिए, ऑब्जेक्ट बनाते समय, निर्देशांक को इंगित करना वांछनीय है जिसमें यह स्थित होगा। यदि आप ऐसा नहीं करते हैं और दुनिया में किसी ऑब्जेक्ट को जोड़ना शुरू करते हैं, तो यह कंसोल को एक त्रुटि देगा: "मैं एक ऑब्जेक्ट नहीं जोड़ सकता। यह स्थान पहले से ही किसी अन्य ऑब्जेक्ट द्वारा लिया गया है। " इसलिए इस तरह लिखें:

 StalinGrad._(x, y, "_"); 

उदाहरण के लिए:

 StalinGrad.block(0, 25, "brick"); StalinGrad.material(0, 50, "floor"); 

अधिकांश वस्तुओं की मानक चौड़ाई / ऊँचाई 25 से 25 है। मुझे उस समय प्रारंभिक निर्देशांक सेट करने की आवश्यकता क्यों है जब ऑब्जेक्ट बनाया गया था, और बाद में नहीं? क्योंकि वस्तुओं में निर्देशांक शुरू और अंत होते हैं। यदि आप ऑब्जेक्ट बनाते समय प्रारंभिक x और y निर्दिष्ट करते हैं, तो अंतिम x और y स्वतः प्राप्त हो जाएंगे (x अधिकतम = x न्यूनतम + लंबाई)। यदि आप उन्हें बाद में पूछने का फैसला करते हैं, तो आप खुद को अधिकतम निर्देशांक मानेंगे। उदाहरण के लिए:

 vav cat = StalinGrad.people("nyancat"); cat.x.min = 50; cat.x.max = cat.x.min + cat.width; 

और इससे भी बेहतर - निर्देशांक में बिल्कुल मत जाओ, क्योंकि सबसे अधिक संभावना है कि आपका कार्य एपीआई के माध्यम से हल किया जा सकता है।

यदि किसी कारण से आपको किसी ऑब्जेक्ट के प्रारंभिक गुणों को और भी अधिक बदलना है, तो आप इस सिंटैक्स का उपयोग कर सकते हैं:

 var temp = StalinGrad.block({ x: 0, //    X y: 25, //    Y type: "brick", //  width: 400, //  height: 200 //  ...  .. }); 

सभी उपलब्ध प्रकारों की जानकारी आप इस तालिका में देख सकते हैं।



गेम इंजन Cocos2D इंटरनेट पर व्यापक रूप से जाना जाता है। मुझे यह बहुत पसंद आया, इसलिए मैंने स्टालिनग्राद में इसका आधार आयात करने का फैसला किया। दुर्भाग्य से, कोड को फिर से भरने के बाद, नारियल का सार बहुत बदल गया है (केवल नाम शेष है)। आप इसे निम्न आदेश के साथ प्राप्त कर सकते हैं:

 StalinGrad.grugs("cocos"); 

और इसे दुनिया में जोड़ें, उदाहरण के लिए, इस तरह:

 var cc = StalinGrad.grugs("cocos"); Russia = StalinGrad.world(); Russia.add(cc); 

और चारित्रिक रूप से, नारियल 2 डी में भी है। आप कैटलॉग में ड्रग्स वर्ग की अन्य वस्तुओं के बारे में विस्तृत जानकारी देख सकते हैं।

आपमें से कई लोगों के पास शायद एपीआई के बारे में निम्नलिखित प्रश्न थे: "- एपीआई में अलग-अलग कार्यों को उनके शब्दों के अतिरिक्त प्रकारों से अलग क्यों नहीं किया जाता है?" उदाहरण के लिए, निम्नलिखित योजनाओं को बनाना अधिक तर्कसंगत है:

 StalinGrad.object.people("nyancat"); StalinGrad.object.grugs("cocos"); 

फिर यह तुरंत स्पष्ट हो जाता है कि लोग और ग्रग्स वस्तुओं के साथ काम करने के तरीके हैं। लेकिन यह अनुभव के लिए स्पष्ट है, लेकिन जूनियर्स के लिए - इसके विपरीत। इसके अलावा, हमें निर्माण में एक अतिरिक्त शब्द याद रखना होगा, जिसे छोटा किया जा सकता है। पूरी तरह से jQuery और Backbone का सार प्रकट करते हैं। JQuery में, कई विधियां इतनी सहज हैं कि आप यह भी अनुमान लगा सकते हैं कि क्या वे दस्तावेज को पढ़े बिना उपलब्ध हैं। लेकिन प्रलेखन के बिना रीढ़ बिल्कुल स्पष्ट नहीं है।

कैसे एक फ़ारसी को धोखा

आइए चरित्र के व्यक्तिगत सामान के साथ काम का विश्लेषण करें। ईमानदारी से, मैं एक पर्याप्त एपीआई के साथ नहीं आया था, इसलिए फिलहाल योजना इस प्रकार है:

 .bag.___API(); 

एक बैग के साथ एक लड़के की कल्पना करें और एपीआई देखें:

 left(cat); //      right(cat); //      show(cat); //   (,   ) hide(cat); //   ( ,     —  ) set(cat, index); //     ...  get(cat); //      add(cat, id); //    id ...   (    ) remove(cat, index); //     ...   

उदाहरण के लिए:

 cat.bag.left(cat); 

एपीआई कुटिल है और मुझे यह पसंद नहीं है। इसलिए मैं भविष्य में फिर से लिखूंगा। आपको हर बार चरित्र को फेंकना होगा, क्योंकि नेस्टिंग के कारण, मुझे उस मूल ऑब्जेक्ट का लिंक नहीं मिल सकता है, जहां से कॉल श्रृंखला प्रोटोटाइप से शुरू हुई थी। यदि आपके पास बैकप एपीआई को अधिक पर्याप्त तरीके से लागू करने के बारे में विचार हैं, तो टिप्पणियों में लिखें।

कैमरा कैसे बनाये

कैमरा बनाने और दुनिया को देखने का समय आ गया है:

 var NTV = StalinGrad.camera("id_div_"); //     DIV    var RTVi = StalinGrad.camera(_, "id_div_"); //          DIV 

हमेशा एक वस्तु बनाते समय, आप अतिरिक्त सेटिंग्स निर्दिष्ट कर सकते हैं:

 var MTV = StalinGrad.camera({ world: Russia, // ,    maxRendering: { //   x: 400 y: 300 }, screenResolution: { //   x: 400 y: 300 } x: 0, //    y: 0 //   Y }); 

प्रत्येक कैमरे में एक एपीआई भी होता है, जैसे जॉयस्टिक: लेफ्ट (), राइट (), अप (), आदि। अंतिम खंड में प्रलेखन देखें। उदाहरण के लिए:

 RTVi.left(); //    RTVi.resize(); //      

खैर, हमारे लिए सबसे महत्वपूर्ण बाँध () विधि है, जो कैमरे को चरित्र में संलग्न करना आवश्यक है। उदाहरण के लिए:

 ORT.bind(Vova); 

वैसे, आप एक चरित्र सहित, और केवल एक अक्ष के साथ एक कैमरा टाई कर सकते हैं। उदाहरण के लिए:

 ORT.bind({ object: Vova, // ,     type: "x", // ,    correction: { //   x: 2, y: 3 } }); 

आप शायद पहले से ही अपने आप से सवाल पूछते हैं: "- निर्देशांक का अनुपात क्या है?" तथ्य यह है कि यदि चरित्र आदर्श रूप से फ्रेम के केंद्र में स्थित है, तो यह अजीब लगता है। इसलिए, एक छोटी ऑफसेट निर्दिष्ट है। इस उदाहरण में, चरित्र को X आधी स्क्रीन में फ़्रेम की शुरुआत के बाईं ओर स्थानांतरित किया जाएगा, और फ़्रेम की शुरुआत से एक तिहाई। आप सेटिंग्स बदल सकते हैं और सुनिश्चित कर सकते हैं कि केंद्र की स्थिति आँखों को नुकसान पहुंचाती है (सुधार x = 2, y = 2)।

खो सेटिंग्स के साथ डेमो

जॉयस्टिक बनाने के लिए कैसे

जैसा कि मैंने पिछले लेख में लिखा था, एक चरित्र को नियंत्रित करने के लिए, हमें एक जॉयस्टिक चाहिए। आइए इसे बनाएं:

 var joystick = StalinGrad.controller(Vova); 

किसी भी जॉयस्टिक में एक मानक एपीआई है: बाएं (), दाएं (), हमला (), उपयोग (), बारी (), ऊपर (), नीचे ()। यह इस एपीआई के माध्यम से है कि आपको चरित्र को नियंत्रित करना चाहिए, लेकिन निर्देशांक में नहीं आना चाहिए;)

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

 StalinGrad.module.controller(Vova); 

वस्तु रजिस्ट्री

कोई भी कारखाना, जिन्हें ऊपर माना गया था, आपके पास किसी वस्तु पर लौटने से पहले इसे गेम ऑब्जेक्ट के एक ही रजिस्टर में जोड़ देगा। वस्तुओं के बीच एक दूसरे से सीधे संपर्क को हटाने के लिए यह आवश्यक है। हम पिछले लेख में इस विषय पर पहले ही छू चुके हैं। एक-दूसरे का जिक्र करना बुरा है। यह स्केलेबिलिटी के साथ समस्याएँ पैदा करता है, वस्तुओं को हटाते समय, मेमोरी लीक को रोकने की कोशिश करते समय, आदि। इसके अलावा, जब वस्तुओं को घोंसले में डालना, उन्हें JSON.stringify के माध्यम से एक स्ट्रिंग में बदलना पूरी तरह से असंभव है। इसलिए, चरित्र की चीजें केवल चीजों की आईडी हैं, परिवहन के अंदर यात्री केवल यात्रियों की आईडी हैं, आदि। आपको फ़ंक्शन / लोड कार्यों के लिए सब कुछ स्ट्रिंग में बदलने की आवश्यकता है। लेकिन उनके बारे में एक और समय।

वस्तुओं की रजिस्ट्री एफएमएस की तरह है, केवल आभासी है। आप इसे इस तरह एक्सेस कर सकते हैं:

 StalinGrad.registry.get("id_"); 

इसके माध्यम से, सभी तृतीय-पक्ष मॉड्यूल काम करते हैं जिनके पास घर पर उदाहरण के लिए लिंक स्टोर करने का अधिकार नहीं है, क्योंकि यह मेमोरी लीक जैसी अप्रत्याशित समस्याएं पैदा कर सकता है, आदि।

नियंत्रक मॉड्यूल कैसे काम करता है

हमारे द्वारा किए गए लगभग हर खेल में, हमारे पास खिलाड़ी द्वारा नियंत्रित मुख्य चरित्र होता है। सभी खेलों में प्रबंधन मानक है, इसलिए हमें कीबोर्ड पर जॉयस्टिक संलग्न करने के लिए एक ही समस्या को हल करना होगा। इससे छुटकारा पाने के लिए, कोड को मॉड्यूल में निकाल लिया जाता है, और मॉड्यूल का उपयोग 99% मामलों में किया जाता है, इसलिए इसे इंजन कोर में शामिल किया गया है। नियंत्रण के लिए ही, यह यह है: एडब्ल्यूएसडी या तीर, ई - उपयोग, एन्टर - शूट, ई - स्विच मोड (उदाहरण के लिए, ग्रेविटी गन मोड)। इसके अलावा, डुप्लिकेट बटन का एक गुच्छा भी जुड़ा हुआ है ताकि खिलाड़ी तुरंत नियंत्रण कर सके और नियंत्रित करना शुरू कर सके, भले ही वह अपनी उंगली को दबाए। नियंत्रण की गलतफहमी पुराने जावास्क्रिप्ट गेम (और नए भी) की एक आम समस्या थी। आप बैठते हैं, डेमो देखते हैं, कीबोर्ड पर सभी बटन दबाते हैं, और चरित्र अभी भी खड़ा है। और खेल अच्छा लगता है, लेकिन खेलना असंभव है। बटन चुनते समय मुझे क्या निर्देशित किया? यहाँ एक स्थिति है:



आप कोशिश कर सकते हैं, यह हास्यास्पद है। खैर, ज़ाहिर है, स्पष्ट कीड़े हैं जिन्हें संबोधित करने की आवश्यकता है। उदाहरण के लिए:

“बायाँ धक्का, फिर चुटकी बजाते। हम इसे जारी करते हैं (बाईं ओर का बटन अभी भी बंद है) और ... सब कुछ, चरित्र अब बाईं ओर नहीं चलता है "



बाएं + दाएं - दाएं के संयोजन के साथ एक ही समस्या। बहुत से, निश्चित रूप से, आपको कीपर के साथ बेहतर व्यवहार करने की सलाह देंगे, लेकिन नहीं, यह जावास्क्रिप्ट में काम नहीं करता है या आपके महसूस के अनुसार काम नहीं करता है।

पुराने साँप के एल्गोरिथ्म द्वारा स्थिति से बाहर का रास्ता सुझाया गया था, जिसमें चिपचिपा कुंजियों का उपयोग किया गया था: जब एक कुंजी दबाया गया था, तो दिशा की जानकारी बस एक चर में लिखी गई थी, जिसके बाद एक टाइमर था। वास्तव में, खेल और कीबोर्ड के बीच एक मध्यस्थ के रूप में एक चर दिखाई देता है जो अंतिम दिशा को याद करता है। और हमारे मामले में क्या करना है? और अगर हम चाहते हैं कि दो खिलाड़ी एक ही समय पर खेल खेलें? लेकिन क्या होगा अगर एक व्यक्ति के लिए एक बार में बॉट्स की पूरी सेना को नियंत्रित करने में सक्षम होना आवश्यक है? फिर हम सोचने लगते हैं ...



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

योजना एक तरफ जटिल है, और दूसरी ओर, स्केलेबिलिटी के लिए उत्कृष्ट संभावनाएं प्रदान करती है। हम कॉन्फ़िगर कर सकते हैं और उन बटनों को सूचीबद्ध कर सकते हैं जिन्हें हम सदस्यता लेना चाहते हैं। तो आप दो या अधिक खिलाड़ियों के लिए एक खेल बना सकते हैं।

कुछ डेमो:

• दो खिलाड़ी खेल
• हम वर्णों का एक समूह प्रबंधित करते हैं (PLs और KLs इसकी सराहना करेंगे, खासकर यदि वे कई खिड़कियों में महल बनाते हैं)

पदार्थ रजिस्टर

GTA, Stalker और Fallout में पदार्थों के उदाहरणों से पता चला कि उनके साथ खेल अधिक रोचक बन सकता है। इंजन में पदार्थों को जोड़ने के लिए कार्य उत्पन्न हुआ। प्रारंभ में, सब कुछ सरल था - आप दवा का उपयोग करते हैं और कैमरा प्रदर्शन में एक अतिरिक्त वर्ग जोड़ता है। CSS3 टूल (रोटेशन, परिवर्तन, आदि) का उपयोग करके एक यात्रा बनाई जाती है। लेकिन सर्किट पुराने ब्राउज़रों में पूरी तरह से निष्क्रिय हो गया।





तब CSS3 को छोड़ने और अन्य तरीकों और साधनों से प्रभाव लिखने का निर्णय लिया गया था। मैंने सभी यात्राओं के प्रभावों को दो प्रकारों में विभाजित किया है: प्रदर्शन और रिवर्स नियंत्रण के लिए एक फ़िल्टर लागू करना। छवि को फ़िल्टर करने के लिए, मैंने अन्य सभी वस्तुओं की तुलना में जेड-इंडेक्स के साथ एक अतिरिक्त div (पारदर्शी ट्रिप स्क्रीन) बनाया। यात्रा स्क्रीन पृष्ठभूमि-छवि के साथ एक वर्ग को स्वीकार करती है, और इंस्टाग्राम जैसे प्रभाव वाली पारदर्शी png छवि है। इसके अलावा, यात्रा स्क्रीन की पारदर्शिता 0 से 1 तक बदलती है, इस पर निर्भर करता है कि चरित्र घुमाया गया है या नहीं। इसके अलावा, यह स्क्रीन एक अन्य फ़ंक्शन करता है - टचस्क्रीन वाले उपकरणों के लिए एक सुरक्षात्मक स्क्रीन का कार्य। अगर टचस्क्रीन का मालिक लगातार तस्वीर पर क्लिक करेगा, तो वह तस्वीर को बचाने के लिए सिस्टम से एक प्रस्ताव ला सकता है। यदि इस चित्र के शीर्ष पर एक पारदर्शी div है, तो कोई संदेश नहीं होगा।



रिवर्स कंट्रोल वाला कार्य इतना स्पष्ट नहीं था। इसके अलावा, प्रत्येक यात्रा के लिए एक टाइमर बनाने के लिए आवश्यक था ताकि बाद में यात्रा की कार्रवाई को बंद किया जा सके और यात्रा स्क्रीन को फिर से पारदर्शी बनाया जा सके। जब स्केलिंग (दुनिया, वर्ण और एक साथ यात्राएं का एक गुच्छा बनाना), तो यह योजना पूरी तरह से अप्रभावी थी। न केवल टाइमर का एक गुच्छा बनाया गया था, बल्कि चरित्र / कैमरा / जॉयस्टिक की वस्तुओं के बीच संबंध भी तेज हो गए, जिसने प्रतिरूपता के तर्क का खंडन किया। एक अतिरिक्त कर्नेल मॉड्यूल लिखने के लिए केवल एक ही रास्ता था - जो यात्राओं से संबंधित हर चीज को हल करेगा (हमारे पास एक टाइमर और एक डेटाबेस के साथ हमारे अपने FSKN है)।



आइए मॉड्यूल आरेख का विश्लेषण करें:

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

लाश को कैसे छिपाया जाए

लगता है कि एक चरित्र को कैसे मारना है, लेकिन उसकी लाश के साथ क्या करना है, यह पूरी तरह से स्पष्ट नहीं है। सबसे पहली बात जो दिमाग में आती है वह है शव को दुनिया से तुरंत हटाना। लेकिन यह मापनीय तर्क नहीं है। लेकिन क्या होगा अगर हम लाश के बारे में एक खेल बनाते हैं और उसके आसपास केवल शव होते हैं? या क्या हमारे पास एक अमर, डंकन मैकएलॉड की तरह है जो मर नहीं सकता है? या हम चक नॉरिस के बारे में एक खेल लिख रहे हैं, और चक नॉरिस को मरना नहीं चाहिए, भले ही उसका जीवन शून्य पर हो। इसलिए, शव को नहीं हटाया जा सकता है। दूसरी ओर, वे आमतौर पर इसे हटा देते हैं और इसे खूबसूरती से करते हैं।



लेकिन हम पहले से नहीं जान सकते कि डेवलपर किस तरह की मौत को लागू करना चाहता है।

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

देवियों और सज्जनों, हम मिलते हैं - "मृत्यु का कार्य":

 world.dead(); 

फ़ंक्शन को हर बार कहा जाता है जब दुनिया की हमारी प्रति में किसी को अचानक "glues पंख"। एक तर्क के रूप में, फ़ंक्शन को कॉलबैक फ़ंक्शन कहा जाता है। एक ऑब्जेक्ट जो "बॉक्स में खेला जाता है" कॉलबैक फ़ंक्शन को पास किया जाएगा। उदाहरण के लिए:

 world.dead(function(man) { alert("  ID " + man.id + "  "); }); 

बस के मामले में, मैं स्पष्ट करूँगा कि दुनिया एक ऐसी दुनिया है जिसमें हम मृत्यु की निगरानी करेंगे।

लेकिन हम थोड़े विचलित थे। सवाल "एक लाश को कैसे छिपाएं?" अभी तक हल नहीं हुआ है और कई विकल्प हैं।

क्लासिक संस्करण

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

चमकता विकल्प

यदि कोई मारा जाता है, तो वह रुक जाता है, झपकाता है और पूरी तरह से गायब हो जाता है। इस प्रभाव के लिए, हमें स्प्राइट की एक सरणी लेने की जरूरत है और प्रत्येक तत्व को पारदर्शी चित्र के साथ बदलना होगा। खैर, और निश्चित रूप से, सब कुछ के ऊपर, एक टाइमर जोड़ा जाता है, जो एनीमेशन के अंत में दुनिया से मृत चरित्र को हटा देता है। पुराने खेल "कीड़े" हमें एक तीसरा विकल्प प्रदान करने की जल्दबाजी में।

समाधि का विकल्प

हम लाश के निर्देशांक को याद करते हैं, इसे दुनिया से हटा देते हैं, और इसके स्थान पर हम "ग्रेवस्टोन" की वस्तु बनाते हैं।

सामान्य तौर पर, चुनाव आपका है। केवल अगर नायक आप में जमा हो गया है, तो तुरंत जॉयस्टिक को अक्षम करना न भूलें ताकि खिलाड़ी एनीमेशन में हस्तक्षेप न करें। यदि आपने मानक नियंत्रक मॉड्यूल के माध्यम से कीबोर्ड से नियंत्रण जोड़ा है, तो आप कीबोर्ड को इस तरह से अक्षम कर सकते हैं:

 StalinGrad.module.controller.remove(); 

एक तर्क के रूप में, फ़ंक्शन उस ऑब्जेक्ट ऑब्जेक्ट की अपेक्षा करता है जिस पर नियंत्रक बनाया गया था। उदाहरण के लिए:

 StalinGrad.module.controller.remove(man); 

मृत्यु एनिमेशन के दो सरल उदाहरण यहां और यहां देखे जा सकते हैं।

क्यू एंड ए

इस खंड में प्रश्न हैं जो विभिन्न डेवलपर्स ने मुझसे पूछे हैं।

कॉमरेड मेन्फॉक्स ने पूछा:

"- और आपके इंजन का गैर-छोटा संस्करण कहां है?"

कहीं नहीं। यह एक खुला स्रोत स्टार्टअप नहीं है जो HTML5 के बारे में जीथब पर प्रोफाइल के साथ है। अगर मैं स्रोत कोड दिखाता हूं - सामान्य लोग जो प्लसस और जावा पर लिखते हैं, तो सबसे पहले वे बहुत लंबे समय तक हंसेंगे, और फिर "वे मुझे पेशाब के साथ पीटेंगे।" टक्करों का कार्यान्वयन अक्षम है, वस्तुओं के गुणों की वास्तुकला गलत है, और निर्माण एल्गोरिथ्म आमतौर पर गंदगी है और पूरी तरह से फिर से लिखा जाना चाहिए। उम्मीद है कि अन्य लोग इसे ठीक करेंगे।

• एक तरफ, वेब विकास में लोग वास्तुकला के बारे में चिंतित नहीं हैं, और इसलिए गलत तरीके से कीड़े को ठीक कर सकते हैं।
• दूसरी ओर, हर कोई अपने घंटी टॉवर से परियोजना को देखता है। तृतीय-पक्ष डेवलपर इंजन को उस गलत दिशा में संशोधित करना शुरू कर सकते हैं जिसकी मुझे आवश्यकता है।
• लेकिन तीसरे हाथ पर, मैं किसी और के कोड की तरह नहीं हूं, और इस "होम प्रोजेक्ट" में उसने कभी मुझ पर हार नहीं मानी। आप सभी प्रकार के कॉन्फ़िगरेशन डाउनलोड कर सकते हैं और उन्हें बदल सकते हैं।

क्योंकि कोड मॉड्यूलर है, आप किसी आपातकालीन स्थिति में, कुछ कर्नेल फ़ंक्शन को फिर से लिख सकते हैं या इसके लिए एक रैपर बना सकते हैं, उदाहरण के लिए:

 StalinGrad.brain = function() { } 

या मॉड्यूल जोड़ें और इसे अपनी वेबसाइट पर डालें:

 StalinGrad.module.YouModule = function() { } 

स्टालिनग्रैड का उपयोग करें - जैसा कि, बॉक्स से बाहर है। यदि आपको यह पसंद नहीं है - अपने विवेक पर कुछ और चुनें (इनमें से हजारों इंजन यहां और यहां )। कुछ भी कम छोटी गाड़ी है। अच्छी तरह से, या कैनवास और WebGL के साथ तुम्हारा गश खाओ ;)

नागरिक s1im ने निम्नलिखित तथ्य को इंगित किया:

"- यदि आप चित्र के src को नहीं बदलते हैं, तो यह बहुत तेज़ी से काम करेगा, लेकिन फ्रेम की एक श्रृंखला के साथ एक लंबा स्प्राइट दिखाएं, इसे कुछ की पृष्ठभूमि में प्रस्तुत करें। div- और बैकग्राउंड-पोज़िशन को बदलते हुए “

मैंने इस योजना के बारे में सोचा, और यह मुझे निष्क्रिय लग रहा था (हालाँकि मैं मानता हूँ कि प्रदर्शन के मामले में s1im बिल्कुल सही है, योजना बहुत अच्छा लाभ देगी)।

सबसे पहले, चरित्र विन्यास ऑब्जेक्ट को देखें:

  left: [ "partizan_left_1.png", "partizan_left_2.png", "partizan_left_3.png", "partizan_left_4.png" ], right: [ "partizan_right_1.png", "partizan_right_2.png", "partizan_right_3.png", "partizan_right_4.png" ] 

कोई भी डेवलपर तुरंत समझ जाएगा कि यह पते की एक सरणी है। तस्वीर के पते या फ़्रेम के क्रम को ठीक करने में सक्षम होगा। इसी समय, nakosyachit और कोड को तोड़ना बहुत मुश्किल है। यदि हम स्प्राइट पर निर्देशांक के रूप में इसका वर्णन करते हैं, तो कोड कुछ इस तरह दिखाई देगा:

  image: "partizan_left_1.png" left: [ [ 0, 40 ], [ 40, 80 ], [ 80, 120 ], [ 120, 160 ] ], right: [ [ 0, 40 ], [ 40, 80 ], [ 80, 120 ], [ 120, 160 ] ] 

• पहली नजर में कोड अविश्वसनीय हो गया
• आप आसानी से गलती कर सकते हैं, और स्प्राइट की लंबाई से अधिक एक समन्वय निर्दिष्ट कर सकते हैं
• यदि हमें किसी और के खेल को फिर से करने की आवश्यकता है (उदाहरण के लिए, वर्णों की जगह) - यह कठिन होगा। हमें ड्राइंग में पेंट को देखने और निर्देशांक को बदलने की लगातार आवश्यकता होगी। और यह अभी भी एक अच्छा विकल्प है (उदाहरण के लिए, चरण स्पष्ट रूप से 40px है)।

दो साल पहले, मैंने एक गेम को दूसरे में बदल दिया, और डिजाइनरों ने पात्रों के बीच एक अलग बदलाव के साथ स्प्राइट भेजा (और पात्रों का आकार स्वयं बदल गया है)। यह निर्देशांक गिनने का एक लंबा समय था। निर्देशकों ने कुछ इस तरह देखा:

  left: [ [ 0, 34 ], [ 34, 56 ], [ 56, 89 ], [ 89, 112 ] ], 

दूसरे, हम रबर इंटरफेस खो रहे हैं।



आप निश्चित रूप से बाहर निकल सकते हैं और पृष्ठभूमि के आकार को सेट कर सकते हैं, लेकिन कुछ उपकरणों पर पृष्ठभूमि का आकार काम नहीं करता है। ऐसा नहीं है कि मैं "गोवनोवायसोव चिड़ियाघर" का समर्थन करना चाहूंगा, लेकिन ऐसा हुआ कि पहले से मौजूद वास्तुकला और चयनित समाधानों के साथ, मेरे लिए इसका समर्थन करना बहुत आसान है। इसमें बहुत कम मेहनत लगती है। CSS और voila को थोड़ा ठीक करें:

• स्केलेबिलिटी लॉस का एक उदाहरण जो मैंने ऊपर वर्णित किया है। मृत्यु समारोह याद है? ऐसे कॉन्फ़िगरेशन पर, आप आसानी से एक ब्लिंकिंग एनीमेशन बना सकते हैं (हर दूसरी तस्वीर को पारदर्शी शून्य के साथ बदल सकते हैं)। स्प्राइट से प्राप्त करने के लिए क्या अतिरिक्त लाभ हैं - मैं साथ नहीं आ सका।
• हम CSS और JS को अलग करने के तर्क को तोड़ते हैं। सभी divs ऐसा दिखेगा
  

   <div class="something" style="background-position: 50px 50px;"></div> 

  , JS, — CSS. JS , .. - . , , , , - JavaScript. CSS .

लेकिन दूसरी ओर, हम सभी देखते हैं कि डेमो लोड के तहत कैसे धीमा होता है और सर्वर 404 को कैसे भेजता है। इसलिए, स्प्राइट्स के साथ एनिमेशन रेंडर करने की क्षमता को जोड़ना सबसे तर्कसंगत होगा, जैसा कि s1im ने सुझाव दिया (मौजूदा रेंडर को छोड़ते समय)। फिर, स्थिति के आधार पर, डेवलपर्स खुद एक कार्यान्वयन का चयन करने में सक्षम होंगे जो एक विशिष्ट कार्य के लिए इष्टतम होगा। और यह भी, इस मुद्दे पर प्रतिबिंब के इन दो हफ्तों के दौरान, मैंने महसूस किया कि कैमरा संसाधनों के लिए पर्याप्त मॉड्यूल नहीं है। मैं इसे लागू करने और इसे निम्नलिखित लेखों में समझाने की कोशिश करूंगा।

और आप, प्रिय पाठकों, ऐसे मामले आए हैं जब एक jQuery प्लगइन की उपस्थिति को ठीक करना आवश्यक था, और उसने जावास्क्रिप्ट की अपनी शैली को कहीं अपने भीतर स्थापित किया? आप उस पल में कितना पागल हो गए थे?

उपयोगकर्ता VoVanJinnमैं जानना चाहता था, "एक इंद्रधनुष की तरह एक बिल्ली का कवच कैसे बनाया जाए"

उत्तर: "- कोई रास्ता नहीं।" मुझे लगता है कि यह एक बार के खेल के लिए एक कार्य है, जो बैसाखी द्वारा हल किया जाता है, क्योंकि इंद्रधनुष के साथ वस्तुओं को खोदना स्वाभाविक नहीं है। क्योंकिमैं मुख्य रूप से अपने लिए लिखता हूं, मैं उन समस्याओं को हल नहीं कर सकता हूं जो मुझे पसंद नहीं हैं या गलत प्रतीत होते हैं। यह स्पष्ट है कि वास्तविक जीवन में एक प्रबंधक या एक नारकीय ग्राहक है जो कुछ भी चाहेगा। यही कारण है कि वे पागल अपर्याप्त कार्यों को हल करने के लिए बैसाखी हैं। सही सार्वभौमिक समाधान, कम से कम मैं नहीं देखता। यदि आप किसी चीज़ के साथ आते हैं, तो इस लेख की टिप्पणियों में लिखें (पहले, अतिरिक्त बग्स के बारे में सोचें जो एक निर्णय खुद के लिए ला सकता है)।

": कैनवस लेआउट की तुलना में तेजी से काम करता है!" सेराफिमर्ट्स और जेटमैन के साथियों

के लिए विशेष धन्यवाद, 2012 एलजी स्मार्ट टीवी और एफपीएस कैनवस परीक्षण के बारे में उनके तर्क के लिए। परिणाम: एलजी स्मार्ट टीवी 2012 (नेटकास्ट 3.0, मॉडल LM640T): 0-1 एफपीएस, जो लेआउट के साथ विरूपण के लिए एक और वोट देता है।

अंत में

जैसा कि वादा किया गया था, मैं डेवलपर पैकेज पोस्ट करता हूं। ग्राफिक्स हैं, सीएसएस संपीड़ित नहीं और खुले कॉन्फ़िगरेशन के एक जोड़े। मैं हाइब्रिफेक्ट से बचने के लिए लिंक को डुप्लिकेट करता हूं:
1 सर्वर से
डाउनलोड करें 2 सर्वर से
डाउनलोड करें 3 जी सर्वर से डाउनलोड करें

इसके अलावा, वहां डेमो का एक गुच्छा भी है (यदि इस लेख में डेमो लटका हुआ था और लोड करने का समय नहीं था) ।

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

संक्षेप में:हर बार जब मैं एक लेख लिखता हूं और डेमो करता हूं, मुझे इतने नए कीड़े मिलते हैं कि यह बहुत ही भयानक है। और ऐसा होता है कि जब मैं एक लेख लिखता हूं, तो मुझे पता चलता है कि कुछ कर्नेल मॉड्यूल बिल्कुल काम नहीं करता है, और आपको इसे फिर से लिखना होगा या एपीआई को अधिक पर्याप्त रूप से लिखना होगा। इसलिए, अगले लेख के लिए, कुछ छोटी चीजें बदल सकती हैं (उदाहरण के लिए, आपको प्रतिशत के रूप में कैमरे के लिए सुधार सेट करने की आवश्यकता है, और स्क्रीन के कुछ समझ से बाहर भागों में नहीं)।

और बग के बारे में - बहुत से लोगों ने मुझे बताया कि मेरा कूद सही तरीके से काम नहीं कर रहा है। मैं आपको एक रहस्य बताऊंगा - मेरे पास बिल्कुल भी छलांग नहीं है। वाई अक्ष के साथ आगे बढ़ने के लिए यह सिर्फ एक अप बटन है, (इसके आधार पर, मैं अभी भी शीर्ष दृश्य बनाने जा रहा हूं, जैसे टैंकों में - इसके लिए आपको बस गुरुत्वाकर्षण बंद करने और घर्षण को बढ़ाने की आवश्यकता है)। और कूद बटन को पर्याप्त रूप से कैसे बनाया जाए - मैं कभी नहीं आया। अपने विचारों को टिप्पणियों में लिखें (और सीढ़ियों के बारे में भी, क्योंकि इस ऑब्जेक्ट का सार पूरी तरह से समझ से बाहर है, और इसे लागू करने की किस योजना के अनुसार)

इंजन साइट यहां है ।