👨🏿‍🌾 🚎 👎🏼 क्रॉस-प्लेटफॉर्म शांत है 👩🏽‍🏫 🍟 🙍🏼

यह पोस्ट " स्मार्ट फोन फॉर स्मार्ट पोस्ट " प्रतियोगिता में भाग ले रही है।

यह कोई रहस्य नहीं है कि मोबाइल गेम्स आज बहुत लोकप्रिय हैं। हर डेवलपर, यहां तक कि एक शुरुआत करने वाले को भी इनमें से एक गेम लिखने का अवसर मिलता है। अक्सर मंच की पसंद के साथ सवाल उठता है। बेशक, मैं चाहता हूं कि खेल तुरंत हर जगह हो: iOS और Android पर, WP7 और MeeGo पर, डेस्कटॉप पर और ब्राउज़र में। और ताकि यह सब मुफ्त टूल का उपयोग करके आसानी से लागू किया जा सके।

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

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

सुविधाजनक उपकरणों का चयन

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

Android प्लेटफॉर्म के लिए, मैं libgdx लाइब्रेरी पर ध्यान केंद्रित करूंगा। इसकी मदद से, आप आसानी से बनावट आकर्षित कर सकते हैं, ध्वनियाँ खेल सकते हैं और अन्य आवश्यक चीजें कर सकते हैं।

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

इसके अलावा, विशेष रूप से इस लेख के लिए, मैं गेम को Google Chrome में चलाने के लिए HTML5, जावास्क्रिप्ट और Google नेटिव क्लाइंट का उपयोग करूंगा। मैं एचटीएमएल 5 कैनवस और ऑडियो का उपयोग करूंगा, और आप देखेंगे कि यह कितना आसान और सरल है।

तर्क का कार्यान्वयन जटिल नहीं है, इसलिए मैं इसके बारे में नहीं लिखूंगा (कोई भी कोड देख सकता है )। इसके बजाय, मैं इस बात पर ध्यान केंद्रित करूंगा कि गेम को सभी ऑपरेटिंग सिस्टम पर कैसे काम किया जाए।

परम मंच से सार

जैसा कि मैंने कहा, कोड का थोक सभी प्लेटफार्मों के लिए सामान्य होगा। चलो इसे "इंजन" कहते हैं। मुझे दो समस्याओं को हल करने की आवश्यकता होगी। प्रत्येक प्लेटफ़ॉर्म पर इंजन विधियों को कॉल करने के लिए पहला है:

इसके लिए, इंजन प्लेटफार्मों को निम्नलिखित इंटरफ़ेस प्रदान करेगा:

class Application { public: Application(); ~Application(); void render(); void touch(int x, int y); //... };

विभिन्न प्लेटफार्मों पर ड्राइंग और इनपुट हैंडलर को कॉल करना एप्लिकेशन क्लास से विधियों को कॉल करेगा, उदाहरण के लिए, Qt का उपयोग करते समय, यह इस तरह दिखाई देगा:

 void QtPlatrom::paintEvent(QPaintEvent *) { QPainter painter(this); m_painter = &painter; m_app->render(); } void QtPlatrom::mousePressEvent(QMouseEvent *e) { QWidget::mousePressEvent(e); m_app->touch(e->x(), height() - e->y()); }

यह एंड्रॉइड पर थोड़ा अधिक जटिल होगा, क्योंकि आपको C ++ से जावा में जाने की आवश्यकता है:

 private native void renderNative(); private native void touchNative(int x, int y); static { System.loadLibrary("fruitclick"); } public void render() { renderNative(); } public boolean touchDown(int x, int y, int pointer, int button) { touchNative(x, Gdx.graphics.getHeight() - y); return false; }

उसके बाद, संबंधित विधियों को C ++ में कहा जाता है:

 void Java_com_fruitclick_Application_renderNative(JNIEnv* env, jobject thiz) { g_app->render(); } void Java_com_fruitclick_Application_touchNative(JNIEnv* env, jobject thiz, jint x, jint y) { g_app->touch(x, y); }

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

 function onTouch(e) { var coords = getCursorPosition(e); var x = coords[0]; var y = canvas.height - coords[1]; var message = "touch " + x.toString() + " " + y.toString(); FruitclickModule.postMessage(message); } function simulate() { FruitclickModule.postMessage('render'); setTimeout("simulate()", 16); }

C ++ में, संदेशों को पार्स किया जाता है, और सामग्री के आधार पर एक विधि या दूसरे को कहा जाता है:

 void NaclPlatform::HandleMessage(const pp::Var& var) { if (!var.is_string()) return; std::stringstream stream(var.AsString()); std::string type; stream >> type; if (type == "render") { m_app.render(); } else if (type == "touch") { int x; int y; stream >> x >> y; m_app.touch(x, y); } }

नतीजतन, इंजन से कोई फर्क नहीं पड़ता कि कॉल किस प्लेटफॉर्म से हुआ था, यह इससे अलग था। लेकिन वह जानता है कि बिंदु पर स्क्रीन का एक स्पर्श था (x, y) या भौतिकी को संसाधित करने और स्क्रीन पर चित्र प्रदर्शित करने का समय आ गया है।

उलटा संवाद

दूसरा कार्य प्लेटफ़ॉर्म के साथ इंजन का रिवर्स इंटरैक्शन है:

स्क्रीन पर छवियों और पाठ को प्रदर्शित करने, ध्वनि चलाने, कंपन करने के लिए इंजन के आदेश के लिए यह आवश्यक है। ऐसा करने के लिए, सभी प्लेटफार्मों को एक सामान्य इंटरफ़ेस लागू करना होगा। इस प्लेटफ़ॉर्म इंटरफ़ेस को कॉल करें:

 class Platform { public: enum Texture { APPLE = 0, BACKGROUND }; static void draw(Texture id, float x, float y, float angle = 0); static void drawText(const char* text, float x, float y); enum Sound { CRUNCH = 0, CRASH }; static void playSound(Sound id); static void vibrate(); //... };

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

 Platform::draw(Platform::BACKGROUND, screenWidth/2, screenHeight/2); Platform::playSound(Platform::CRASH);

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

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

 public void draw(int id, float x, float y, float angle) { TextureRegion region = null; switch (id) { case BACKGROUND: region = background; break; case APPLE: region = apple; break; default: break; } float w = region.getRegionWidth(); float h = region.getRegionHeight(); batch.draw(region, x - w/2, y - h/2, w/2, h/2, w, h, 1, 1, angle); }

चित्र बनाना, Qt:

 void QtPlatrom::drawImpl(Texture id, float x, float y, float angle) { QPixmap* pixmap = NULL; switch(id) { case FruitClick::Platform::APPLE: pixmap = &m_apple; break; case FruitClick::Platform::BACKGROUND: pixmap = &m_background; break; default: break; } y = height() - y; m_painter->translate(x, y); m_painter->rotate(-angle); int w = pixmap->width(); int h = pixmap->height(); m_painter->drawPixmap(-w/2, -h/2, w, h, *pixmap); m_painter->rotate(angle); m_painter->translate(-x, -y); }

चित्र बनाना, जावास्क्रिप्ट (एचटीएमएल 5 कैनवस):

 function draw(id, x, y, angle) { y = canvas.height - y; var image = null; switch(id) { case 0: image = apple; break; case 1: image = background; break; } context.translate(x, y); context.rotate(-angle); context.drawImage(image, -image.width/2, -image.height/2); context.rotate(angle); context.translate(-x, -y); }

ड्राइंग पाठ, Android (libgdx):

 public void drawText(String text, float x, float y) { font.draw(batch, text, x, y); }

ड्राइंग पाठ, Qt:

 void QtPlatrom::drawTextImpl(const char *text, float x, float y) { y = height() - y; m_painter->drawText(x, y, text); }

ड्राइंग टेक्स्ट, जावास्क्रिप्ट (एचटीएमएल 5 कैनवस):

 function drawText(text, x, y) { y = canvas.height - y; context.fillText(text, x, y); }

साउंड प्ले, Android (libgdx):

 public void playSound(int id) { switch (id) { case CRUNCH: crunch.play(); break; case CRASH: crash.play(); break; } }

ध्वनि प्लेबैक, Qt:

 void QtPlatrom::playSoundImpl(Sound id) { switch (id) { case FruitClick::Platform::CRUNCH: m_crunch.play(); break; case FruitClick::Platform::CRASH: m_crash.play(); break; default: break; } }

ध्वनि चलायें, जावास्क्रिप्ट (HTML5 ऑडियो):

 function playSound(id) { var sound = null; switch(id) { case 0: sound = crunch; break; case 1: sound = crash; break; } sound.currentTime = 0; sound.play(); }

कंपन, Android (libgdx):

 void vibrate() { Gdx.input.vibrate(100); }

एंड्रॉइड के लिए लागू करते समय, आपको C ++ से जावा कोड को कॉल करने के साथ थोड़ा टिंकर करना होगा - एक बार आवश्यक लावा तरीकों की आईडी प्राप्त करें:

 void setupEnv(JNIEnv* env, jobject thiz) { g_env = env; g_activity = thiz; g_activityClass = env->GetObjectClass(thiz); drawID = env->GetMethodID(g_activityClass, "draw", "(IFFF)V"); drawTextID = env->GetMethodID(g_activityClass, "drawText", "(Ljava/lang/String;FF)V"); playSoundID = env->GetMethodID(g_activityClass, "playSound", "(I)V"); }

और फिर उन्हें फोन करें:

 void AndroidPlatform::drawImpl(FruitClick::Platform::Texture id, float x, float y, float angle) { g_env->CallVoidMethod(g_activity, drawID, id, x, y, angle); } void AndroidPlatform::drawTextImpl(const char* text, float x, float y) { jstring javaString = g_env->NewStringUTF(text); g_env->CallVoidMethod(g_activity, drawTextID, javaString, x, y); } void AndroidPlatform::playSoundImpl(FruitClick::Platform::Sound id) { g_env->CallVoidMethod(g_activity, playSoundID, id); }

मूल ग्राहक के साथ एक nontrivial स्थिति है - आपको C ++ कोड से जावास्क्रिप्ट में संदेश भेजने की आवश्यकता है:

 const char* sep = "|"; void NaclPlatform::drawImpl(FruitClick::Platform::Texture id, float x, float y, float angle) { std::stringstream stream; stream << "draw" << sep << id << sep << x << sep << y << sep << angle; PostMessage(pp::Var(stream.str())); } void NaclPlatform::drawTextImpl(const char* text, float x, float y) { std::stringstream stream; stream << "drawText" << sep << text << sep << x << sep << y; PostMessage(pp::Var(stream.str())); } void NaclPlatform::playSoundImpl(FruitClick::Platform::Sound id) { std::stringstream stream; stream << "playSound" << sep << id; PostMessage(pp::Var(stream.str())); }

और जावास्क्रिप्ट में, इन संदेशों को पार्स किया गया है:

 function handleMessage(message_event) { params = message_event.data.split("|"); if (params[0] == "draw") { draw(parseInt(params[1]), parseInt(params[2]), parseInt(params[3]), parseFloat(params[4])); } else if (params[0] == "drawText") { drawText(params[1], parseInt(params[2]), parseInt(params[3])); } else if (params[0] == "playSound") { playSound(parseInt(params[1])); } }

परिणाम

इस साधारण खेल को कैच द बुलसे कहा जाता है। मेरा सुझाव है कि शुरू करने और कुछ मिनटों के लिए रुकने की कोशिश करो, पहले तो मैं सफल नहीं हुआ:
- मूल क्लाइंट संस्करण (सुनिश्चित करें कि आपके पास Google Chrome ब्राउज़र का नवीनतम संस्करण है, और मूल ग्राहक इसमें शामिल हैं: प्लगइन्स और फ़्लैग के बारे में)। Nexe निष्पादन योग्य फ़ाइल का आकार 32-बिट सिस्टम के लिए 4.2 एमबी और 64-बिट वाले के लिए 4.9 एमबी है; आपको धीरे से कनेक्ट करते समय थोड़ा इंतजार करना होगा;
- विंडोज संस्करण - उन लोगों के लिए जो Google क्रोम को पसंद नहीं करते हैं।

वीडियो:

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

कोड

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

यह सब क्यों?

आप में से कई लोग सोचेंगे, बाइक क्यों लिखते हैं? उदाहरण के लिए, अगर वहाँ मुरब्बा या एकता है । हां, लेकिन वे पैसे खर्च करते हैं, और एक साधारण 2 डी खिलौने के लिए इतना भारीपन क्यों? कुछ का यह भी कहना है कि Qt एंड्रॉइड और iOS पर शुरू होता है, लेकिन वास्तव में एंड्रॉइड पर यह बहुत अच्छी तरह से शुरू होता है, बिना साउंड और ओपनजीएल के, और सामान्य रूप से iOS पर, केवल YouTube पर वीडियो। मैं वास्तव में क्यूटी को पसंद करता हूं, और मुझे आशा है कि निकट भविष्य में, आईओएस और एंड्रॉइड के लिए एप्लिकेशन को उतना आसान लिखा जा सकता है जितना कि वे अब मीगो के लिए हैं, लेकिन अब इन प्लेटफार्मों के लिए अन्य टूल का उपयोग करना बेहतर है।

लाभ

इस आलेख में वर्णित दृष्टिकोण का उपयोग करते हुए, आप प्लेटफ़ॉर्म से बंधे नहीं हैं, आप अपने इच्छित टूल का उपयोग कर सकते हैं, और भविष्य में उन्हें बदलना आसान है। डेस्कटॉप पर - Qt या GTK, Android पर - libgdx या AndEngine, iOS पर - cocos2d, चुनाव आपका है। आप प्लेटफॉर्म द्वारा उपलब्ध कराई गई एपीआई का उपयोग करके इंजनों को पूरी तरह से त्याग सकते हैं। अधिकांश समय आप अपने पसंदीदा IDE में महान और शक्तिशाली C ++ में कोड लिख और डिबग कर सकते हैं।

कमियों

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

जारी रखा जाए?

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

क्रॉस-प्लेटफॉर्म शांत है