Header Image 15

العنكبوت: دراسة في البناء والحركة

blog_248

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

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

رسم العنكبوت كصورة

قررت تأخير دراسة حركة المشي وقفزت للبدء في بناء رسم للعنكبوت. بديهيا, العنكبوت يتكون من صدر وبطن, ومخلب للفم. الأرجل عبارة عن نسخ متكررة ولاكن باختلاف في الحجم. وعلى هذا أساس تم رسم “شخبطة” سريعة لاستشعار ووزن  التناسق بين الأجزاء. الخطوة التالية هي الإيهام بأن جسم العنكبوت مكسو بشعر خفيف. لعمل ذلك, نسخت طبقة جديدة من الأجزاء وعملت لها Blur كي يزيد المساحة الكلية للأجزاء تدرجيا وثم أضفت عليها ضوضاء Noise وثم Filter أخير يجعل حبات الضوضاء تجتمع وتتشكل على شكل خيوط رفيعة. الخطوة الثانية كانت إضافة الشعرات الكبيرة نسبيا وذلك تم برسمها يدويا. من دراسة صور للعناكب, هذه الشعرات تتركز على الأطراف وعلى المفاصل. وعشوائيا على باقي أجزاء الجسم. بعد ذلك أضفت مجددا Blur كي ينسجم الطبقات.

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

 blog_251blog_253

بناء جسم العنكبوت داخل المحرك

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

blog_250

بعد بناء العنكبوت تبدأ تتضح بعض التعارض بين كون العنكبوت يعكس الواقع, أو يكون شكله جميلا داخل عالم اللعبة. أول هذه التعارضات هو التساؤل: هل أجعل العنكبوت بالثمانة أرجل كاملة؟ أن بدأت بأربعة أرجل. وكما ترون هناك فراغ كبير وملحوظ. بعد ذلك جرّبت ثمانية أرجل, وكانت تسبب زحمة وتشوه وتخفي تفاصيل الحركة. بعد مراجعة فيديو لعبة ليمبو, لاحظت أنهم أداروا أرجل عنكبوتهم 90 درجة. فبدل من أن يكون العنكبوت مثلا له أربعة أرجل عن يمينه وأربعة عن يساره, فريق ليمبو جعلوه للأمام والخلف بدل من عن اليمين وعن الشمال. وذلك أنسب لمنظور رسم ذو بعدين 2D ويظهر حركة أرجل العنكبوت بشكل أفضل ومخيف أكثر. إضافة إلى ذلك هم لم يرسموا جميع أرجل العنكبوت. بناءا على ما لاحظت من طريقتهم, حذفت إحدى الأرجل الخلفية. الحجم الأكبر للرجول الخلفية ستعوض الماسحة الزائدة من المسح. ثم قمت بتقسيم الأرجل بين أمامية وخلفية. وقمت بتدويرهم كلا تجاه ناحيته. بذلك قللت تطابق الأرجل فوق بعضها نظرا للمنظور.

blog_245

تحريك عناصر العنكبوت

بعد الرسو على شكل العنكبوت وعدد أطرافه نبدأ في تصميم حركته. الصورة التي تتبادر في مخيلتي هي:

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

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

blog_252

على سبيل المثال هذا ملف الحركة للمشي. مدة دورة المشي ثانتين قبل أن تتكرر. إذا درست كيفية حركة المشي ستعرف أن الخطوة الواحدة تنقسم إلى أربع أقسام:

  • تحرك: وهي رفع القدم وتحريكها لموطئها الجديد.
  • لامس: وهي وهلة وضع القدم على الأرض.
  • تثبيت: القدم الآن مثبت على الأرض ريثما يقوم القدم الأخرى بالحركة.
  • الرفع: وهي حركة رفع القدم عن الأرض.

هذا التقسيم استخدمتها في تحديد الإطارات الأساسية Key Frames لحركة أرجل العنكبوت. وقمت بتحريك كل رجل وكل مفصل يدويا. ولكن هذا يعني أن جميع أرجل العنكبوت تتحرك بنفس الوقت.

blog_253

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

blog_254

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

    blog_249

أتمنى أن تكون المقالة قد أفدتكم.

Leave a Reply

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