Rust से 175 पिक्सेल फॉन्ट बनाने वाला डेवलपर

 (chevyray.dev)
1 पॉइंट द्वारा GN⁺ 2024-08-11 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • दिसंबर 2023 में रिलीज़ हुआ 175 Pixel Font Megapack एक पिक्सेल फॉन्ट प्रोजेक्ट है, जिसमें कस्टम Rust toolchain से फॉन्ट जनरेशन, quality testing और distribution तक संभाला गया
  • पिछला पैक 2016 में 12 फॉन्ट और 2018 में 40 फॉन्ट वाला था; नया पैक quality, style, language support और distribution automation को एक साथ बेहतर करने के लक्ष्य से शुरू हुआ
  • नए फॉन्ट सिर्फ ASCII तक सीमित नहीं हैं; वे EFIGS के लिए 176 extended Latin characters सपोर्ट करते हैं, लेकिन quality और production time की वजह से Asian और non-Latin characters को शामिल नहीं किया गया
  • Rust tool pifo PNG tilesheet और TOML config से glyph outlines, automatic kerning, TTF, tilesheet और packed texture atlas बनाता है, और 175 फॉन्ट भी कुछ सेकंड में प्रोसेस कर देता है
  • बड़े sample images, automatic kerning और itch.io के लिए butler deployment script ने manual review, fixes और upload का बोझ कम किया, जिससे लगभग 200 फॉन्ट की quality जल्दी सुधारी जा सकी

पिछले पिक्सेल फॉन्ट पैक से Megapack तक

  • 2016 का पहला फॉन्ट पैक Ikenfell पर काम शुरू करने के समय बनाया गया 12 फॉन्ट का bundle था
    • गेम के लिए बनाए जा रहे फॉन्ट को polish किया गया और कुछ और जोड़कर itch.io पर बेचा गया
    • इसे कई indie games में इस्तेमाल किया गया और प्रतिक्रिया भी अच्छी रही
  • 2018 का दूसरा पैक बढ़कर 40 फॉन्ट का हो गया और quality भी काफी बेहतर हुई
    • sentence rendering बेहतर करने के लिए kerning table बनाए गए
    • कई game engines में आसानी से इस्तेमाल हो सकें, इसके लिए pre-built formats भी दिए गए
    • प्रचार के लिए indie developers के game screenshots में अपने फॉन्ट लगाकर दिखाए गए
  • पिछले पैक सैकड़ों indie games में इस्तेमाल हुए, और Nintendo के Cadence of Hyrule में भी उपयोग हुए
    • Love Conquers All Games के Get in the Car, Loser में भी कई फॉन्ट इस्तेमाल हुए
  • Ikenfell रिलीज़ होने के बाद लंबे burnout period के दौरान भी Rust skills बढ़ाए, और कभी नया पिक्सेल फॉन्ट पैक बनाने के लिए फॉन्ट का काम जारी रखा

Megapack के लक्ष्य

  • नए पैक का शुरुआती लक्ष्य 100 फॉन्ट था, लेकिन अंतिम नतीजा 175 पिक्सेल फॉन्ट रहा
    • पिछले पैक क्रमशः 12 और 40 फॉन्ट के थे
    • नए पैक का लक्ष्य sci-fi, fantasy, horror, farming, cozy games जैसे अलग-अलग genres में इस्तेमाल हो सकने वाले फॉन्ट बनाना था
  • पिछले पैक पर सबसे बड़ी request और complaint यह थी कि वे सिर्फ ASCII characters सपोर्ट करते थे
    • नया पैक English, French, Italian, German, Spanish को दर्शाने वाले EFIGS को सपोर्ट करने के लिए extended Latin character set अपनाता है
    • अंतिम character set 176 characters का है
    • Asian या non-Latin आधारित भाषाएं शामिल नहीं की गईं, क्योंकि वे familiar character sets नहीं थे, desired quality हासिल करना मुश्किल था और production time काफी बढ़ जाता
  • game UI में visual hierarchy की जरूरत होती है, इसलिए हर फॉन्ट को single style नहीं बल्कि font family के रूप में बनाना चाहा गया
    • उदाहरण के लिए Virtue font family में 20 styles शामिल हैं
    • developers अलग-अलग mood वाले फॉन्ट मिलाए बिना size और weight variations दे सकते हैं
  • kerning पिछले पैक बनाने में बहुत समय लेने वाला हिस्सा था
    • अगर supported characters 176 हों, तो possible kerning pairs अधिकतम 176² तक बढ़ सकते हैं
    • सभी pairs manually enter करने से बचने के लिए ज्यादातर automatic calculation और algorithm से कम पड़ने वाले हिस्सों को ही manually enter करने का तरीका चुना गया
  • quality control और distribution भी automation के दायरे में आए
    • पहले pixel errors या kerning bugs ठीक करने के बाद दोबारा export, test और itch.io पर manually upload करना पड़ता था
    • नए toolchain का लक्ष्य sample text और kerning visualization बनाकर problems जल्दी ढूंढना और fixes के परिणाम तुरंत देखना था

