วิธีทำ Sprite Sheet แบบเว้นช่วง

หลังจากที่ได้โพสตอนแรกไปแล้วนะครับ แนะนำว่าใครที่อ่านตอนแรกไปแล้วแล้ว Download Script ไปก่อนที่บทความนี้จะมา ขอความกรุณาช่วย Download  Script ใหม่ ด้วยครับเนื่องจากเป็นคนละเวอชั่นกัน ผมปรับแก้ปัญหาอีกนิดหน่อย (ใช้เอง เจอ Bug เอง = = ) ตอนนี้ Script ปิดเองได้แล้วหลังกดปุ่ม OK ไม่ต้องไปกด X เพื่อปิด แก้ปัญหาอื่นๆอีกนิดหน่อยแล้วครับ สามารถไป Download ได้จากบทความเดิม ที่นี่ ครับ

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

จะเห็นว่าเวลาอ่านมันน่าจะเป็น บรรทัดแรก ท่ายิงอย่างเดียว และบรรทัดที่สองเป็นท่าวิ่งอย่างเดียว เราสามารถทำให้มันอยู่เป็นช่วงได้ครับด้วยการสร้าง Layer ใหม่ที่ไม่ใส่อะไรเลยมาขั้นระหว่างท่าดังรูป

จากรูปด้านบน Layer ที่เป็นท่าวิ่งมีตั้งแต่ Layer 1-16 และLayer ที่เป็นท่ายิงมีตั้งแต่ 17-22 ฉะนั้นผมเลยสร้าง Layer ใหม่ระหว่าง Layer สุดท้ายของท่ากับ Layerแรกของอีกท่า ขั้นมันตรงกลางนี่แหละ แล้วลองรัน Script ของเราดู

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

แค่นี้ก็เรียบร้อยสำหรับการเว้นช่องของท่าใน Sprite Sheet นะครับ

มาทำ 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 เว็บปิดไปแล้ว