🤽🏽 ⛽️ 👩🏽‍🔬 एसडीएल 2.0 पाठ चक्र: पाठ 5 - एक स्प्राइट शीट का टुकड़ा करना 👌🏾 🆔 🎉

अनुवादक से:

यह ट्विंकलबियर ट्यूटोरियल के अनुवादों की एक श्रृंखला है, जो यहां मूल में उपलब्ध है । अनुवाद आंशिक रूप से स्वतंत्र है और इसमें अनुवादक से मामूली संशोधन या परिवर्धन हो सकता है। पहले दो पाठों का अनुवाद - लेखकीयInvalidPointerऔर तीसरे और चौथे के लिए k1-801।

सबक की सूची:

पाठ 1. हैलो वर्ल्ड!
पाठ 2. मुख्य रूप से सब कुछ सामान न करें
पाठ 3. एसडीएल एक्सटेंशन लाइब्रेरी
पाठ 4. इवेंट हैंडलिंग
पाठ 5. एक स्प्रिट शीट पर टुकड़ा करना
पाठ 6. SDL_ttf का उपयोग करके फोंट डाउनलोड करना

स्प्रिट शीट का टुकड़ा

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

इस ट्यूटोरियल में, हम देखेंगे कि SDL_RenderCopy का उपयोग करके बनावट के कुछ हिस्सों का चयन कैसे करें , साथ ही साथ विशिष्ट कीस्ट्रोक घटनाओं का पता लगाने के बारे में थोड़ा सा बताया गया है, जिनका उपयोग करने के लिए हम बनावट के किस भाग का चयन करेंगे। स्प्राइट शीट पर चार रंगीन वृत्त होंगे:

इस ट्यूटोरियल में, स्प्राइट शीट में एक ही आकार के कई स्प्राइट्स होते हैं, जिसमें स्लाइस करना मुश्किल नहीं है। अन्यथा, विभिन्न आकारों के स्प्राइट्स के लिए, हमें भागों के स्थान के बारे में जानकारी के साथ मेटाडेटा फ़ाइल की आवश्यकता होगी। इस ट्यूटोरियल के लिए हम आकार के 4 स्प्राइट्स 100x100 का उपयोग करेंगे। इस पाठ के लिए कोड पाठ 4 पर आधारित है, यदि आपके पास लिखने के लिए कोई कोड नहीं है, तो आप इसे जीथब से प्राप्त कर सकते हैं ।

भाग चयन

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

रेंडरटेन्चर बदलें

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

/**
*  SDL_Texture  SDL_Renderer   .
*     
* @param tex  ,   
* @param ren ,    
* @param dst     
* @param clip     ( )
*                 nullptr   
*/
void renderTexture(SDL_Texture *tex, SDL_Renderer *ren, SDL_Rect dst,
        SDL_Rect *clip = nullptr)
{
        SDL_RenderCopy(ren, tex, clip, &dst);
}

सुविधा के लिए, हम एक और फ़ंक्शन लिखेंगे जहाँ हमें स्थान के लिए SDL_Rect बनाने की आवश्यकता नहीं होगी, लेकिन केवल x और y प्रदान करें और हमारे प्रदर्शन फ़ंक्शन को बनावट की चौड़ाई और ऊंचाई भरने दें। हम रेंडरटेक्स्ट का ओवरलोडेड वर्जन बनाएंगे जो क्लिपिंग को संभालने के लिए कुछ सेटिंग्स के साथ ऐसा करेगा। डिफ़ॉल्ट मान nullptr के साथ एक पैरामीटर के रूप में एक कट आयत जोड़ें और कटौती पारित होने की स्थिति में, हम बनावट की चौड़ाई और ऊंचाई के बजाय कट की चौड़ाई और ऊंचाई का उपयोग करेंगे। इस प्रकार, हम छोटे स्प्राइट को उसके संभावित रूप से बहुत बड़े स्प्राइट शीट के आकार तक नहीं खींचेंगे जब इसे खींचा जाता है। यह फ़ंक्शन मूल रेंडरटेक्स्ट फ़ंक्शन का एक संशोधन है और बहुत समान दिखता है।

/**
*  SDL_Texture  SDL_Renderer   x, y, 
*          
*    ,       
*          
* @param tex  ,   
* @param ren ,    
* @param x  x,    
* @param y  y,    
* @param clip     ( )
*                 nullptr   
*/
void renderTexture(SDL_Texture *tex, SDL_Renderer *ren, int x, int y,
        SDL_Rect *clip = nullptr)
{
        SDL_Rect dst;
        dst.x = x;
        dst.y = y;
        if (clip != nullptr){
                dst.w = clip->w;
                dst.h = clip->h;
        }
        else {
                SDL_QueryTexture(tex, NULL, NULL, &dst.w, &dst.h);
        }
        renderTexture(tex, ren, dst, clip);
}

