มาทำ Sprite Sheet ใน Photoshop กัน

     สวัสดีครับ  Blog ร้างไปนานมากๆๆ กว่าจะมีเรื่องมาเขียนสักที ในบทความนี้จะพูดถึง Sprite Sheet นะครับเผื่อมีใครที่ต้องการทำ Sprite Sheet หลังจากได้ทำภาพเสร็จแล้วซึ่งโดยปกติ เราก็จะมีภาพกันหลายๆ Layer และใน Game Engine ที่ทำเกม 2 มิติจะอ่าน Sprite Sheet ได้จะเป็นภาพเดียวและมีท่าทางต่างๆอยู่ในแต่ละช่วงของภาพ Sprite Sheet นั้นๆ เอาหละปัญหาตอนนี้คือ ตอนนี้เรามีภาพตัวละครแล้ว เขียนท่าทางไว้แล้ว แต่เราต้องมาขยายและวางแต่ละ Layer โดยให้ระยะห่างเท่าๆกัน (ห้ามไปทับกันนะ) ทำไงดี

      เมื่อก่อนผมเคยทำโดยการเซฟออกไปทีละ Layer ครับ ออกไปทีละรูปแล้วสร้าง File ภาพขึ้นมาใหม่แล้วเอามาวาง นั่งเรียงรูปไปเพราะยังไง Photoshop มันก็ snap ภาพให้พอดีกันอยู่แล้ว ซึ่งจริงๆวิธีนี้ก็ทำได้แต่ไม่ถูกนะ  = ="  (ปล  Sprite ที่มีในตัวอย่างผมไม่ได้วาดเองนะขี้เกียจ ฮา ฮา.....)

 

     เอาหละตอนนี้ผมมี Script ใน Photoshop ครับ ซึ่ง Script ตัวนี้ผมนั่งแก้ให้มี UI นิดหน่อย ตอนแรกไปหาโหลดมาแต่ว่ามันปรับแต่งอะไรไม่ได้เลย กดปั้บเรียงปุ๊บ ก็เลยนั่ง งม(กว่าจะทำความเข้าใจมันได้ก็นานเหมือนกันนะ = =" ) เพิ่ม แก้ แต่ง Script ที่มี UI สั่งการได้ คุมได้ และก็มีให้ Download  Script ที่ผมทำ ได้ที่ link ด้านล่างครับ

Download Script from GitHub
(ต้องแกะ zip หลัง Download ด้วยนะ)

เมื่อ Download เรียบร้อยแล้วให้ไปที่ File->Script->Browse.. ดังรูปเลยครับ

 จากนั้นเลือกที่ File Script ที่เราได้ Download มา

 หน้าตาจะเป็นอย่างรูปด้านล่างทำความเข้าใจไม่ยาก ที่มีช่องให้ใส่คือ เราต้องการให้มีตัวละครในรูปของเรามีกี่ Column โดยปกติแล้วผมจะตั้งไว้ที่ 5 แล้วแต่คนต้องการปรับเลยครับ ส่วนช่อง Read from top Layer คือ ช่องสำหรับ เลือกว่าคุณต้องการให้อ่านจาก  Layer บนสุดลงไปข้างล่างหรือเปล่า กรณีสำหรับคนที่เขียนจาก Layer บนลงมา แต่ถ้าทำท่าแรกจาก Layer ล่างสุดขึ้นบนก็ไม่ต้องติ๊ก นะครับ หลังจากนั้นกด OK แล้วรอสักครู่ เสร็จแล้วให้กด X เพื่อปิดได้เลยครับ (อย่ากด OK นะครับ เพราะมันจะประมวลผลอีกรอบ)

เสร็จโปรแกรมประมวลผลเสร็จแล้วก็จะได้ภาพ Sprite Sheet ตามด้านล่างนี้นะครับ จากนั้นทำการ Save เอาไปใช้กันได้เลย

หมายเหตุ :  - แนะนำว่าให้ Save File แยกก่อน Run Script นะครับกันพลาด
                    - กรุณาเปิดตาทุก Layer นะครับ
                    - Layer ไหนที่ไม่ใช้ต้องลบออกด้วยนะครับ

Source Code : https://github.com/zardokar/ZltSS


ขอขอบคุณ  Script จาก 2 ที่ครับ
Generate a sprite sheet using layers in Photoshop by box hacker
Laying out celled sprites & Photoshop automation article by Mark McCoy from GarageGames

เสียใจที่ปี 2023 เว็บปิดไปแล้ว