Monday, July 28, 2014

Guilty Gear Xrd part 2 - Animation & etc.

หวังว่า Part 1 จะไม่ผิดพลาดมากนักนะครับ ใครเจอผิดตรงไหนช่วยท้วงได้เลยครับผม
Part 1 - Modeling, Shading, Lighting

ทีนี้เรามาดู Part 2 กันต่อครับ ซึ่งขึ้นต้นได้น่าสนใจ

“การโยน Toon shade ใส่โมเดล ใครๆ ก็ทำได้
แต่จะสร้างอารมณ์แบบ 2D มันมีองค์ประกอบมากกว่านั้น”


ต้นฉบับ - http://www.4gamer.net/games/216/G021678/20140714079/

ตอนที่ Trailer แรกของเกมออกฉายนั้น ก่อให้เกิดหัวข้อถกเถียงเป็นวงกว้างกว่าเกมนี้เป็น 3D จริงๆ น่ะหรือ ซึ่งสิ่งที่ทำให้ผู้คนมากมายแยกไม่ออกนั้น ไม่ใช่ Toon shade แต่เป็น Animation

จากที่ผ่านมา แม้ว่าจะมีเกมและการ์ตูนมากมายพยายามทำให้ดู 2D ด้วยการใส่ Toon Shade แต่ด้วยวิธีการแอนิเมตแบบ 3D ทำให้ไม่ว่าดูอย่างไร ก็ไม่ใช่ 2D อยู่ดี ตัวอย่าง

ในขณะที่ Guilty Gear นั้น ดึงคอนเซปต์ของ Sprite Animation มาใช้อย่างเต็มตัว



ท่วงท่าใน Animation ทั้งหมดจะวาดเฟรมต่อเฟรมเหมือน Sprite แล้วถึง pose ตัวละครให้ตรงกับภาพวาดเหล่านั้น เรียกว่าเป็นการแอนิเมตแบบ pose-to-pose โดยไม่มี in between ก็ว่าได้





ทีวีญี่ปุ่นใช้ fps ที่ 24 อะนิเมะจึงมักใช้ 12 fps
แต่สำหรับเกมนั้นจะมี fps อยู่ที่ 30- 60 Guilty Gear จึงปรับใช้การแอนิเมตที่ 15 fps โดยตัวเกมยังคงทำการคำนวณผลที่ 60 fps ตามเดิม ทำให้สามารถกระโดดลอยตัว ขึ้นหน้าถอยหลัง ออกท่า และอื่นๆ ไหลลื่นได้เหมือนปกติ

นอกจากนี้ยังมีประเด็นเรื่องการจัดไฟแบบเฟรมต่อเฟรมจากบทความที่แล้ว ซึ่งยิ่งทวีความสำคัญขึ้นไปอีกสำหรับซีน Cinematic Instant Kill ซึ่งมีการเคลื่องไหวกล้องหลากหลายมาก ทั้งเข้าใกล้ถึงรูจมูก หรือบินวนรอบคาแรกเตอร์อย่างรวดเร็ว

ตัวอย่าง Cinematic Instant Kill ของ May ... ความเร็วจริง ต้องเพิ่ม 2 เท่านะครับ หรือถ้าใครใช้ Chrome ก็เลือก speed 2x ได้เลย



นอกจากนี้ ยังมีการสลับชิ้นส่วนโมเดลแบบเฟรมต่อเฟรม เนื่องจากหลายๆ ท่วงท่า ตัวโมเดลมีการเปลี่ยนรูปไปอย่างสิ้นเชิง ซึ่งไม่อาจทำ blend shape ได้เลยด้วยข้อจำกัดทาง Topology
 
ทรงผมต่างๆ ของ Milia
Joint ต่างๆ ยังบิดได้มากกว่าความเป็นจริงเพื่อให้สามารถหลอกทวงท่าตามต้นแบบ 2D ได้ เช่นใบหน้าที่สามารถย้าย ดวงตา จมูก ปากได้ค่อนข้างมาก

ตัวอย่าง Bedman ซ้ายคือโมเดลปกติ, กลางคือแบบสำหรับแก้ไข, ขวาคือโมเดลที่แก้ตามแบบแล้ว
สังเกตว่า ปาก ตา จมูก ถูกเลื่อนขึ้นให้เกิดที่ว่างบริเวณคาง


