นักพัฒนาที่สร้างฟอนต์ 175 แบบด้วย Rust

 (chevyray.dev)
1 คะแนน โดย GN⁺ 2024-08-11 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

สารบัญ

  • ก่อน Megapack
  • แพ็กแรก
  • แพ็กที่สอง
  • มรดก
  • เป้าหมายของ Megapack
  • ใหญ่ขึ้นและดีขึ้น
  • รองรับภาษาได้มากขึ้น
  • รูปแบบสไตล์ที่หลากหลาย
  • ความสมบูรณ์ของ kerning
  • การควบคุมคุณภาพที่ดีขึ้น
  • การเผยแพร่และบำรุงรักษาที่ง่ายขึ้น
  • ยกระดับมาตรฐาน
  • ศึกษาการออกแบบฟอนต์
  • แหล่งอ้างอิงจากภาพถ่าย
  • PIFO: เครื่องมือฟอนต์พิกเซลของฉัน
  • วิธีการทำงาน
  • crate ที่ใช้
  • ขั้นที่ 1: สร้าง font sheet
  • ขั้นที่ 2: สร้างเส้นขอบ glyph
  • ขั้นที่ 3: ตาราง kerning
  • ขั้นที่ 5: ส่งออก
  • ทดสอบคุณภาพ
  • การเผยแพร่
  • บทสรุป

ก่อน Megapack

  • เริ่มทำแพ็กฟอนต์ชุดแรกในปี 2016 ระหว่างเริ่มทำ Ikenfell
  • เปิดตัวแพ็กที่สองในปี 2018 และคุณภาพดีขึ้นอย่างมาก

แพ็กแรก

  • ในปี 2016 ได้ขายแพ็กแรกบน itch.io ซึ่งมีฟอนต์ 12 แบบ
  • ตอนนั้นทักษะการออกแบบฟอนต์ยังไม่ดีนัก แต่ถูกนำไปใช้ในเกมอินดี้จำนวนมาก

แพ็กที่สอง

  • เปิดตัวแพ็กที่สองในปี 2018 โดยมีฟอนต์ 40 แบบ
  • เพิ่มตาราง kerning และจัดทำในรูปแบบที่เหมาะกับเอนจินหลากหลายตัว
  • โปรโมตโดยร่วมมือกับนักพัฒนาอินดี้และใช้ภาพหน้าจอจากเกม

มรดก

  • แพ็กที่สองได้รับความนิยมอย่างมาก และถูกใช้ในเกมใหญ่ ๆ อย่าง Cadence of Hyrule ของ Nintendo
  • ฟอนต์หลายแบบยังถูกใช้ใน Get in the Car, Loser ของ Love Conquers All Games

เป้าหมายของ Megapack

  • หลังจาก Ikenfell วางจำหน่าย ผู้เขียนอยู่ในภาวะหมดไฟ แต่ยังคงพัฒนาทักษะการเขียนโปรแกรม Rust ต่อไป
  • จึงวางแผนสร้างแพ็กฟอนต์ที่ใหญ่กว่าเดิม

ใหญ่ขึ้นและดีขึ้น

  • ครั้งนี้ตั้งเป้าหมายไว้ที่ 100 ฟอนต์ และต้องการสร้างฟอนต์ให้เหมาะกับแนวเกมที่หลากหลาย

รองรับภาษาได้มากขึ้น

  • แพ็กก่อนหน้ารองรับเพียงอักขระ ASCII แต่ครั้งนี้ขยายให้รองรับ EFIGS (อังกฤษ ฝรั่งเศส อิตาลี เยอรมัน สเปน)

รูปแบบสไตล์ที่หลากหลาย

  • ทำให้แต่ละฟอนต์รองรับขนาดและน้ำหนักที่หลากหลาย เพื่อสร้างความเปลี่ยนแปลงโดยยังคงความสอดคล้องของสไตล์

ความสมบูรณ์ของ kerning

  • ทำงาน kerning แบบอัตโนมัติเพื่อลดเวลาและข้อผิดพลาด

การควบคุมคุณภาพที่ดีขึ้น

  • นำวิธีที่ช่วยประเมินคุณภาพโดยรวมของฟอนต์ได้ง่ายขึ้นมาใช้

การเผยแพร่และบำรุงรักษาที่ง่ายขึ้น

  • ทำให้กระบวนการอัปโหลดและเผยแพร่เป็นอัตโนมัติ เพื่อลดข้อผิดพลาดและเพิ่มประสิทธิภาพ

ยกระดับมาตรฐาน

  • ศึกษาการออกแบบฟอนต์และรวบรวมแหล่งอ้างอิงจำนวนมาก

ศึกษาการออกแบบฟอนต์

  • ศึกษาการออกแบบฟอนต์ผ่านหนังสือ Richard Poulin "Design School: Type"

แหล่งอ้างอิงจากภาพถ่าย

  • ใช้ภาพถ่ายข้อความหลากหลายแบบเป็นข้อมูลอ้างอิง

