🌷 🥙 👩‍👧‍👦 एसडीएल गेम फ्रेमवर्क श्रृंखला का अनुवाद। भाग 4 - एसडीएल ट्यूटोरियल: टिक टीएसी को पैर की अंगुली 🕌 😼 🏉

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

सबसे पहले (क्या हम गंभीर गेम डेवलपर्स बनने जा रहे हैं?) आपको एक छोटे तकनीकी विनिर्देश को तैयार करने और भविष्य के टिक-टैक-टो के घटकों को निर्धारित करने की आवश्यकता है। जैसा कि हम जानते हैं, टिक-टैक-टो में एक 3x3 वर्ग होता है जिसमें दो खिलाड़ी बारी-बारी से X या O लगाते हैं। तो, हमें 3 छवियों को तैयार करने की आवश्यकता है, एक क्षेत्र के लिए, और एक एक्स और ओ के लिए । ध्यान दें कि हमें एक्स और ओ के लिए 9 चित्र बनाने की आवश्यकता नहीं है, लेकिन एक समय में केवल एक (क्योंकि हम उन्हें जितनी बार चाहें उपयोग कर सकते हैं)। हां, वास्तव में, आप एक्स और ओ के लिए केवल 1 छवि बना सकते हैं (दूसरे पाठ से SDL_Rect के बारे में याद रखें; अनुवाद में, मैं मूल कोड से चिपका रहूंगा, लेकिन अगर आप रुचि रखते हैं, तो लिनक्स के लिए मेरा कार्यान्वयन भी देखें)। हम पहला कदम उठाने के लिए तैयार हैं। आइए अपने क्षेत्र को 300x300 पिक्सेल के आकार के साथ बनाएं, क्रमशः, हम एक्स और ओ छवियों को 100x100 पिक्सेल आकार में बनाएंगे, अर्थात। मैदान का 1/9। मैंने एक कारण से ऐसे आकार चुने। जैसा कि आप शायद पहले ही देख चुके हैं, मेरे स्क्रीनशॉट उच्च रिज़ॉल्यूशन में नहीं खड़े हैं, लेकिन क्योंकि मैं नेटबुक =) से लिखता हूं। आप किसी भी अन्य आकार का उपयोग कर सकते हैं (और टिक टीएसी को पैर की अंगुली HD बना सकते हैं)।

फ़ील्ड छवि

X और O से छवि

तो, चित्र हैं, यह उनके डाउनलोड का कार्यक्रम बना हुआ है। CApp.h खोलें और निम्नलिखित परिवर्तन करें - परीक्षण की सतह को हटा दें और 3 नए की घोषणा करें:

CApp.h

#ifndef _CAPP_H_ #define _CAPP_H_ #include <SDL.h> #include "CEvent.h" #include "CSurface.h" class CApp : public CEvent { private: bool Running; SDL_Surface* Surf_Display; private: SDL_Surface* Surf_Grid; SDL_Surface* Surf_X; SDL_Surface* Surf_O; public: CApp(); int OnExecute(); public: bool OnInit(); void OnEvent(SDL_Event* Event); void OnExit(); void OnLoop(); void OnRender(); void OnCleanup(); }; #endif

लगभग समान जोड़-तोड़ CApp.cpp में किए जाने चाहिए :

CApp.cpp

 #include "CApp.h" CApp::CApp() { Surf_Grid = NULL; Surf_X = NULL; Surf_O = NULL; Surf_Display = NULL; Running = true; } int CApp::OnExecute() { if(OnInit() == false) { return -1; } SDL_Event Event; while(Running) { while(SDL_PollEvent(&Event)) { OnEvent(&Event); } OnLoop(); OnRender(); } OnCleanup(); return 0; } int main(int argc, char* argv[]) { CApp theApp; return theApp.OnExecute(); }

आपने शायद पहले ही अनुमान लगा लिया है कि हम सभी परिणामी सतहों को भी साफ करेंगे, इसलिए CApp_OnCleanup.cpp खोलें और लिखें:

CApp_OnCleanup.cpp

 #include "CApp.h" void CApp::OnCleanup() { SDL_FreeSurface(Surf_Grid); SDL_FreeSurface(Surf_X); SDL_FreeSurface(Surf_O); SDL_FreeSurface(Surf_Display); SDL_Quit(); }

तो, सतहों को स्थापित किया गया है, अब उन्हें मेमोरी में लोड करना शुरू करने का समय है। CApp_OnInit.cpp खोलें और वहां परिवर्तन करें - परीक्षण की सतह को हटा दें, नए जोड़ दें, और विंडो को 300x300 में भी आकार दें ताकि हमारे पास विंडो में कोई खाली स्थान न हो। और सुनिश्चित करें कि छवि फ़ाइलों के लिए पथों की वर्तनी सही है!

CApp_OnInit.cpp

 #include "CApp.h" bool CApp::OnInit() { if(SDL_Init(SDL_INIT_EVERYTHING) < 0) { return false; } if((Surf_Display = SDL_SetVideoMode(300, 300, 32, SDL_HWSURFACE | SDL_DOUBLEBUF)) == NULL) { return false; } if((Surf_Grid = CSurface::OnLoad("./gfx/grid.bmp")) == NULL) { return false; } if((Surf_X = CSurface::OnLoad("./gfx/x.bmp")) == NULL) { return false; } if((Surf_O = CSurface::OnLoad("./gfx/o.bmp")) == NULL) { return false; } return true; }

क्या आपने ध्यान दिया कि मैंने फ़ाइल नामों के सामने / .fx / जोड़ा है? मेरा तर्क है: गंभीर और बड़े खेलों के विकास के दौरान, स्रोत कोड फ़ाइलों और सभी प्रकार की संसाधन फ़ाइलों की संख्या लगातार बढ़ रही है, इसलिए उन्हें विभिन्न फ़ोल्डरों में रखना सबसे सुविधाजनक है। मुझे लगता है कि आप मुझसे सहमत होंगे =)। अब स्क्रीन पर हमारे क्षेत्र को प्रदर्शित करते हैं! CApp_OnRender.cpp खोलें और फ़ील्ड सतह के साथ परीक्षण सतह के प्रदर्शन को बदलें:

CApp_OnRender.cpp

 #include "CApp.h" void CApp::OnRender() { CSurface::OnDraw(Surf_Display, Surf_Grid, 0, 0); SDL_Flip(Surf_Display); }

अब आप खेल संकलित कर सकते हैं और "ग्रह पर सबसे सुंदर खेल मैदान" का आनंद ले सकते हैं! सतहों के साथ काम करते समय 5 सरल चरणों को याद रखना महत्वपूर्ण है: घोषित करें, शून्य, लोड, ड्रा, मुफ्त (इस मंत्र को जानें, क्योंकि आपके भविष्य के विकास में यह आपके गेम की कई त्रुटियों, मेमोरी लीक, ब्रेक और खराबी से बचने में मदद करेगा)।
सबसे अधिक संभावना है कि आपने इस तथ्य पर ध्यान आकर्षित किया है कि गुलाबी पृष्ठभूमि पर टिक-टैक-टो की तस्वीरें और सोचा - "और लेखक वह है, ईएमओ?"। मैं आपको मनाने की जल्दबाजी करता हूँ! इससे कोई फर्क नहीं पड़ता कि हम पृष्ठभूमि को किस रंग से जोड़ते हैं (केवल इस विशेष उदाहरण में, इसके विपरीत हमें छवि और पृष्ठभूमि के बीच की रेखा को ठीक से निर्धारित करने की अनुमति देता है), क्योंकि बाद में हम पृष्ठभूमि को "कम" करेंगे और सरल और स्पष्ट SD__CetColorKey फ़ंक्शन का उपयोग करके इसे पारदर्शी बनाएंगे । तो चलिए इसे लागू करते हैं! ऐसा करने के लिए, CSurface.h फ़ाइल में लिखें:

