Developer yang Membuat 175 Font Piksel dengan Rust

 (chevyray.dev)
1 poin oleh GN⁺ 2024-08-11 | 1 komentar | Bagikan ke WhatsApp
  • 175 Pixel Font Megapack yang dirilis pada Desember 2023 adalah proyek font piksel yang menangani pembuatan font, pengujian kualitas, hingga distribusi dengan toolchain Rust buatan sendiri
  • Paket sebelumnya berisi 12 font pada 2016 dan 40 font pada 2018; paket baru ini dimulai dengan tujuan menaikkan kualitas, gaya, dukungan bahasa, dan otomatisasi distribusi sekaligus
  • Font baru melampaui batasan yang sebelumnya hanya mendukung ASCII dengan mendukung 176 karakter Latin diperluas untuk EFIGS, tetapi karakter Asia dan non-Latin dikecualikan karena masalah kualitas dan waktu pembuatan
  • Tool Rust pifo membuat kontur glyph, kerning otomatis, TTF, tilesheet, dan atlas tekstur terpaket dari tilesheet PNG serta konfigurasi TOML, dan memproses 175 font dalam hitungan detik
  • Gambar sampel besar, kerning otomatis, dan skrip distribusi butler untuk itch.io mengurangi beban pemeriksaan, perbaikan, dan unggah manual sehingga kualitas hampir 200 font dapat ditingkatkan dengan cepat

Dari paket font piksel sebelumnya ke Megapack

  • Paket font pertama pada 2016 adalah kumpulan 12 font yang dibuat saat mulai mengerjakan Ikenfell
    • Font yang dibuat untuk game dipoles, beberapa font ditambahkan, lalu dijual di itch.io
    • Digunakan di berbagai game indie dan mendapat respons baik
  • Paket kedua pada 2018 bertambah menjadi 40 font dan kualitasnya juga meningkat besar
    • Tabel kerning dibuat agar rendering kalimat lebih baik
    • Format prebuilt yang mudah digunakan di berbagai game engine juga disediakan
    • Promosi dilakukan dengan menerapkan font buatannya pada screenshot game para developer indie
  • Paket sebelumnya digunakan di ratusan game indie, termasuk Cadence of Hyrule dari Nintendo
    • Beberapa font juga digunakan di Get in the Car, Loser dari Love Conquers All Games
  • Setelah perilisan Ikenfell, meski mengalami burnout panjang, kemampuan Rust terus diasah, dan pekerjaan font dilanjutkan demi suatu saat membuat paket font piksel baru

Tujuan Megapack

  • Target awal paket baru adalah 100 font, tetapi hasil akhirnya menjadi 175 font piksel
    • Paket sebelumnya masing-masing berisi 12 dan 40 font
    • Paket baru menargetkan font yang bisa digunakan di berbagai genre seperti fiksi ilmiah, fantasi, horor, farming, dan game cozy
  • Permintaan dan keluhan terbesar terhadap paket sebelumnya adalah hanya mendukung karakter ASCII
    • Paket baru mengadopsi set karakter Latin diperluas untuk mendukung EFIGS, yaitu English, French, Italian, German, Spanish
    • Set karakter final berjumlah 176 karakter
    • Bahasa Asia atau bahasa berbasis non-Latin dikecualikan karena set karakternya tidak familier sehingga sulit mencapai kualitas yang diinginkan dan waktu pembuatannya akan jauh lebih panjang
  • UI game membutuhkan hierarki visual, sehingga setiap font ingin dibuat bukan sebagai satu gaya tunggal, melainkan sebagai keluarga font
    • Sebagai contoh, keluarga font Virtue mencakup 20 gaya
    • Developer dapat memberi variasi ukuran dan ketebalan tanpa harus mencampur font dengan nuansa berbeda
  • Kerning adalah faktor yang banyak memakan waktu pada pembuatan paket sebelumnya
    • Jika karakter yang didukung berjumlah 176, pasangan kerning yang mungkin bisa bertambah hingga 176²
    • Agar tidak perlu memasukkan semua pasangan secara manual, sebagian besar dihitung otomatis, sementara bagian yang kurang memadai oleh algoritme dimasukkan secara manual
  • Kontrol kualitas dan distribusi juga menjadi target otomatisasi
    • Sebelumnya, setelah memperbaiki kesalahan piksel atau bug kerning, font harus diekspor ulang, diuji, dan diunggah langsung ke itch.io
    • Toolchain baru bertujuan membuat teks sampel dan visualisasi kerning agar masalah cepat ditemukan dan hasil perbaikan bisa langsung diperiksa