PIFO: เครื่องมือฟอนต์พิกเซลของฉัน

  • พัฒนาเครื่องมือชื่อ PIFO ด้วย Rust เพื่อสร้างฟอนต์พิกเซล

วิธีการทำงาน

  • สร้างฟอนต์โดยใช้ PNG tile sheet และไฟล์ตั้งค่า จากนั้นคำนวณคู่ kerning อัตโนมัติและส่งออกเป็นไฟล์ TTF

crate ที่ใช้

  • ใช้ clap, image, rayon, serde, glyph-names, ab-glyph, crunch และอื่น ๆ

ขั้นที่ 1: สร้าง font sheet

  • สร้างฟอนต์โดยใช้ tile sheet และไฟล์ตั้งค่า

ขั้นที่ 2: สร้างเส้นขอบ glyph

  • จัดกลุ่มพิกเซลเป็นคลัสเตอร์ สร้างเส้นขอบ และแปลงเป็น glyph ของ TTF

ขั้นที่ 3: ตาราง kerning

  • สร้างตาราง kerning ด้วยทั้ง kerning แบบแมนนวลและแบบอัตโนมัติ

ขั้นที่ 5: ส่งออก

  • ส่งออกฟอนต์เป็นไฟล์ TTF, tile sheet และ texture atlas แบบบีบอัด

ทดสอบคุณภาพ

  • ทดสอบคุณภาพของฟอนต์และแก้ปัญหาที่พบ

การเผยแพร่

  • สร้างโปรเจกต์บน itch.io และอัปโหลด

บทสรุป

  • ในเดือนธันวาคม 2023 ได้เปิดตัว 175 Pixel Fonts Megapack และสร้าง toolchain ด้วย Rust สำหรับสร้างฟอนต์ ทดสอบคุณภาพ และเผยแพร่

สรุปโดย GN⁺

  • บทความนี้อธิบายกระบวนการออกแบบและสร้างฟอนต์พิกเซลอย่างละเอียด
  • การพัฒนาเครื่องมือสร้างฟอนต์ด้วย Rust และการสร้างระบบ kerning อัตโนมัติรวมถึงระบบควบคุมคุณภาพเป็นจุดที่น่าสนใจ
  • เป็นข้อมูลที่มีประโยชน์มากสำหรับผู้ที่สนใจการออกแบบฟอนต์พิกเซล
  • โปรเจกต์อื่นที่มีฟังก์ชันคล้ายกันได้แก่ FontForge และ Glyphs

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-08-11
ความคิดเห็นจาก Hacker News
  • สงสัยเหตุผลด้านสไตล์ของความต่างของระยะห่างระหว่าง "Fdj" กับ "Fjo"
  • การสร้างฟอนต์อาจใช้เวลาถึง 1 ปี และมีรูปแบบย่อยหลากหลาย เช่น ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก สัญลักษณ์ น้ำหนัก และตัวเอียง
    • เคอร์นนิง (ระยะห่างระหว่างตัวอักษร) เป็นงานที่สำคัญมาก และต้องใช้เวลาและความพยายามอย่างมาก
    • ฟอนต์ที่รองรับ 176 ตัวอักษรอาจต้องใช้คู่เคอร์นนิง 37,976 คู่
    • จัดการงานเคอร์นนิงส่วนใหญ่ด้วยการทำให้เป็นอัตโนมัติ และปรับด้วยมือเมื่อจำเป็น
  • เป็นงานที่ชวนให้นึกถึงยุคที่ยังไม่มีเส้นแบ่งระหว่างศิลปินกับวิศวกร
  • สามารถสร้างฟอนต์แบบแรสเตอร์ได้ผ่านซอฟต์แวร์ Metafont ของ Donald Knuth
  • ชอบฟอนต์ของเว็บไซต์และการจัดสไตล์ที่เรียบง่าย
    • มีโพสต์เกี่ยวกับวิธีสร้างเว็บไซต์นี้
  • ดีใจที่ได้รู้ว่างานนี้ช่วยด้านการเงินด้วย
    • Chevy Ray เป็นนักพัฒนาเกมอินดี้ และเคลื่อนไหวอยู่ในช่วงปี 2010-2012
  • ดูเหมือนว่าน่าจะมีวิธีทำให้อัลกอริทึมเร็วขึ้นได้อีก
    • วิธีหนึ่งอาจเป็นการแทนที่แฮชแมปด้วยบิตแมปและอาร์เรย์ดัชนีไบต์
  • แนะนำให้คนที่สนใจฟอนต์ลองดู tomorrow.type.today
    • หนึ่งในสมาชิกทีมกำลังสะสมผลงานของพวกเขาอยู่
  • ใน Rust สามารถรันงานแบบหลายคอร์ได้อย่างง่ายดาย
    • แค่แทรกการเรียกใช้งานครั้งเดียวเข้าไปใน function chain ก็เพียงพอ
  • วิชาตัวพิมพ์เป็นสาขาที่เข้าใจได้ยาก
    • การสร้างฟอนต์ 175 แบบและทำให้แต่ละแบบแตกต่างกันอย่างมีความหมายเป็นเรื่องน่าทึ่ง