फॉन्ट design quality बढ़ाने की तैयारी

  • pixel art और pixel font का अनुभव बहुत था, लेकिन traditional typeface design को गंभीरता से कभी नहीं पढ़ा था
  • काम के दौरान Richard Poulin की Design School: Type का संदर्भ लिया
    • इसे typeface design की terminology और conventions सीखने में मददगार introductory book की तरह इस्तेमाल किया गया
  • आसपास दिखे text की photos भी reference के तौर पर इकट्ठा की गईं
    • छोटी दुकानों के signboards, museums, galleries, festivals, local event posters, book covers आदि reference material बने
    • उद्देश्य fonts को copy करना नहीं था, बल्कि letter shapes, baseline से नीचे जाने वाले letters, और पतले व चौड़े letters के फर्क का अध्ययन करना था
  • बाहर दिखने वाले decorative fonts को observe करते हुए यह सीखा कि कई “fancy” fonts हर letter को जरूरत से ज्यादा सजाने के बजाय decoration को uppercase letters पर केंद्रित करते हैं और lowercase letters को ज्यादा subtle रखते हैं

Rust tool pifo की भूमिका

  • लक्ष्य हासिल करने के लिए कस्टम Rust program pifo लिखा गया
  • font design खुद सामान्य pixel art tools में किया गया
    • input PNG tilesheet और config के लिए TOML file है
    • उदाहरण command pifo --all --output "Faraway" --input "Faraway*" जैसी है
  • pifo input image को अलग-अलग glyph tiles में काटता है, glyph outlines बनाता है, kerning pairs automatic calculate करता है और फिर TTF file के रूप में export करता है
    • कई engines में सीधे इस्तेमाल के लिए अन्य formats भी साथ में generate करता है
    • individual glyph work parallelized है, इसलिए single font लगभग तुरंत process हो जाता है
    • 175 फॉन्ट एक-एक करके process करने पर भी सिर्फ कुछ सेकंड लगते हैं
  • इस्तेमाल किए गए मुख्य Rust crates ये हैं
    • clap: command-line arguments parsing
    • image: image decoding और encoding
    • rayon: parallelization
    • serde: data serialization
    • glyph-names: characters और glyph names की mapping
    • ab-glyph: font loading और rasterization
    • crunch: rectangle packing