Persiapan untuk meningkatkan kualitas desain font

  • Meski punya banyak pengalaman dalam pixel art dan font piksel, desain typeface tradisional belum pernah dipelajari secara serius
  • Selama pengerjaan, buku Design School: Type karya Richard Poulin dijadikan referensi
    • Buku ini digunakan sebagai pengantar yang membantu mempelajari istilah dan konvensi desain typeface
  • Foto teks yang terlihat di sekitar juga dikumpulkan sebagai referensi
    • Papan toko kecil, museum, galeri, festival, poster acara lokal, dan sampul buku menjadi bahan rujukan
    • Tujuannya bukan menyalin font, melainkan mempelajari bentuk huruf, huruf yang turun di bawah baseline, serta perbedaan antara huruf tipis dan lebar
  • Dari mengamati font dekoratif di luar ruangan, dipelajari bahwa banyak font yang “mewah” tidak menghias semua huruf secara berlebihan, melainkan memusatkan ornamen pada huruf kapital dan menangani huruf kecil dengan lebih halus

Peran tool Rust pifo

  • Untuk mencapai tujuan tersebut, program Rust buatan sendiri bernama pifo ditulis
  • Desain font itu sendiri dikerjakan dengan tool pixel art biasa
    • Inputnya adalah tilesheet PNG dan file TOML untuk konfigurasi
    • Contoh perintahnya berbentuk pifo --all --output "Faraway" --input "Faraway*"
  • pifo memotong gambar input menjadi tile glyph individual, membuat kontur glyph, menghitung pasangan kerning secara otomatis, lalu mengekspornya sebagai file TTF
    • Format lain agar bisa langsung dipakai di berbagai engine juga dibuat bersamaan
    • Pekerjaan glyph individual diparalelkan sehingga satu font diproses hampir seketika
    • Bahkan memproses 175 font satu per satu hanya membutuhkan beberapa detik
  • Crate Rust utama yang digunakan adalah sebagai berikut
    • clap: parsing argumen command-line
    • image: decoding dan encoding gambar
    • rayon: paralelisasi
    • serde: serialisasi data
    • glyph-names: pemetaan karakter dan nama glyph
    • ab-glyph: pemuatan font dan rasterisasi
    • crunch: rectangle packing

Proses pembuatan kontur glyph

  • Setiap sheet font terdiri dari tilesheet dan file konfigurasi TOML
    • Konfigurasi mencakup version, baseline, line_gap, spacing, metrics, auto_kerning, auto_kerning_min, manual_kerning, skip_kerning_left, skip_kerning_right, dan lainnya
    • Ukuran grid bisa berbeda-beda, tetapi harus selalu berupa grid seragam, dan karakter harus berada pada posisi yang ditentukan
    • Tool hanya memproses piksel putih 100%; latar kotak-kotak dan baseline hanya digunakan sebagai panduan
  • Glyph TrueType terdiri dari satu atau beberapa kontur (contour)
    • Pada font piksel, kontur harus dibuat untuk setiap kelompok piksel yang saling terhubung, yaitu tiap cluster
    • Misalnya, jika huruf kecil t memiliki dua gumpalan piksel yang terpisah, diperlukan dua kontur
  • Pembuatan kontur dilakukan dalam beberapa tahap
    • Dari RgbaImage, hanya piksel putih yang dipilih dan dikumpulkan sebagai HashSet berisi struktur Point
    • Dimulai dari piksel sembarang, flood fill dilakukan ke piksel tetangga, dan proses diulangi hingga tidak ada piksel yang belum dikunjungi untuk menemukan cluster
    • Dari setiap cluster, sisi yang tidak memiliki piksel tetangga dikumpulkan sebagai edge terekspos
    • Head dan tail edge disambungkan untuk membuat jalur tertutup, lalu diubah menjadi kontur
  • Cluster yang memiliki lubang dapat menghasilkan beberapa kontur
    • Kontur luar berputar searah jarum jam, sementara lubang dalam berputar berlawanan arah jarum jam
    • Perbedaan arah ini cocok dengan cara TTF merepresentasikan lubang
  • Titik tengah pada garis lurus berurutan dihapus
    • Ini adalah optimasi untuk mengurangi ukuran file dan meningkatkan kecepatan rasterisasi

