🏩 👌 🌴 खेल St.Val के लिए तीर प्रक्षेपवक्र में वक्र का अनुमान 🧑🏾‍🤝‍🧑🏼 🎚️ 🏁

इस पोस्ट में मैं आपको बताऊंगा कि कैसे प्रक्षेपवक्र ड्राइंग का उपयोग करके एक मोबाइल एप्लिकेशन में नियंत्रण बनाएं। यह नियंत्रण हार्बर मास्टर और फ्लाइटकंट्रोल में उपयोग किया जाता है: खिलाड़ी एक रेखा के साथ एक उंगली खींचता है जिसके साथ जहाज और विमान चलते हैं। मेरे सेंटवैल गेम के लिए, इसी तरह के मैकेनिक्स की आवश्यकता थी। मैंने इसे कैसे किया और मुझे क्या करना पड़ा - नीचे पढ़ें।

खेल के बारे में कुछ शब्द। सेंटवैल पर, मुख्य लक्ष्य तीर द्वारा रंग से दिलों को जोड़ना है। खिलाड़ी का कार्य: तीर प्रक्षेपवक्र का निर्माण करना ताकि यह उड़ान में दिलों को जोड़ता है। वीडियो गेम मैकेनिक्स के नीचे, iOS के लिए Cocos2D 2.1 के आधार पर गेम बनाया गया था।

मुख्य कार्य

प्रबंधन बनाने के लिए, तीन कार्य हल करने होंगे:

निर्देशांक पढ़ें
उन्हें चिकना और अनुमानित करें
उन पर तीर चलाया

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

कटौती के तहत, इन समस्याओं का समाधान और एक डेमो प्रोजेक्ट के लिए लिंक।

डेमो प्रोजेक्ट कोड यहां उपलब्ध है: github.com/AndreyZarembo/TouchInput

निर्देशांक कैसे पढ़े जाते हैं

फिंगर निर्देशांक पढ़ना एक सरल कार्य है, क्योंकि Cocos2D में अलग-अलग टच ईवेंट के साथ काम किया जाता है, जो कि प्रकार से अलग होता है। उन्हें प्राप्त करने के लिए, वस्तु CCTouchOneByOneDelegate प्रोटोकॉल को लागू करती है और टच इवेंट मैनेजर के साथ रजिस्टर करती है:

[[[CCDirector sharedDirector] touchDispatcher] addTargetedDelegate:self priority:0 swallowsTouches: YES];

CCTouchOneByOneDelegate प्रोटोकॉल में विधियाँ शामिल हैं:

 //    - (BOOL)ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event //     - (void)ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event //   - (void)ccTouchEnded:(UITouch *)touch withEvent:(UIEvent *)event //  -     -   - (void)ccTouchCancelled:(UITouch *)touch withEvent:(UIEvent *)event

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

जब उंगली जारी की जाती है, तो हम वर्तमानटच चर को रीसेट करते हैं, और ccTouchMoved गति हैंडलर में हम जांचते हैं कि क्या इस वस्तु की निगरानी की जा रही है। यदि हाँ - अंक दर्ज किए गए हैं।

गड्ढा 1

