Pixel Art संपादक

पिक्सेल कला का जन्म हार्डवेयर में हुआ, और फिर उसने रुकने का चुनाव किया

पिक्सेल कला अपने पहले दशकों में सौंदर्यबोध नहीं थी, वह एक बंदिश थी। Atari 2600 (समर CES, 4 जून 1977) ने अपनी तस्वीर एक Television Interface Adaptor से बनाई जो दो 8-पिक्सेल चौड़े “player” स्प्राइट उजागर करता था और उन्हें पंक्ति-दर-पंक्ति पुनः उपयोग करता था; प्रोग्रामरों ने अधिक रंग एक साथ दिखाने के लिए “बीम के साथ दौड़ना” (race the beam) सीखा। Commodore 64 (जनवरी 1982) ने आठ 24×21 हार्डवेयर स्प्राइट और 16-रंगों वाला VIC-II पैलेट दिया जो यूरोपीय खेलों के पूरे दशक की दृश्य पहचान बन गया। NES (1985) ने Ricoh 2C02 PPU का उपयोग किया जिसमें लगभग 54 भिन्न रंगों का मास्टर पैलेट था, जिनमें से 25 एक साथ स्क्रीन पर हो सकते थे, 13-रंगों वाले पृष्ठभूमि पैलेट और चार 3-रंगों वाले स्प्राइट उप-पैलेटों में विभाजित, और 8×8 स्प्राइट टाइल वह डिज़ाइन-इकाई बन गई जिसे आज भी पिक्सेल कला में महसूस किया जा सकता है। Game Boy DMG-01 (1989) ने सीमा को और आगे ले गया: 160×144 परावर्ती LCD पर एक रंग के चार रंगांग, जो दिन की रोशनी में जैतूनी हरे दिखते थे। इनमें से किसी भी पैलेट को सुंदरता के लिए नहीं चुना गया था; वे इस आधार पर चुने गए थे कि चिप थोड़े पैसों में क्या कर सकती है।

1990 के दशक में किसी समय समीकरण उलट गया। हार्डवेयर ने पकड़ बना ली; पहले प्री-रेंडर और फिर रीयल-टाइम 3D बड़े बजट के उत्पादनों के लिए डिफ़ॉल्ट बन गए। पिक्सेल कला वहीं मर सकती थी। इसके बजाय, यह कुछ दुर्लभ बन गई: एक जानबूझकर सौंदर्य विकल्प। Daisuke Amaya (जो अपनी कृतियाँ केवल “Pixel” के नाम से हस्ताक्षरित करते हैं) ने कॉलेज और दिन की नौकरी के बीच पाँच साल Cave Story को इकट्ठा करने में बिताए, जो 20 दिसंबर 2004 को फ़्रीवेयर के रूप में जारी हुआ। Markus “Notch” Persson ने Minecraft का पहला संस्करण 17 मई 2009 को TIGSource पर पोस्ट किया, जिसमें 16×16 पिक्सेल की डिफ़ॉल्ट ब्लॉक टेक्सचर थीं, आज भी संसाधन-पैक का विहित स्वरूप। Eric “ConcernedApe” Barone ने लगभग साढ़े चार साल के एकल विकास के बाद 26 फ़रवरी 2016 को Stardew Valley प्रकाशित किया, हर स्प्राइट को स्वयं Paint.NET में बनाते हुए। Heart Machine ने Hyper Light Drifter (मार्च 2016) जारी किया; Maddy Thorson और Noel Berry ने Celeste (जनवरी 2018) जारी किया, जो मूल रूप से Joseph White के PICO-8 फ़ैंटेसी कंसोल पर चार-दिनी प्रोटोटाइप के रूप में बना था। Motion Twin ने अगस्त 2018 में Dead Cells भेजा, जिसकी “पिक्सेल कला” वास्तव में कम-रिज़ॉल्यूशन पर पुनः रेंडर किए गए 3D मॉडल हैं। मिलकर इन खेलों ने यह तर्क करना असंभव बना दिया कि पिक्सेल कला नॉस्टैल्जिया है, यह अपनी संमेलनों, उपकरणों और सुपरस्टार्स वाला एक समकालीन माध्यम था।

