كيفية عمل عقدة AnimationPlayer في محرك Godot

في محرك غودو -godot يوجد العديد من الأساليب للتلاعب في الكائنات وتحريكها حتى تظهر كانها رسوم متحركة، منها عقدة الوسيط tween وعقدة الصور المتحركة – AnimtedSprite واهمهم عقدة مُشغل الحركة AnimationPlyaer

تقنية التحريك – animation الخاصة بعقدة مُشغل الحركة – AnimationPlayer تقنية مبهرة بحق، فتمكنك من التحكم بخصائص الكائنات لانشاء تحريك او تلاعب في القيم فتظهر كانها رسوم متحركة مصنوعة من قبل برامج متخصصة.

في هذا المقال اشرح عقدة مُشغل الحركة animation player داخل محرك غودو، وكيفية عمل تلاعب بسيط. كما أن هذه العقدة هي نفسها متواجدة في جميع اصدارات المحرك. قد تختلف قليلا في بعض الامور البسيطة، ولكن تظل بنفس المبادئ.

عن عقدة AnimationPlayer

تختلف عقدة مُشغل الحركة -animation player عن عقدة الوسيط tween في مبدأ مهم، فبينما يمكن استخدام الوسيط برمجيا، بالمعادلات لإنشاء تحريك مختلف على حسب المتغيرات، الا أن عقدة مُشغل الحركة تحرك وفقا لثوابت!

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

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

مبدأ العقدة

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

مثل حفظ موضع صورة في الثانية 0 في س ثم في الثانية 4 يكون ص، وهكذا عند تبدء تجد أن الصورة تتحرك من س الى ص في خلال الأربع ثواني المحددة.

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

بعد فهم مبدأ العقدة يمكنك الان فتح مشروع جديد للتعرف على كيفية إجراء هذا الأمر

فتح واجهة مُشغل الحركة

رغم اني اعمل على التحريك ثنائي الابعاد، الا أن نفس المبدأ متواجد في المحرر ثلاثي الأبعاد، ولكن فقط استخدمه لتسهيل الشرح، كما أن الاصول المُستخدمة في المقالة تجدها بجانب كل مثال، ونعم يمكنك تنزيلها مجانا 😗

قم بعمل مشروع جديد داخل المحرك ولتكن شجرة المشهد هكذا:

حيث ghost هو عقدة صورة – sprite بها صورة الشبح (او اي صورة اخرى تعجبك).

الان قم بإضافة العقدة AnimationPlayer الي العقدة Node2D أو العقدة الاساسية Node، 

وما أن تضيفها حتى يظهر في الأسفل لوحة خاصة بمُشغل الحركة، أن لم تظهر، فهناك زر “animation” في الأسفل، بالضغط عليها تظهر الواجهة، وبالضغط عليها مجددا تختفي.

هذه الواجهة تختلف من اصدار غودو لآخر، ولكن فقط اختلاف في اماكن بعض الازرار، ( او ربما جمعها في زر واحد، وبالضغط عليه تظهر بقية الخيارات). وبالنسبة لي، اشرح واجهة اخر اصدار للمحرك وهي 4.1.

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

الان اضغط على عقدة الصورة sprite2D المسماة Ghost (تأكد من وضع صورة بها)، ثم انظر إلى لوحة الخصائص inspector، وبجانب اي خاصية تجد علامة أشبه بالمفتاح. (تأكد أن لوحة مُشغل الحركة تعمل حتى تظهر المفاتيح)

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

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

اول تحريك لك

حدد عقدة الصورة ثم اضغط على علامة المفتاح الخاصة بالموضع – position، بعد ذلك حرك الخط المتواجد على محور الزمن – TimeLine، او فقط اضغط على اي مكان في المحور, ثم حرك الصورة الى موضع مختف. اخيرا اضغط على زر المفتاح مجددا وابدء في تشغيل التحريك.

كما يمكنك الضغط على زر “اعادة التشغيل” لجعل التحريك يعيد نفسه.