ส่วน ใบหน้าอื่นๆ ที่เป็นเอกลักษณ์การ์ตูนญี่ปุ่น อย่าง XD หรือ >_< นั้น ทางทีมใช้วิธีสลับหัวเลยครับ เหมือนที่สลับหัวสำหรับระยะใกล้-ไกลในบทความก่อน

การโพสต์ท่าตัวละครตามภาพวาด 2D เอง ก็ต้องมีการยืดหดและบิดหลอกค่อนข้างมาก เนื่องจากหลายๆ ท่า ไม่อาจทำแบบปกติได้เลยแม้ว่าจะเอามุมกล้องช่วยแล้วก็ตาม การ Scale joint ได้ในทั้งแกน x y z จึงมีความสำคัญมาก แต่เนื่องขจาก Unreal Engine 3 ไม่อาจทำได้ ทีมงานจึงจำเป็นต้องเขียนเพิ่มลงไปเองใน Source Code (แต่ Unreal Engine 4 ทำได้แล้ว)

ระบบที่พัฒนาขึ้นมานั้นสามารถนำไปใช้ประโยชน์ได้หลากหลายมาก สามารถ ทำ squash/stretch ให้การเคลื่อนไหวมีความเป็นการ์ตูนมากขึ้น หรือหมัดที่หนักก็จะมีการขยายมือให้ใหญ่ขึ้นได้ เป็นต้น
 
Scale joint เพื่อออกหมัด ใน Softimage
ท่าชนะของ May มุมจริง กับมุมด้านหน้า
สำหรับเอฟเฟคต่างๆ เช่น ควันและไฟ ตอนแรกทีมงานคิดว่าจะใช้แผ่นแบน แต่เนื่องจากท่าไม้ตายมักมีการหมุมมุมกล้องประกอบ จึงจำเป็นต้องทำเอฟเฟคให้ดูดีจากทุกมุม หลังจากเสียเวลาทดลองดูหลายๆ แบบ ทีมงานก็ตัดสินใจ ปั้นมันเฟรมต่อเฟรมเลย ซึ่งกลับกลายเป็นว่าประหยัดเวลากว่ามาก

หรือ Sato ที่สามารถละลายร่างตัวเองได้ ก็มีโมเดลต่างหากสำหรับท่าละลายแต่ละเฟรมเช่นกัน

ควัน จาก 2 มุม
โมเดลควัน สำหรับแต่ละ Frame


ทีนี้มาดูด่านต่อสู้กันบ้างครับ


ฉากหลังของเกม 2D ใช้เทคนิกวางฉากหลังซ้อนกันเป็นชั้นๆ โดยชั้นที่อยากให้รู้สึกใกล้ก็จะเลื่อนตามกล้องไวกว่า ในขณะที่ชั้นที่ต้องการให้อยู่ไกลจะเลื่อนช้า

ในทางกลับกันถ้าเป็น 3D การจะวางให้ได้ฉากอยากที่ต้องการ บางส่วนอาจต้องวางไกลจากกล้องมากเสียจนการขยับกล้องแทบไม่มีผล ซึ่งไม่ใช่สิ่งที่ทีมงานต้องการ ทีมงานต้องการให้ฉากหลังมีการเคลื่อนไหวตามกล้องเสมอ ไม่นิ่ง ดังนั้นฉากหลังในเกมนี้จึงถูกวางไว้ใกล้กว่าที่ตาเห็นมากและใช้การหลอกมุมกล้องเอาแทน

ตัวอย่างโมเดลของตึกที่เห็นในภาพด้านบน


ข้อดีอีกอย่างคือเวลาออกท่าที่มี Cut scene มักมีการหมุนกล้องรอบตัวละครด้วย การทำฉากด้วยวิธีนี้จะทำให้ได้สโคปงานที่เล็กลงกว่าการทำเมืองขนาดเต็มมาก

ตัวอย่าง background ที่ใช้เทคนิกนี้ ด่านของ I-no



ส่วน Cut scene ที่ไม่ได้เกิดในฉากต่อสู้ จะใช้แผ่นแบนธรรมดา หรือใช้เพียงโมเดลง่ายๆ และอาศัย paint เอา ตัวอย่าง


ตัวประกอบในระยะไกลส่วนใหญ่ก็เป็นแค่แผ่นภาพเช่นกัน เช่นใน ฉากนี้ 

...
...

ทีนี้ก็มาถึงส่วนปลีกย่อยละครับ

สำหรับเกมต่อสู้นั้น ระบบโจมตีจะใช้การวาดกล่องในระนาบ 2D เพื่อกำหนดจุดโจมตี โดยแบ่งเป็น 2 อย่าง คือ คือ Hurt box กับ Hit box สำหรับฝ่ายรับ และฝ่ายรุก

