सिम्बियन हिट का निर्माण और प्रचार। भाग 1 डिज़ाइन

इस पोस्ट में, मैजिक ब्रश एप्लिकेशन को कैसे बनाया गया, और इसके विकास के दौरान आने वाली कठिनाइयों के बारे में एक कहानी प्रकाशित की गई है। फिलहाल, मैजिक ब्रश ओवी स्टोर में सबसे लोकप्रिय अनुप्रयोगों में से एक है, जो एक स्थिर आय प्रदान करता है। अच्छे समय में, अकेले ओवी स्टोर में ऐप की बिक्री प्रति माह 4K प्रतियों तक पहुंचती है। और लाइट संस्करण को 1.7M बार डाउनलोड किया गया था। लेकिन शुरुआत में जो मजाकिया था वह पूरी तरह से अलग तरह का एप्लिकेशन था। कटौती के तहत सब कुछ।


मैजिक ब्रश प्रोग्राम का काम:


प्रोग्राम पेज: http://www.tarasov-mobile.com/magicbrush.html

क्या कल्पना की गई थी, या खेल के लिए इंजन

यह सब फरवरी 2010 में शुरू हुआ। फिर मैंने अपना पहला स्मार्टफोन खरीदा - नोकिया 5800 एक्सप्रेस म्यूजिक। एक नए उपकरण के साथ लगभग एक महीने खेलने के बाद, मैंने अपने बचपन के सपने को याद किया और टच-फोन के लिए एक खेल लिखने का फैसला किया। और मैं चाहता था कि सब था:

• नया अनुभव प्राप्त करें;
• विकास से प्रशंसक प्राप्त करें;
• शायद कुछ पैसे कमाएँ। :)

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

सिम्बियन SDK से परिचित होने के बाद मुझे पहली बार झटका लगा। सबसे पहले, सिम्बियन C ++ मुझे बहुत अजीब और असामान्य लग रहा था। दूसरे, सिम्बियन ^ 1 (5800, N97, इत्यादि) पर स्मार्टफ़ोन बोर्ड पर ग्राफिक्स त्वरक के बिना एक कमज़ोर हार्डवेयर प्लेटफ़ॉर्म पर बनाए गए थे। SDK में OpenGL लाइब्रेरी थीं, लेकिन उन्हें प्रोग्रामेटिक रूप से लागू किया गया था। तीसरा, फ्लोटिंग-पॉइंट ऑपरेशन के लिए स्मार्टफोन के सीपीयू के समर्थन के बावजूद, एसडीके कंपाइलर कोड उत्पन्न करने में सक्षम नहीं था जो हार्डवेयर में फ्लोटिंग-पॉइंट संख्याओं के साथ संचालन करता है।

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

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

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

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

और फिर समस्याएं शुरू हुईं। स्क्रीन पर चित्र बहुत अच्छा लग रहा था, सभी लाइनें चिकनी थीं, और आउटपुट की उप-सटीकता सटीकता के कारण, वस्तुओं की सभी गतिविधियां बहुत चिकनी लग रही थीं ... जबकि स्क्रीन पर कुछ चलती हुई वस्तुएं थीं। यदि स्क्रीन पर 10-12 गेम वेक्टर ऑब्जेक्ट जोड़े गए, तो एफपीएस भयावह रूप से गिर गया। स्थिति को बचाने के लिए कुछ किया जाना था।

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

नए गेमप्ले पर सोचने के समानांतर, मैंने इंजन पर काम करना जारी रखा: मैंने एंजेलकोड कनवर्टर, होममेड स्थानीयकरण समर्थन और एक विंडो सिस्टम, साथ ही विजेट्स के एक छोटे सेट से बिटमैप फोंट के लिए समर्थन जोड़ा।

क्या हुआ, या मैजिक ब्रश

और फिर मैं हैबर: दिमित्री रेज़कोव और उनके माई लिटिल आर्टिस्ट के इस लेख पर आया , जिसने इंटेल एटम के लिए सर्वश्रेष्ठ आवेदन के लिए प्रतियोगिता में एक ठोस पुरस्कार जीता । काम पर मेरे छोटे कलाकार को देखा और mr.doob द्वारा सद्भाव को देखा , मुझे एहसास हुआ कि मैं बहुत जल्दी एक मौजूदा इंजन पर कुछ समान लागू कर सकता हूं। केवल 15 मिनट में, पहला ब्रश जोड़ा गया और परीक्षण किया गया, और इसने बहुत अच्छा काम किया! मैंने कुछ अनुकूलन के साथ C ++ में सद्भाव ब्रश कोड का विश्लेषण और फिर से लिखा। नौ नए ब्रश भी जोड़े गए, एप्लिकेशन का UI लिखा गया था, और प्रत्येक ब्रश में अतिरिक्त सेटिंग्स (रंग, लाइन मोटाई, पारदर्शिता, आदि) थीं।

इस वीडियो में विभिन्न ब्रश का काम देखा जा सकता है:


एक उदाहरण के रूप में, मैं आपको बताता हूँ कि स्मोक ब्रश कैसे लागू किया गया था:



मेरे कार्यक्रम में, स्मोकब्रश सहित सभी ब्रश कक्षाएं, बेस क्लास के 3 विशुद्ध रूप से आभासी तरीकों को लागू करती हैं जो स्क्रीन पर प्रदर्शित होती हैं:

virtual void StrokeStart(Fixed x, Fixed y) = 0; virtual void Stroke(Fixed x, Fixed y) = 0; virtual void StrokeEnd(Fixed x, Fixed y) = 0; 

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

 agg::rgba8 color; Fixed opacity; Fixed width; 

और आउटपुट के लिए वर्तमान बफर के लिए एक सूचक:

 BufferGraphics* graphics; 

स्मोक ब्रश को लागू करने के लिए, आपको एक मोटी रेखा बनाने के लिए पतली रेखाओं - धुएं के "जेट" से एक मोटी रेखा की रचना करने की आवश्यकता होगी। ऐसा करने के लिए, आपको उपयोगकर्ता की उंगली की वर्तमान स्थिति के सापेक्ष प्रत्येक "जेट" की वर्तमान स्थिति जानने की आवश्यकता है। इस उद्देश्य के लिए, स्मोकब्रश अंक सदिश बिंदुओं का उपयोग करता है:

 std::vector<Point> points; 

अंगुलियों की पिछली स्थिति को याद रखने के लिए यह आवश्यक है ताकि वर्तमान स्थिति से लाइनें खींची जा सकें:

 Point previousFingerPosition; 

ब्रश का तर्क स्ट्रोकेस्टार्ट और स्ट्रोक तरीकों में वर्णित है:

 void SmokeBrush::StrokeStart(Fixed x, Fixed y) { points.clear(); for (int i = 0; i < (int)(width * Fixed(3)) + 16; ++i) { Fixed r = (fixrand() * Fixed(0.4f) + Fixed(0.1f)) * width; Fixed a = fixrand() * Fixed::PI2; points.push_back(Point(r * cos(a), r * sin(a))); } previousFingerPosition = Point(x, y); } 

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

इससे पहले, मैंने लिखा था कि परियोजना में फ्लोटिंग-पॉइंट नंबरों का एक भी उपयोग नहीं किया गया था, लेकिन फ्लोट को पाठ में देखा जा सकता है। सौभाग्य से, कंपाइलर काफी स्मार्ट है जो निश्चित वर्ग के इनलाइन कंस्ट्रक्टर को ठीक से संभाल सकता है। परिणामस्वरूप, निष्पादन स्तर पर, वास्तव में केवल पूर्णांक मानों के साथ काम होता है।

स्ट्रोक विधि निम्नलिखित प्रदर्शित करती है:

 void SmokeBrush::Stroke(Fixed x, Fixed y) { for (vector<Point>::iterator i = points.begin(); i != points.end(); ++i) { Fixed newX = i->x + (fixrand() - Fixed(0.5f)) * width * Fixed(0.25f); Fixed newY = i->y + (fixrand() - Fixed(0.5f)) * width * Fixed(0.25f); Fixed d = newX * newX + newY * newY; if (d > width * width * Fixed(0.25f)) { newX = i->first; newY = i->second; } graphics->DrawLine(previousFingerPosition.x + i->x, previousFingerPosition.y + i->y, x + newX, y + newY, width * Fixed(0.0625f), color); i->x = newX; i->y = newY; } previousFingerPosition = Point(x, y); } 

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

ऐसे सरल तरीके से, आप एक ब्रश बना सकते हैं, जो कुशल हाथों में ड्राइंग के लिए एक उपयोगी उपकरण बन सकता है:

उत्पाद लॉन्च

इसलिए, हैबे पर लेख पढ़ने के लगभग एक महीने बाद, मैजिक ब्रश पूरी तरह से तैयार था। यहां तक ​​कि कार्यक्रम पर काम करने की प्रक्रिया में, मैंने सोचा कि मैं इसे कैसे बेचूंगा, और महसूस किया कि विपणन में काफी समय लगता है। विकास के समानांतर, मैंने Store'ahs में अनुप्रयोगों को बढ़ावा देने पर विभिन्न सामग्रियों का अध्ययन किया और एक बार गुग्लिंग की प्रक्रिया में मैं दिमित्री तरासोव के लेख "मोबाइल सॉफ्टवेयर एक व्यवसाय के रूप में" आया । यह हमारे सहयोग की शुरुआत थी और मैजिक ब्रश - मार्केटिंग मैजिक के विकास में एक नया, कोई कम दिलचस्प, मंच नहीं था। लेकिन इसके बारे में हमारी कहानी के अगले भाग में।

और अंत में - मैजिकब्रश में बने ड्रॉ का लिंक: http://vk.com/album-19391365_127704331 ।