แนะนำ Tiled Map Editor สำหรับทำเกมส์

วันนี้ขอนำเสนอบทความเกี่ยวกับการทำเกมส์นะครับ บทความนี้ไม่มีส่วน Coding เข้ามาเกี่ยวข้อง แต่จะเป็นการแนะนำ การใช้เครื่องมือตัวหนึ่งครับ ชื่อว่า TiledMap Editor ตัว TiledMap ตัวนี้ นิยมใช้สำหรับสร้างเกม แนว Platformer (นึกถึง Mario) หรือแม้แต่เกมส์ RPG ก็ยังสามารถสร้างได้เช่นกัน

Getting Started

เริ่มแรก ก่อนเริ่มต้นใช้งาน ให้ทำขั้นตอนพวกนี้ก่อนครับ

• ทำการดาวน์โหลด TiledMap ได้จากหน้าเว็บไซต์เลยครับ
• เตรียมไฟล์ Game Assets โดยตัวอย่าง ผมโหลดมาจากเว็บนี้ 2D Platform Levels

Tiled Map Editor คืออะไร?

Tiled Map Editor เป็นเครื่องมือตัวหนึ่ง ที่ช่วยในการทำแมพ มีฟังค์ชันที่ใช้งานที่ง่าย สามารถเปิดได้หลายระบบปฎิบัติการ ทั้ง Windows Mac หรือ Ubuntu ก็สามารถใช้งานได้ สามารถเซฟเป็นไฟล์ ได้หลากหลาย แต่โดยส่วนมากจะเซฟไว้เป็นไฟล์ .tmx

จุดเด่นอีกอย่างนึงคือ เราสร้างแมพ ด้วย tiled Map Editor แล้ว เราสามารถเซฟ และนำไปใช้ได้กับทุกเกมส์ หรือทุก Game Engine ที่รองรับไฟล์ .tmx

เริ่มต้นสร้าง Map

เปิดโปรแกรมขึ้นมา เลือก File -> New และก็เลือกออฟชัน ตามรูปข้างล่างเลย

กด OK จากนั้น เลือกไปที่ Map -> Tileset.. เพื่อทำการ import รูปที่เราโหลดมา มาเป็น Tileset เพื่อเอาไว้สร้างแมพนั่นเอง

ผมทำการเลือก ไฟล์ A_World_03.png ขึ้นมา จากนั้นกด OK

Tileset เราจะถูกโหลดเข้ามา แบบนี้

Note: หากต้องการให้แสดง grid ให้เลือก View -> Show Grid

ด้านบนเป็นรูปเครื่องมือ แต่ละอัน

• Stamp Brush : ใช้สำหรับวาด Tileset ที่เราโหลดมา
• Terrain Brush : เอาไว้วาด Terrain
• Bucket Fill Tool : เอาไว้วาด Tile แบบทีเดียวทั้งแมพหรือเฉพาะส่วนที่ต้องการในทีเดียว (นึกถึงการกด การเทสี ใน Paint)
• Eraser : เอาไว้ลบ Tile ในแมพของเรา

ต่อมา เราสามารถ เลือก Tileset แบบช่องเดียว หรือว่า เลือกทีละหลายๆ ช่อง เพื่อมาสร้างลงในแมพทางซ้ายมือก็ได้ ในส่วนนี้ ลองกด แล้วก็ลองสร้างกันดูครับ

• กด Ctrl + คลิกขวา ในหน้า Map สามารถเลือก Tile หลายๆอันได้

ตัวอย่าง เมื่อทำการวาด Map

จะเห็นได้ว่าเราสามารถ Add Layer ได้ทางแทบขวามือบน และสามารถกด ติ๊กถูก เพื่อดูแต่ละ Layer ได้

เช่น เลือกเฉพาะ Layer Background

ในกรณีเลือก Layer Foreground

เมื่่อทดลองสร้างแมพเสร็จแล้ว ก็กดเซฟเป็นไฟล์ .tmx ได้เลย สำหรับบทความนี้ก็เป็นบทความแนว แนะนำเครื่องมือเท่านั้นครับ บทความต่อไป ผมจะนำเสนอ ขั้นตอนการโหลดแมพที่เราสร้างไว้แล้วเนี้ย ไปใส่ในเกมได้อย่างไร เช่น โหลด Tiled Map จาก LibGDX, Love2D หรือ PhaserJS เป็นต้นครับ