عروض Spine التوضيحية

يتجاوز Spine حدود الرسوم المتحركة الثنائية الأبعاد التقليدية. توضح العروض أدناه بعض الطرق التي يمكن لفنانيك ورسّاميك ومبرمجيك استغلالها من خلال الاستفادة من مسارات العمل والإمكانات المتاحة في Spine لإنشاء ألعاب مذهلة.

جميع العروض أدناه هي عروض حية تستخدم وقت التشغيل spine-ts الخاص بنا لـ WebGL. اكتشف كيف استخدمنا أوقات تشغيل Spine في هذه العروض من خلال استكشاف شفرة المصدر لكل عرض.

مقارنة Spine بأوراق الصور المتتابعة

Spine
All animations, all frame rates
0.18 MB
Sprite sheet
1 second of animation @ 30FPS
3.39 MB = 18x larger

تتطلب الرسوم المتحركة التقليدية باستخدام أوراق الصور المتتابعة صورة لكل إطار من الرسوم المتحركة، مما ينتج عنه أوراق صور ضخمة. كل رسم متحرك إضافي يزيد بشكل كبير من مساحة القرص والذاكرة اللازمة للعبة، خاصة عند معدلات الإطار اللازمة لتشغيل سلس. سرعان ما يتحول الأمر إلى عبء هائل على فِرق الرسوم، كما يتأثر المنتج النهائي عندما يجب تقليل عدد الرسوم المتحركة لتلبية قيود الحجم.

تخزن الرسوم المتحركة في Spine البيانات الخاصة بالعظام والرسوم المتحركة فقط، إلى جانب مجموعة واحدة من الصور الفردية التي يتم استخدامها لكل الرسوم المتحركة. يتيح لك ذلك إضفاء الحيوية على ألعابك بملءها برسوم متحركة فريدة من نوعها. كما أن رسوم Spine المتحركة يتم استيفاؤها بين الإطارات بحيث يكون التشغيل دائمًا سلسًا تمامًا، بغض النظر عن معدل الإطارات.

قارن متطلبات الذاكرة ومساحة القرص لرسوم Spine المتحركة مع رسوم أوراق الصور المتتابعة.

سرعة الرسوم المتحركة
 

Spine مع الرسوم المتحركة القائمة على الإطارات

بالرغم من أن Spine يستغني بشكل كبير عن الحاجة للرسوم المتحركة التقليدية إطارًا بإطار، إلا أنه لا يزال بالإمكان استبدال الصور عند الحاجة. على سبيل المثال، تغيير منظور الجذع أو جناح يرفرف، تعبيرات وجه بديلة، أو وميض فوهة السلاح.

تتيح لك آليات الفتحات والملحقات وترتيب الرسم في Spine دمج الرسوم المتحركة إطارًا بإطار ضمن رسوم Spine المتحركة الديناميكية الأخرى بسهولة. والأفضل من ذلك، يمكن لـ Spine تحريك الصور القائمة على الإطارات، كما هو موضح في هذا العرض من خلال مقياس رأس الكائن الفضائي المنفجر.

الانتقالات والطبقات

Smooth
Abrupt

من المآخذ الشائعة على الألعاب الثنائية الأبعاد هو نقص الانتقالات السلسة في الرسوم المتحركة. في الألعاب الثلاثية الأبعاد، يمكن حساب الانتقالات بين الرسوم المتحركة ديناميكيًا أثناء وقت التشغيل. بل يمكن أيضًا مزج الرسوم المتحركة، فعلى سبيل المثال المزج بين المشي والجري بنصف لكل منهما. في الألعاب الثنائية الأبعاد بدون Spine، يكون المزج مستحيلًا وعادة ما تكون الانتقالات مفاجئة. يمكن للفنانين إنشاء إطارات يدويًا لكل انتقال ممكن، ولكن هذا لا يساعد عند إمكانية مقاطعة الرسوم المتحركة في منتصف التشغيل.

يعيد Spine مزايا العالم الثلاثي الأبعاد إلى الرسوم الثنائية الأبعاد. حيث تعمل أوقات تشغيل Spine على الانتقال بسلاسة وبشكل ديناميكي من رسم متحرك إلى آخر، مما يمنح شخصياتك مظهرًا طبيعيًا وانسيابيًا. كما يتيح التكديس مزج الرسوم المتحركة فوق بعضها البعض، مثل تشغيل حركة إطلاق النار أثناء الجري، أو المزج بين المشي والعرج بشكل متزايد كلما زاد الضرر.

