لقد تعلمت مؤخرًا عن الرسوم المتحركة الهيكلية للقماش، كما يمكنك أن ترى من الاسم، فهي مختلفة عن الرسوم المتحركة السابقة للقماش.
فيما يتعلق بالرسوم المتحركة الهيكلية، رأيتها لأول مرة عن طريق الصدفة في فريق Tencent، ولكن نظرًا لوجود عدد قليل جدًا من البرامج التعليمية على موقعها الرسمي على الويب، لا يوجد سوى عرض توضيحي صغير كمرجع، ومن الغريب أنه لا يمكن تشغيل الحالة التي تم تنزيلها رسميًا، ربما تكون عمليتي كذلك خطأ، ولكن لا يهم، دعنا نتعرف على هذه الرسوم المتحركة الهيكلية المتقدمة جدًا من خلال هذا العرض التوضيحي الصغير، وأنا أيضًا جديد عليها، وفهمي ليس شاملاً للغاية.
قبل أن نبدأ، دعونا نتعرف على AlloyStickتقول المقدمة الرسمية أن AlloyStick هو محرك رسوم متحركة هيكلي تم تطويره باستخدام تقنية HTML5 ويمكن استخدامه لتطوير الرسوم المتحركة بتنسيق HTML5 وتطوير ألعاب HTML5؛ ويتكون AlloyStick بشكل أساسي من محرك رسوم متحركة هيكلي ومحرر رسوم متحركة هيكلي يوفر هيكلًا قويًا الرسوم المتحركة باستخدام وظيفة التحرير، ومن خلال تعيين الإطارات الرئيسية للرسوم المتحركة والاعتماد على العلاقات الهيكلية والتعديل التلقائي القوي، يمكنك إنشاء رسوم متحركة هيكلية واقعية وحيوية، والتي يمكن تشغيلها بسلاسة على أجهزة الكمبيوتر والهواتف المحمولة والأجهزة اللوحية وغيرها من الأجهزة. حسنًا، من السهل قول ذلك وجذاب جدًا.
ما يسمى بالرسوم المتحركة للهيكل العظمي يعني حرفيًا الرسوم المتحركة المرسومة من خلال العظام. إذن كيف تبدو العظام هنا؟
نعم، حتى لو بدا الأمر هكذا، فهو يتماشى مع التوقعات، ففي النهاية، لديهم وظيفة توين تلقائية قوية جدًا. يمكنك التفكير في الأمر حيث أن كل جزء متصل بطريقة سلسة للغاية، يشبه إلى حد ما ريش PS.
نظرًا لأنها وظيفة قوية جدًا، فيجب أن تتمتع بمزايا فريدة خاصة بها.
لنبدأ العرض التوضيحي الصغير أدناه
تتكون الرسوم المتحركة الهيكلية بشكل أساسي من ثلاثة أجزاء: بيانات الهيكل العظمي، وبيانات السلخ، وبيانات الرسوم المتحركة. باستخدام هذه الأجزاء الثلاثة من البيانات، يمكن لـ AlloyStick تقديم رسوم متحركة هيكلية حية. بالطبع، لا يلزم إنشاء هذه الأجزاء الثلاثة من البيانات يدويًا، بل تحتاج فقط إلى تشغيلها في المحرر لإنشاءها تلقائيًا. بعد إنشاء البيانات، يمكنك استدعاء الرسوم المتحركة الهيكلية وتنفيذها على النحو التالي. الخطوة الأولى هي تقديم Alloysk.js، ثم إضافة المورد Resource.js. تجدر الإشارة إلى أنه يتم تقديم ملف png المسطح مع علامة img، وبالطبع يمكن أيضًا تحميله في js. يتضمن Resource.js بيانات السلخ وبيانات علاقة العظام وجميع بيانات الإجراء بما في ذلك أسماء الرسوم المتحركة والمعلمات. في الخطوة الثانية، يتم إنشاء كائن المسرح Stage وكائن الدور Armature وفقًا لملف المورد الجديد، ويدير كائن Stage كائن Armature. طريقة اللعب هي الطريقة الأساسية، حيث تسمح للشخصية بتشغيل رسوم متحركة مختلفة. يمكنك إضافة أحداث للتبديل بين الإجراءات المختلفة. وأخيراً ابدأ المرحلة Stage.start().
// الخطوة الأولى هي إنشاء لوحة قماشية <canvas id=canvas width=800px height=600px> عذرًا، متصفحك لا يدعم اللوحة القماشية. يوصى باستخدام متصفح Chrome</canvas>
// الخطوة الثانية هي تقديم موارد الجلد على شكل صور أو js <img src=img/texture.png id=xiaoxiaoImg style=display:none;>
// الخطوة الثالثة تقدم Alloysk.js وresource.js // الخطوة الرابعة هي التحضير var Canvas = document.getElementById('canvas')var TextImg = 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); المشهد، ويمكنك تمرير حلقة رد الاتصال للاتصال // الخطوة الأخيرة لتنفيذ الرسوم المتحركة scene.start(); التأثير يشبه الصبي الذي يركض أدناه، سامحني لأنني لم أفتح الباب أمام إنشاء رسوم متحركة بتنسيق GIF حتى الآن...يمكن تحميل الكود ذي الصلة على جيثب https://github.com/aurora-polaris/canvas3
وبما أنني جديد على هذا الأمر، فأنا لا أفهم الكثير من الأشياء جيدًا، وسأقوم بتسويتها عندما يكون لدي الوقت.
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.