ยกตัวอย่าง เวลาตัวละครตัวนึงออกหมัด Hurt Box จะครอบอยู่ที่กำปั้น ในขณะที่อีกฝ่ายจะมี Hit Box ครอบอยู่รอบตัว เมื่อกล่องทั้งสองสัมผัสกัน ก็จะถือว่าการจู่โจมนั้นเข้าเป้าแล้ว

Hit box สีแดง... Hurt Box สีน้ำเงิน

ปัญหาที่เกิดขึ้น คือคาแรกเตอร์อาจมีบางส่วนของร่างกายที่อยู่ไกลจากกล้องออกไป ซึ่งจะทำให้มีการย่อขนาดหรือบิดเบี้ยวไปตาม Perspective และหลุดออกไปจากกล่องเหล่านี้ ซึ่งวิธีการแก้ปัญหานั้น ทำได้โดยการ Project ตัวละครแบบ แบน 70% (Parallel) แต่เพื่อความสวยงามจะเก็บ Perspective ไว้เพียง 30% ซึ่งเป็นวิธีที่ริเริ่มขึ้นในเกม Street Fighter 4

การแก้ปัญหาดังกล่าวสามารถทำได้เพียงแนวนอนเท่านั้น ไม่อาจแก้แนวตั้งได้


ต่อ มาคือการยืนซ้อนกันของตัวละครซึ่งทางทีมต้องการให้ดูเหมือน Sprite ซ้อนกัน 2 ภาพ วิธีที่ใช้ คือหลังจาก Project ตัวละครแล้ว ภาพที่ได้จะอยู่ต่างระนาบกันบน Z Buffer ผลที่ได้คือตัวละครจะมีตัวหนึ่งอยู่หน้า ตัวหนึ่งอยู่หลังเสมอ และยังมีผลพลอยได้คือไม่ต้องกังวลเรื่องโพลิก้อนทะลุกันเองในเวลาที่ยืนใกล้กันมากๆ หรือกระโดดใส่กัน


การ หันซ้ายหัวขวาเองก็ทำเหมือน Sprite เช่นกัน โดยการ Flip ตัวละครเลย ไม่ใช้หันกลับด้านแล้วสลับแขนขาเหมือน Street Fighter โดยพวกตัวหนังสือต่างๆ จะแยก Texture ไว้ต่างหาก


 Texture ตัวหนังสือนั้นจะทำหน้าที่คล้าย  Screen บน Photoshop กล่าวคือ ส่วนสีเทาจะไม่มีผลอะไร ส่วนสีดำและขาวจะเพิ่มความมืด/สว่างให้กับ Texture


และสุดท้ายก็จะเป็นพวก post process ต่างๆ เช่น Anti Aliasing, ฺBloom, Diffusion filter ถ้าสนใจดูภาพเพิ่มเติมในส่วนนี้ กดดูได้จากภาพนี้เป็นต้นไป

ซ้ายไม่มี post process, ขวาเปิดทุกอย่าง
ในเวอร์ชัน Arcade นั้น ทีมงานอยากเน้นให้เล่นง่ายไว้ก่อน จึงไม่มีการเล่นกล้องอะไรมากนัก แต่เป็นไปได้ว่าอาจเปิดโอกาสให้เล่นกับโหมด 3D มากขึ้นสำหรับเวอร์ชัน Console

สุดท้ายทีมงานกล่าวว่าพวกเขาได้เรียนรู้เทคนิกใหม่ๆ มากมายจากโปรเจคนี้ครับ

...
...

จบแล้วครับ ขอบคุณที่แวะมาอ่านกันนะครับ ^-^

3 comments:

  1. สุดยอดครับ :) ขอบคุณสำหรับความรู้ที่แชร์ครับ

    ReplyDelete
  2. อยากทราบข้อมูลเกี่ยวกับ r vertex channal และ z offset จังเลยค่ะ

    อยากรู้วิธีทำค่ะ :)

    ReplyDelete
    Replies
    1. Vertex นั้นจะสามารถเก็บค่าสี RGB ไว้ในตัวได้ครับ

      ทีนี้ค่า RGB ที่ใส่ไว้ จะเอาไปใช้ทำอะไร อันนี้ต้องให้ โปรแกรมเมอร์ เขียนเพิ่มเข้าไปในส่วน Render แล้วละครับ

      Delete