CSurface.h

 #ifndef _CSURFACE_H_ #define _CSURFACE_H_ #include <SDL.h> class CSurface { public: CSurface(); public: static SDL_Surface* OnLoad(char* File); static bool OnDraw(SDL_Surface* Surf_Dest, SDL_Surface* Surf_Src, int X, int Y); static bool OnDraw(SDL_Surface* Surf_Dest, SDL_Surface* Surf_Src, int X, int Y, int X2, int Y2, int W, int H); static bool Transparent(SDL_Surface* Surf_Dest, int R, int G, int B); }; #endif

और CSurface.cpp में फ़ंक्शन जोड़ें:

CSurface.cpp

 bool CSurface::Transparent(SDL_Surface* Surf_Dest, int R, int G, int B) { if(Surf_Dest == NULL) { return false; } SDL_SetColorKey(Surf_Dest, SDL_SRCCOLORKEY | SDL_RLEACCEL, SDL_MapRGB(Surf_Dest->format, R, G, B)); return true; }

आइए फ़ंक्शन पर अधिक विस्तार से विचार करें। स्रोत की सतह के लिए सूचक के अलावा, तीन और चर इसे स्थानांतरित किए जाते हैं, जिनमें से प्रत्येक आरजीबी प्रारूप से रंग घटक के पदनाम के लिए जिम्मेदार है (यदि कोई और व्यक्ति नहीं है: आर - लाल, जी - हरा, बी - नीला; लाल, हरा और नीला रंग)। यानी अगर हम फंक्शन में 255, 0, 0 पास करते हैं , तो सतह से "बंद" हो गया और लाल रंग पारदर्शी हो गया।
सबसे पहले, हमारा कार्य सतह के अस्तित्व के लिए जाँच करता है और, यदि सफल होता है, तो रंग को प्रेषित मान (उदाहरण के लिए 255, 0, 0 ) के लिए Surf_Dest सतह में पारदर्शी ("इसे बंद कर देता है") के अनुरूप सेट करता है। अब खुद SDL_SetColorKey के हस्ताक्षर का पता लगाने का समय है:

 int SDL_SetColorKey(SDL_Surface *surface, Uint32 flag, Uint32 key);

पहला पैरामीटर उस सतह को परिभाषित करता है जिसमें फ़ंक्शन लागू किया जाता है;
दूसरा पैरामीटर झंडे गुजरता है जिसका मतलब है: SDL_SRCCOLORKEY - इंगित करता है कि तीसरे पैरामीटर ( Uint32 कुंजी ) द्वारा प्रेषित रंग को सतह में बंद कर दिया जाना चाहिए, SDL_RLEACCEL - सतह के प्रदर्शन को तेज करने के लिए RIR छवि संपीड़न तकनीक का उपयोग करने की अनुमति देता है। यदि हम झंडे के बजाय "0" पास करते हैं, तो इस तरह हम इस सतह पर पहले सेट किए गए "टर्न-ऑफ" रंग मूल्य को साफ कर सकते हैं;
तीसरा पैरामीटर SDL_MapRGB का उपयोग करके गणना की गई "बंद" रंग मान सेट करता है, जो संचरित सतह के प्रारूप में सबसे उपयुक्त रंग की खोज करता है (आप जानते हैं कि रंग प्रारूप एक दूसरे से भिन्न होते हैं, और यह फ़ंक्शन हमें "उनमें से दोस्त बनाने" में मदद करता है)।

खैर, यह सब और किया जाता है, यह हमारी सतहों पर फ़ंक्शन को लागू करने के लिए रहता है। CApp_OnInit.cpp खोलें और लिखें:

CApp_OnInit.cpp

 #include "CApp.h" bool CApp::OnInit() { if(SDL_Init(SDL_INIT_EVERYTHING) < 0) { return false; } if((Surf_Display = SDL_SetVideoMode(300, 300, 32, SDL_HWSURFACE | SDL_DOUBLEBUF)) == NULL) { return false; } if((Surf_Grid = CSurface::OnLoad("./gfx/grid.bmp")) == NULL) { return false; } if((Surf_X = CSurface::OnLoad("./gfx/x.bmp")) == NULL) { return false; } if((Surf_O = CSurface::OnLoad("./gfx/o.bmp")) == NULL) { return false; } CSurface::Transparent(Surf_X, 255, 0, 255); CSurface::Transparent(Surf_O, 255, 0, 255); return true; }

