- Part 2 LevelUp! Studio

วิธีวาดวงกลมด้วย SAI by Tua Poonsurapun

28
Aug0

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

1.เวลาวาดวงกลมด้วย SAI เราจะทำงานบนไลน์เวิร์คเลเยอร์ ที่ทำงานคล้ายเวคเตอร์ ซึ่งสร้างด้วยปุ่มนี้

2.ไลน์เวิร์คเลเยอร์จะมีรูปปากกาแบบนี้ และมีชุดเครื่องมืออีกชุดหนึ่ง แบบนี้

3.เราจะใช้เครื่องมือ curve อันนี้ ใช้ในการวาดเส้นโค้ง

4.คลิก 1 ครั้งเพื่อจุด แล้วใช้ shotkey กด delete หรือ end เพื่อหมุนแคนวาส คลิกอีกครั้งโดยไม่เลื่อนเคอเซอร์ เพื่อลากเส้นต่อ ในขั้นตอนนี้ควรใช้เมาส์หนูหรือทัชแพทถ้าเป็นแลปทอปเพื่อความนิ่ง

5.การใช้ shotkey เพื่อให้การหมุนแต่ละครั้งหมุนด้วยองศาเท่าๆกัน ทำซ้ำจนเป็นวงกลมที่สวยงาม แล้วกด enter เป็นอันสมบูรณ์

Tagged as: circle, sai

ไม่มีความเห็น

การสร้างสเตท Skill (ท่าไม้ตาย) ของฮีโร่ด้วย Unity Animator by Tua Poonsurapun

13
Jul0

1.หลังจากอนิเมทท่าทางตัวละครใส่สเตท skill ด้วย Spine เรียบร้อยแล้ว export นำเข้าสู่ Unity

2.คลิกขวาที่ SkeletonData เลือก Spine > Instantiate (Mecanim)

3.เราจะได้ Controller หน้าเหลี่ยมๆอย่างนี้มา พร้อมๆกับก้อน Spine Mecanim GameObject ซัมติงที่คืออะไรต้องไปถามโปรแกรมเมอร์

4.กาง Controller ออกมาเลือกที่สเตท skill

5.เปิดแท็บ Animator ลากสเตท skill เข้าไป เราจะได้ สเตท skill เข้าไปอยู่ใน Unity Animator

6.สร้าง panel ที่ sorting layer skill depth 50 ตั้งชื่อว่า skill

7.ลาก Spine Mecanim GameObject ไปไว้ใน panel นั้น เปลี่ยนชื่อมันเป็น Hero

8.เลือกที่ Hero แล้วไปที่แท็บ Animation เราจะสามารถจัดการอนิเมทบนไทม์ไลน์ของ Unity Animator ได้ต่อไป

Tagged as: animation, spine, Unity

ไม่มีความเห็น

การผูก bone กับภาพเข้าด้วยกันใน Spine by Tua Poonsurapun

28
Jun0

หลังจากเราได้รู้วิธีสร้าง skeleton กันไปแล้ว ต่อมาเราจะเรียนรู้วิธีผูก skeleton กับภาพเข้าด้วยกัน

1 เตรียมภาพคาแรคเตอร์ที่เราต้องการทำอนิเมท

2 แบ่งชิ้นส่วนตัวละครออกเป็นส่วนตามส่วนที่เคลื่อนไหวได้ โดยวาดส่วนที่ถูกชิ้นอื่นบังให้เต็มด้วย ดังเช่นนี้ เซฟทั้งหมดเข้าโฟลเดอร์เดียวกัน

3 เปิด Spine ขึ้นมา ที่เมนู Image นี่เป็นตัวที่จะชี้ไปยังโฟลเดอร์ภาพต้นทาง โดยเราจะเลือกโฟลเดอร์ที่ Browse

4 เมื่อเลือกโฟลเดอร์ต้นทางแล้ว รายชื่อภาพในโฟลเดอร์จะแสดงขึ้นมา ไอคอนสีแดงคือภาพที่ยังไม่ถูกใช้ในโปรเจค ส่วนภาพที่ถูกใช้แล้วจะแสดงด้วยสีเขียว

5 ลากไฟล์ลงมาบน work space เรียงลำดับบนล่างที่ Draw Order

Tip : เราสามารถใช้สคริปของโฟโตชอปหรืออิลลัสที่ทาง Spine แถมมา สร้างไฟล์ json ที่ระบุตำแหน่งและลำดับเลเยอร์ของภาพชิ้นส่วนแต่ละชิ้น และ import data เข้ามาได้ โดยกดที่นี่ โดยภาพที่ถูกอิพอร์ตเข้ามาจะเรียงลำดับบนล่างแบบเดียวกับในไฟล์โฟโตชอปหรืออิลลัสต้นฉบับ

6 สร้าง bone ตามชิ้นส่วนของตัวละครโดยคำนึงตามวิธีดังนี้ http://goo.gl/VyMiY9

7 เมื่อทำแล้ว ชิ้น bone และชิ้นของภาพจะถูกแสดงไว้ที่นี่

8 เราสามารถคลิกเมาส์ลากชื่อไฟล์ภาพแต่ละชิ้นเข้าไปในชิ้น bone

9 เมื่อเราขยับ/ หมุน/ ย่อ/ ขยาย bone แต่ละชิ้น ภาพที่ผูกอยู่ก็จะขยับตามไปด้วย

Tagged as: animated, spine, sprite

ไม่มีความเห็น

การสร้าง skeleton ใน spine เบื้องต้น by Tua Poonsurapun

30
May0

การสร้าง skeleton ใน spine เบื้องต้น
1.skeleton ใน spine จะเชื่อมต่อกันเหมือนต้นไม้ โดยมี ราก “root” เป็นจุดเริ่มต้นเสมอ

2.skeleton แต่ละชิ้นจะเชื่อมต่อกับ root เมื่อขยับ root แล้ว skeleton ที่เชื่อมจะขยับตามแบบเดียวกัน

3.skeleton ชิ้นหนึ่ง สามารถเป็นชิ้นแม่ของ skeleton อีกชิ้นหนึ่งได้ เมื่อขยับ skeleton ชิ้นแม่ skeleton ชิ้นลูกที่เชื่อมต่ออยู่จะขยับตามเหมือนเวลาเราขยับ root

4.การสร้าง skeleton ทำโดยเลือกที่ create แล้วเลือกที่ชิ้นที่เราต้องการให้เป็นชิ้นแม่ของชิ้นที่กำลังจะสร้าง (ในกรณีนี้คือ root)แล้วลากเมาส์ไปตามทิศทางที่ต้องการ