سرعة الرسوم المتحركة
 

تشويه الشبكة

يمكن لشخصية Spine المكونة من صور ثنائية الأبعاد صلبة أن تعطي نتائج ممتازة بالفعل، مثل شخصية Spineboy في العرض أعلاه. ولإضفاء المزيد من الحيوية على شخصياتك، يقدم لك Spine مزيدًا من حيل العالم الثلاثي الأبعاد على شكل الشبكات والأوزان. مع الشبكات، لا تبقى الصور ثابتة ويمكن ثنيها وتشويهها كما تريد. أما الأوزان فتربط الشبكات بالعظام بحيث يتشوه الشكل تلقائيًا مع تحريك العظام.

يمكن للشبكات أيضًا تحسين أداء لعبتك عن طريق تقليل استخدام معدل الملء من خلال عدم رسم الأجزاء الشفافة من الصور. وهذا مهم بشكل خاص على الأجهزة المحمولة.

تم توفير الرسومات المذهلة لهذا العرض من قِبل Hwadock (المعروف أيضًا باسم dugy). تابعه على تويتر وعلى مدونته.

إظهار العظام
إظهار المثلثات

الأشكال

تُعد ميزة الأشكال في Spine مثالية لتوفير التخصيص والتنوع مع الحفاظ على حجم العمل ضمن المعقول. فباستخدام الأشكال، يكفي إجراء الرسوم المتحركة مرة واحدة فقط، ثم يمكنك تطبيق أشكال مختلفة على الهياكل مع إعادة استخدام جميع الرسوم المتحركة. ولأقصى قدر من المرونة، تسمح أوقات تشغيل Spine بدمج أجزاء من أشكال مختلفة أثناء وقت التشغيل، لتغطية جميع احتياجات التخصيص.

تسمح الأشكال للاعبين بإضافة لمستهم الخاصة إلى عالم لعبتك عن طريق تخصيص مظهر شخصياتهم، سواء بملابس جديدة أو أسلحة أو إضافات أخرى. كما تتيح لك الأشكال الاستفادة بشكل أكبر من رسومك المتحركة: امزج ووافق رسومات الأعداء والعناصر وغيرها من كائنات اللعبة لزيادة التنوع بجهد قليل.

يمكن العثور على رسوم هذا العرض في حزمة الشخصيات 2D Anim Heroes الخاصة بـ Unity.

أشكال عشوائية

الديناميكا العكسية

دعم Spine للديناميكا العكسية يسمح بحركات واقعية وديناميكية يصعب أو يستحيل تحقيقها بطرق أخرى. كما يُمكنك من اعتماد تقنيات تحريك أكثر تقدمًا، حيث يمكن التحكم بالوضعيات المعقدة باستخدام عدد قليل من العظام.

نظرًا لأن Spine لا يعتمد على التجميد أو التهيئة المسبقة، تتألق ميزة الديناميكا العكسية في وقت التشغيل. من خلال تحديد مواقع العظام ديناميكيًا أثناء وقت التشغيل، تسمح قيود الديناميكا العكسية لشخصيتك بالتفاعل بسهولة مع البيئة، مثل التصويب نحو الأعداء أو ملامسة الأقدام للمنحدرات والعوائق على الأرض، وغير ذلك الكثير. في هذا العرض، يظل Spineboy متوازنًا على لوح طائر يتحكم فيه المستخدم أثناء تشغيل رسم متحرك في نفس الوقت.

جرّبه بنفسك! اسحب الدوائر الحمراء لتحريك Spineboy ديناميكيًا. يسمح زر إطلاق النار وزر القفز وخيار التصويب بمزج الرسوم المتحركة فوق حركة الانتظار.

تصويب
إظهار العظام

المزج الإضافي للرسوم المتحركة

عند تشغيل الرسوم المتحركة على مسارات منفصلة، عادةً ما تحل الوضعية في المسارات العليا محل وضعيات المسارات الأدنى. أما مع المسار الإضافي، فيتم إضافة وضعيته إلى نتيجة المسارات الأدنى. يتيح ذلك مزج وضعيات رسوم متحركة مستقلة بمستويات مختلفة من التأثير، مثل مزج تعابير الوجه: 50% سعيد، 20% غاضب، 30% متحمس.