glyph outlines बनाने की प्रक्रिया

  • हर font sheet tilesheet और TOML config file से बनी होती है
    • config में version, baseline, line_gap, spacing, metrics, auto_kerning, auto_kerning_min, manual_kerning, skip_kerning_left, skip_kerning_right आदि शामिल होते हैं
    • grid size बदल सकता है, लेकिन हमेशा uniform grid होना चाहिए, और characters तय positions पर होने चाहिए
    • tool सिर्फ 100% white pixels को process करता है; checkerboard background और baseline केवल guides के रूप में इस्तेमाल होते हैं
  • TrueType glyph एक या अधिक outlines (contours) से बने होते हैं
    • pixel fonts में connected pixel groups, यानी हर cluster के लिए outline बनाना होता है
    • उदाहरण के लिए lowercase t में अगर दो अलग pixel blobs हों, तो दो outlines चाहिए
  • outline generation कई stages में होती है
    • RgbaImage से केवल white pixels चुनकर Point struct के HashSet में इकट्ठा किए जाते हैं
    • किसी arbitrary pixel से शुरू करके adjacent pixels पर flood fill किया जाता है, और unvisited pixels खत्म होने तक दोहराकर clusters खोजे जाते हैं
    • हर cluster में जिन faces के adjacent pixels नहीं होते, उन्हें exposed edge के रूप में collect किया जाता है
    • edge के head और tail जोड़कर closed path बनाया जाता है और उसे outline में convert किया जाता है
  • holes वाले cluster कई outlines बना सकते हैं
    • outer outline clockwise होती है, inner hole counter-clockwise होता है
    • यह direction difference TTF में holes दिखाने के तरीके से मेल खाता है
  • continuous straight line पर मौजूद middle points हटाए जाते हैं
    • यह file size घटाने और rasterization speed बढ़ाने के लिए optimization है

kerning table automation

  • TTF बनाने के लिए outlines के बाद जरूरी चीज kerning table है
    • kerning table specific character pairs को बाईं ओर खींचती है ताकि शब्द ज्यादा natural दिखें
    • उदाहरण के लिए Va, lt pairs को 1 pixel बाईं ओर खींचने से वे बेहतर दिखते हैं
  • manual kerning TOML के manual_kerning में specify की जाती है
    • format { left = "V", right = "a", kern = -1 } जैसा है
    • accent characters को अलग-अलग specify न करना पड़े, इसलिए alts = true option support होता है
    • a के लिए àáâãäå जैसे alternate characters map कर वही kerning apply की जाती है
  • automatic kerning right glyph को 1 pixel प्रति चरण left में move करके calculate की जाती है
    • left glyph से touch न करने वाली सबसे करीबी position खोजी जाती है
    • corner contact को भी touching माना जाता है
    • उदाहरण LV में V को 1 pixel खींचना possible है, लेकिन 2 pixels पर pixels touch करते हैं, इसलिए kerning value -1 होती है
  • automatic kerning calculation manual specified values और exclusion settings का सम्मान करती है
    • skip_kerning_left, skip_kerning_right से किसी खास direction के glyphs exclude किए जा सकते हैं
    • rayon का इस्तेमाल करके सभी kerning pairs parallel calculate किए जाते हैं

export formats

  • PIFO TTF के अलावा tilesheet और packed texture atlas भी generate करता है
  • TTF file कई tables से बनी binary file होती है
    • export tool head, hhea, maxp, OS/2, hmtx, cmap, loca, glyf, kern, name, post tables भरता है
    • हर table की position, length और checksum record करनी होती है, जिसे begin_table() और end_table() से handle किया जाता है
  • pixel font का default size 16 तय किया गया
    • size 16 पर render करने से pixels ठीक 1 px होते हैं
    • jitter के बिना scale up करना हो, तो 32, 48, 64 जैसे 16 के multiples में draw करना चाहिए
  • tilesheet export input sheet से अलग Unicode codepoint order में sorted होता है
    • साथ generate होने वाली data file में rows, columns, tile size, baseline, line spacing, space width, glyph metrics और kerning table शामिल होते हैं
    • serde से JSON, XML, TOML आदि कई formats में serialize किया जाता है
  • packed atlas भी generate किया जाता है
    • कस्टम rectangle packer crate crunch का इस्तेमाल किया जाता है
    • tight packing करने पर position information खो जाती है, इसलिए rendering के लिए x, y, w, h, off_x, off_y, adv जैसी अतिरिक्त data शामिल होती है

quality testing और sample images

  • desired quality पाने के लिए PIFO में बहुत बड़े sample images generate करने की सुविधा जोड़ी गई
  • sample images कई test blocks से बने होते हैं
    • सभी letters और कुछ test sentences
    • Terry Bisson की short story They're Made out of Meat का एक हिस्सा
    • Text for Proofing Fonts: A farewell to The Quick Brown Fox की strategy का इस्तेमाल करने वाले test words
    • सभी number combinations और currency symbols
    • uppercase, lowercase और mixed-case kerning pairs
    • अलग-अलग punctuation marks
  • काम के दौरान sample images तुरंत generate किए जा सकते थे, जिससे problems जल्दी मिलतीं और ठीक की जा सकती थीं
    • इस process से लगभग 200 फॉन्ट की overall quality और finish level बेहतर हुआ