Otomatisasi tabel kerning

  • Setelah kontur, hal yang diperlukan untuk membuat TTF adalah tabel kerning
    • Tabel kerning menarik pasangan karakter tertentu ke kiri agar kata terlihat lebih alami
    • Misalnya, menarik pasangan Va dan lt 1 piksel ke kiri membuatnya terlihat lebih baik
  • Kerning manual ditentukan di manual_kerning pada TOML
    • Formatnya seperti { left = "V", right = "a", kern = -1 }
    • Opsi alts = true didukung agar karakter beraksen tidak perlu ditentukan satu per satu
    • Karakter alternatif seperti àáâãäå untuk a dipetakan agar menerapkan kerning yang sama
  • Kerning otomatis dihitung dengan menggeser glyph kanan ke kiri 1 piksel setiap kali
    • Posisi terdekat yang tidak menyentuh glyph kiri dicari
    • Kontak sudut juga diperlakukan sebagai bersentuhan
    • Pada contoh LV, V bisa ditarik 1 piksel, tetapi jika 2 piksel maka pikselnya bersentuhan, sehingga nilai kerning menjadi -1
  • Perhitungan kerning otomatis menghormati nilai manual dan pengaturan pengecualian
    • Glyph pada arah tertentu dapat dikecualikan dengan skip_kerning_left dan skip_kerning_right
    • rayon digunakan untuk menghitung semua pasangan kerning secara paralel

Format ekspor

  • PIFO tidak hanya membuat TTF, tetapi juga tilesheet dan atlas tekstur terpaket
  • File TTF adalah file biner yang terdiri dari berbagai tabel
    • Tool ekspor mengisi tabel head, hhea, maxp, OS/2, hmtx, cmap, loca, glyf, kern, name, post
    • Setiap tabel harus mencatat lokasi, panjang, dan checksum, serta ditangani dengan begin_table() dan end_table()
  • Ukuran dasar font piksel ditetapkan sebagai 16
    • Jika dirender pada ukuran 16, pikselnya tepat menjadi 1 px
    • Agar diperbesar tanpa jitter, gambar sebaiknya dibuat pada kelipatan 16 seperti 32, 48, 64
  • Ekspor tilesheet diurutkan berdasarkan urutan codepoint Unicode, berbeda dari sheet input
    • File data yang dibuat bersamanya berisi baris dan kolom, ukuran tile, baseline, line spacing, lebar spasi, metrik glyph, dan tabel kerning
    • Data diserialisasi dengan serde ke berbagai format seperti JSON, XML, dan TOML
  • Atlas terpaket juga dibuat
    • Crate rectangle packer buatan sendiri crunch digunakan
    • Karena packing yang rapat menghilangkan informasi posisi, data tambahan seperti x, y, w, h, off_x, off_y, adv disertakan untuk rendering

Pengujian kualitas dan gambar sampel

  • Untuk mendapatkan kualitas yang diinginkan, fitur pembuatan gambar sampel raksasa ditambahkan ke PIFO
  • Gambar sampel terdiri dari beberapa blok pengujian
  • Selama pengerjaan, gambar sampel dapat dibuat seketika sehingga masalah bisa cepat ditemukan dan diperbaiki
    • Proses ini meningkatkan kualitas keseluruhan dan tingkat penyelesaian hampir 200 font