क्लिपिंग आयतों को परिभाषित करें

हमारे मामले में, पाठ 3 से टाइलिंग विधि के समान विधि का उपयोग करके क्लिपिंग आयतों की गणना करना बहुत आसान है , हालांकि, लाइन से लाइन जाने के बजाय, हम कॉलम द्वारा कॉलम जाएंगे। इस प्रकार, पहला टुकड़ा हरा होगा, दूसरा लाल होगा, तीसरा नीला होगा और चौथा पीला होगा। कंप्यूटिंग का विचार पाठ 3 के समान है, लेकिन हम पंक्तियों के बजाय कॉलम के माध्यम से चलते हैं। तो हमारे y निर्देशांक की गणना टाइल की संख्या (2) द्वारा टाइल सूचकांक को विभाजित करते समय शेष प्राप्त करके की जाती है, और x को टाइल की संख्या से सूचकांक को विभाजित करके समन्वयित किया जाता है। ये x और y निर्देशांक x और y सूचक हैं, इसलिए हम इन्हें कटआउट की चौड़ाई और ऊंचाई से गुणा करके वास्तविक पिक्सेल निर्देशांक में अनुवाद करते हैं, जो सभी टाइलों (100x100) के लिए समान है। अंत में, इस मामले में पहले आकर्षित करने के लिए टुकड़े का चयन करें।

हम अपने टुकड़ों को स्क्रीन के बीच में भी खींचना चाहते हैं, इसलिए हम इन x और y की गणना करते हैं और बनावट की चौड़ाई और ऊंचाई के बजाय टाइल की चौड़ाई और ऊंचाई का उपयोग करते हैं।

//iW  iH    
//   ,     ,     
int iW = 100, iH = 100;
int x = SCREEN_WIDTH / 2 - iW / 2;
int y = SCREEN_HEIGHT / 2 - iH / 2;

//    
SDL_Rect clips[4];
for (int i = 0; i < 4; ++i){
        clips[i].x = i / 2 * iW;
        clips[i].y = i % 2 * iH;
        clips[i].w = iW;
        clips[i].h = iH;
}
//     
int useClip = 0;

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

इनपुट के आधार पर चित्र बदलें

हमारे द्वारा बनाई गई छवि के सभी हिस्सों की जांच करने के लिए, ईवेंट प्रोसेसिंग लूप में कीबोर्ड इनपुट प्रोसेसिंग जोड़ें और कुंजियों का 1-4 का उपयोग करके प्रदर्शित भाग का चयन करें। यह निर्धारित करने के लिए कि क्या कुंजी दबाया गया है, आप देख सकते हैं कि क्या घटना SDL_KEYDOWN प्रकार की है और यदि हां, तो हम यह पता लगा सकते हैं कि किस कुंजी को e.key.keysym.ym का उपयोग करके घटना के अंदर कुंजी कोड की जांच करके दबाया गया था। विकी पर घटना के प्रकार , कुंजी कोड और SDL_Event पर अन्य जानकारी की पूरी सूची उपलब्ध है।

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

while (SDL_PollEvent(&e)){
        if (e.type == SDL_QUIT)
                quit = true;
        //       
        if (e.type == SDL_KEYDOWN){
                switch (e.key.keysym.sym){
                        case SDLK_1:
                                useClip = 0;
                                *break;
                        case SDLK_2:
                                useClip = 1;
                                *break;
                        case SDLK_3:
                                useClip = 2;
                                *break;
                        case SDLK_4:
                                useClip = 3;
                                *break;
                        case SDLK_ESCAPE:
                                quit = true;
                                *break;
                        default:
                                *break;
                }
        }
}

एक फसली छवि बनाएं

आखिरी चीज स्क्रीन पर छवि का सही हिस्सा प्राप्त करना है! हम इसे अतिरिक्त स्केलिंग के बिना छवि का हिस्सा खींचने के लिए रेंडरटेक्स्चर के हमारे अधिक सुविधाजनक संस्करण को कॉल करके करेंगे और उस हिस्से को स्थानांतरित करेंगे जिसे हम उपयोग करना चाहते हैं (उपयोग क्लीप में उपयोग किया गया)।

SDL_RenderClear(renderer);
renderTexture(image, renderer, x, y, &clips[useClip]);
SDL_RenderPresent(renderer);

पाठ का अंत ५

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

एसडीएल 2.0 पाठ चक्र: पाठ 5 - एक स्प्राइट शीट का टुकड़ा करना