เทคนิคทำ Animation Frame by Frame ใน SPINE ให้สะดวกขึ้น by

10
Dec
0

1.เลือกรูปทั้งหมด แล้วลากไปใส่ Slot ทีเดียว

ตอนที่เรา SETUP เพื่อจะทำ animation แบบ frame by frame เราจะสร้าง slot ไว้แค่อันเดียว แล้วนำรูปทั้งหมดไปใส่ที่ slot นั้น ถ้าต้องมานั่งลากทีละรูปๆ ก็จะช้า เราสามารถ select รูปทั้งหมด แล้วลากไปใส่ slot ทีเดียว

2.ใช้ Hot Key “R” เพื่อเลื่อน frame

ถ้าเราทำงานโดยใช้เม้าส์อย่างเดียว เราต้องเลื่อนเม้าส์ไปมาระหว่างจุดที่1-2 เราต้องเลื่อน frame ถัดไปที่จุดที่ 1 แล้วมาเลือกรูปใน slot ที่จุดที่2

แต่ถ้าเราใช้ Hot Key “R” เพื่อเลื่อน frame เราก็ไม่ต้องลากเม้าส์ไปๆมาๆ ใช้เม้าส์กดเลือกรูปที่จุดที่ 1 ได้เลย

ปล.วิธีนี้ต้องไปset frame สุดท้าย (เส้นสีส้ม) ไว้ที่ frame ที่ต้องการก่อน ไม่งั้นเรากด R ตอนที่อยู่ frame สุดท้ายแล้วมันจะเด้งกลับมาที่ frame รองสุดท้าย

วิธีใส่แสงประกอบฉากให้กับตัว Spine (Unity) by

31
Jul
0

Spine  นั้นจะรับแต่ Point Light เท่านั้น ดังนั้นต้องเลือกให้ถูกนะ ขั้นตอนการใส่แสง Ambient ก็มีดังนี้

รูปก่อนการใส่แสง Ambient

  • เลือกส่วนประกอบของ Spine ของเรา ที่มี Skeleton Parts Renderer

  • ที่สคริปท์ Skeleton Parts Renderer เปลี่ยน Shader เป็น Spine/Skeleton Lit

  • จากนั้น Spine ที่เราเลือกจะดำมืดไป ไม่ต้องตกใจเพราะเรายังไม่ได้ใส่แสงให้มันนั่นเอง

  • วิธีการใส่แสง ก็ไปที่เมนู GameObject -> Light -> Point Light

  • สร้างเสร็จก็จัดตำแหน่งให้เรียบร้อย และปรับค่าของแสงได้ที่สคริปท์ Light
    Type – ให้ใช้เป็น Point ไว้ แบบอิ่นจะไม่มีผลกับ Spine
    Range – ระยะของแสงของเราที่จะให้มีผล
    Color – ปรับสีของแสง Ambient
    Intensity – ปรับความเข้มของแสง เวลามีหลายๆแสงชนกัน Intensity สูงจะแสดงผลชัดกว่า

  • หลังจากตั้งค่าเสร็จก็จะได้รูปดังนี้ ชมพูชวิ้งแว้บ เท่านี้ก็เรียบร้อย

  • อันนี้เป็นตัวอย่างหลังจากใส่จุดกำเนิดแสงเพิ่ม

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

13
Jul
0

 

 

 

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

 

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

sample28a

 

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

sample28b

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

sample28c

 

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

sample28d

 

 

 

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

sample28e

 

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

 

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

sample28f

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

28
Jun
0

 

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

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

sample27a

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

sample27b

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

sample27c

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

sample27d

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

sample27e

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

sample27f

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

sample27g

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

sample27h

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

sample27i

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

sample27j

[UNITY] [Spine] Separator by

31
May
0

การใช้ Spine ร่วมกับ UNITY นั้นทำให้การทำงานง่ายขึ้นมาก แต่ก็มีหลายอย่างที่ถูกจำกัดไว้ ถ้าหากเราอยากแบ่ง Order in Layer ของ Spine ให้มีหลายชั้น เพื่อที่จะได้เอา Particle หรือ Object อื่นๆมาสอดไว้ตรงกลางก็จะต้องทำตามขั้นตอนดังนี้

  • หลังจากสร้าง Spine GameObject (skeleton) แล้วเราก็จะมี หน้าตาแบบนี้ และประกอบด้วย Script ดังรูปนี้1
  • หากอยากให้ Spine GameObject นี้มีการแบ่ง Layer ให้คลิ๊กขวาที่ Skeleton Animation (Script)2
  • และเลือก Add Skeleton Render Separator3
  • จะได้ Script ใหม่โผล่ออกมาแบบนี้4
  • ให้แก้เลข Size ใต้หัวข้อ Separator Slot Names ให้เป็น 15
  • จะมี Element0 มาให้เลือก ตัวเลือกจะเรียงจากชั้นล่างสุดไปถึงชั้นบนสุดให้อยู่แล้ว ให้เราเลือกมา 1 อัน6
  • เมื่อเลือกแล้วให้คลิ๊กที่ Add the missing renderer7
  • จะได้ผลลัพท์ดังนี้8
  • จะเห็นว่า Spine GameObject ของเรามี ลูกโผล่ออกมา 2 ตัว และเมื่อลอง Play และ ดูที่ลูกของ Spine GameObject ก็จะเห็นดังนี้10 9

ปอลิง. สำคัญมาก หากอยากแยก Layer ระหว่าง Shadow และส่วนประกอบอื่นๆ ห้ามเลือก Shadow ให้เลือกของที่อยู่เหนือ Shadow ไป 1 ชิ้น จึงจะได้ผลลัพท์แบบที่ต้องการรรรรร