วิธีสร้าง Bitmap font ภาษาไทย

ผมใช้โปรแกรม ShoeBox ในการทำ Bitmap font นะ

ขั้นตอนการทำ
1. เตรียมตัวอักษรที่ต้องการใช้งานทั้งหมด โดยใช้พวกโปรแกรมแต่งภาพอย่าง Photoshop เนี่ยแหละ พิมพ์และใส่เอฟเฟคอะไรให้เรียบร้อยเลย แต่ต้องเว้นระยะห่างระหว่างตัวอักษรด้วย แล้วเซฟไฟล์

2. เปิดโปรแกรม ShoeBox เลือก Tab ชื่อ GUI ลากรูปที่เซฟไว้ ไปตรง Bitmap Font

3. จะปรากฏหน้าต่างชื่อ Bitmap Font กดปุ่ม Setting มุมขวาล่าง

4. จะปรากฏหน้าต่างชื่อ Bitmap Font Settings เลือก Tab Advanced ไปอีกหน้านึง ตั้งค่า Template เป็น Default ใส่ตัวอักษรที่เคยใส่ไว้ในโปรแกรมแต่งภาพตามลำดับที่เคยใส่ไว้ โดยไม่ต้องเว้นวรรคในส่วนของ Txt Chars

5. กด Apply 
6. กลับไปหน้าต่าง Bitmap Font แล้วกด Save Font
7. จะได้ไฟล์รูป Bitmap Font (ไฟล์ xxx.png) กับไฟล์ Atlas (ไฟล์ xxx.fnt)

เป็นอันจบขั้นตอนการสร้าง Bitmap Font แล้ว แต่ยังมีปัญหาสระ/วรรณยุกต์ “ลอย” อยู่ วิธีการแก้มีดังนี้
1. เปิดไฟล์ xxx.fnt ด้วย Text Editor อะไรก็ได้
2. หาสระ/วรรณยุกต์ เช่น ิ แล้ว แก้ไขค่า xoffset และ ค่า xadvance 
โดยวิธีตั้งค่านี้แบบไม่ต้องคิดคือตั้งค่า xoffset เป็น ค่าติดลบของค่า width แล้วตั้งค่า xadvance เป็น 0 เช่น สมมติมีค่า width=23 xoffset=0 xadvance=23 ก็ตั้งค่า xoffset=-23 xadvance=0

- xoffset คือค่าระยะที่ใช้แสดงผลตัวอักษร จากจุดที่เริ่มแสดงตัวอักษรในแกน x
- xadvance คือระยะสิ้นสุดจากจุดที่เริ่มแสดงตัวอักษร ซึ่งค่านี้มีผลต่อระยะห่างของตัวอักษรตัวถัดไป

ตัวอักษรที่ใช้ในเกมทั้งหมด(ไทย/อังกฤษ)

abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-=!@#$%^&*()_+[{]}|/?<>:;"',.กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรฤลฦวศษสหฬอฮฯะัาำิีึืฺุู฿เแโใไๅๆ็่้๊๋์ํ๎๏๐๑๒๓๔๕๖๗๘๙๚๛
Like what you read? Give Ittipon Teerapruettikulchai a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.