पावर-ऑफ-टू ग्रिड क्यों और अपना ग्रिड कैसे चुनें

पिक्सेल कला के मानक कैनवास आकार (8×8, 16×16, 32×32, 64×64) सीधे कंसोल हार्डवेयर पर वापस जाते हैं। NES की 8×8 टाइल, C64 का 24×21 स्प्राइट, Game Boy का 8×8 OBJ, बिटमैप डेटा जिसे सस्ती पावर-ऑफ-टू अंकगणित से एड्रेस किया जा सकता था और मेमोरी में कुशलता से पैक किया जा सकता था। एक 16×16 चरित्र स्प्राइट दो NES टाइलों के ढेर के बराबर है; एक 32×32 चार के बराबर। यह संमेलन उस युग के बाद भी क़ायम रहा जब मेमोरी एड्रेसिंग को परवाह थी, क्योंकि तब तक कलाकारों ने काम की लय को आत्मसात कर लिया था: “एक टाइल 8 या 16 पिक्सेल की होती है और एक पठनीय आकृति समाहित करती है।” इस संपादक में हर आकार का व्यावहारिक उपयोग: 8×8 आइकनों, Twitch चैट-इमोट के स्केच और छोटी टाइल तत्वों के लिए; 16×16 मेहनती चरित्र स्प्राइट, आइटम आइकन और विहित Minecraft टेक्सचर स्वरूप के लिए; 32×32 विस्तृत चरित्र चित्रों या बड़ी प्रॉप्स के लिए; 48×48 ऐसे टाइलसेटों के लिए जिनमें छायांकन शामिल हो; 64×64 हीरो-स्केल स्प्राइट और छोटे दृश्यों के लिए। छोटा शुरू करें, पिक्सेल कला अपनी कम रिज़ॉल्यूशन से परिभाषित होती है, और 16×16 या 32×32 पर काम करने का अनुशासन वही है जो थंबनेल आकार पर साफ़ पढ़ी जाने वाली कला उत्पन्न करता है।

पैलेट, वह अनुशासन जो पिक्सेल कला को पठनीय बनाता है

हार्डवेयर पैलेट सीमाओं ने पिक्सेल कला को उसका दूसरा परिभाषित गुण दिया: मजबूर रंग अनुशासन। NES ने हर 8×8 पृष्ठभूमि टाइल को अधिकतम चार रंगों की अनुमति दी (सार्वभौमिक पृष्ठभूमि सहित); Game Boy DMG एक समय में केवल चार हरा-धूसर रंगांग ही व्यक्त कर सकता था। आधुनिक हार्डवेयर इनमें से कुछ नहीं थोपता, 2026 के किसी भी पिक्सेल कलाकार के पास पूरा 24-बिट RGB रंग-स्थान और पूर्ण 8-बिट अल्फ़ा है। फिर भी, समुदाय बड़े पैमाने पर 16-, 32-, या 64-रंगों के पैलेटों के भीतर ही काम करना चुनता है, और रेट्रो दिखावे के लिए नहीं। एक छोटा पैलेट हर रंग-निर्णय को महत्वपूर्ण बनाता है: यह एक सुसंगत मूल्य संरचना, इरादे के साथ पूरक रंग, कई स्प्राइटों में पुनः उपयोग किए गए रंग, यह सब थोपता है ताकि एक दृश्य अव्यवस्थित नहीं बल्कि एकीकृत पढ़ा जाए। इसी कारण इतनी आधुनिक पिक्सेल कला उस तरह जानबूझकर लगती है जैसी ज़्यादातर शौक़िया डिजिटल कला नहीं लगती। पैलेट एक अनुशासन है, सॉनेट की 14-पंक्तियों की बंदिश की तरह।