Otomatisasi distribusi itch.io

  • Hasil akhirnya adalah 175 font piksel, dan itch.io yang sudah digunakan sebelumnya dipilih sebagai toko online untuk unduhan
  • Pekerjaan paling merepotkan adalah membuat proyek itch terpisah untuk setiap font
    • Pekerjaan ini hanya perlu dilakukan sekali untuk tiap font
    • Setelah itu, unggahan dan pemeliharaan dapat ditangani dengan skrip command-line
  • Skrip distribusi terdiri dari tiga tahap
    • Mengompilasi PIFO dalam mode rilis
    • Membangun aset font yang diinginkan
    • Memperbarui proyek itch setiap font dengan aset baru
  • Pola input seperti --input "Faraway*" mencari gaya dengan prefiks yang sama seperti Faraway - Regular dan Faraway - Bold, lalu menggabungkannya sebagai satu paket keluarga font
  • Untuk unggahan final, digunakan tool distribusi command-line butler yang disediakan itch
    • Distribusi dilakukan dengan bentuk butler push ../distro/faraway chevyray/pixel-font-faraway:assets
    • Karena Butler melacak file yang berubah dan hanya memperbarui bagian yang diperlukan, hashing file terpisah atau manajemen versi khusus tidak dibutuhkan

Bacaan terkait