itch.io distribution automation

  • अंतिम output 175 पिक्सेल फॉन्ट था, और downloads के लिए online storefront के रूप में पहले से इस्तेमाल हो रहे itch.io को चुना गया
  • सबसे tedious काम हर फॉन्ट के लिए अलग itch project बनाना था
    • यह काम हर फॉन्ट के लिए केवल एक बार करना पड़ता था
    • उसके बाद uploads और maintenance command-line scripts से handle किए जा सकते थे
  • deployment script तीन steps से बनी है
    • PIFO को release mode में compile करना
    • desired font assets build करना
    • हर font के itch project को नए assets से update करना
  • --input "Faraway*" जैसे input patterns Faraway - Regular, Faraway - Bold आदि समान prefix वाले styles खोजकर उन्हें एक font family package में bundle करते हैं
  • final upload के लिए itch द्वारा दिया गया command-line deployment tool butler इस्तेमाल किया गया
    • butler push ../distro/faraway chevyray/pixel-font-faraway:assets के रूप में deploy किया गया
    • Butler changed files को track करके केवल जरूरी हिस्से update करता है, इसलिए अलग file hashing या special version management की जरूरत नहीं पड़ी

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-08-11
Hacker News की राय

  • शानदार fonts हैं और लेख भी दिलचस्प है
    ऊपर दाईं ओर वाला नकली game https://chevyray.dev/blog/creating-175-fonts/old_previews.pn... अगर असली game होता तो अच्छा लगता
    इसमें “GBA के लिए Wonder Boy in Monster World” जैसा माहौल है, इसलिए पसंद आया
    हालांकि license देखकर लगता है कि TTF को open source software project में इस्तेमाल करना शायद अनुमति में नहीं है, इसलिए ध्यान देना चाहिए
    मैं वकील नहीं हूं, लेकिन आखिरी clause साफ तौर पर इसे प्रतिबंधित करता हुआ लगता है: https://github.com/ChevyRay/pixel_font_megapack_license/blob...

    • अगर आपको platform games पसंद हैं तो Celeste आज़माना अच्छा रहेगा
      उस mockup का scene Celeste के opening scene का संदर्भ है
    • font को खुद open source या CC जैसे रूप में distribute करना तो निश्चित रूप से ठीक नहीं है, लेकिन ऐसे software के साथ bundle करके distribute करना, जिसके बाकी हिस्से open source हैं, इसे भी प्रतिबंधित मानना थोड़ा अस्पष्ट है
      मंशा साफ तौर पर game engine या template के बजाय final product stage के game में इस्तेमाल की लगती है, जहां open source अपेक्षाकृत दुर्लभ होता है
      यह लेख पढ़ते हुए copyright के दूसरे edge cases भी याद आए, जैसे अमेरिका में typeface copyright protection के दायरे में नहीं आता
      font computer program के रूप में protected होता है, लेकिन typeface और simple bitmap font नहीं
      इसलिए यह workflow बिना copyright वाले original tilesheet से copyright वाले TTF बनाने और फिर वापस बिना copyright वाले output tilesheet/atlas तक लौटने जैसा है
    • “open source software में” नहीं, बल्कि open source software project में लिखा जाना चाहिए था

  • वाकई प्रभावशाली है
    एक complete font set बनाने में आसानी से 1 साल लग सकता है
    'A' से 'Z' तक, uppercase-lowercase, brackets, ampersand, exclamation mark जैसे सभी glyph बनाने होते हैं, और संभव हो तो bold, italic जैसे variants भी बनाने होते हैं
    ऐसे variants न हों तो font की उपयोगिता सीमित हो जाती है
    खासकर skill की असली कसौटी kerning है, यानी अक्षरों के बीच की spacing, जिस पर obsess करना चाहें तो अंतहीन कर सकते हैं
    लेख में भी कहा गया है कि 176 characters support करने पर अधिकतम 176² = 37,976 kerning pairs दर्ज करने पड़ सकते हैं, इसलिए उन्होंने खुद tool बनाकर अधिकतर काम semi-automate किया और algorithm जहां कम पड़ा, सिर्फ वहां manual input करने का फैसला किया

    • यह तब की बात है जब font को सिर्फ pure English use तक सीमित रखा जाए
      दूसरी languages support करनी हों तो Latin script इस्तेमाल करने वाली French, Spanish, Italian, Portuguese जैसी languages के लिए भी extra characters चाहिए
      उसके बाद Greek script, Cyrillic script, Japanese, Chinese तक support करने की इच्छा हो सकती है
      उदाहरण के लिए Wikipedia के मुताबिक “Noto fonts 77,000 से अधिक characters support करते हैं, जो Unicode 15.0 में define किए गए 149,186 characters का लगभग आधा है”
    • complete font set में आसानी से 1 साल लग सकता है, लेकिन font family बनाना तो lifetime project भी बन सकता है
    • “complete font set में आसानी से 1 साल लगता है” वाली बात ईमानदारी से कहूं तो समझ नहीं आती
      किसी भी चीज़ पर अंतहीन obsess किया जा सकता है
      language, writing, music, calligraphy जैसे field शायद obsessive tendency वाले लोगों को बहुत आकर्षित करते हैं
      बात यह है कि ऐसे statements entry barrier खड़ा करने जैसे सुनाई देते हैं
      किसी field में नए आने वाले लोगों को discourage करने वाली बातें हमेशा थोड़ी sensitive लगती हैं

  • बहुत अच्छा
    एक बात जाननी है कि Scandinavian special characters में से यही subset क्यों चुना गया
    Swedish में äöå होते हैं, Norwegian/Danish में æøå होते हैं, लेकिन इस font में æ है और ø नहीं
    ऐसे में æ हटाने पर भी Swedish support बना रहेगा, और ø जोड़ने पर Norwegian और Danish भी support किए जा सकेंगे
    जानना चाहता हूं कि यह सिर्फ omission है, या कोई locale है जो æ इस्तेमाल करता है लेकिन ø नहीं
    संदर्भ के लिए, मैंने æ को French में इस्तेमाल होने वाले अलग glyph œ ligature से confuse नहीं किया है

    • Icelandic ø की जगह ö इस्तेमाल करती है, लेकिन साथ ही ð और ý भी चाहिए, जो इस font में नहीं हैं
      हालांकि Æ “encyclopædia” जैसे पुराने English text या Latin से आए शब्दों के plural forms में भी इस्तेमाल होता है: https://en.wiktionary.org/wiki/Category:English_plurals_in_-...
    • यह बस omission था
      सच कहूं तो project काफी आगे बढ़ने के बाद ही मुझे पता चला कि मेरे character set में ø missing है
      सभी fonts में फिर से जोड़कर patch करना निश्चित रूप से संभव है, लेकिन मैं इंतज़ार कर रहा था कि इतनी मेहनत लायक demand है या नहीं
      फिर भी अगर दो और languages support हो सकें तो यह काफी शानदार होगा

  • site में इस्तेमाल किए गए कुछ fonts और simple styling भी पसंद आई
    अच्छी बात है कि इस पर अलग लेख में बताया गया है: https://chevyray.dev/blog/how-this-site-is-made/#catppuccin-...

  • दिलचस्प
    pixel font को TTF में encode करते समय उसे vector में convert किया जाता है, यह पहले नहीं पता था
    इसे proper text renderer में load करने वाले लोगों के लिए smooth zoom in/out भी कुछ हद तक संभव हो सकता है
    बेशक pixel font को लगभग 1:1 ही इस्तेमाल करने वाले game engine इसका अपवाद हो सकते हैं

    • ऐसा करने पर Photoshop, InDesign, Affinity, Aseprite जैसे traditional graphic editors में भी इसे इस्तेमाल किया जा सकता है
      इन tools में pixel font का concept नहीं होता, इसलिए hinting और anti-aliasing बंद किए हुए TTF का इस्तेमाल करें तो इन apps में इसका उपयोग संभव है

  • शानदार
    यह भी अच्छा है कि इस काम से इसे बनाने वाले को आर्थिक मदद मिली
    Chevy Ray नाम indie game वाली दुनिया से याद आता है, लेकिन ठीक-ठीक क्या बनाया था याद नहीं आ रहा
    शायद 2010–2012 के आसपास, VVVVVV या Nidhogg, Canabalt जैसी लहर से जुड़ी कोई चीज़ थी

    • Flashpunk था
      Beacon भी बेहतरीन था — पुरानी यादें ताज़ा हो गईं, indie games की याद आती है
    • शायद जिस game की बात हो रही है वह Beacon है
    • Ikenfell
    • Ikenfell भी मैंने सच में बहुत मज़े से खेला था
    • Flashpunk?

  • बेहतरीन
    इस लेख के लेखक जैसे Da Vinci-टाइप व्यक्तित्व को देखकर वह दौर याद आता है, जब artist और engineer के बीच साफ़ अलगाव नहीं था और वे एक ही हुआ करते थे

    • अगर ऐसा है, तो Da Vinci के बारे में ढंग से पढ़ने की सलाह दूंगा
      “Da Vinci के top 10 inventions” जैसे लेख नहीं
      असल में दोनों के बीच काफ़ी बड़ा अंतर था
      मैं भी Maya में संदिग्ध और बिना verify की गई dynamics के साथ Alpha Centauri तक जाने वाला spaceship model कर सकता हूं
      लेकिन उसे सचमुच बनाकर interstellar space में भेजना उससे बहुत दूर की बात है
      चित्र सुंदर और कल्पनाशील ज़रूर हैं

  • Rust में ऐसे काम को कई cores पर चलाना दिलचस्प हद तक आसान है
    function chain में सिर्फ़ एक call डालना भी काफी हो सकता है

    • Rust को मूल रूप से memory safety और thread safety के साथ बनाया गया है
      भाषा द्वारा तय नियमों का पालन करने की शर्त पर multithreading लगभग “मुफ़्त” जैसी है
      Amdahl's law का असर अब भी रहता है, लेकिन कम-से-कम app आंखों के सामने crash तो नहीं होता
    • यह सिर्फ़ Rust की खासियत नहीं है
      Scala और Java भी default रूप से ऐसी functionality support करते हैं

  • वाकई शानदार काम है और लेख भी अच्छा है
    कुछ तरकीबें इस्तेमाल की जाएं तो कई algorithms को और तेज़ बनाया जा सकता है
    पढ़ने से लगा कि character drawing और ASCII-variant mapping में hashmap को bitmap और byte index array से बदलना एक clue हो सकता है
    बेशक यह पहले से ही काफी तेज़ है, इसलिए इस code में यह बहुत मायने नहीं रखता

    • यह बात उठाने के लिए अच्छा लगा, बिल्कुल सही है
      site पर पूरा code नहीं है, लेकिन असल में strings और data structures का काफ़ी allocation और cloning हो रहा है
      जहां साफ़ था वहां optimal code लिखा, और bitmap copy या आसानी से parallelize होने वाले काम जैसे हिस्से इतने तेज़ थे कि तुरंत खत्म हो जाते थे, इसलिए बाकी हिस्सों की optimization कोशिश भी नहीं की
      फिर भी करना चाहें तो किया जा सकता है
      Rust, C++, Go जैसी low-level के करीब languages कितनी तेज़ हैं, यह भूलना आसान है, और ऊपर से multithreading के basic tools और work queues वगैरह इस्तेमाल करें तो और भी

  • जिन्हें fonts में रुचि है, वे https://tomorrow.type.today/ भी देख सकते हैं
    यह बेहतरीन मौलिक और experimental fonts बनाने वाला typography studio है
    हमारी team में एक व्यक्ति typography में गहराई से डूबा हुआ है, इसलिए वह इनके काम का collection https://play.soot.com/tomorrowtypetoday पर बना रहा है

    • संदर्भ के लिए, वह company Russia में registered है