चार कलाकार-निर्मित पैलेट आधुनिक दृश्य पर हावी हैं। PICO-8 (Joseph “zep” White, 9 मई 2014 को Pico Pico Cafe में अनावरण, 2015 में सार्वजनिक रिलीज़), सोलह रंग जिनकी वंशावली White Commodore 64, Amiga 500 ट्रैकर्स और “80 के दशक के अन्य हार्डवेयर के समग्र सौंदर्य” तक खींचते हैं। Celeste का 2015 का प्रोटोटाइप चार दिनों में PICO-8 पर लिखा गया था। DawnBringer DB16 और DB32 (Richard Fhager, 2007 और बाद में), किसी हार्डवेयर की नक़ल के बजाय हस्तचित्रित, अभिव्यंजक पिक्सेल काम के लिए डिज़ाइन की गई। अब Aseprite और GIMP के साथ डिफ़ॉल्ट रूप से बंडल। Endesga 32 और 64 (Seth “ENDESGA”), “भौतिकवादी पिक्सेल कला और डिज़ाइन” के लिए उच्च कंट्रास्ट और उच्च संतृप्ति के साथ बनाई गई। डाउनलोडों की कच्ची संख्या (Lospec पर Endesga 32 के लिए 192,000+, Endesga 64 के लिए 91,000+) के अनुसार, इंटरनेट पर सबसे ज़्यादा उपयोग होने वाले कलाकार-निर्मित पैलेटों में। Sweetie 16 (GrafxKid), TIC-80 फ़ैंटेसी कंसोल का डिफ़ॉल्ट पैलेट बन गया। Lospec.com स्वयं, 2017 में skeddles नाम से जाने जाने वाले एक कलाकार द्वारा स्थापित, केंद्रीय सामुदायिक हब है: पैलेट डेटाबेस, ट्यूटोरियल, गैलरी (जनवरी 2023 में लॉन्च), टूर्नामेंट, और हर हार्डवेयर पैलेट का डाउनलोड-योग्य अभिलेख Aseprite, Photoshop, Paint.NET और GIMP के अनुकूल स्वरूपों में।

ब्राउज़र पिक्सेल संपादक वास्तव में कैसे काम करता है

एक वेब पिक्सेल-कला संपादक को ब्राउज़र के मददगार डिफ़ॉल्ट से लड़ना पड़ता है, हर आधुनिक ब्राउज़र छवियों को स्केल करते समय द्वि-रैखिक या द्वि-घन प्रक्षेप लागू करता है, जो फ़ोटो के लिए ठीक है पर पिक्सेल कला के लिए विनाशकारी (यह तीखे पिक्सेलों को धुंधले धब्बों में बदल देता है)। समाधान विभिन्न परतों पर लागू दो पूरक सेटिंग्स हैं। कैनवस तत्व पर CSS image-rendering: pixelated ब्राउज़र के कंपोज़िटर को नियर-नेबर स्केलिंग का उपयोग करने पर मजबूर करता है जब कैनवस अपने बैकिंग स्टोर से अलग आकार पर प्रदर्शित होता है, जब एक 16×16 कैनवस को CSS में 512×512 तक खींचा जाता है, तो हर मूल पिक्सेल तीखे किनारों वाले समान पिक्सेलों का 32×32 ब्लॉक बन जाता है। 2D रेंडरिंग संदर्भ पर ctx.imageSmoothingEnabled = false स्वयं ड्रॉइंग ऑपरेशन्स को इनपुट डेटा को स्केल करते समय नियर-नेबर का उपयोग करने पर मजबूर करता है। दोनों के बिना, धुंधलापन मिलता है। ड्रॉइंग मॉडल: रंग मानों की एक इन-मेमोरी 2D सरणी, एक कैनवस जिसका CSS आकार उसके बैकिंग-स्टोर आकार से बहुत बड़ा है, और उपकरण जो सरणी को बदलते हैं और प्रभावित कोशिकाओं को ctx.fillRect के साथ पुनः रेंडर करते हैं। ग्रिड ओवरले 1-पिक्सेल चौड़ी रेखाओं के रूप में ऊपर बैठता है जिन्हें बिना अवरोध के पूर्वावलोकन के लिए बंद किया जा सकता है। PNG निर्यात canvas.toBlob(callback, 'image/png') का उपयोग करता है, अतुल्यकालिक, मुख्य थ्रेड से अलग एनकोड किया गया। PNG दो कारणों से सही स्वरूप है: लॉसलेस (हर पिक्सेल बिट-सटीक रूप से बच जाता है) और अल्फ़ा का समर्थन करता है (खेल स्प्राइटों के लिए पारदर्शी पृष्ठभूमि)। JPEG ग़लत है, इसका DCT संपीड़न ब्लॉक किनारों को गंदा कर देता है और रिंगिंग आर्टिफ़ैक्ट लाता है।