ومبروك لقد أنشأت أول تحريك لك.

وايضا، عندما تضغط على زر المفتاح، تظهر نقطة على محور الزمن، تلك تسمى AnimationTrackKey، اي “مفتاح مسار الحركة”، ويوجد به القيمة التي أدخلتها/سجلتها، وبالضغط عليها تجد تلك القيمة في لوحة الخصائص – inspector.

بالاضافة الى الانسيابية – easing، وهي الطريقة التي تنتقل بها من نقطة للتالية.  ويمكنك كتابة قيم من 0 الى 1 او التحكم في المنحنى يدويا.

ايضا تقدر على تحديد انسيابية خاصة لكل نقطة منهم، ولكن يمكنك تحديد الانسيابية العامة، وهي طريقة الانتقال لكل المفاتيح في مسار ما،

أشرت اليها من قبل بـ”انسيابية المسار” ، وفيه تجد علامة الانتقال العام في المنتصف تقريبا، اختارها وغيرها من خطي-linear الى تكعيبي-cubic، حتى يكون أكثر انسيابية. (الصورة القادمة لنسخة قديمة ولكن تفي بالغرض)

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

او فقط غير اماكن النقاط واجعل المسافية بينهم اكبر. اي فقط اضغط على نقطة وحركها لمكان آخر

المزيد من التحريك

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

شبح يطفو

في هذا التحريك استخدم ثلاثة مسارات وخواص

1. احداثيات الظل :فيكون قريبا قليلا للشبح ثم يعيد عنه
2. حجم الظل : يبدأ كبيرا ثم صغير
3. موضع الشبح : في النقطة الاولى قريب من الظل (أي الأرض) وفي الثانية بعيد

سلاح يطلق نيران

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

1. تغير موضع المدفع ليرجع للخلف قليلا
2. تغير استدارة المدفع ليرتفع فوق (غيرت مركز الاستدارة بالاشارة لاي مكان في الصورة والضغط على v)
3. تغير موضع النيران، فتكون قريبة من فوهة المدفع ثم بعيدة
4. تغير حجم النيران لتكبر فتبدء صغيرة ثم تكبر

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

نسخ النقاط ليس صعبا، فقط حدد النقاط التي تريد نسخها (اضغط على واحدة ثم زر shift ثم الاخرى) بعد ذلك قف عند موضع الثانية على محور الزمن التي تريد النسخ عليها، واخيرا اضغط الاختصار ( ctrl + D )

تلويح سيف

يوجد مسار واحد فقط للسيف، وهو مسؤول عن تغير استدارته – rotation، ولكن غيرت مركز الصورة ليكون أسفل السيف بمسافة بعيدة قليلا، فكأنه موضع اليد التي تمسك السيف، فالسيف نفسه لا يلوح به، إنما الذراع التي تمسكه.

في نفس الوقت عدلت  الانسيابية في النقطة الثانية، حيث الاستعداد للتلويح بالسيف بطيء، ثم استخدمت انسيابية اخرى على النقطة الثالثة، فيكون التلويح سريعا للتعبير على قوة الضربة.

تشغيل التحريك عبر البرمجة

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

هكذا يمكنك مثلا تشغيل تحريك محدد ما أن يضغط المُستخدم على زر ما بهذه التعليمات البسيطة 

func _on_button_pressed():    
  $AnimationPlayer.play(“ghost”) # تشغيل تحريك الشبح    
  $AnimationPlayer.queue(“die”) # تشغيل مجموعة موت الشبح

ليس معقدا

يوجد العديد من التقنيات والخدع الخاصة بعقدة مُشغل الحركة، منها نظام العظام الذي يُمكنك من إنشاء تحريك الشخصيات بسهولة.

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

اخبرني في التعليقات اذا ما اردت انشاء تلاعب/تحريك محدد باستخدام هذه العقدة، وربما استطيع انشاء مقال عن كيفية فعل ذلك به.