การผูก 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

เปิด Animated GIF เป็น frame ด้วย Photoshop by

21
Feb
2
ปัญหาหลักๆในการที่จะ edit รูป animated gif แบบรูปด้านล่างนี้
ที่หลายๆคนมักจะเจอนะครับ ก็คือเปิดมันใ้้ห้ออกมาเป็น frame ๆไม่ได้
พอลากไฟล์ .gif เข้าไปใน photoshop ทีไร มันก็ขึ้นหน้าต่างนี้ขึ้นมา
แล้วภาพ .gif ของเราก็กลายเป็นภาพเดียวตลอดเลย
ถ้าเป็นเมื่อก่อนก็ไม่มีปัญหาหรอกครับ ถ้าเราัยังมีเจ้า Imageready อยู่
แต่ ณ วันนี้(CS3+ มั้ง) เขาก็ได้จากเราไปแล้วครับ
แต่ว่าเราก็ยังมีความหวังอยู่ครับ วิธีการนั้นก็ไม่ได้ยากเลยครับ แค่ไม่รู้เท่านั้นเอง
วิธีการคือ
1. ไปที่ File > Import > Video Frames to Layers
2. จากนั้น Photoshop ก็จะขึ้นหน้าต่างเลือกไฟล์ที่จะเิปิดมาครับ
ให้เราเลือกไปที่ Folder ที่มีไฟล์ .gif ของเราอยู่ แต่เมื่อเข้าไปถึงก็จะพบว่าไม่มีไฟล์ของเราให้เลือก
แถมกดไปที่ File type: ก็ไม่มีให้เลือกอย่างอื่นอีกต่างหาก
3. ถึงขั้นนี้แล้วเราก็อย่างไปยอมครับ พิมพ์ชื่อไฟล์ของเราเข้าไปดื้อๆเลย!
เมื่อกด Load ปุปเราก็จะได้ของที่เราอยากได้ครับ ไฟล์ gif ที่แบ่งออกมาเป็น frame แล้ว
กู้เงิน | เศรษฐกิจพอเพียง | สินเชื่อบุคคล | สมัครบัตรกดเงินสด | สินเชื่อ | เงินกู้ด่วน | ยืมเงินทรูมูฟ | เงินด่วนนอกระบบ