छह उपकरण और वे वास्तव में क्या करते हैं

• पेंसिल (D): कर्सर की स्थिति पर एक पिक्सेल लिखती है। जब कर्सर माउस घटनाओं के बीच तेज़ी से चलता है तो अंतराल से बचने के लिए, उपकरण हर फ़्रेम कर्सर की पिछली स्थिति से वर्तमान तक एक Bresenham रेखा खींचता है।
• रबर (E): पेंसिल के समान संरचनात्मक रूप से, परंतु पृष्ठभूमि का रंग लिखता है, पिक्सेलों को उनकी डिफ़ॉल्ट स्थिति पर लौटाता है।
• बकेट (F): क्लिक-लक्ष्य के समान रंग के हर जुड़े पिक्सेल को बदल देता है। 4-कनेक्टेड फ्लड फ़िल का उपयोग करता है (उत्तर/दक्षिण/पूर्व/पश्चिम पड़ोसी, कोई तिरछा नहीं) ताकि एक पतली तिरछी रेखा बकेट को बहने से रोके, वह संमेलन जो उपयोगकर्ता के अंतर्ज्ञान से मेल खाता है। पुनरावृत्ति के बजाय एक स्टैक के साथ इटरेटिव ढंग से लागू किया गया, क्योंकि बड़े कैनवस पर पुनरावर्ती फ्लड फ़िल JavaScript कॉल स्टैक को ओवरफ़्लो कर देता है।
• आईड्रॉपर / Pick (I): कर्सर के पिक्सेल का रंग पढ़ता है और इसे वर्तमान ड्रॉ रंग के रूप में सेट करता है। पैलेट स्थापित होने के बाद पिक्सेल कला वर्कफ़्लो में सबसे अधिक उपयोग किए जाने वाले उपकरणों में से एक।
• रेखा (L): Bresenham की रेखा एल्गोरिथम का उपयोग करता है (Jack Bresenham, IBM, 1965) (केवल पूर्णांक जोड़ और बिटशिफ़्ट, कोई विभाजन नहीं) दो पूर्णांक पिक्सेल निर्देशांकों के बीच चलने और एक त्रुटि संचयक बनाए रखने के लिए। Bresenham का जानबूझकर सीढ़ीनुमा खुरदुरा रूप यहाँ एक सकारात्मक सौंदर्य गुण है, चिकना करने योग्य कोई अवशेष नहीं।
• आयत (R): एक अक्ष-संरेखित आयत की रूपरेखा खींचता है। दो क्लिक: पहला कोना सेट करता है, दूसरा विपरीत कोना पूरा करता है।
• पूर्ववत् (Ctrl+Z): पूरा क़दम-दर-क़दम इतिहास।

पिक्सेल कला कहाँ जाती है, असली दुनिया के आउटपुट आकार

