Header Image 18

استخدام الـثري دي لتحريك صورة ثابتة

استخدام الـثري دي لتحريك صورة ثابتة

 

blog_167

 

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

renoa

الحل لهذه المشكلة استوحيتها من أعمال الفنانة @renoa_heartilly التي كانت في هذه الأثناء تعرض مقطتفات من أعمالها باستخدام برنامج Live2D وطريقة تعامل البرنامج مع تحريك الشخصيات.  البرنامج يستخدم طريقة الـtweening لتحريك وتغيير عناصر الصورة الواحدة للإيحاء بالحركة.

blog_261

التحدي كان إيجاد آلية داخل محرك الألعاب Unity3D لتقليد ما يفعله برنامج  Live2D. قررت البناء على آلية استخدمتها سابقا في تحريك الأشجار. الآلية تعتمد على عنصر الـSkinned Mesh Renderer للجسم واستخدام خاصية الـBlendShapes للتحريك. لكن لتوظيفها لتحريك رسمة لشخصية سيحتاج لمجهود مضاعف لتجهيزها في برنامج 3D قبل تصديرها إلى unity3D.

 blog_269

 في أي برنامج 3D Editor, أنا سأستخدم 3D Studio MAX, قم بإنشاء سطح مستوي وأضف عليها الصورة التي تنوي تحريكها. ثم إبدأ بتقسيم حواف المثلثات Polygon Edges بحيث تقاسيم السطح ترسم حدود الشخصية. البرنامج سينشئ الحواف اللازمة بما يراها مناسب كما في الصورة المتوسطة. أنت عليك الآن إعادة ترتيب وتقسيم هذه الحواف لتصف شكل العام للصورة وتتبع الجسم.

blog_281

الخطوة التالية هو تحديد العناصر التي تود حركتها, وثم تقوم بإنشاء حواف على محاور حركتها. على سبيل المثال العينين والحواجب يجب على الحواف تتبع رسمتها.الفم كذلك. العنق والأذرع يجب أن تحددها الحواف كذلك. مع الممارسة, ستكتشف الحاجة لتقسيمات إضافية لتكوين مساحات بينية Buffer Zones لكي تحد من إنسياب الـTextures أثناء الحركة. هذه تفيد مثلا في المحافظة على شكل بؤرة العين أثناء تحريك الجفون.

blog_292

بعد الانتهاء من توزيع وتقسيم الحواف والنقط Edges and Vertices نقوم باستنساخ الجسم عدة مرات حسب عدد العناصر التي تود حركتها. على سبيل المثال, نسخة لإقفال جفون العيون. أو نسختين إذا كنت تود أن كل عين تقفل مستقلة عن العين الأخرى. نسخة لإقفال الفم. نسخة لتعبير الحواجب, وهكذا. في كل نسخة تقوم بتحريك نقاط العنصر المقصود بالشكل المطلوب.

في برنامج 3D Studio, تضيف مغيّر Modifier يسمى Morpher على الجسم الأصلي. يتيح لك Morpher أن تدمج النسخة الأخرى التي بها الحركة إلى النسخة الأصلية في ما يسمى قنوات. كل قناة تمثل تحول متدرج من الهيئة الأصلية إلى الهيئة المتغيرة. يطلق عليها لفظ Morph Target. وهذه يستطيع محرك Unity3D قراءتها عندما تستورد المجسم.

blog_291

بعد استيراد الجسم إلى داخل Unity3D ستلاحظ أن تحت عنصر Skinned Mesh Renderer قد أضيفت القنوات الناشئة من النسخ المتغيرة تحت مسمى BlendShapes. وهذه تستطيع تحريكها واستخدامها في الـAnimation States. قم بالتحريك والتجربة والدمج بين القنوات لتجعل صورة الشخصية تتحرك وكأنها تتحدث.

 morph_ani

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

blog_290

الآن لديك صورة متحركة لشخصيتك مكونة فقط من رسمة واحدة!

لا تنسوا أن تتركوا اسئلتكم واستفساراتكم في التعليقات.

blog_282

Leave a Reply

Your email address will not be published. Required fields are marked *