Navigator

05 กันยายน 2555

สรุปสัมมนา "ปั้นก๊าซให้เป็นเกม" ในมุมมองของผม Part I


   ขอเกรินก่อนนิดนึงนะครับ หลังจากที่ไปฟังสัมมนา หัวข้อ "ปั้นก๊าซให้เป็นเกม" โดย คุณประเสริฐ ประเสริฐวิทยาการ game designer จากบริษัท square enix ประเทศญี่ปุ่น ใน วันอังคารที่ 4 ก.ย. 55 เวลา 13.00-16.00 น. ณ ห้อง M01 ตึก มหามกุฎ

ผมได้ไอเดียและได้ความรู้เยอะครับ และก็อยากจะมาบอกกล่าวกับคนที่สนใจแต่ไม่มีโอกาสได้ไป แต่ต้องเข้าใจก่อนว่าผมไม่ใช่เด็กที่จดและได้อะไรมาตรงเป๊ะๆ แถมจดมาน้อยด้วย ผมเป็นพวกเด็กหลังห้องหนะครับและฟุ้งไปเรื่อย บางทีผมอาจจะเสริมไปเองในมุมมองของผมบ้าง ถ้าใครอยากได้ Original ก็ไม่ต้องอ่านบทความนี้ก็ได้ครับ เอาหละ มาเริ่มกันเถอะ

ในช่วงแรกของการสัมมนาจะ วิทยากรพูดเกี่ยวกับว่าเกมในตอนนี้ไปถึงไหนกันแล้ว สำหรับเกมเมอร์หรือคนเล่นเกมบ่อยๆคงจะรู้กันอยู่แล้วว่ามันเป็นยังไง แต่ก็กล่าวไว้สำหรับคนที่ยังไม่รู้ครับ และก็ได้เปิด VDO ของเกม Uncharted 3 : Drake's Deception  ที่เป็นฉากไล่ล่า ตาม Youtube ข้างล่างเลยครับ

ในระหว่างที่ VDO เล่นไปเขาก็พูดถึง เสียงที่มีการตอบรับกับเหตุการณ์ เช่น ในระหว่างที่คนเล่นวิ่งไล่ ศัตรู จะมีเพลง BGM (Background Music) ที่ฟังแล้วรู้สึกตื่นเต้นไปกับเกม คนเล่นจะรู้สึกอิน และยิ่งพอใกล้จุดที่เกือบจะจับศัตรูได้ เพลงจะเร่งให้เร็วขึ้น และพอหลุดออกจากช่วงไล่ล่า มาอยู่ที่ตลาด ก็จะดรอปเสียงเพลง BGM ที่ใช้ตอนไล่ล่าลงจน BGM นั้นหายไป และ มีเสียงเอะอะของคนขึ้นมาแทน เหมือนเราอยู่ตรงนั้นจริงๆ และพอกลับมาเข้าสู่ฉากไล่ล่าต่อเพลง BGM ก่อนหน้าก็จะดังขึ้นอีกเป็นต้น

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

เมื่อวิทยากร พูดเกี่ยวกับเกมเสร็จแล้วเขาก็มาบอกเกี่ยวกับ Developer (คนทำ) และ Publisher (คนขาย) เพราะ เกมใหญ่ๆ บริษัทเกมอย่าง Square Enix , EA , Nintendo ที่ทำออกมาขายกันก็ไม่ได้มีทุกเกมที่มาจากบริษัทเหล่านี้ จะมีบริษัทที่เป็นทีม Developer แยกกัน



ซึ่งบริษัทใหญ่ๆแน่นอนว่าเขาจะมีทีมทำของเขาอยู่แล้ว และก็จะรับมาขายด้วย ซึ่งบริษัททีมทำขนาดเล็กก็จะเข้าไปคุยกับบริษัทใหญ่ หรืออาจจะมีบริษัทใหญ่ไปคุยกับ บริษัทขนาดเล็กว่าสนใจที่จะนำเกมนี้ไปอยู่ใน Brand ของเขา และมีข้อเสนอให้บริษัทเล็กมาร่วมทำ อะไรแบบนี้เป็นต้น แต่ถึงกระนั้น นี่ก็เป็นรูปแบบของเกมสมัยก่อนตอนนี้เรามี Store ตามเจ้าต่างๆเช่น Value Stream , XBox Live Market , Apple Store หรือ Google Play market เป็นต้น เข้ามามีบทบาทมากขึ้น ซึ่งก็ทำให้ ทีมทำไม่ต้องคุยกับ บริษัททีมขายก็ได้ทำให้มีโอกาสมากขึ้น ในอนาคตคนทำกับคนขายจะเป็นคนเดียวกันก็ได้แต่ในเวลานี้เกมที่ทำลงเครื่อง Console ยังต้องคุยกับบริษัทที่เป็น Publisher อยู่ครับ

ในการคุยกันระหว่าง 2 บริษัทจะต้องมีหัวหน้าทั้ง 2 ฝ่าย ฝ่ายที่ทำเราจะเรียกเขาว่า Director และคนจากฝ่ายขายเราจะเรียกเขาว่า Producer ฉะนั้นเวลาคุยกันคนที่จะทะเลาะกันจะอยู่ระหว่าง 2 คนนี้ Director จะพยายามทำเกมด้วยคำคิดที่ว่า เกมเป็นงาน เป็นศิลปะ ต้องทำให้ดีให้สวย ส่วน Producer จะมองว่า เกมเป็นสิ่งที่ทำเงินและขายได้ จะยกตัวอย่างปัญหาระหว่าง 2 คนนี้ ตามภาพด้านล่าง
ซึ่งแน่นอนว่าสุดท้ายแล้วส่วนใหญ่ Producer เป็นฝ่ายชนะครับ ผมว่าตรงนี้ก็เป็นเรื่องปกติ ใครมีเงินเยอะก็ได้เปรียบครับ

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

มาถึงตรงนี้จะเห็นว่า บางอย่างไม่ได้เป็นไปอย่างที่คนส่วนใหญ่เข้าใจกัน เช่น  ทำไม Designer ไม่ได้อยู่ในส่วนของ Artist หรือ ทำไม Sound Programmer ถึงแยกออกมาจากกลุ่ม Programmer อะไรแบบนี้เป็นต้น เดี๋ยวจะพยายามอธิบายเป็นส่วนๆกัน ในตอนถัดไปนะครับ สำหรับบทความนี้ขอเขียนไว้เท่านี้ก่อนครับ

26 สิงหาคม 2555

วิธีทำ 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 นะครับ



23 สิงหาคม 2555

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