• गेम स्प्राइट। मूल और अब भी प्राथमिक उपयोग, एक 16×16 दुश्मन, 32×32 खिलाड़ी चरित्र, 48×48 बॉस, 16×16 घास टाइल, रनटाइम के लिए सबको एक स्प्राइट शीट में इकट्ठा। पूरी इंडी 2D अर्थव्यवस्था इस वर्कफ़्लो पर टिकी है।
• Twitch इमोट। Twitch हर कस्टम इमोट को तीन सटीक आकारों में माँगता है: 28×28 (मानक चैट में उपयोग), 56×56 (हाई-DPI डिस्प्ले, अब अधिकांश दर्शक), 112×112 (इमोट पिकर)। हर आकार के लिए स्थैतिक इमोट 25 KB से कम; एनिमेटेड 1 MB और 60 फ़्रेम तक। पिक्सेल कला वर्कफ़्लो 28×28 पर कठोर, पठनीय आकृतियों से डिज़ाइन करना है, फिर नियर-नेबर स्केलिंग के साथ पूर्णांक गुणकों में लॉसलेस ढंग से अपस्केल करना।
• Discord कस्टम इमोजी। Discord का अनुशंसित आकार 256 KB की सीमा के साथ 128×128 है; इमोजी संदेशों में 32×32 तक और प्रतिक्रिया में 48×48 तक छोटे करके प्रदर्शित होते हैं। वर्ग अनुपात आवश्यक; PNG और GIF समर्थित।
• फ़ेविकन। 16×16 / 32×32 / 48×48 फ़ेविकन जो ब्राउज़र टैब और बुकमार्क में दिखाते हैं, पिक्सेल कला हैं, चाहे डिज़ाइनर ने ऐसा इरादा किया हो या नहीं। इस संपादक में नेटिव आकार पर बनाना और PNG निर्यात करना ऐसे फ़ेविकन बनाता है जो एंटी-एलियस हालो के बिना साफ़ पढ़े जाते हैं।
• सोशल मीडिया। पिक्सेल कला अब Instagram, TikTok और Tumblr पर स्वतंत्र कला रूप है। माध्यम का संयम थंबनेल आकार पर अच्छा पढ़ा जाता है, और एक अच्छी तरह से बनी कृति फ़ोटोग्राफ़ी और 3D रेंडर से हावी फ़ीड में पहचानी जाती है। बहुत सारे कलाकार Endesga 32 या DawnBringer 16 जैसे स्थिर पैलेट के इर्द-गिर्द बनाई गई रोज़ाना छोटी कृतियाँ पोस्ट करते हैं।
• NFT-संग्रह वंश। CryptoPunks संग्रह (Larva Labs के Matt Hall और John Watkinson, जून 2017) ने खाका तय किया: 10,000 एल्गोरिथमिक रूप से उत्पन्न 24×24 पात्र जो 80 के पंक और 90 के साइबरपंक से खींचते हैं। 2017–22 के दौरान सैकड़ों व्युत्पन्न संग्रह उभरे, सभी उसी कम-रिज़ॉल्यूशन + बोल्ड-पैलेट खाके पर टिके।

ईमानदार दायरा बनाम समर्पित उपकरण