तो सभी सतहों को ट्यून किया जाता है, बात छोटी है - उन्हें ड्रा करें। सबसे पहले, हमें नौ घटकों की एक सरणी की आवश्यकता है जो क्रॉस या शून्य प्रदर्शित करने के लिए क्षेत्र के प्रकार को संग्रहीत करेंगे। शून्य तत्व ऊपरी बाएं चतुर्थांश के लिए प्रकार को संग्रहीत करेगा, ऊपरी मध्य के लिए पहला, ऊपरी दाएं के लिए दूसरा, आदि। निचले दाईं ओर। आपको इस सरणी को CApp.h में पंजीकृत करना होगा:

CApp.h

 #ifndef _CAPP_H_ #define _CAPP_H_ #include <SDL.h> #include "CEvent.h" #include "CSurface.h" class CApp : public CEvent { private: bool Running; SDL_Surface* Surf_Display; private: SDL_Surface* Surf_Grid; SDL_Surface* Surf_X; SDL_Surface* Surf_O; private: int Grid[9]; public: CApp(); int OnExecute(); public: bool OnInit(); void OnEvent(SDL_Event* Event); void OnExit(); void OnLoop(); void OnRender(); void OnCleanup(); }; #endif

हम जानते हैं कि हमारे ग्रिड की प्रत्येक कोशिका या तो खाली हो सकती है या उसमें क्रॉस या शून्य हो सकता है। सभी प्रकार के " मैजिक नंबरों " का उपयोग न करने के लिए, हमारे लिए तथाकथित का उपयोग करना सबसे उचित है enum, जिसके बारे में और अधिक यहाँ पढ़ा जा सकता है । इस प्रकार, हम अपने सेल राज्यों को सार्थक नाम देंगे और हमें हमेशा पता चलेगा कि GRID_TYPE_NONE = 0, GRID_TYPE_X = 1, और GRID_TYPE_O = 2. वापस CApp.h पर जाएं और सेल समन्वय सरणी की घोषणा के तहत एक गणना जोड़ें:

CApp.h

 enum { GRID_TYPE_NONE = 0, GRID_TYPE_X, GRID_TYPE_O };

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

CApp.h

 public: void Reset();

CApp.cpp में, लिखें:

CApp.cpp

 void CApp::Reset() { for(int i = 0;i < 9;i++) { Grid[i] = GRID_TYPE_NONE; } }

यह चक्र ग्रिड कोशिकाओं के माध्यम से जाता है और GRID_TYPE_NONE मान सेट करके उन्हें साफ़ करता है। हम गेम की शुरुआत में इस सफाई को सर्वश्रेष्ठ कहते हैं, इसलिए CApp_OnInit.cpp खोलें और निम्नलिखित बातें करें:

CApp_OnInit.cpp

 //... ... CSurface::Transparent(Surf_X, 255, 0, 255); CSurface::Transparent(Surf_O, 255, 0, 255); Reset();

अब क्रॉस और शून्य को खींचने की क्षमता जोड़ें। CApp.h में एक और फ़ंक्शन परिभाषित करें:

CApp.h

 void SetCell(int ID, int Type);

खैर, और तदनुसार CApp.cpp में :

CApp.cpp

 void CApp::SetCell(int ID, int Type) { if(ID < 0 || ID >= 9) return; if(Type < 0 || Type > GRID_TYPE_O) return; Grid[ID] = Type; }

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

CApp_OnRender.cpp

 for(int i = 0;i < 9;i++) { int X = (i % 3) * 100; int Y = (i / 3) * 100; if(Grid[i] == GRID_TYPE_X) { CSurface::OnDraw(Surf_Display, Surf_X, X, Y); }else if(Grid[i] == GRID_TYPE_O) { CSurface::OnDraw(Surf_Display, Surf_O, X, Y); } }

