Construct 2 : สร้าง SpriteFont สวยๆ ในรูปแบบที่คุณต้องการ

ระบบภาษาที่ใช้ส่วนใหญ่ จะเรียกว่า “SpriteFonts” ซึ่งแบบอักษรจะเป็นภาพของตัวอักษรแต่ละตัววางเรียงกัน ทำให้การทำงานมีประสิทธิภาพสูง โดยเฉพาะอย่างยิ่งในการใช้ Canvas+ เป็นเว็บเอ็นจิ้น

เครื่องมือสำหรับสร้าง SpriteFont

“Give your mono font” เป็นเครื่องมือที่สร้างขึ้นโดย Blackhornet เครื่องมือนี้ใช้สำหรับสร้าง SpriteFont ที่ใช้กับ Construct 2 และ Construct 3 ซึ่งคุณสามารถดาวน์โหลดเครื่องมือนี้ได้ฟรีที่ด้านล่างนี้

ดาวน์โหลด

 

การใช้งาน

หลังจากการดาวน์โหลดเสร็จสิ้น ให้ทำการแยกไฟล์ และเรียกใช้ไฟล์ GYFM3.exe

คุณสามารถปรับเปลี่ยนอักขระ (1) เพื่อให้เหมาะกับความต้องการของคุณได้

คุณต้องแน่ใจว่าแบบตัวอักษร (Fonts)จะต้องรองรับอักขระที่คุณป้อน

ในการเปลี่ยนแบบอักษรและขนาดเพียงแค่คลิกปุ่ม “Font” (2) หากต้องการดูผลลัพธ์ให้คลิก “Refresh” (3) และ SpriteFont จะปรากฏที่ (4) นอกจากนี้คุณยังสามารถป้อนประโยคสั้น ๆ เพื่อดูว่าผลลัพธ์นั้นเหมาะสมสำหรับคุณหรือไม่ (5) เมื่อคุณรู้สึกว่าพร้อมให้คลิกที่ปุ่มบันทึก (6)

โปรแกรมจะสร้างรูปภาพ spritefont ไฟล์ข้อความ .txt และไฟล์ .xml

SpriteFont ใน Construct

Construct2 จะมีปลั๊กอิน SpriteFont ในตัว แต่อย่างไรก็ตามผู้ใช้ส่วนใหญ่จะติดตั้ง  “SpriteFont+” เพิ่มเติม ซึ่งปลั๊กอินนี้ได้เพิ่มคุณสมบัติ “Char width JSON” ให้กับค่าเรื่มต้น ส่วนใน Construct3 scirra ได้นำคุณสมบัติพิเศษนี้มาใส่ในค่าเริ่มต้นอยู่แล้ว ดังนั้นจึงไม่จำเป็นต้องติดตั้งปลั๊กอินเพิ่มเติม

การอัพเดต SpriteFont

จากสต็อก SpriteFonts ที่เพิ่มเข้ามาจะรองรับตัวอักษรภาษาอังกฤษเท่านั้น “GiveYourFontsMono” รุ่น 3.2 สามารถอัปเดต SpriteFont เพื่อรองรับตัวอักษรพิเศษและภาษาอื่นได้ แต่ไม่รองรับภาษาไทย

การนำ SpriteFont ไปใช้

  • เพิ่ม SpriteFont ที่คุณมีอยู่ลงในงานของท่าน

  • เปิดไฟล์ spritefront.txt ขึ้นมา

  • คัดลอกความกว้างและความสูงของอักขระ  ใส่ลงในคุณสมบัติ Construct 2 ที่ข่อง “Character Height” และ “Character Width” คัดลอกชุดอักขระ ใส่ลงในคุณสมบัติ Construct 2 ที่ช่อง “Character set”
Character width: 37
Character height: 55
Character set: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.,;:?!-_~#"'&()[]|`\/@°+=*$£€<>%

 

  • คัดลอกรูปแบบ JSON จากไฟล์ spritefront.txt ใส่ลงในคุณสมบัติ Construct 2 ที่ช่อง “Char width JSON” (สำหรับ SpriteFont+)
//Construct 2 ONLY.
//Copy the following JSON text and paste into the Array.Load command INSIDE the default quotes.
{""c2array"":true,""size"":[2,24,1],""data"":[[[19],[4],[9],[10],[11],[12],[13],[15],[16],[17],[18],[19],[20],[21],[22],[23],[24],[25],[26],[28],[30],[31],[32],[35]],[["" ""],[""£""],[""Il""],[""'|""],[""i.:""],[""1,;!""],[""()[]`""],[""\""""],[""j""],[""f""],[""rt""],[""c*""],[""x""],[""ehksyz-<>""],[""Jdgq?°€""],[""Labnopuv2356789""],[""CS4$""],[""EFPRTYZ0~\\/=""],[""ABDGHKNUX_&+""],[""OQVw%""],[""m#""],[""M""],[""@""],[""W""]]]}

สำหรับ SpriteFont ที่มากับ Construct 2 ให้ใส่ใน Event ดังนี้

  • เพิ่ม Event โหลด JSON เพื่อตั้งค่าความกว้างให้กับอักขระแต่ละตัวของ Sprite Font
    • SpriteFont -> On created
  • เพิ่ม Action
    • Array -> Load  -> คัดลอกรูปแบบ JSON จากไฟล์ spritefront.txt ใส่ลงในช่อง JSON

  •  เพิ่ม sub Event  วนรอบอาร์เรย์และตั้งค่าความกว้างตัวอักขระ
    • System -> for
      – Name -> “fontwidth”
      – Start index -> 0
      – End index -> Array.Height-1
  • เพิ่ม Action
    • SpriteFont -> Set charactor width
      – Character -> Array.At(1, loopindex(“fontwidth”))
      – Width -> Array.At(0, loopindex(“fontwidth”))

*** ขอให้มีความสุขกับการสร้างงานนะครับ แล้วพบกันใหม่ สวัสดีครับ ! ***