जब तक आप गेम को कम करने के लिए इशारों का उपयोग करते हैं और नियंत्रण केंद्र पैनल पॉप अप होता है, तब तक यह सब बहुत अच्छा काम करता है। इन मामलों में, ccTouchCancelled नहीं कहा जाता है, लेकिन ccTouchMoved घटना अब नहीं आ रही है। यह उंगली पर चरण की जांच करके तय किया जा सकता है। अगर _currentTouch.phase == UITouchPhaseCancelled है , तो उंगली को बदलना होगा:

 - (BOOL)ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event { if (currentTouch == nil || currentTouch.phase == UITouchPhaseCancelled) { currentTouch = touch; } return YES; } - (void)ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event { if (touch == currentTouch) { // Save point } } - (void)ccTouchEnded:(UITouch *)touch withEvent:(UIEvent *)event { if (touch == currentTouch) { // End trajectory } } - (void)ccTouchCancelled:(UITouch *)touch withEvent:(UIEvent *)event { if (touch == currentTouch) { // End trajectory } }

निर्देशांक के साथ क्या करना है

निर्देशांक को फ़िल्टर्ड और अनुमानित करना होगा ताकि लाइन चिकनी दिखे और साथ-साथ ऑब्जेक्ट समान रूप से आगे बढ़ें।

वक्र को सुचारू करने के लिए, एक दूरी फिल्टर का उपयोग किया जाता है: सभी बिंदुओं को एक दूसरे से कम से कम 20px होना चाहिए। यह स्क्रीन पर एक उंगली से डेढ़ गुना छोटा है, इसलिए फ़िल्टरिंग छिपा हुआ है। 20px की फ़िल्टरिंग दूरी के साथ, संसाधित बिंदुओं की संख्या 50-70% तक कम हो जाती है, सीमा में यह 95% है जब उंगली पिक्सेल को स्क्रीन पर पिक्सेल द्वारा ले जाती है।

अंक के परिणामस्वरूप श्रृंखला को एक वक्र द्वारा अनुमानित किया जाना चाहिए, इसके लिए, काठमुल्ला-रोमा का उपयोग किया जाता है। यह दिए गए 4 बिंदुओं से गुजरता है, चरणों को चिकना करता है और गणना करना आसान है।

पहले बिंदु से वक्र शुरू करने के लिए, सीमा की स्थिति जोड़ें: बिंदुओं को पहले और अंतिम खंडों के लिए एक सीधी रेखा में जोड़ा जाता है। फिर एन बिंदुओं के लिए हमें एन -1 सेगमेंट मिलता है।

पोस्ट स्वैच्छिक निकला, इसलिए मैं वक्र के बारे में विस्तार से बात नहीं करूंगा, नीचे इसके खंडों की गणना के लिए कोड है।

पिटने की क्रिया २

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

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

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

खेल में, आप एक अंतहीन रास्ता नहीं बना सकते हैं, इसलिए लंबाई के साथ ड्राइंग के अंत के लिए शर्त जोड़ी गई थी।

वस्तुओं का हिलना

खेल में, प्रक्षेपवक्र को चलती बिंदुओं ("पटरियों") द्वारा प्रदर्शित किया जाता है। वे प्रत्येक 20px पर वक्र पर स्थित होते हैं और समान रूप से पथ के अंत की ओर बढ़ते हैं। गति प्रभाव बनाने और एनीमेशन को सरल बनाने के लिए, अंक 10 पिक्सेल के दो खंडों में 0 से 20 तक बढ़ते हैं, फिर से 0. पर वापस लौटते हैं। तुल्यकालिक आंदोलन के कारण, ऐसा लगता है कि वे शुरुआत से अंत तक लगातार चलते हैं।

यदि वक्र में N + 1 अंक हैं, तो N सेगमेंट जिसमें ट्रैक चलते हैं, क्रमशः, आपको N / 2 ट्रैक रखने की आवश्यकता है। सभी बिंदुओं के लिए, एक ऑफसेट टी सेट किया जाता है, [0.2], जिसका उपयोग प्रत्येक पटरियों के निर्देशांक की गणना करने के लिए किया जाता है।

T से 0 से 1 तक, स्थिति के रूप में गणना की जाती है

 Pt = Pt0*t+(1-t)*Pt1

टी में 1 से 2 तक की स्थिति के रूप में गणना की जाती है

 Pt = Pt1*(t-1)+(2-t)*Pt2

नतीजतन, सभी बिंदु एक ही फ़ाइल में चलते हैं।

तीर लॉन्च

बूम लॉन्च कोकोस 2 डी से क्रियाओं का उपयोग करके किया जाता है। इसमें निम्न चरण होते हैं:

बूम की शुरुआती स्थिति निर्धारित करना
अनुक्रमिक आंदोलन और वक्र के खंडों के साथ तीर का रोटेशन
तीर छुपा रहा है

खेल में इन चरणों में से अधिक हैं, लेकिन सार नहीं बदलता है।

क्रियाओं के अनुक्रम को इकट्ठा करने और उनके निष्पादन को शुरू करने के लिए, सभी क्रियाओं को क्रमिक रूप से NSMutableArray में जोड़ा जाता है और क्रियाओं की श्रृंखला शुरू करने के लिए CCSequence ऑब्जेक्ट को पास किया जाता है।

CCCallBlock को शुरुआती स्थिति सेट करने के लिए पहले जोड़ा जाता है - ये वक्र के पहले बिंदु के निर्देशांक हैं। यहां, तीर पूर्ण अस्पष्टता पर सेट है।

 CCCallBlock *setInitialPosition = [CCCallBlock actionWithBlock:^{ _arrow.position = pointVal.CGPointValue; _arrow.opacity = 255; }]; [moves addObject: setInitialPosition];

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

पिटने की अवस्था ३

वक्र के तत्व लगभग 10 पिक्सेल द्वारा प्राप्त किए जाते हैं, लेकिन बिल्कुल नहीं, इसलिए, तीर की एक समान गति के लिए, खंड की लंबाई निर्दिष्ट करना और तीर की गति के आधार पर प्रत्येक खंड के लिए आंदोलन का समय निर्धारित करना आवश्यक है।

 CGPoint point = pointVal.CGPointValue; CGPoint prevPoint = prevPointVal.CGPointValue; CGPoint diff = CGPointMake(point.x-prevPoint.x, point.y-prevPoint.y); CGFloat distance = hypotf(diff.x,diff.y); CGFloat duration = distance / arrowSpeed; lastDirectionVector = CGPointMake(diff.x/distance, diff.y/distance); CGFloat angle = -atan2f(diff.y,diff.x)*180./M_PI; CCMoveTo *moveArrow = [CCMoveTo actionWithDuration: duration position: point]; CCRotateTo *rotateArrow = [CCRotateTo actionWithDuration: duration angle: angle]; CCSpawn *moveAndRotate = [CCSpawn actionWithArray: @[ moveArrow, rotateArrow ]]; [moves addObject: moveAndRotate];

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

 CCFadeTo *hideArrow = [CCFadeTo actionWithDuration: hideEffectDuration opacity:0]; CCMoveBy *moveArrow = [CCMoveBy actionWithDuration: hideEffectDuration position: CGPointMake(lastDirectionVector.x*arrowSpeed*hideEffectDuration, lastDirectionVector.y*arrowSpeed*hideEffectDuration)]; CCSpawn *moveAndHide = [CCSpawn actionWithArray: @[ moveArrow, hideArrow ]]; [moves addObject: moveAndHide];

सभी तत्वों को जोड़ने के बाद, तीर उड़ान में जाता है।

 [_arrow runAction: [CCSequence actionWithArray: moves]];

लूप का पता लगाना

खेल के स्तरों में से एक में, दिलों को तीर के प्रक्षेपवक्र द्वारा नहीं, बल्कि दिलों के चारों ओर एक जोड़ी लूप द्वारा जोड़ा जाता है (0:55 से वीडियो देखें)। इस यांत्रिकी को लागू करने के लिए, आपको स्वयं के साथ प्रक्षेपवक्र के चौराहे को खोजने की आवश्यकता है।

ऐसा करने के लिए, सेगमेंट के एक सेट को क्रमिक रूप से स्कैन किया जाता है और यह देखने के लिए जांच की जाती है कि क्या सेगमेंट का एक सेगमेंट पिछले सेगमेंट के सेगमेंट के साथ प्रतिच्छेद करता है या नहीं। चौराहे का निर्धारण "ट्राइएंगल के ओरिएंटेड एरिया" विधि का उपयोग करके किया जाता है, क्योंकि चौराहा बिंदु ही महत्वपूर्ण नहीं है, और अंतर खंडों की संख्या चक्र से जानी जाती है। एल्गोरिथ्म यहाँ से लिया गया है:
e-maxx.ru/algo/segments_intersection_checking

ख़तरा ४

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

पाए गए सभी लूपों को रिंग के प्रारंभिक और अंतिम खंडों की संख्या के रूप में सरणी में संग्रहीत किया जाता है। इनसे, बहुभुज UIBezierPath के अंक प्राप्त किए गए थे , जो यह निर्धारित करने के नियमित साधन हैं कि क्या कोई बिंदु इसमें आता है।

 [path containsPoint: position]

वह सब है!

डेमो प्रोजेक्ट कोड यहां उपलब्ध है: github.com/AndreyZarembo/TouchInput

ps पोस्ट तैयार करने की प्रक्रिया में, कोड को थोड़ा संशोधित और अनुकूलित किया गया था।

खेल St.Val के लिए तीर प्रक्षेपवक्र में वक्र का अनुमान