วาดตัวหนังสือบน SDL2 ด้วย FreeType (ตอนที่ 1)

วันนี้พูดถึงการวาดตัวหนังสือหน่อย

คิดว่าหลาย ๆ คนที่ใช้ SDL น่าจะเคยใช้ Library ที่ชื่อว่า SDL_ttf ซึ่งเป็นตัววาดตัวหนังสือที่ใช้ FreeType 2 เป็นตัว backend ที่อ่านไฟล์ฟอนท์แบบ TrueType/OpenType วันนี้จะมาพูดถึงว่า ถ้าเราไม่ใช้ SDL_ttf เลย ไปใช้ FreeType ตรง ๆ จะต้องทำอะไรยังไงบ้าง

ก่อนอื่นจะขอพูดถึง FreeType 2 ก่อน FreeType เป็น font engine หมายถึงเป็นโปรแกรมที่เข้าไปอ่านไฟล์ font เพื่อที่จะดึง glyph และค่าอื่น ๆ ที่จำเป็นออกมา ตัวมันเองไม่สามารถที่จะวาดภาพโดยระบุข้อความเข้าไป ผู้ใช้จะต้องอ่าน glyph และค่าที่ต้องใช้ เอามาคำนวนแล้ววาดลงไปในรูปเอง


ทีนี้ glyph คืออะไร ?? glyph ก็คือภาพตัวอักษรที่ผู้ออกแบบฟอนท์เป็นคนวาด โดยอาจจะเป็นภาพบิทแมพหรือเป็นเวคเตอร์ก็ได้ แต่สุดท้ายแล้วเราต้องแปลงให้เป็นบิทแมพก่อนจะวาดอยู่ดีครับ

สำหรับค่าที่เราจำเป็นต้องรู้ในการวาด จะเรียกว่า glyph metric ซึ่งก็เป็นตารางเก็บค่าที่เราต้องใช้นั้นล่ะ โดยค่าที่จำเป็นจริง ๆ มีอยู่ 3 ตัว คือ x bearing, y bearing และ advance

ก่อนจะอธิบายว่าไอ้สามตัวที่ว่าเนี่ยมันคืออะไร ขอย้อนกลับไปนิดนึง เวลาที่เราเขียนหนังสือเราก็จะเขียนโดยมีเส้นบรรทัดอยู่ข้างล่างใช่ไหมครับ ? เวลาเราจะวาดบนคอมก็เหมือนกัน เราจะกำหนดเส้นบรรทัด หรือ baseline ขึ้นมาตัวหนึ่งแล้วค่อยวาด glyph ลงไป จากนั้นก็จะเริ่มจากกำหนดจุดเริ่มต้น (ในภาพคือ origin) บนเส้นบรรทัดขึ้นมาจุดหนึ่ง

สำหรับ bearing x กับ y นั้นเป็นตัวกำหนดระยะทางจากจุดเริ่มต้นจนถึงมุมซ้ายบนของ glyph นั่นเอง bearing เป็นประมาณที่มีทิศทาง ก็คือ bearing x จะชี้จากซ้ายไปขวาเมื่อค่านี้เป็นบวก และ bearing y จะชี้จากเส้น baseline ขึ้นข้างบนเมื่อค่านี้เป็นบวกครับ bearing สามารถมีค่าเป็นลบเพื่อกำหนดทิศทางในทางตรงกันข้ามได้อีกด้วย ลองคิดเล่น ๆ ดูนะครับ สำหรับสระอี (ี) แล้วค่า bearing x จะต้องเป็นลบเพื่อที่จะไปสวมกับ glyph ที่อยู่ก่อนหน้าได้นั่นเอง

ส่วนระยะ advance นั้นคือระยะทางจากจุดเริ่มต้นของ glyph ปัจจุบันไปยัง glyph ถัดไป ค่านี้มักจะเป็นบวกครับ และเป็นระยะทางจากซ้ายไปขวา (ยกเว้นแต่จะเขียนตัวหนังสือกลับทางนั่นอีกเรื่องนึงนะ)

อ่านแค่นี้ก็น่าจะเข้าใจคอนเซพท์รวม ๆ แล้ว โดยหลักการการวาดตัวหนังสือก็มีขั้นตอนแค่

  1. หาค่า glyph ที่เหมาะสมกับตัวอักษรปัจจุบัน และดึงเอา glyph metric ที่เหมาะสมออกมาด้วย
  2. กำหนดจุดเริ่มต้น หาตำแหน่งของ glyph โดยใช้ค่าใน glyph metric
  3. แปลง glyph เป็น bitmap (ถ้าตอนแรกมันเป็น vector) 
  4. วาด glyph ลงไปบนภาพ
  5. เริ่มต้น 1 ใหม่กับตัวอักษรตัวต่อไป หรือจบถ้าหมดแล้ว
แค่นี้เอง
สำหรับ FreeType 2 นั้น มันสามารถทำขั้นตอนที่ 1-3 ได้ ดังนั้นเราก็ต้องเขียนเองแค่ในส่วนขั้นตอนที่ 4 ซึ่งจะทำยังไงเอาไว้อ่านตอนต่อไปนะครับ

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *

This site uses Akismet to reduce spam. Learn how your comment data is processed.