तीन समर्पित उपकरण पिक्सेल कला के क्षेत्र पर हावी हैं। Aseprite वास्तविक रूप से पेशेवर विकल्प है, 1998 में David Capello द्वारा एक शौक़ परियोजना के रूप में शुरू हुआ (Allegro Sprite Editor के रूप में 2001 की प्रारंभिक रिलीज़), अब David, Gaspar और Martín Capello के नेतृत्व में Igara Studio S.A. द्वारा विकसित, Steam पर US$19.99 में बेचा जाता है (अगस्त 2016 तक GPLv2 मुफ़्त था, जब लाइसेंस मालिकाना में बदल गया हालाँकि स्रोत GitHub पर दृश्यमान रहता है)। लेयर्स, फ़्रेम, टाइमलाइन, टाइलमैप, एनिमेशन निर्यात, Lua स्क्रिप्टिंग, कमांड-लाइन उपकरण, समुदायिक सहमति द्वारा सबसे अच्छा सशुल्क उपकरण। Piskel मुख्य मुफ़्त प्रतिस्पर्धी है, Julian Descottes द्वारा बनाया गया एक ओपन-स्रोत वेब संपादक, piskelapp.com पर होस्टेड संस्करण और डाउनलोड-योग्य डेस्कटॉप बिल्ड के साथ। ताक़त: फ़्रेम-दर-फ़्रेम एनिमेशन टाइमलाइन, लाइव पूर्वावलोकन, GIF और स्प्राइट-शीट निर्यात। Pixilart एक मज़बूत सामाजिक/सामुदायिक परत वाला मुफ़्त ऑनलाइन संपादक है, एक मिलियन से अधिक उपयोगकर्ता, सार्वजनिक गैलरियाँ, टिप्पणियाँ, अनुसरण। इस संपादक का ईमानदार दायरा इन तीनों में से किसी से भी संकीर्ण है: एक स्प्राइट, एक आइकन, एक अवतार के लिए एकल-फ़्रेम, केवल-ब्राउज़र उपकरण। छह बुनियादी उपकरण (पेंसिल, रबर, बकेट, आईड्रॉपर, रेखा, आयत), रंग पिकर, पैलेट, पूर्ववत्, वैकल्पिक ग्रिड ओवरले, और नेटिव कैनवस आकार पर PNG निर्यात। कोई लेयर नहीं, कोई फ़्रेम नहीं, कोई एनिमेशन टाइमलाइन नहीं, कोई ओनियन स्किनिंग नहीं, कोई टाइलमैप मोड नहीं, कोई स्क्रिप्टिंग नहीं। अपना पहला स्प्राइट बनाने, Twitch इमोट का स्केच बनाने, या एक 32×32 चित्र जल्दी तैयार करने के लिए यह सही घर्षण स्तर है: शून्य इंस्टॉल, शून्य खाता, शून्य सीखने की वक्र। लेयर्ड प्रभावों के साथ एनिमेटेड स्प्राइटों के पूरे खेल के लिए, Aseprite इंस्टॉल करें या Piskel खोलें।

गोपनीयता: यहाँ केवल-ब्राउज़र क्यों मायने रखता है

पिक्सेल कला अक्सर अघोषित इंडी गेम परियोजनाओं, अनुबंधित कमीशन कार्य, या ब्रांडेड चरित्र डिज़ाइन के लिए कार्य-प्रगति में होती है जो अभी सार्वजनिक नहीं है। सर्वर-साइड संपादक हर ब्रश स्ट्रोक को एक तृतीय-पक्ष सेवा पर अपलोड करते हैं जहाँ यह लॉग में बैठता है और बैकएंड पहुँच वाले किसी भी व्यक्ति द्वारा जाँचा जा सकता है। यह संपादक पूरी तरह से JavaScript के माध्यम से आपके ब्राउज़र में चलता है: हर पिक्सेल जो आप रखते हैं, हर पूर्ववत्, हर रंग चयन आपके डिवाइस पर रहता है। DevTools के नेटवर्क टैब में सत्यापित करें, ड्रॉइंग के दौरान कोई अनुरोध नहीं भेजा जाता। PNG निर्यात ब्राउज़र के अंतर्निहित canvas.toBlob API और एक blob URL का उपयोग करता है; कोई अपलोड चरण नहीं। लोड होने के बाद पृष्ठ को ऑफ़लाइन (एयरप्लेन मोड) ले जाएँ और संपादक काम करता रहता है। अघोषित परियोजनाओं, NDA कार्य, ब्रांडेड एसेट डिज़ाइन या किसी भी ऐसे स्प्राइट के लिए सुरक्षित जिसे आप किसी अजनबी की हार्ड ड्राइव पर कॉपी नहीं देखना चाहेंगे।

संबंधित टूल