เมื่อเร็วๆ นี้ ฉันได้เรียนรู้เกี่ยวกับแอนิเมชันโครงกระดูกของ Canvas ดังที่คุณบอกได้จากชื่อ มันแตกต่างจากแอนิเมชั่น Canvas ก่อนหน้านี้ ฉันสงสัยว่าคุณสนใจที่จะเรียนรู้เกี่ยวกับมันหรือไม่
เกี่ยวกับแอนิเมชั่นโครงกระดูก ฉันเห็นมันครั้งแรกโดยบังเอิญในทีม Tencent แต่เนื่องจากมีบทช่วยสอนน้อยมากบนเว็บไซต์อย่างเป็นทางการ จึงมีเพียงการสาธิตเล็กน้อยสำหรับการอ้างอิง และกรณีที่ดาวน์โหลดอย่างเป็นทางการไม่สามารถเรียกใช้ได้อย่างน่าประหลาด บางทีการทำงานของฉันก็เป็นเช่นนั้น ผิด แต่มันไม่สำคัญ มาเรียนรู้เกี่ยวกับแอนิเมชันโครงกระดูกขั้นสูงนี้ผ่านการสาธิตเล็กๆ น้อยๆ นี้ด้วย ฉันยังใหม่กับมัน และความเข้าใจของฉันก็ยังไม่ครอบคลุมมากนัก
ก่อนที่เราจะเริ่ม มาเรียนรู้เกี่ยวกับ AlloyStick กันก่อนการแนะนำอย่างเป็นทางการกล่าวว่า AlloyStick เป็นเอ็นจิ้นโครงกระดูกที่พัฒนาขึ้นโดยใช้เทคโนโลยี HTML5 และสามารถใช้สำหรับการพัฒนาแอนิเมชั่น HTML5 และการพัฒนาเกม HTML5 ส่วนใหญ่ประกอบด้วยเอ็นจิ้นแอนิเมชั่นโครงกระดูกและโปรแกรมแก้ไขแอนิเมชั่นโครงกระดูกให้ประสิทธิภาพโครงกระดูก ด้วยฟังก์ชันการแก้ไข โดยการตั้งค่าคีย์เฟรมแอนิเมชันและอาศัยความสัมพันธ์แบบทวีตอัตโนมัติและโครงกระดูกที่มีประสิทธิภาพ คุณสามารถสร้างแอนิเมชั่นโครงกระดูก Canvas ที่สมจริงและสดใส ซึ่งสามารถทำงานได้อย่างราบรื่นบนพีซี โทรศัพท์มือถือ แท็บเล็ต และอุปกรณ์อื่นๆ พูดง่ายและมีเสน่ห์มาก
สิ่งที่เรียกว่าแอนิเมชั่นโครงกระดูกหมายถึงแอนิเมชั่นที่วาดผ่านกระดูกจริงๆ แล้วกระดูกที่นี่มีลักษณะอย่างไร?
ใช่ แม้ว่าจะมีลักษณะเช่นนี้ แต่ก็เป็นไปตามความคาดหวัง ท้ายที่สุด มีฟังก์ชันทวีนนิ่งอัตโนมัติที่ทรงพลังมาก คุณคงนึกถึงมันได้เนื่องจากทุกส่วนเชื่อมต่อกันในลักษณะที่ราบรื่นมาก คล้ายกับขนนก PS
เนื่องจากเป็นฟังก์ชันที่ทรงพลังมาก จึงต้องมีข้อดีเฉพาะตัวของตัวเอง
มาเริ่มการสาธิตเล็กๆ น้อยๆ ด้านล่างกันดีกว่า
แอนิเมชันโครงกระดูกส่วนใหญ่ประกอบด้วยสามส่วน: ข้อมูลโครงกระดูก ข้อมูลสกิน และข้อมูลแอนิเมชัน ด้วยข้อมูลทั้งสามส่วนนี้ AlloyStick จึงสามารถเรนเดอร์แอนิเมชันโครงกระดูกที่สดใสได้ แน่นอนว่าข้อมูลทั้งสามส่วนนี้ไม่จำเป็นต้องสร้างขึ้นด้วยตนเอง เพียงแต่ต้องดำเนินการในโปรแกรมแก้ไขเพื่อสร้างข้อมูลโดยอัตโนมัติเท่านั้น หลังจากสร้างข้อมูลแล้ว คุณสามารถเรียกใช้และดำเนินการแอนิเมชันโครงกระดูกได้ดังต่อไปนี้ ขั้นตอนแรกคือการแนะนำ Alloysk.js จากนั้นจึงเพิ่มทรัพยากร resources.js ควรสังเกตว่า PNG ที่สกินแล้วนั้นถูกนำมาใช้กับแท็ก img และแน่นอนว่าสามารถโหลดใน js ได้เช่นกัน resources.js ประกอบด้วยข้อมูลสกิน ข้อมูลความสัมพันธ์ของกระดูก และข้อมูลการกระทำทั้งหมด รวมถึงชื่อและพารามิเตอร์ของแอนิเมชัน ในขั้นตอนที่สอง ออบเจ็กต์สเตจ Stage และออบเจ็กต์บทบาท Armature จะถูกสร้างขึ้นตามไฟล์ทรัพยากรใหม่ และออบเจ็กต์ Stage จะจัดการออบเจ็กต์ Armature วิธีการ playTo เป็นวิธีการหลักที่ช่วยให้ตัวละครสามารถเล่นแอนิเมชั่นแอ็กชั่นต่างๆ ได้ คุณสามารถเพิ่มเหตุการณ์เพื่อสลับระหว่างแอคชั่นต่างๆ ได้ ในที่สุดก็เริ่มต้นสเตจ stage.start()
// ขั้นตอนแรกคือการสร้างแคนวาส <canvas id=canvas width=800px height=600px> ขออภัย เบราว์เซอร์ของคุณไม่รองรับแคนวาส ขอแนะนำให้คุณใช้เบราว์เซอร์ Chrome</canvas>
// ขั้นตอนที่สองคือการแนะนำทรัพยากรสกินในรูปแบบของรูปภาพหรือ js <img src=img/texture.png id=xiaoxiaoImg style=display:none;>
// ขั้นตอนที่สามแนะนำ Alloysk.js และ resources.js // ขั้นตอนที่สี่คือการเตรียม var canvas = document.getElementById('canvas')var textureImg = document.getElementById('xiaoxiaoImg')var scene = new alloyge.Scene( canvas.getContext('2d'))var player = new alloysk.Armature('xiaoxiao',textureImg)//ขั้นตอนที่ห้าคือการสร้างแอนิเมชั่น// พารามิเตอร์ความเร็วของการดำเนินการ: สถานะการดำเนินการ, ความเร็ว, ความเร็วเริ่มต้น, ไม่ว่าจะดำเนินการเสมอหรือไม่ คุณยังสามารถตั้งค่าการดำเนินการอื่น ๆ ได้ที่นี่ เช่น ม้วนตัว// อัปเดตสถานะการดำเนินการหลายรายการ: วิ่ง วิ่ง ม้วน ม้วนอย่างง่าย โยนบางสิ่งด้วยมือขวา วินาทีตี ต่อยด้วย มือขวา // jump_kick เตะข้าง มากระตุ้น ผ่อนคลาย ผ่อนคลาย สบู่ หยิบสบู่ player.playTo('run',50,15,true);// ตำแหน่งแอนิเมชัน player.setPos(300,300); player.setEaseType(true);scene.addObj(player); // เริ่มมอนิเตอร์ FPS (ไม่จำเป็นต้องใช้ฟังก์ชันเสริม) alloy.monitorFPS(scene); ฉาก และคุณสามารถส่งผ่านลูปการโทรกลับเพื่อโทร // ขั้นตอนสุดท้ายในการดำเนินการฉากแอนิเมชั่น start(); เอฟเฟ็กต์เหมือนรันนิ่งบอยด้านล่าง ขออภัยที่ยังไม่เปิดประตูให้ทำ gif Animation เลย...รหัสที่เกี่ยวข้องสามารถอัปโหลดไปยัง github https://github.com/aurora-polaris/canvas3
เนื่องจากฉันยังใหม่กับสิ่งนี้ ฉันจึงไม่ค่อยเข้าใจหลายสิ่งดีนัก ฉันจะจัดการกับมันเมื่อมีเวลาว่าง
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network