บทนำ
สไปรท์ชีทมีไว้เพื่อให้เกมสามารถวาดเฟรมจำนวนมากจากพื้นผิวเดียวได้ แต่บางครั้งก็จำเป็นต้องทำในทางกลับกัน เช่น ต้องการวาดเฟรมเดียวใหม่ ดึงภาพเก่าจากเกมที่วางจำหน่ายไปแล้ว หรือสร้างสไปรท์ชีทขึ้นใหม่ที่ไม่มีใครเก็บไฟล์ต้นฉบับไว้
การตัดเฟรมด้วยมือในโปรแกรมแก้ไขรูปภาพนั้นใช้ได้ผลกับสไปรท์สามตัว แต่เป็นเรื่องยากลำบากมากสำหรับสามร้อยตัว โปรแกรม Sprite Sheet Unpacker ทำได้ในแท็บเบราว์เซอร์: ชี้ไปยังไฟล์ข้อมูลหากคุณมี หรือปล่อยให้โปรแกรมค้นหาสไปรท์เองก็ได้
นี่คือวิธีการเลือกวิธีการแบ่งแผ่นงานที่ถูกต้อง สิ่งที่ต้องทำเมื่อคุณไม่มีไฟล์ข้อมูล และวิธีการตรวจสอบว่าเฟรมเล่นได้อย่างถูกต้องก่อนที่คุณจะดาวน์โหลด
สี่วิธีในการหั่นแผ่นกระดาษ
แผ่นภาพถูกสร้างขึ้นด้วยวิธีการที่แตกต่างกัน ดังนั้นจึงไม่มีวิธีตัดที่ถูกต้องเพียงวิธีเดียว แผ่นภาพกระเบื้องที่มีระยะห่างเท่าๆ กันจากเกมเก่าๆ จำเป็นต้องมีตารางกริด ส่วนแผ่นภาพแผนที่ที่มีกรอบภาพที่ถูกตัดแต่งอย่างแน่นหนา จำเป็นต้องมีไฟล์ข้อมูล เพราะหากไม่มีไฟล์ข้อมูล ก็จะไม่สามารถรู้ได้ว่ากรอบภาพหนึ่งสิ้นสุดที่ใดและกรอบภาพถัดไปเริ่มต้นที่ใด
โปรแกรมแตกไฟล์มีโหมดให้เลือก 4 โหมด โดยจะเลือกโหมดให้คุณโดยอัตโนมัติตามสิ่งที่คุณลากเข้ามา และคุณสามารถเปลี่ยนโหมดได้ตลอดเวลา รูปภาพและไฟล์ข้อมูลใดๆ จะถูกอ่านในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลดใดๆ
- โหมดอัตโนมัติ: ค้นหาสไปรท์แต่ละตัวโดยการมองหาพื้นที่พิกเซลที่ไม่โปร่งใส เหมาะสำหรับแผ่นงานที่มีช่องว่างระหว่างสไปรท์
- โหมดกำหนดค่า: อ่านไฟล์ข้อมูลของแผ่นงาน (เจสัน, plist, XML, .atlas และอื่นๆ) และตัดแต่ละเฟรมตามตำแหน่งที่ระบุไว้ พร้อมชื่อเฟรม
- โหมดตาราง: ตัดแผ่นงานออกเป็นเซลล์เท่าๆ กัน คุณสามารถกำหนดขนาดเซลล์ ค่าออฟเซ็ต และระยะห่างได้
- โหมดกำหนดเอง: วาดกล่องบนแผ่นงานด้วยตนเอง สำหรับแผ่นงานที่ไม่เป็นไปตามแบบแผนข้างต้น
การแบ่งแผ่นงานทีละขั้นตอน
เริ่มต้นด้วยภาพแผ่นงาน: พีเอ็นจี, เจพีจี, เว็บพี, GIF หรือ BMP หากคุณมีไฟล์ข้อมูลที่มาพร้อมกัน เช่น เจสัน หรือไฟล์ plist ที่ส่งออกจากการบรรจุ TexturePacker ให้ลากไฟล์นั้นลงไปพร้อมกัน โปรแกรมแตกไฟล์จะจดจำรูปแบบและเปลี่ยนเป็นโหมด Config เฟรมที่ถูกตัดแต่งจะถูกสร้างขึ้นใหม่ในขนาดดั้งเดิม และเฟรมที่หมุนจะถูกหมุนกลับให้ตั้งตรง เพื่อให้เรียงกันเหมือนก่อนการบรรจุ
ไม่มีไฟล์ข้อมูล? ลองใช้โหมดอัตโนมัติก่อน หากสไปรท์สัมผัสกันหรืออยู่บนพื้นหลังทึบ ให้เปลี่ยนเป็นโหมดตารางและป้อนขนาดเซลล์ ตรวจสอบเส้นขอบที่วาดทับบนแผ่นงาน คลิกที่เฟรมเพื่อดูรายละเอียด จากนั้นดาวน์โหลด
- วางภาพแผ่นงานลงไป พร้อมทั้งไฟล์ข้อมูลหากมี
- ตรวจสอบโหมดที่เลือก (อัตโนมัติ, กำหนดค่า, ตาราง หรือ กำหนดเอง) และเปลี่ยนหากจำเป็น
- ตรวจสอบเส้นขอบบนแผ่นงานและแก้ไขส่วนใดที่ผิดเพี้ยน
- ดาวน์โหลดเฟรมเป็น ZIP หรือเป็นไฟล์แยกต่างหากหากคุณต้องการเพียงไม่กี่เฟรม
ลองดูเฟรมภาพก่อนดาวน์โหลด
การดึงเฟรมออกมาเป็นครึ่งหนึ่งของงาน อีกครึ่งหนึ่งคือการตรวจสอบให้แน่ใจว่าเฟรมเหล่านั้นยังคงเคลื่อนไหวได้อย่างถูกต้อง เปิดใช้งานการแสดงตัวอย่างแอนิเมชั่น และตัวแยกเฟรมจะเล่นเฟรมตามลำดับ เพื่อให้คุณเห็นลำดับการเคลื่อนไหวทั้งหมด
เปลี่ยนอัตราเฟรมจนกว่าจะดูเหมือนในเกม เฟรมที่หายไปจะแสดงเป็นอาการกระตุก และเฟรมที่ถูกตัดออกไปสองสามพิกเซลจะแสดงเป็นอาการสั่นไหว ซึ่งทั้งสองอย่างจะสังเกตได้ง่ายกว่าหลังจากที่คุณนำเข้าทุกอย่างลงในเอนจิ้นแล้ว
- เล่นเฟรมที่แยกออกมาเป็นลูป
- อัตราเฟรมที่คุณสามารถเปลี่ยนได้ (ค่าเริ่มต้นคือ 12 fps)
- อาการกระตุกและสั่นไหวบ่งบอกถึงเฟรมที่หายไปหรือเฟรมที่ไม่ตรงแนว
คุณมีไฟล์ข้อมูลไฟล์ไหน?
ไฟล์ข้อมูลเป็นเพียงรายการชื่อเฟรมและสี่เหลี่ยม แต่เอนจิ้นแต่ละตัวเขียนไฟล์นี้แตกต่างกันเล็กน้อย ถ้าคุณกำลังทำงานกับชีตที่คนอื่นสร้าง การรู้ว่าคุณมีชีตประเภทใดจะทำให้เข้าใจคำเตือนได้ง่ายขึ้น
ตัวแตกไฟล์จะอ่าน เจสัน ทั้งในรูปแบบแฮชและอาร์เรย์ (Phaser, PixiJS และการส่งออกทั่วไปของ TexturePacker), ไฟล์ plist จาก Cocos2d, XML จาก Starling และ Sparrow, สไปรต์ชีต CSS, ไฟล์ข้อความ .atlas จาก สไปน์ และ libGDX และเมตาเดต้าสไปรต์ YAML ของ Unity นอกจากนี้ยังสามารถใช้กับแอตลาสหลายหน้าได้ ตราบใดที่คุณใส่ภาพทุกหน้าลงไป
โดยปกติแล้วอะไรจะเกิดขึ้นต่อไป
เมื่อได้เฟรมออกมาแล้ว คุณมักจะทำอะไรบางอย่างกับเฟรมเหล่านั้น ถ้าเฟรมมีขนาดใหญ่เกินกว่าที่ควรจะเป็น ให้ลองใช้โปรแกรมบีบอัดรูปภาพ หากคุณต้องการให้ภาพเหล่านั้นอยู่ในแผ่นงานใหม่ที่เรียบร้อยกว่าเดิม ให้โหลดภาพเหล่านั้นลงใน Texture Packer แล้วทำการแพ็คใหม่ และหากคุณทำการสไลซ์ด้วยโหมดอัตโนมัติหรือแบบตาราง และต้องการไฟล์ข้อมูลสำหรับผลลัพธ์ โปรแกรม Unpacker สามารถส่งออกเฉพาะเมตาเดต้าแทนที่จะเป็นภาพได้
โปรแกรมทั้งหมดนี้ทำงานในเบราว์เซอร์ ดังนั้นคุณสามารถย้ายจากแผ่นงานเก่าไปยังแผ่นงานใหม่ที่สะอาดตาได้โดยที่ภาพไม่ต้องออกจากคอมพิวเตอร์ของคุณ
เขียนโดย
Ankit Kumar
วิศวกรซอฟต์แวร์อาวุโสและผู้ก่อตั้ง ToolBuddy
วิศวกรรมยูทิลิตี้เน้นเบราว์เซอร์เป็นหลักโดยไม่มีข้อกำหนดในการอัปโหลดโดยใช้เทคโนโลยี WebAssembly, Web Audio และ Canvas