1 komentar

 
GN⁺ 2024-08-11
Opini Hacker News

  • Font-fontnya keren dan tulisannya juga menarik
    Saya jadi berpikir alangkah bagusnya kalau game palsu di kanan atas https://chevyray.dev/blog/creating-175-fonts/old_previews.pn... itu benar-benar game sungguhan
    Saya suka karena nuansanya seperti “Wonder Boy in Monster World untuk GBA”
    Namun, jika melihat lisensinya, tampaknya penggunaan TTF dalam proyek perangkat lunak open source tidak diizinkan, jadi perlu diperhatikan
    Saya bukan pengacara, tetapi klausul terakhir terbaca jelas melarangnya: https://github.com/ChevyRay/pixel_font_megapack_license/blob...

    • Kalau suka game platformer, ada baiknya mencoba Celeste
      Adegan pada mockup itu merujuk pada adegan pembuka Celeste
    • Mendistribusikan font itu sendiri dalam bentuk seperti open source atau CC jelas tidak boleh, tetapi agak sulit mengatakan bahwa lisensi itu juga melarang font tersebut disertakan dan didistribusikan bersama perangkat lunak yang bagian lainnya open source
      Niatnya jelas terlihat lebih mengarah pada penggunaan di game tahap produk akhir, tempat open source relatif jarang, ketimbang di game engine atau template
      Saat membaca tulisan ini, saya juga teringat kasus batas lain dalam hak cipta: di AS, typeface bukan objek yang dilindungi hak cipta
      Font dilindungi sebagai program komputer, tetapi typeface dan font bitmap sederhana tidak
      Jadi alur kerja ini pada dasarnya membuat TTF yang memiliki hak cipta dari tilesheet asli yang tidak memiliki hak cipta, lalu kembali lagi menjadi tilesheet/atlas keluaran yang tidak memiliki hak cipta
    • Seharusnya tertulis dalam proyek perangkat lunak open source, bukan “dalam perangkat lunak open source”

  • Benar-benar mengesankan
    Membuat satu set font lengkap bisa dengan mudah memakan waktu 1 tahun
    Harus membuat semua glyph dari 'A' sampai 'Z', huruf besar dan kecil, tanda kurung, ampersand, tanda seru, dan sebagainya, lalu kalau bisa juga membuat variasi seperti bold dan italic
    Tanpa variasi seperti ini, kegunaan font menjadi terbatas
    Yang terutama membedakan tingkat keahlian adalah kerning, yaitu jarak antarhuruf, dan ini bisa menjadi objek obsesi tanpa akhir
    Di isi tulisan juga disebutkan bahwa jika mendukung 176 karakter, jumlah pasangan kerning maksimum adalah 176² = 37.976, sehingga ia membuat alat sendiri untuk mengotomatiskan sebagian besar secara semi-otomatis dan hanya memasukkan manual bagian yang kurang ditangani algoritme

    • Itu berlaku jika penggunaan font dibatasi untuk bahasa Inggris saja
      Untuk mendukung bahasa lain, bahkan bahasa yang memakai alfabet Latin seperti Prancis, Spanyol, Italia, dan Portugis pun membutuhkan karakter tambahan
      Setelah itu, mungkin muncul keinginan untuk mendukung alfabet Yunani, Sirilik, Jepang, hingga Mandarin
      Misalnya, menurut Wikipedia, “Noto fonts mendukung lebih dari 77.000 karakter, sekitar setengah dari 149.186 karakter yang didefinisikan dalam Unicode 15.0”
    • Satu set font lengkap memang bisa dengan mudah memakan waktu 1 tahun, tetapi membuat font family bisa menjadi proyek seumur hidup
    • Saya terus terang sulit menerima pernyataan “satu set font lengkap bisa dengan mudah memakan waktu 1 tahun”
      Apa pun bisa dijadikan obsesi tanpa akhir
      Bidang seperti bahasa, penulisan, musik, dan kaligrafi tampaknya memang sangat menarik bagi orang yang cenderung obsesif
      Intinya, ucapan seperti ini terdengar seperti membangun penghalang masuk
      Pembicaraan yang membuat orang yang baru ingin masuk ke suatu bidang merasa discouraged selalu terasa agak sensitif

  • Sangat bagus
    Satu hal yang membuat saya penasaran adalah mengapa memilih subset karakter khusus Skandinavia ini
    Bahasa Swedia memiliki äöå, sedangkan bahasa Norwegia/Denmark memiliki æøå, tetapi font ini punya æ dan tidak punya ø
    Jadi jika æ dihapus, dukungan untuk bahasa Swedia tetap ada, dan jika ø ditambahkan, bahasa Norwegia dan Denmark juga bisa didukung
    Saya penasaran apakah ini sekadar terlewat, atau ada locale yang memakai æ tetapi tidak memakai ø
    Sebagai catatan, saya tidak sedang mencampuradukkan æ dengan ligatur œ, glyph terpisah yang dipakai dalam bahasa Prancis

    • Bahasa Islandia memakai ö alih-alih ø, tetapi sekaligus juga membutuhkan ð dan ý yang tidak ada di font ini
      Namun Æ memang juga dipakai dalam teks bahasa Inggris lama seperti “encyclopædia” atau bentuk jamak kata dari bahasa Latin: https://en.wiktionary.org/wiki/Category:English_plurals_in_-...
    • Ini memang hanya terlewat
      Sebenarnya baru setelah proyek cukup jauh berjalan saya menyadari bahwa ø hilang dari set karakter saya
      Menambahkannya kembali ke semua font dan merilis patch tentu memungkinkan, tetapi saya menunggu untuk melihat apakah ada permintaan yang cukup besar untuk pekerjaan sebesar itu
      Meski begitu, kalau bisa mendukung dua bahasa lagi, itu sepertinya cukup keren

  • Saya juga menyukai beberapa font yang dipakai di situsnya dan styling-nya yang sederhana
    Untungnya, itu dipublikasikan dalam tulisan terpisah: https://chevyray.dev/blog/how-this-site-is-made/#catppuccin-...

  • Menarik
    Sebelumnya saya tidak tahu bahwa ketika font piksel dienkode sebagai TTF, ia dikonversi menjadi vektor
    Bagi orang yang memuatnya di text renderer yang layak, sepertinya pembesaran/pengecilan yang halus sampai batas tertentu juga menjadi mungkin
    Tentu saja, game engine yang memakai font piksel hampir 1:1 mungkin menjadi pengecualian

    • Dengan begitu, font tersebut juga bisa dipakai di editor grafis tradisional seperti Photoshop, InDesign, Affinity, dan Aseprite
      Alat-alat seperti ini tidak memiliki konsep font piksel, jadi jika memakai TTF dengan hinting dan antialiasing dimatikan, font tersebut bisa dimanfaatkan di aplikasi-aplikasi itu

  • Keren
    Bagus juga bahwa pekerjaan ini membantu secara finansial bagi orang yang membuatnya
    Nama Chevy Ray terasa familier dari dunia game indie, tapi aku tidak ingat persis apa yang ia buat
    Sepertinya sesuatu dari arus sekitar 2010–2012, seperti VVVVVV, Nidhogg, atau Canabalt

    • Ternyata Flashpunk
      Beacon juga luar biasa — bikin nostalgia, dan aku rindu game indie
    • Mungkin game yang dimaksud adalah Beacon
    • Ikenfell
    • Aku juga sangat menikmati Ikenfell
    • Flashpunk?

  • Luar biasa
    Melihat sosok ala Da Vinci seperti penulis artikel ini mengingatkanku pada masa ketika seniman dan insinyur tidak dipisahkan secara jelas, melainkan satu kesatuan

    • Kalau begitu, sebaiknya baca tentang Da Vinci dengan benar
      Bukan artikel seperti “10 penemuan terbaik Da Vinci”
      Kenyataannya, ada pemisahan yang cukup besar di antara keduanya
      Aku juga bisa memodelkan kapal luar angkasa untuk pergi sampai Alpha Centauri di Maya dengan dinamika mencurigakan yang belum tervalidasi
      Tapi itu masih jauh dari benar-benar membuatnya dan mengirimkannya ke ruang antarbintang
      Gambarnya memang indah dan penuh imajinasi

  • Di Rust, pekerjaan seperti ini ternyata sangat mudah dibuat agar berjalan di banyak core
    Menyisipkan satu pemanggilan saja ke dalam rantai fungsi bisa jadi sudah cukup

    • Rust sejak awal dibuat untuk memiliki keamanan memori dan keamanan thread
      Selama mengikuti aturan yang ditetapkan bahasa, multithreading hampir terasa “gratis”
      Hukum Amdahl tetap berpengaruh, tetapi setidaknya aplikasinya tidak meledak di depan mata
    • Ini bukan ciri khas Rust saja
      Scala dan Java juga mendukung kemampuan seperti ini secara bawaan

  • Pekerjaan yang benar-benar luar biasa dan tulisannya juga bagus
    Dengan beberapa trik, sepertinya banyak algoritmanya bisa dibuat lebih cepat
    Dari yang kubaca, petunjuknya mungkin mengganti hashmap pada penggambaran karakter dan pemetaan variasi ASCII dengan bitmap dan array indeks byte
    Tentu saja, ini sudah cukup cepat, jadi tidak terlalu penting untuk kode ini

    • Senang ada yang mengangkat hal ini, dan sepenuhnya benar
      Di situsnya tidak ada kode lengkap, tetapi sebenarnya ada cukup banyak alokasi dan penyalinan string serta struktur data
      Di bagian yang jelas, aku menulis kode optimal; bagian seperti penyalinan bitmap atau pekerjaan yang mudah diparalelkan begitu cepat selesai, sampai-sampai aku bahkan tidak mencoba mengoptimalkan bagian lain
      Meski begitu, kalau mau dilakukan, bisa saja
      Mudah lupa betapa cepatnya bahasa yang dekat ke level rendah seperti Rust, C++, dan Go, apalagi jika memakai perangkat dasar multithreading, antrean kerja, dan semacamnya

  • Bagi yang tertarik pada font, ada baiknya juga melihat https://tomorrow.type.today/
    Itu adalah studio tipografi yang membuat font orisinal dan eksperimental yang bagus
    Salah satu anggota tim kami sangat mendalami tipografi, jadi ia sedang membuat koleksi karya mereka di https://play.soot.com/tomorrowtypetoday

    • Sebagai catatan, perusahaan itu terdaftar di Rusia