يمتلك البوم في هذا العرض 4 رسوم متحركة، واحدة لكل اتجاه. يتم مزج الوضعيات المستقلة لكل من هذه الرسوم المتحركة وفقًا لموضع مؤشر الماوس بالنسبة لمركز اللوحة.

قيود المسار

في كثير من الأحيان، يتبع جزء من الشخصية مسارًا مفتوحًا أو مغلقًا. بدلًا من تحريك هذه الحركة يدويًا، يمكن استخدام قيود المسار في Spine لجعل العظام تتبع المسار تلقائيًا. يتألف مسار بيزير المركب من مجموعة من النقاط المتصلة التي تسمح لك بثني المسار وتشكيله. يمكن حتى تحريك المسار نفسه أو ربطه بالعظام، بحيث يتشوه المسار تلقائيًا عند تحريك العظام.

في هذا العرض، تم ربط شبكة من الكرمة بعظام مقيدة بمسار. وكلما زاد عدد الرؤوس في الشبكة، كلما أصبحت الانحناءات أكثر سلاسة.

يمكن أيضًا استخدام قيود المسار بفاعلية أثناء وقت التشغيل. حرّك المقابض الحمراء لتعديل المسار ديناميكيًا وشاهد الكرمة وهي تتبعه بانسيابية!

إظهار العظام والمسارات

تُتيح قيود المسار إنشاء تجهيزات قوية، كما يظهر في Stretchyman في هذا العرض. بالنسبة للذراعين والساقين، تم ربط الشبكات بكثير من العظام الصغيرة ثم تم تقييدها بمسارات للأطراف. بعد ذلك يتم ربط تلك المسارات بالعظام التي يمكن تحريكها للتحكم في الأطراف. يسمح هذا الإعداد بالتحكم في عدد كبير من العظام باستخدام عدد قليل من العظام، مما يجعل تحريك الشخصية أسهل، كما أنه في وقت التشغيل لا يلزم سوى ضبط بضع عظام للتشكيل الديناميكي.

حرّك المقابض الحمراء واجعل Stretchyman يرقص!

إظهار العظام والمسارات

القصّ

في بعض الأحيان، يجب إخفاء أجزاء من الرسوم المتحركة جزئيًا، كما في هذا المثال حيث يخرج Spineboy من بوابة. هنا تكون ميزة القص مفيدة عن طريق حصر العرض في مساحة مضلعة محددة. لا تظهر سوى الأجزاء من الهيكل الموجودة داخل هذه المنطقة المحددة والقابلة للتحريك. يتيح ذلك العديد من التأثيرات التي لا يمكن تحقيقها بطرق أخرى، مثل النوافذ وتأثيرات الإضاءة وغير ذلك. يمكن أيضًا جعل القص يؤثر فقط على جزء محدد من الهيكل، مثل عرض أشعة سينية على شخصية تمر خلاله.

إظهار المثلثات

قيود التحويل

قد يكون تحريك هياكل معقدة تحتوي على العديد من الأجزاء المترابطة أمرًا مرهقًا. تعمل قيود التحويل في Spine على تبسيط ذلك، مما يسمح بإنشاء تجهيزات أقوى. فعند تقييد تحويل عظمة بعظمة أخرى، يكفي تحريك عظمة واحدة بينما يتم ضبط العظام الأخرى تلقائيًا. ورغم بساطة هذه الميزة ظاهريًا، إلا أن التجهيزات المتقدمة يمكنها الاستفادة منها لتلقائية سلوك الهيكل أثناء تشكيله.

تعد قيود التحويل رائعة أيضًا عند تحريك الآلات، مثل الدبابة في هذا العرض. بدلًا من وضع مفاتيح لكل عجلة على حدة، يتم تحريك عجلة واحدة بينما تتبعها العجلات الأخرى عبر قيد التحويل. كما يمكن استخدام الإزاحة أو المزج لإضفاء تمايز على الأجزاء المقيدة.

يتم تحريك جنزير الدبابة باستخدام قيد المسار، وهو ما سيكون مستحيلًا بدون المسارات. المسار نفسه مرتبط بالعجلات، لذا ينثني تلقائيًا عند صعود العجلات وهبوطها.

إظهار العظام والمسارات

في هذا العرض، يتم تقييد دوران العجلتين الصغيرتين بدوران العجلة الكبيرة. كما يتم تقييد انتقال العجلة الكبيرة بحيث تبقى بين العجلتين الصغيرتين.

إزاحة الدوران
 
مزيج النقل