यहाँ थोड़ा और जटिल है। सबसे पहले, हम एक चक्र शुरू करते हैं जिसमें हम खेल के मैदान के ग्रिड में सभी कोशिकाओं के माध्यम से चलते हैं, और फिर, आईडी के प्रकार के आधार पर, हम एक क्रॉस या शून्य प्रदर्शित करते हैं। और हम क्रॉस और शून्य को निम्न रूप से प्रदर्शित करने के लिए निर्देशांक पाते हैं: एक्स-समन्वय के लिए, पुनरावृत्ति को 3 से विभाजित करें शेष के साथ और 200 से गुणा करें (एक प्रदर्शित सेल का आकार), अंततः i = 0 के लिए 0, 1 के लिए 1, 2 के लिए 2, 2 के लिए। 3, आदि के लिए 0; Y समन्वय के लिए, पुनरावृत्ति को 3 से विभाजित करें, शेष के बिना और फिर से 200 से गुणा करें, 0, 1 और 2 के लिए 0 प्राप्त करें, आदि। प्रस्तुत सेल के प्रकार की जांच करने के बाद, हम इसे प्रदर्शित करते हैं। अब हमें केवल ईवेंट हैंडलिंग फ़ंक्शन को फिर से परिभाषित करना है और प्लेयर के लिए जिम्मेदार वैरिएबल को जोड़ना है। CApp.h खोलें और OnEvent फ़ंक्शन के ठीक नीचे OnLButtonDown फ़ंक्शन जोड़ें:

CApp.h

 void OnLButtonDown(int mX, int mY);

अब बदलें CApp_OnEvent :

CApp_OnEvent.cpp

 void CApp::OnLButtonDown(int mX, int mY) { int ID = mX / 100; ID = ID + ((mY / 100) * 3); if(Grid[ID] != GRID_TYPE_NONE) { return; } if(CurrentPlayer == 0) { SetCell(ID, GRID_TYPE_X); CurrentPlayer = 1; }else{ SetCell(ID, GRID_TYPE_O); CurrentPlayer = 0; } }

इस कोड के साथ, हम यह जांचते हैं कि खिलाड़ी ने जिस सेल पर क्लिक किया है वह पहले से ही भरा हुआ है, और यदि नहीं, तो उसे क्रॉस या शून्य (खिलाड़ी के आधार पर) की तस्वीर से भरें, और फिर खिलाड़ियों को स्विच करें (यानी यदि खिलाड़ी पहचानकर्ता CurrentPlayer = 1 अगला बटन प्रेस पहचानकर्ता 0 के साथ एक खिलाड़ी द्वारा एक क्लिक के रूप में व्याख्या किया जाएगा)। CApp.h खोलें और खिलाड़ी के लिए जिम्मेदार चर जोड़ें:

CApp.h

 int CurrentPlayer;

और इसे CApp.cpp पर रीसेट करना न भूलें:

CApp.cpp

 CApp::CApp() { CurrentPlayer = 0; Surf_Grid = NULL; Surf_X = NULL; Surf_O = NULL; Surf_Display = NULL; Running = true; }

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

और यहाँ काम टिक-टैक-टो का एक वीडियो है:

GitHub'e पर मेरा संस्करण।

स्रोत कोड लिंक:

सभी पाठों के लिंक:

एक खेल ढांचे का विकास। भाग 1 - एसडीएल की मूल बातें
एक खेल ढांचे का विकास। भाग 2 - निर्देशांक और मानचित्रण
एक खेल ढांचे का विकास। भाग 3 - घटनाएँ
एक खेल ढांचे का विकास। भाग 4 - टिक टीएसी को पैर की अंगुली
एक खेल ढांचे का विकास। भाग 5 - एनिमेशन
एक खेल ढांचे का विकास। भाग 6 - संस्थाएँ

एसडीएल गेम फ्रेमवर्क श्रृंखला का अनुवाद। भाग 4 - एसडीएल ट्यूटोरियल: टिक टीएसी को पैर की अंगुली

More articles: