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

بناء المشهد

سنستمر في هذا المقال استخدام مجموعة الملحقات assets التي توفرها منصة Kenney على هذا الرابط والتي شرحنا طريقة تنزيلها واستيرادها في مقال سابق. نفتح مشروع اللعبة ثلاثية الأبعاد التي بدأناها، ونحدّد الآن جميع ملفات block*.glb، وننتقل إلى التبويب استيراد Import ونضبط نوع الجذر Root Type الخاص بهذه الملفات على StaticBody3D ، بعدها ننقر على زر إعادة الاستيراد Reimport كما في الصورة أدناه.

بعدها، نحدّد الكائن block-grass-large.glb بزر الفأرة الأيمن ونختار إنشاء مشهد موروث جديد، ستظهر عقدة جديدة باسم block-grass-large في المشهد، وعقدة ابن لها تُمثّل المجسم Mesh، نحدد العقدة الابن وننقر فوق خيار مجسم Mesh في القائمة العلوية الظاهرة في محرر جودو، ثم نحدد خيار إنشاء شكل تصادم Create Collision Shape ونعيّن قيمة الحقل Collision Shape Placement لتكون Sibling وقيمة الحقل Collision Shape Type لتكون Trimmesh كما فعلنا بالضبط في المقال السابق.

عند الضغط على زر الإنشاء سيضيف جودو تلقائيًا العقدة CollionShape3D مع شكل تصادم يطابق المجسم Mesh.

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

نفتح مشهد الأرضية Ground مع الصناديق Crates الذي عملنا عليه في المقال السابق ونحذف كافة الصناديق المضافة ونستبدلها بالمشهد الموروث الذي حفظناه للتو، بهذا سنتمكّن من وضع عدة كتل بجانب بعضها البعض بحيث تكون في صف واحد وتشكل منصة اللعبة أو عالم اللعبة. بعدها نحدّد العقدة BlockLarge وننقر خيار تعديل المحاذاة Configure Snap من القائمة العلوية التحوّل Transform الظاهرة أعلى نافذة العرض كالتالي:

نضبط خيار ترجمة المحاذاة Translate Snap على القيمة 0.5، ثم ننقر على زر استخدام المحاذاة Snap Mode أو نضغط على مفتاح Y، ثم نكرّر الكتلة عدة مرات ونسحبها لترتيبها ضمن المشهد بالشكل المناسب. يمكن أيضًا إضافة مشاهد لبعض كتل المنصة الأخرى وترتيبها في أيّ شكل نريده.

إضافة شخصية Character

سننشئ الآن شخصية يمكنها التجول على المنصة التي أنشأناها، لذا نفتح مشهدًا جديدًا ونبدأ باستخدام العقدة CharacterBody3D بالاسم Character، حيث تتصرف عقدة PhysicsBody بطريقة مشابهة جدًا لنظيرتها ثنائية الأبعاد، وتحتوي على التابع move_and_slide()‎ الذي سنستخدمه لإجراء الحركة وكشف التصادم.

نضيف عقدة MeshInstance3D على شكل كبسولة، وعقدة CollionShape3D مطابقة لها، ولنتذكّر أن بإمكاننا إضافة عقدة StandardMaterial3D إلى المجسم Mesh وضبط خاصية اللون Color في القسم Albedo. شكل الكبسولة جميل ومناسب للشخصية، ولكن سيكون من الصعب معرفة الاتجاه الذي يمثل الوجه، لذا لنضيف مجسم Mesh آخر على شكل مخروطي CylinderMesh3D، ونضبط نصف قطره العلوي Top Radius على القيمة 0.2 ونصف قطره السفلي Bottom Radius على القيمة 0.001 وارتفاعه Height على القيمة 0.5، ثم نضبط دورانه حول المحور x على ‎-90 درجة. أصبح لدينا الآن شكل مخروطي جميل، لذا نرتّبه بحيث يشير لخارج الجسم على طول محور z السالب، إذ يمكن بسهولة معرفة الاتجاه السالب لأن أسهم أداة Gizmo تشير إلى الاتجاه الموجب.

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

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

كود التحكم في الشخصية

قبل إضافة سكربت برمجي للتحكم في الشخصية، سوف نفتح إعدادات المشروع Project Settings، ونضيف المدخلات التالية في تبويب خريطة الإدخال Input Map:

يمكننا الآن كتابة سكربت لتحريك شخصيتنا ثلاثية الأبعاد كما يلي:

extends CharacterBody3D

var gravity = ProjectSettings.get_setting("physics/3d/default_gravity")
var speed = 4.0  # سرعة الحركة
var jump_speed = 6.0  # تحديد ارتفاع القفزة
var mouse_sensitivity = 0.002  # سرعة الدوران


func get_input():
    var input = Input.get_vector("strafe_left", "strafe_right", "move_forward", "move_back")
    velocity.x = input.x * speed
    velocity.z = input.y * speed

func _physics_process(delta):
    velocity.y += -gravity * delta
    get_input()
    move_and_slide()

نلاحظ أن الشيفرة البرمجية في الدالة ‎_physics_process()‎ بسيطة، حيث نضيف الجاذبية للتسارع في الاتجاه الموجب للمحور Y إلى الأسفل، ثم نستدعي الدالة get_input()‎ للتحقق من الإدخال أي معرفة المفتاح الذي ضغط المستخدم عليه، ثم نستخدم التابع move_and_slide()‎ للتحرك في اتجاه متجه السرعة. نشغّل اللعبة لاختبارها، وسنرى النتيجة التالية:

هذا يبدو جيدًا، ولكن يجب أن نكون قادرين على تدوير الشخصية باستخدام الفأرة، لذا سنضيف الشيفرة البرمجية التالية إلى سكربت الشخصية:

func _unhandled_input(event):
    if event is InputEventMouseMotion:
        rotate_y(-event.relative.x * mouse_sensitivity)

عندما نحرك الفأرة أفقيًا في اتجاه المحور x سيعمل السكربت بتدوير الشخصية حول المحور الرأسي Y، وبالتالي إذا حركنا الفأرة إلى اليمين، سيؤدي ذلك إلى تدوير الشخصية إلى اليسار. وإذا حركنا الفأرة إلى اليسار ستدور الشخصية إلى اليمين.

لدينا هنا مشكلة، إذ يحرّكنا الضغط على مفتاح W على طول المحور Z لعالم اللعبة بغض النظر عن الاتجاه الذي تتجه له الشخصية، لأن اللعبة تستخدم هنا الإحداثيات العالمية Global Coordinates، ولكننا بحاجة إلى التحرك بناء على اتجاه الكائن، ويمكن حل هذه المشكلة باستخدام التحويلات.

الاستفادة من التحويلات Transforms

التحويل هو مصفوفة رياضية تحتوي على معلومات حول انتقال الكائن ودورانه وتغيير حجمه في آن واحد، ويُخزَّنه جودو في نوع البيانات Transform، حيث تُسمَّى معلومات الموضع بالاسم transform.origin وتكون معلومات الاتجاه في transform.basis.

تشير محاور X و Y و Z الخاصة بأداة Gizmo على طول محاور الكائن نفسه عندما تكون في وضع الحيّز المحلي Local Space Mode، ويشابه ذلك الأساس basis الخاص بالتحويل، حيث يحتوي هذا الأساس على ثلاثة كائنات Vector3 تسمى x و y و z تمثل هذه الاتجاهات، ويمكننا استخدامها لضمان أن الضغط على مفتاح W سيؤدي إلى التحرك في الاتجاه الأمامي للكائن دائمًا.

نعدّل الدالة get_input()‎ كما يلي:

func get_input():
    var input = Input.get_vector("strafe_left", "strafe_right", "move_forward", "move_back")
    var movement_dir = transform.basis * Vector3(input.x, 0, input.y)
    velocity.x = movement_dir.x * speed
    velocity.z = movement_dir.z * speed

نطبّق هذا التحويل على المتجه من خلال ضرب متجه الإدخال في أساس التحويل transform.basis. يمثّل الأساس دوران الكائن، لذا لنحوّل الآن اتجاه الأمام والخلف للإشارة على طول المحور Z للكائن، ونحوّل مفاتيح التحريك لليمين واليسار للإشارة على طول المحور X الخاص بالكائن.

القفز Jumping

سنضيف الآن حركة أخرى إلى اللاعب وهي القفز، لتحقيق ذلك نضيف الأسطر التالية إلى نهاية الدالة ‎_unhandled_input()‎:

if event.is_action_pressed("jump") and is_on_floor():
    velocity.y = jump_speed

تحسين الكاميرا

إذا وقفت الشخصية بالقرب من عائق ما، فيمكن للكاميرا الالتصاق بالكائن بطريقة غير لطيفة. وبالرغم من أن برمجة كاميرا ثلاثية الأبعاد قد تكون أمرًا معقدًا بحد ذاته، ولكن يمكننا استخدام عقد جودو المضمنة للحصول على حل جيد لذلك. نحذف العقدة Camera3D من مشهد الشخصية ونضيف العقدة SpringArm3D التي تعمل كذراع متحركة تحمل الكاميرا أثناء كشف التصادمات، وستقرّب الكاميرا عند وجود عقبة، ثم نضبط خاصية طول الذراع Spring Length على القيمة 5، ونضبط خاصية الموضع Position على القيم ‎(0, 1, 0)‎. نلاحظ ظهور خط بلون أصفر يشير إلى طول النابض Spring Length، حيث ستتحرك الكاميرا على طول هذا الخط، ولكنها ستقترب عند وجود عقبة حتى نهايته كلما أمكن ذلك.

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

الخلاصة

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

ترجمة -وبتصرّف- للقسم Creating a 3D Character من توثيقات Kidscancode.

اقرأ أيضًا

• المقال السابق: استيراد الكائنات ثلاثية الأبعاد في جودو
• تحريك الشخصية في لعبة 3D باستخدام محرر التحريك في جودو
• استخدام محرر جودو ثلاثي الأبعاد
• كتابة سكربتات GDScript وإرفاقها بالعقد في جودو

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

استيراد الكائنات ثلاثية الأبعاد

في حال كنا على دراية ببرامج النمذجة ثلاثية الأبعاد مثل بلندر Blender، فيمكننا إنشاء نماذجنا الخاصة لاستخدامها في لعبتنا. وفي حال لم نكن كذلك، فهناك العديد من المصادر التي توفر لنا تنزيل الكائنات لأنواع معينة من الألعاب، ومن بينها منصة Kenney التي توفر الكثير من الموارد والملحقات assets المجانية عالية الجودة لصنّاع الألعاب. سنستخدم في أمثلتنا التالية مجموعة ملحقات Platformer Kit للعبة منصات من Kenney، والتي يمكن تنزيلها من هذا الرابط ، حيث تحتوي مجموعة واسعة من الكائنات ثلاثية الأبعاد 3D. وفيما يلي عينة توضّح هذه الملحقات:

سنجد بعد التنزيل مجلدًا باسم Models يتضمن مجموعة متنوعة من الصيغ التي يمكن التعامل معها في محرك ألعاب جودو، ولكن صيغة GLTF مفضلة عن الصيغ الأخرى.

صيغ الملفات ثلاثية الأبعاد

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

• GlTF: صيغ نماذج ثلاثية الأبعاد مدعومة في كل من الإصدارات النصية ‎.gltf والثنائية ‎.glb
• DAE Collada‎: صيغة أقدم لكنها لا تزال مدعومة
• OBJ Wavefront‎: صيغة أقدم مدعومة، ولكنها محدودة مقارنة بالخيارات الحديثة
• FBX: صيغة تجارية لها دعم محدود

تُعَد صيغة GlTF هي الصيغة الموصى بها كما وضحنا سابقًا، لكونها تحتوي على معظم الميزات ودعمها جيد في جودو، سنضع المجلد GLB format في الموجود ضمن المجلد Models  في مجلد مشروع جودو الخاص بنا ونعيد تسميته إلى platformer_kit.

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

لننقر نقرًا مزدوجًا على أحد هذه الكائنات وليكن crate.glb في تبويب نظام الملفات FileSystem والذي يمثل صندوق ثلاثي الأبعاد كالتالي:

خطوات استيراد كائن ثلاثي الأبعاد وتعديل عقدة الجذر

عند النقر على كائن ثلاثي الأبعاد يمكننا رؤية خيارات استيراد هذا الكائن في التبويب استيراد Import بجانب تبويب المشهد Scene مع إمكانية ضبط الخاصية نوع الجذر Root Type وتعديل اسم الجذر Root Name، دعونا نضبط نوع الجذر على RigidBody3D ونطلق عليه اسم Crate للتعبير عن كونه يمثل صندوق ثلاثي الأبعاد، ثم ننقر على زر إعادة الاستيراد Reimport.

ننقر بعدها بزر الفأرة الأيمن على crate.glb ونحدّد خيار مشهد موروث جديد New Inherited Scene. أصبح لدينا كائن لعبة كلاسيكي هو الصندوق Crate، وعقدة جذر للمشهد هي RigidBody3D بالاسم Crate كما أردنا تمامًا، لكن سنلاحظ ظهور تحذير يشير بأن هذه العقدة لا تحتوي مكون التصادم Collision الضروري للتفاعل مع الكائنات الأخرى.

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

نحدّد العقدة crate، وسنلاحظ ظهور شريط قوائم في الجزء العلوي من نافذة العرض، ننقر على أيقونة المجسم ونحدّد إنشاء شكل تصادم Create Collision shape ونحدد قيمة الحقل Collision Shape Placement لتكون Sibling أي أن أن شكل التصادم سيضاف كعقدة أخ للعقدة الحالية، وقيمة الحقل Collision Shape Type لتكون Trimmesh أي التصادم سيتم بناءً على المجسم ثلاثي الأبعاد للكائن، وعند الضغط على زر الإنشاء سيضيف جودو تلقائيًا العقدة CollionShape3D مع شكل تصادم يطابق Mesh.

انتهينا الآن من إعداد كائن الصندوق Crate، لنحفظ المشهد الخاص به ونتعرّف كيف يمكننا استخدامه في اللعبة أو المشروع.

بناء مشهد ثلاثي الأبعاد

ننشئ مشهدًا جديدًا باستخدام عقدة الجذر Node3D، وأول ابن سنضيفه هو الأرضية لوضع بعض كائنات الصناديق عليها، لذا نضيف عقدة StaticBody3D ونسميها Ground، ونضيف إليها عقدة ابن من نوع MeshInstance3D. ونحدّد خيار BoxMesh جديدة في الخاصية Mesh ضمن قسم الفاحص.

ثم نضبط حجمها على القيم التالية ‎(10,0.1,10)‎ بحيث يكون لدينا أرضية كبيرة، ستظهر الأرضية باللون الأبيض بشكل افتراضي وسيبدو شكلها أفضل إن غيرناها للون البني أو الأخضر، وللقيام بذلك ننتقل للخاصية Material الموجودة في قسم خاصيات Mesh فهي تساعدنا على تحديد مظهر الكائن. سنحدّد الخيار StandardMaterial3D جديدة كقيمة للخاصية Mesh، ثم ننقر عليها لنستعرض قائمة كبيرة من الخاصيات، ما يهمنا هو خاصية اللون Color ضمن قسم Albedo لضبط الأرضية باللون الأخضر الداكن.

الآن إذا أضفنا صندوقًا، فسيسقط عبر الأرضية، لذا يجب إعطاؤها شكل تصادم من خلال إضافة عقدة التصادم CollisionShape3D كعقدة ابن للأرضية Ground ونحدد قيمة الخاصية Shape لتكون BoxShape3 جديدة، ثم نضبط حجم صندوق التصادم Size ليكون بنفس حجم Mesh.

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

ننشئ الآن عددًا من الصناديق في المشهد ونرتبها في كومة تقريبية. ونضيف كاميرا Camera ونضعها في مكان يوفر لنا رؤية جيدة للصناديق، ونشغّل المشهد ونشاهد الصناديق تتدحرج.

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

الإضاءة

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

ننقر على زر إضافة الشمس إلى المشهد Add Sun to Scene، وبهذا سيضيف جودو العقدة DirectionalLight3D إلى المشهد مباشرة. ننقر على زر إضافة بيئة إلى المشهد Add Environment to Scene، وسيفعل جودو الشيء نفسه مع معاينة السماء من خلال إضافة عقدة WorldEnvironment. نشغّل المشهد مرة أخرى، وسنتمكن من رؤية الصناديق تتساقط بشكل أفضل.

تدوير الكاميرا

لنجعل الآن الكاميرا تدور ببطء حول المشهد، لذا نحدّد العقدة الجذر ونضيف عقدة Node3D، والتي ستكون موجودة عند النقطة ‎(0,0,0)‎ ونطلق على هذه العقدة اسم CameraHub. نسحب الكاميرا في شجرة المشهد لجعلها ابنًا لهذه العقدة الجديدة، حيث إذا دارت عقدة CameraHub حول المحور y، فسنسحب الكاميرا معها.

نضيف سكربتًا إلى العقدة الجذر ونضع فيه ما يلي:

extends Node3D

func _process(delta):
    $CameraHub.rotate_y(0.6 * delta)

يعمل السكربت أعلاه على تدوير العقدة CameraHub حول المحور Y بشكل مستمر أثناء اللعبة. وتعتمد سرعة التدوير على الزمن بين الإطارات delta ما يجعل الحركة أكثر سلاسة بغض النظر عن أداء الجهاز.

الخلاصة

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

ترجمة -وبتصرّف- للقسم Importing 3D Objects من توثيقات Kidscancode.

اقرأ أيضًا

• المقال السابق: استخدام محرر جودو ثلاثي الأبعاد
• تحريك الشخصية في لعبة 3D باستخدام محرر التحريك في جودو
• مطور الألعاب: من هو وما هي مهامه
• تحريك الشخصية في لعبة 3D باستخدام محرر التحريك في جودو

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

قد يكون تطوير الألعاب ثلاثية الأبعاد أكثر تعقيدًا من تطوير الألعاب ثنائية الأبعاد، حيث يمكن تطبيق العديد من المبادئ نفسها مثل العمل مع العقد، وكتابة السكربتات والتعامل مع المنطق البرمجي، ولكن يتطلب التطوير ثلاثي الأبعاد عدد من الاعتبارات الأخرى، لذا يُفضَّل تعلم تطوير الألعاب ثنائية الأبعاد للمبتدئين، والانتقال إلى تعلم تطوير الألعاب ثلاثية الأبعاد بعد امتلاك الفهم الجيد لمبادئ تطوير الألعاب، يفترض هذا المقال وجود معرفة جيدة بإنشاء لعبة متكاملة ثنائية الأبعاد في جودو Godot 2D على الأقل.

البدء في تطوير الألعاب ثلاثية الأبعاد

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

التوجيه Orienting في الفضاء ثلاثي الأبعاد

عندما نفتح مشروعًا جديدًا في جودو لأول مرة فسنرى عرض المشروع ثلاثي الأبعاد وسنلاحظ وجود أدوات وخصائص مُعدة خصيصًا للتطوير ثلاثي الأبعاد 3D كما في الصورة التالي:

أول شيء سنلاحظه هو الخطوط الثلاثة الملونة في المنتصف، والتي هي المحور X باللون الأحمر، والمحور Y باللون الأخضر، والمحور Z باللون الأزرق، وتسمى النقطة التي تلتقي فيها هذه المحاور بنقطة الأصل Origin والتي لها الإحداثيات ‎(0,0,0)‎. وسنلاحظ أن مخطط الألوان هذا يُطبَّق أيضًا في أماكن أخرى من الفاحص Inspector.

ملاحظة: قد تستخدم برامج تطوير الألعاب ثلاثية الأبعاد اصطلاحات مختلفة للتوجيه Orienting. ففي محرك جودو، يستخدم المحور Y ليحدد الاتجاه للأعلى، أي يشير المحور Y للأعلى والأسفل، ويشير المحور X إلى اليسار واليمين، ويشير المحور Z للأمام والخلف. بينما في بعض البرامج ثلاثية الأبعاد الأخرى، قد يُستخدم المحور Z ليشير للاتجاه نحو الأعلى. لذا، يجب أن نأخذ هذا الأمر في الاعتبار عند الانتقال لتطبيقات مختلفة.

يمكننا التنقل في المشروع ثلاثي الأبعاد باستخدام الفأرة ولوحة المفاتيح، وفيما يلي عناصر التحكم الأساسية لكاميرا العرض:

• نحرك عجلة الفأرة للأعلى أو للأسفل لتكبير أو تصغير المشهد
• نستخدم الزر الفأرة الأوسط مع السحب لتدوير الكاميرا حول الهدف الحالي
• نستخدم مفتاح Shift مع الزر الأوسط للفأرة مع السحب لتحريك الكاميرا حول المشهد
• ننقر بزر الفأرة الأيمن مع السحب لتدوير الكاميرا حول محورها دون تغيير موقعها في المشهد

ملاحظة: في بعض الألعاب ثلاثية الأبعاد الشهيرة، يوجد وضع يسمى Freelook يسمح لنا بالتنقل بحرية في المشهد دون قيود. يمكننا تفعيل هذا الوضع أو إيقافه في جودو باستخدام الاختصار Shift + F. عند تفعيل هذا الوضع يمكننا استخدام مفاتيح WASD أي مفتاح W للتقدم للأمام، و A للتحرك لليسار،و S للتحرك للخلف، و D للتحرك لليمين من أجل التحرك حول المشهد بحرية كما نفعل في الألعاب عادة. وفي هذا الوضع، ستتيح لنا الفأرة التوجيه وتحريك الكاميرا حول المشهد أو الهدف كما نريد.

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

إضافة كائنات ثلاثية الأبعاد

لنضف الآن أول عقدة ثلاثية الأبعاد. ترث العقد ثلاثية الأبعاد في جودو من العقدة الأساسية Node3D، وهي توفر نفس الخصائص التي ترثها العقدة Node2D في المشاريع الثنائية الأبعاد، مثل خاصية الموضع position لتحديد مكان الكائن في المشهد، وخاصية الدوران rotation لتحديد زاوية دوران الكائن. عند إضافة عقدة ثلاثية الأبعاد Node3D إلى المشهد، سنرى الكائن أن يظهر عند نقطة الأصل (0,0,0) في الفضاء ثلاثي الأبعاد كما في الصورة التالية:

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

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

الحيز العالمي والحيز المحلي

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

تعمل عناصر التحكم في أداة Gizmo في الحيز العالمي Global Space افتراضيًا، إذ تبقى أسهم أداة Gizmo تشير على طول المحاور عند تدوير الكائن، ولكن إذا نقرنا على زر استخدام الحيز المحلي Use Local Space، فستتحوّل الأداة إلى تحريك الجسم في حيز محلي.

تشير أسهم أداة Gizmo الآن إلى محاور الكائن نفسه بدلاً من محاور العالم عند تدويره. فيمكن أن يساعدنا التبديل بين الحيز المحلي والعالمي في تحديد موقع الكائن بدقة وفقًا لاحتياجاتنا.

التحويلات Transforms

لنبحث عن العقدة Node3D في الفاحص Inspector، حيث سنرى خاصيات الموضع Position والدوران Rotation والتحجيم Scale في قسم التحويل Transform، لذا نسحب الكائن باستخدام أداة Gizmo ونلاحظ كيف تتغير هذه القيم. تكون هذه الخاصيات متعلقة بأب هذه العقدة كما هو الحال في العقد ثنائية الأبعاد 2D.

تشكّل هذه الخاصيات مع بعضها البعض ما يسمى بتحويل العقدة. سنتمكن من الوصول إلى خاصية التحويل transform التي هي كائن جودو Transform3D عند تغيير الخاصيات المكانية للعقدة في الشيفرة البرمجية، ويكون لهذا الكائن خاصيتان هما origin و basis. تمثّل الخاصية origin موضع الجسم، بينما تحتوي الخاصية basis على ثلاثة متجهات تحدّد محاور إحداثيات الجسم المحلية، حيث يمكننا التفكير في أسهم المحاور الثلاثة في أداة Gizmo عندما تكون في وضع الحيز المحلي Local Space، وسنوضّح كيفية استخدام هذه الخاصيات لاحقًا.

الشبكات Meshes

لا تتمتع عقدة Node3D بحجم أو مظهر خاص بها مثل عقدة Node2D، لذا يمكننا استخدام العقدة Sprite2D لإضافة خامة Texture إلى العقدة في الألعاب ثنائية الأبعاد 2D، ولكننا سنحتاج إلى إضافة شبكة Mesh في الألعاب ثلاثية الأبعاد 3D.

الشبكة هي وصف رياضي لشكل ما، وتتكون من مجموعة من النقاط تسمى الرؤوس Vertices، وترتبط هذه الرؤوس بخطوط تسمى الأضلاع Edges، وتشكل الأضلاع المتعددة مع بعضها البعض وجهًا Face، فمثلًا يتكون المكعب من 8 رؤوس و 12 ضلعًا و 6 أوجه.

إضافة الشبكات

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

لنضف عقدة MeshInstance3D كعقدة ابن للعقدة Node3D، وننقر على الخاصية Mesh الخاصة بها في الفاحص Inspector:

يمكننا الآن رؤية قائمة الأشكال الأولية المتاحة، والتي تمثل مجموعة مفيدة من الأشكال الشائعة المفيدة. سنحدّد خيار BoxMesh جديدة، سنرى مكعبًا يظهر على الشاشة.

الكاميرات

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

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

الخلاصة

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

سنوضح في المقال التالي كيفية بناء مشهد ثلاثي الأبعاد من خلال استيراد ملفات الأصول ثلاثية الأبعاد 3D Assets وكيفية استخدام مزيد من عقد جودو ثلاثية الأبعاد.

ترجمة -وبتصرّف- للقسم The 3D Editor من توثيقات Kidscancode.

اقرأ أيضًا

• المقال السابق: كتابة سكربتات GDScript وإرفاقها بالعقد في جودو
• تعرف على واجهة محرك الألعاب جودو
• تحريك الشخصية في لعبة 3D باستخدام محرر التحريك في جودو
• العقد Nodes والمشاهد Scenes في جودو Godot

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

ما هي لغة GDScript

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

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

بنية ملف GDScript

يجب أن يكون السطر الأول من أي ملف GDScript هو extends <Class>‎ حيث أن <Class> هو إما صنف مُضمَّن موجود مسبقًا، أو صنف يعرّفه المستخدم، فمثلًا إذا أردنا إرفاق سكربت معين بعقدة CharacterBody2D، فسيبدأ السكربت بالعبارة extends CharacterBody2D، وهذا يعني أن السكربت يأخذ جميع وظائف كائن CharacterBody2D المُضمَّن ويوسّعه باستخدام الوظائف الإضافية التي أنشأناها بنفسنا.

يمكننا في بقية السكربت تعريفُ أيّ عدد من المتغيرات المعروفة أيضًا باسم خاصيات الصنف والدوال المعروفة أيضًا باسم توابع الصنف.

إنشاء سكربت GDScript

لننشئ السكربت الأول، لنتذكّر أن بإمكاننا إرفاق سكربت بأيّ عقدة. لذا سنفتح محرّر جودو ونتقل للتبويب مشهد Scene، ونضيف عقدة من نوع Sprite2D إلى المشهد، ثم ننقر بزر الفأرة الأيمن على العقدة الجديدة، ونحدّد خيار إلحاق نص برمجي Attach Script، ويمكننا أيضًا النقر على الأيقونة الموجودة يسار مربع البحث.

يجب بعد ذلك أن نختار المكان الذي تريد حفظ السكربت البرمجي فيه ونحدد اسمه، وفي حال سمّينا العقدة باسم ما، فسيُسمَّى السكربت تلقائيًا بذلك الاسم، لذا إن لم نغيِّر أي شيء، فسوف يسمى هذا السكربت sprite2d.gd.

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

extends Sprite2D

# Called when the node enters the scene tree for the first time.
func _ready() -> void:
    pass # Replace with function body.

# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta: float) -> void:
    pass

أُضيف هذا السكربت إلى العقدة Sprite2D، لذا يكون السطر الأول تلقائيًا هو extends Sprite2D كي يوسّع هذا السكربت الصنف Sprite2D ويكون قادرًا على الوصول إلى جميع الخاصيات والتوابع التي توفرها العقدة Sprite2D ومعالجتها.

ملاحظة: إن الخاصيات Properties والتوابع Methods هي المتغيرات والدوال المُعرَّفة في الكائن، قد يخلط المبرمجون المبتدئون في استخدام هذه المصطلحات.

سنعرّف بعد ذلك جميع المتغيرات التي سنستخدمها في السكربت، والتي تُسمَّى المتغيرات الأعضاء Member Variables، ولتعريف المتغيرات نستخدم الكلمة المفتاحية var.

سنتجاوز التعليقات الموجودة في السكربت ونتحدث عن الجزء التالي، حيث سنرى في السكربت أعلاه الدالة ‎_ready()‎  حيث يبدأ تعريف الدالة في لغة GDScript بالكلمة المفتاحية func. والدالة ‎_ready()‎ هنا هي دالة خاصة ينفّذها جودو بشكل تلقائي عند إضافة عقدة إلى الشجرة، أو عندما يبدأ المشهد بالعمل بالضغط على تشغيل Play.

لنفترض أننا نريد نقل الشخصية الرسومية إلى موضع محدد عند بدء اللعبة، عندها يجب علينا ضبط خاصية الموضع Position في الفاحص Inspector، توجد هذه الخاصية في القسم Node2D، وبالتالي ستتوفر هذه الخاصية في أي عقدة من نوع Node2D، وليس فقط في العقد من نوع Sprite2D.

لنضبط الآن هذه الخاصية عن طريق الشيفرة البرمجية، إحدى الطرق المتبعة للعثور على اسم الخاصية هي التمرير فوقها في الفاحص Inspector كما يلي:

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

إذا مررنا لأسفل قليلاً، سنلاحظ وجود الخاصية position ضمن قسم Member Variables، والتي تُعد من المتغيرات الأعضاء للصنف. ونلاحظ أيضًا أن هذه الخاصية من النوع Vector2، مما يعني أنها تُستخدَم لتخزين الإحداثيات على المحورين X و Y.

لنرجع إلى السكربت البرمجي ونستخدم هذه الخاصية كما يلي:

func _ready():
    position = Vector2(100, 150)

نلاحظ كيف يعرض لنا المحرّر اقتراحات أثناء الكتابة فعندما نكتب مثلًا Vector2، سيخبرنا التلميح بوضع عددين عشريين x و y. لدينا الآن سكربت يمثّل ضبط موضع الشخصية الرسومية على القيم ‎(100,150)‎ عند بدء التشغيل، ويمكننا تجربة ذلك بالضغط على زر تشغيل المشهد Play Scene.

ملاحظة: يستخدم جودو المتجهات أو الأشعة Vectors للعديد من الأشياء، وسنتحدث عنها بمزيد من التفصيل لاحقًا.

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

الخاتمة

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

ترجمة -وبتصرّف- للقسم Introduction to GDScript: Getting started من توثيقات Kidscancode.

اقرأ أيضًا

• المقال السابق: تعرف على العقد في محرك الألعاب Godot
• العقد Nodes والمشاهد Scenes في جودو Godot
• لغات البرمجة المتاحة في جودو Godot
• كتابة برنامجك الأول باستخدام جودو Godot
• مدخل إلى محرك الألعاب جودو Godot

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

فوائد دمج OpenAI مع محرك الألعاب جودو

يمكننا الحصول على فوائد عديدة من دمج منصة الذكاء الاصطناعي OpenAI مع محرك الألعاب جودو ومن أبرزها ما يلي:

تلخيص الأكواد

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

تنفيذ إجراءات على الكود

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

مساعدة مطور الألعاب

تساعدنا أداة التكامل بين محرك ألعاب جودو ومنصة الذكاء الاصطناعي OpenAI في توفير شرح مفصل للأكواد التي لا نفهمها أو التي نواجه مشكلات فيها، كل ما علينا هو تظليل الكود المطلوب والضغط على زر help وستتولى الأداة توفير شرح نصي واضح يساعدنا على فهمه وتحليل المشكلة التي تواجهنا.

التواصل مع مفتاح واجهة برمجة التطبيقات

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

بعد أن تعرفنا على فائدة الأداة التي سنطورها لجودو، لننتقل الآن لشرح عملية التطوير خطوة بخطوة.

الحصول على مفتاح الواجهة البرمجية OpenAI API

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

نحتاج الآن إلى توليد مفتاح واجهة برمجة تطبيقات جديد وذلك بالضغط على زر Create new secret key، ثم تسمية المفتاح بأي اسم مناسب ونسخه.

البدء مع جودو Godot

الخطوة التالية هي إعداد الإضافة Plugin الخاصة بأداتنا داخل محرك الألعاب جودو، وذلك ببدء مشروع جديد، ثم فتح إعدادات المشروع  Project Settings، ثم الدخول إلى إضافات Plugins وإنشاء إضافة جديدة Create New Plugin.

نسمِّي الإضافة باسم مناسب مثل Godot GPT Integration، ونحدد المجلد الفرعي res://addons/GPT_Integration، ونكتب اسم المطور في الحقل author، ونجعل رقم النسخة 1.0، وأخيرًا نختار لغة المشروع لتكون GDScript، كما يمكن اختيار لغة #C ولكن في هذا الحالة لن يتمكن المستخدم من تثبيت الإضافة في الإصدار العادي من جودو وسيحتاج لنسخة Godot Mono.

بعد الانتهاء من ملء البيانات المطلوبة نضغط على زر أنشئ Create، ستنشأ إضافة محرر Editor Plugin، وإضافات المحرر هي أدوات إضافية تعمل أثناء تشغيل محرر جودو لمساعدة المطورين على كتابة الشيفرات بسهولة.

إنشاء واجهة المستخدم

ننتقل لتطوير واجهة الأداة والتي ستكون مشهد ثنائي الأبعاد يضم صندوق محادثة Chat Box، وحقل نصي Text Field، ومكونات أخرى كما في الصورة أعلاه. لتصميم هذه الواجهة علينا اتباع الخطوات التالية:

ننتقل للتبويب مشهد من داخل محرك جودو، وننشئ عقدة تحكم رئيسية Control ونعدِّل اسمها إلى Chat، ثم نضغط بزر الفأرة الأيمن على المنطقة الفارغة في تبويب المشهد، ونختار إضافة عقدة فرعية Add Child Node. ستظهر مجموعة من الاختيارات لتحديد نوع العقدة الفرعية، نختار TextEdit، ثم نحدد العقدة الفرعية ونبحث في قائمة الفاحص عن خاصية Anchor Preset في قسم Layout والتي تحدد مكان العقدة داخل المشهد، سنحدد خيار على كامل المستطيل Full Rect ثم نضبط حجم العقدة بشكل مناسب، فهذه العقدة ستكون صندوق الدردشة الذي سنتواصل منه مع نموذج OpenAI.

بعدها نضيف عقدة فرعية أخرى من نوع Button، ثم نضبط الخاصية Anchor Preset لها بالقيمة Bottom Right أي في الأسفل يمينًا، ثم نعدّل أبعاد الزر وأخيرًا نعدل خاصية نص الزر Text إلى Chat، ثم نضيف عقدة فرعية جديدة أخرى نوعها TextEdit، ونحدد الخاصية Anchor Preset لها في الأسفل يمينًا لتكون أسفل يمين الواجهة، ونحدد أبعادها ونجعلها أعلى زر Chat.

بعد ذلك نضيف عقدة فرعية نوعها حاوية HBoxContainer، ونحدد مكانها ضمن Anchor Preset إلى القيمة Bottom Wide أي بالعرض بالأسفل، ثم نضبط أبعادها، بعدها ننقر بالزر الأيمن على العقدة ونضيف لها ثلاث عقد فرعية من نوع Button، ثم نعدل أسماء تلك الأزرار إلى Summary و Action وHelp ونحدد الأزرار الثلاثة وننتقل إلى Layout ومنها إلى Container Sizing ونختار Expand و Fit كي تتوسع هذه الأزرار وتتناسب مع الحاوية HBoxContainer.

أخيرًا نضبط قياسات صندوق الدردشة ومنطقة تحرير النصوص لتتناسب مع أحجام الأزرار، ويمكن إضافة عقدة فرعية من نوع HSeparator لأسباب جمالية، وفيما يلي الشكل الذي ستظهر عليه شجرة العقد ضمن المشهد:

بعد الانتهاء من تصميم الواجهة، سنحفظها في ملف باسم chat.tscn، والآن صارت واجهتنا جاهزة لبدء كتابة الأكواد البرمجية اللازمة لعمل الإضافة.

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

سيبدو تبويب إضافة الدردشة ضمن محرك جودو بالشكل التالي:

إعداد الكود البرمجي

حان دور كتابة الكود البرمجي لأداتنا والذي سيوفر تكاملًا مع الواجهة البرمجية OpenAI API، نبدأ بوراثة الصنف EditorPlugin، وتعريف بعض المتغيرات والثوابت، كالآتي:

@tool 
extends EditorPlugin 
const MySettings:StringName = "res://addons/GPTIntegration/settings.json" 

enum modes { 
 Action,  
 Summarise, 
 Chat, 
 Help 
} 

var api_key = "" ## put the API key here
var max_tokens = 1024 # How many tokens can you use to generate your response
var temperature = 0.5 # how "crazy" you want it to be
var url = "https://api.openai.com/v1/completions" # the open api url
var headers = ["Content-Type: application/json", "Authorization: Bearer " + api_key] 
var engine = "text-davinachi-003" # What engine you want to use
var chat_dock 
var http_request :HTTPRequest 
var current_mode 
var cursor_pos 
var code_editor 
var settings_menu

عرَّفنا في هذه الشيفرات الثابت MySettings، والذي يشير إلى ملف JSON الذي سنخزن فيه إعداداتنا، كما عرفنا متغير modes الذي يسمح للأداة أن تعمل بأساليب مختلفة فهو متغير من نمط تعدادي enum يعرّف الأوضاع التي يمكن أن تتواجد فيها الإضافة وإن كانت ستُنفذ إجراءً محددًا، أو تلخص نصًا، أو ستجري محادثة مع المستخدم، أو توفر مساعدة.

أنشأنا كذلك المتغيرات api_key  و max_tokens   و tempreture و url و header و engin المسؤولة عن التفاعل مع واجهة برمجة تطبيقات OpenAI، وعرفنا أيضًا متغيرات chatdock  و http_request  و cursor_pos و  current_mode و codeeditor  وsettings_menu وهذه المتغيرات مسؤولة عن التفاعل مع محرك جودو .

الدخول للشجرة

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

func _enter_tree(): 
 print('_enter_tree') 
 chat_dock = preload("res://addons/GPTIntegration/Chat.tscn").instantiate() 
 add_control_to_dock(EditorPlugin.DOCK_SLOT_LEFT_UR, chat_dock) 
 chat_dock.get_node("Button").connect("pressed", _on_chat_button_down) 
 chat_dock.get_node("HBoxContainer/Action").connect("pressed", _on_action_button_down) 
 chat_dock.get_node("HBoxContainer/Help").connect("pressed", _on_help_button_down) 
 chat_dock.get_node("HBoxContainer/Summary").connect("pressed", _on_summary_button_down) 
 add_tool_menu_item("GPT Chat", on_show_settings) 
 load_settings() 
 pass

نبدأ في هذا الكود بتحميل نافذة الدردشة في التبويب chat dock، ثم نستنسخه ونضيفه إلى التبويب العلوي الأيسر -بجانب تبويب المشهد- بعد ذلك، نحصل على عقد الأزرار Button و Action و Help و Summary من نافذة الدردشة ونربطها حدث الضغط عليها بالدوال المناسبة on_chat_button_down و on_action_button_down و on_help_button_down و on_summary_button_down على التوالي. كما نضيف عنصرًا في قائمة الأدوات باسم GPT Chat الذي يستدعي الدالة on_show_settings عند النقر عليه. وأخيرًا، نستدعي الدالة load_setting لتحميل الإعدادات من ملف JSON.

الخروج من الشجرة

عند الخروج من شجرة المشهد، سنحتاج لإزالة تبويب نافذة الدردشة chat dock الذي أضفناه في الخطوة السابقة مع حفظ الإعدادات، كما يلي:

func _exit_tree(): 
 remove_control_from_docks(chat_dock) 
 chat_dock.queue_free() 
 remove_tool_menu_item("GPT Chat") 
 save_settings() 
 pass

نُزيل في هذه الشيفرة كل ما يتعلق بإضافة روبوت المحادثة ثم نضعه ضمن المحذوفات، كما نُزيل التبويب GPT Chat، وأخيرًا نستدعي الدالة  save_settings لحفظ إعدادات الإضافة إلى ملف JSON.

معالجة أحداث الضغط على الأزرار

الآن لنعالج ضغطات أزرار الأداة، فحين نضغط على زر Chat مثلًا نريد أن ترسل الأداة طلبًا إلى نموذج OpenAI بالنص أو المُوجّه prompt المكتوب في المساحة النصية TextEdit، وفيما يلي كيفية تنفيذ ذلك:

func _on_chat_button_down(): 
 if(chat_dock.get_node("TextEdit").text != ""): 
  current_mode = modes.Chat 
  var prompt = chat_dock.get_node("TextEdit").text 
  chat_dock.get_node("TextEdit").text = "" 
  add_to_chat("Me: " + prompt) 
  call_GPT(prompt)

فحصنا بالكود أعلاه إن كانت العقدة TextEdit غير فارغة وتتضمن مُوجّه Prompt مكتوب للتواصل مع نموذج الذكاء الاصطناعي، ففي هذه الحالة نضبط الإضافة إلى الوضع Chat، ثم نستنسخ النص ونضعه في الصياغة Me: prompt ليظهر بهذه الصياغة في واجهة المستخدم، ثم نحذف النص من TextEdit، ونستدعي الدالة call_GPT ونمرر لها المُوجّه الذي نود إيصاله إلى نموذج OpenAI.

ننتقل بعد ذلك إلى معالجة حدث الضغط على زر Action نود أن نرسل إلى نموذج OpenAI طلب لتنفيذ الأمر المكتوب على الشيفرات المحددة، وفيما يلي كيفية تنفيذ ذلك:

func _on_action_button_down(): 
 current_mode = modes.Action 
 call_GPT("Code this for Godot " + get_selected_code())

حوَّلنا في الشيفرات السابقة وضع الملحق إلى Action، ثم استدعينا الدالة call_GPT مع إعطائها المُوجّه prompt الذي نرغب في تنفيذه.

وبعد ذلك نعالج حدث الضغط على زر Help، حيث نرغب بالحصول على شرح للأكواد المحددة عند الضغط عليه، ولتنفيذ ذلك نكتب:

func _on_help_button_down(): 
 current_mode = modes.Help 
 var code = get_selected_code() 
 chat_dock.get_node("TextEdit").text = "" 
 add_to_chat("Me: " + "What is wrong with this GDScript code? " + code) 
 call_GPT("What is wrong with this GDScript code? " + code)

بدَّلنا في هذه الشيفرات وضع الإضافة إلى Help، ثم أضفنا المُوجّه المكتوب في TextEdit وفق الصياغة Me: prompt الظاهرة في واجهة المستخدم، ثم حذفناه من العقدة TextEdit واستدعينا الدالة call_GPT لترسل الأمر إلى OpenAI للمساعدة في فهم الشيفرات المحددة.

وأخيرًا، نعالج حدث الضغط على زر Summary نود من نموذج OpenAI أن ترسل تلخيصًا للشيفرات المختارة، وذلك كما يلي:

func _on_summary_button_down(): 
 current_mode = modes.Summarise 
 call_GPT("Summarize this GDScript Code " + get_selected_code())

استبدلنا وضع الأداة إلى Summarise، ثم استدعينا الدالة call_GPT ومررنا لها مُوجِّه لتلخيص الأكواد المحددة.

معالجة الاستجابة

الآن، لنعالج استجابات الطلبات التي حصلنا عليها من OpenAI  وسنفعل ذلك باستخدام الدالة on_request_completed. وسنعتمد على الوضع الحالي للأداة فهل هو Chat أو Summarise أو Help أو Action لنحدد فيما إذا كنا سنضع الإجابة التي حصلنا عليها في مساحة الدردشة بالروبوت أم ضمن أكواد المحرر مباشرة.

func _on_request_completed(result, responseCode, headers, body): 
 print(result, responseCode, headers, body) 
 var json = JSON.new() 
 var parse_result = json.parse(body.get_string_from_utf8()) 
 if parse_result: 
  printerr(parse_result) 
  return 
 var response = json.get_data() 
 if response is Dictionary: 
  print("Response", response) 
  if response.has("error"): 
   print("Error", response['error']) 
   return 
 else: 
  print("Response is not a Dictionary", headers) 
  return 
 var newStr = response.choices[0].text 
 if current_mode == modes.Chat: 
  add_to_chat("GPT: " + newStr) 
 elif current_mode == modes.Summarise: 
  var str = response.choices[0].text.replace("\n" , "") 
  newStr = "# " 
  var lineLength = 50 
  var currentLineLength = 0 
  for i in range(str.length()): 
   if currentLineLength >= lineLength and str[i] == " ": 
    newStr += "\n# " 
    currentLineLength = 0 
   else: 
    newStr += str[i] 
    currentLineLength += 1 
  code_editor.insert_line_at(cursor_pos, newStr) 
 elif current_mode == modes.Action: 
  code_editor.insert_line_at(cursor_pos, newStr) 
 elif current_mode == modes.Help: 
  add_to_chat("GPT: " + response.choices[0].text) 
 pass

نحلل في الكود أعلاه الاستجابة التي حصلنا عليها من OpenAI ونتحقق مما إذا كانت عبارة عن قاموس dictionart، فإذا كانت كذلك سنستخرج النص من الاستجابة، وفي حال كان الوضع الحالي المحدد في الأداة هو Chat  نضيف النص إلى الدردشة مع وضع البادئة GPT. وإذا كان الوضع الحالي هو وضع Summarise فسندرجه في محرر الأكواد كنسخة ملخصة من الكود المحدد بحيث لا يتجاوز طول كل سطر 50 حرفًا ويبدأ كل سطر برمز  # ، وإذا كان الوضع الحالي هو Action، سندرج نص الاستجابة في محرر الأكواد مباشرة. أما إذا كان الوضع الحالي هو Help فسنضيف نص الاستجابة إلى الدردشة مع البادئة GPT.

حفظ وتحميل الإعدادات

لنعمل الآن على حفظ إعدادات الإضافة عن طريق الدالة save_settings حيث سننشئ ملف JSON يحتوي قيم المتغيرات api_key maxtokens و maxtokens وengine، ونحدد المجلد res://addons/GPTIntegration لتخزين هذا الملف، بعدها نحمّل الإعدادات من خلال الدالة load_settings التي تفتح  الملف JSON  وتستخرج بياناته وتعين قيم المتغيرات api_key maxtokens و maxtokens وengine بناء عليها وفيما يلي كيفية تنفيذ ذلك:

func save_settings(): 
 var data ={ 
  "api_key":api_key, 
  "max_tokens": max_tokens, 
  "temperature": temperature, 
  "engine": engine 
 } 
 print(data) 
 var jsonStr = JSON.stringify(data) 
 var file = FileAccess.open(MySettings, FileAccess.WRITE) 
 file.store_string(jsonStr) 
 file.close() 

أنشأنا في الشيفرات السابقة قاموسًا يضم المتغيرات api_key maxtokens و maxtokens وengine، ثم حولنا هذا القاموس إلى تنسيق JSON، ثم فتحنا ملف JSON على وضع الكتابة وحفظنا فيه البيانات ثم أغلقناه.

func load_settings(): 
 if not FileAccess.file_exists(MySettings): 
  save_settings() 
 var file = FileAccess.open(MySettings, FileAccess.READ) 
 if not file: 
printerr("Unable to create", MySettings, error_string(ERR_CANT_CREATE)) 
  print_stack() 
  return 
 var jsonStr = file.get_as_text() 
 file.close() 
 var data = JSON.parse_string(jsonStr) 
 print(data) 
 api_key = data["api_key"] 
 max_tokens = int(data["max_tokens"]) 
 temperature = float(data["temperature"]) 
 engine = data["engine"]

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

الكود الكامل لإضافة جودو

فيما يلي الكود النهائي الكامل لأداتنا التي تضيف ميزات الذكاء الاصطناعي لمحرر ألعاب جودو:

@tool
extends EditorPlugin

const MySettings:StringName = "res://addons/GPTIntegration/settings.json"

enum modes {
    Action, 
    Summarise,
    Chat,
    Help
}

var api_key = ""
var max_tokens = 1024
var temperature = 0.5
var url = "https://api.openai.com/v1/completions"
var headers = ["Content-Type: application/json", "Authorization: Bearer " + api_key]
var engine = "text-davinachi-003"
var chat_dock
var http_request :HTTPRequest
var current_mode
var cursor_pos
var code_editor
var settings_menu

func _enter_tree():
    printt('_enter_tree')
    chat_dock = preload("res://addons/GPTIntegration/Chat.tscn").instantiate()
    add_control_to_dock(EditorPlugin.DOCK_SLOT_LEFT_UR, chat_dock)

    chat_dock.get_node("Button").connect("pressed", _on_chat_button_down)
    chat_dock.get_node("HBoxContainer/Action").connect("pressed", _on_action_button_down)
    chat_dock.get_node("HBoxContainer/Help").connect("pressed", _on_help_button_down)
    chat_dock.get_node("HBoxContainer/Summary").connect("pressed", _on_summary_button_down)
    # Initialization of the plugin goes here.
    add_tool_menu_item("GPT Chat", on_show_settings)
    load_settings()
    pass

func on_show_settings():
    settings_menu = preload("res://addons/GPTIntegration/SettingsWindow.tscn").instantiate()
    settings_menu.get_node("Control/Button").connect("pressed", on_settings_button_down)
    set_settings(api_key, int(max_tokens), float(temperature), engine)
    add_child(settings_menu)
    settings_menu.connect("close_requested", settings_menu_close)
    settings_menu.popup()

func on_settings_button_down():
    api_key = settings_menu.get_node("HBoxContainer/VBoxContainer2/APIKey").text

    max_tokens = int(settings_menu.get_node("HBoxContainer/VBoxContainer2/MaxTokens").text)
    temperature = float(settings_menu.get_node("HBoxContainer/VBoxContainer2/Temperature").text)
    var index = settings_menu.get_node("HBoxContainer/VBoxContainer2/OptionButton").selected

    if engine == "text-davinchi-003":
        index = 0
    elif index == 1:
        engine = "code-davinci-002"
    elif index == 2:
        engine = "text-curie-001"
    elif index == 3: 
        engine = "text-babbage-001"
    elif index == 4:
        engine = "text-ada-001"
    elif index == 5:
        engine = "code-cushman-002"

    settings_menu_close()
    pass

func settings_menu_close():
    settings_menu.queue_free()
    pass

# This GDScript code sets the settings in a settings
# menu. It sets the API key, the maximum number of tokens,
# the temperature, and the engine. The engine is set
# by selecting the corresponding ID from a list of options.
func set_settings(api_key, maxtokens, temp, engine):
    settings_menu.get_node("HBoxContainer/VBoxContainer2/APIKey").text = api_key
    settings_menu.get_node("HBoxContainer/VBoxContainer2/MaxTokens").text = str(maxtokens)
    settings_menu.get_node("HBoxContainer/VBoxContainer2/Temperature").text = str(temp)
    var id = 0

    if engine == "text-davinchi-003":
        id = 0
    elif  engine == "code-davinci-002":
        id = 1
    elif engine == "text-curie-001":
        id = 2
    elif engine == "text-babbage-001":
        id = 3
    elif engine == "text-ada-001":
        id = 4
    elif engine == "code-cushman-002":
        id = 5

    settings_menu.get_node("HBoxContainer/VBoxContainer2/OptionButton").select(id)

func _exit_tree():
    # Clean-up of the plugin goes here.
    remove_control_from_docks(chat_dock)
    chat_dock.queue_free()
    remove_tool_menu_item("GPT Chat")
    save_settings()
    pass

func _ready():
    http_request = HTTPRequest.new()
    add_child(http_request)
    http_request.connect("request_completed", _on_request_completed)

func _on_chat_button_down():
    if(chat_dock.get_node("TextEdit").text != ""):
        current_mode = modes.Chat
        var prompt = chat_dock.get_node("TextEdit").text
        chat_dock.get_node("TextEdit").text = ""
        add_to_chat("Me: " + prompt)
        call_GPT(prompt)

func call_GPT(prompt):
    var body = JSON.new().stringify({
        "prompt": prompt,
        "temperature": temperature,
        "max_tokens": max_tokens,
        "model": "text-davinci-003"
    })
    var error = http_request.request(url, ["Content-Type: application/json", "Authorization: Bearer " + api_key], HTTPClient.METHOD_POST, body)

    if error != OK:
        push_error("Something Went Wrong!")

func _on_action_button_down():
    current_mode = modes.Action
    call_GPT("Code this for Godot " + get_selected_code())

func _on_help_button_down():
    current_mode = modes.Help
    var code = get_selected_code()
    chat_dock.get_node("TextEdit").text = ""
    add_to_chat("Me: " + "What is wrong with this GDScript code? " + code)
    call_GPT("What is wrong with this GDScript code? " + code)

func _on_summary_button_down():
    current_mode = modes.Summarise
    call_GPT("Summarize this GDScript Code " + get_selected_code())



# This GDScript code is used to handle the response from
# a request and either add it to a chat or summarise
# it. If the mode is set to Chat, it will add the response
# to the chat with the prefix "GPT". If the mode is set
# to Summarise, it will loop through the response and
# insert it into the code editor as a summarised version
# with each line having a maximum length of 50 characters
# and each line starting with a "#".
func _on_request_completed(result, responseCode, headers, body):
    printt(result, responseCode, headers, body)
    var json = JSON.new()
    var parse_result = json.parse(body.get_string_from_utf8())
    if parse_result:
        printerr(parse_result)
        return
    var response = json.get_data()
    if response is Dictionary:
        printt("Response", response)
        if response.has("error"):
            printt("Error", response['error'])
            return
    else:
        printt("Response is not a Dictionary", headers)
        return

    var newStr = response.choices[0].text
    if current_mode == modes.Chat:
        add_to_chat("GPT: " + newStr)
    elif current_mode == modes.Summarise:
        var str = response.choices[0].text.replace("\n" , "")
        newStr = "# "
        var lineLength = 50
        var currentLineLength = 0
        for i in range(str.length()):
            if currentLineLength >= lineLength and str[i] == " ":
                newStr += "\n# "
                currentLineLength = 0
            else:
                newStr += str[i]
                currentLineLength += 1
        code_editor.insert_line_at(cursor_pos, newStr)
    elif current_mode == modes.Action:
        code_editor.insert_line_at(cursor_pos, newStr)
    elif current_mode == modes.Help:
        add_to_chat("GPT: " + response.choices[0].text)
    pass

func get_selected_code():
    var currentScriptEditor = get_editor_interface().get_script_editor().get_current_editor()

    code_editor = currentScriptEditor.get_base_editor()

    if current_mode == modes.Summarise:
        cursor_pos = code_editor.get_selection_from_line()
    elif current_mode == modes.Action:
        cursor_pos = code_editor.get_selection_to_line()
    return code_editor.get_selected_text()

func add_to_chat(text):
    var chat_bubble = preload("res://addons/GPTIntegration/ChatBubble.tscn").instantiate()
    chat_bubble.get_node("RichTextLabel").text = "\n" + text + "\n"
    chat_dock.get_node("ScrollContainer/VBoxContainer").add_child(chat_bubble)
    #chat_dock.get_node("RichTextLabel").text += "\n" + text + "\n"

# This GDScript code creates a JSON file containing the
# values of the variables "api_key", "max_tokens", "temperature",
# and "engine", and stores the file in the "res://addons/GPTIntegration/"
# directory.
func save_settings():

    var data ={
        "api_key":api_key,
        "max_tokens": max_tokens,
        "temperature": temperature,
        "engine": engine
    }
    print(data)
    var jsonStr = JSON.stringify(data)
    var file = FileAccess.open(MySettings, FileAccess.WRITE)

    file.store_string(jsonStr)
    file.close()

# This GDScript code opens a JSON file, parses the data
# from it, and assigns the values to variables. The variables
# are api_key, max_tokens, temperature, and engine.
func load_settings():
    if not FileAccess.file_exists(MySettings):
        save_settings()

    var file = FileAccess.open(MySettings, FileAccess.READ)
    if not file:
        printerr("Unable to create", MySettings, error_string(ERR_CANT_CREATE))
        print_stack()
        return

    var jsonStr = file.get_as_text()
    file.close()
    var data = JSON.parse_string(jsonStr)
    print(data)
    api_key = data["api_key"]
    max_tokens = int(data["max_tokens"])
    temperature = float(data["temperature"])
    engine = data["engine"]

الخاتمة

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

ترجمة -وبتصرف- لمقال Building a Godot Engine Tool Script for Interacting with OpenAI

اقرأ أيضًا

• تعرف على أشهر لغات برمجة الألعاب
• الرؤية التصميمية لمحرك اﻷلعاب جودو Godot
• لغات البرمجة المتاحة في جودو Godot
• كيف تصبح مبرمج ألعاب فيديو ناجح

العقد Nodes هي البنى الأساسية لإنشاء الألعاب في محرك جودو Godot، فالعقدة هي كائن يمكنه تمثيل نوع معين من وظائف اللعبة، فقد تعرض بعض أنواع العقد رسومات graphics أو تشغّل رسومًا متحركة animation أو تمثّل نموذجًا ثلاثي الأبعاد 3D model لكائن.

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

العمل مع العقد

برمجيًا، العقد عبارة عن كائنات objects فهي تغلّف البيانات data والسلوك behavior، ويمكنها أن ترث خاصيات properties من عقد أخرى. لننقر الآن على زر + أو زر إضافة/إنشاء عقدة جديدة Add/Create a New Node في تبويب المشهد Scene بدلًا من استخدام أحد الاقتراحات الافتراضية للعقد التي يقترحها علينا جودو وذلك كما يلي:

بعد النقر على زر إنشاء عقدة جديدة سنشاهد الآن تسلسل هرمي يتضمن كافة أنواع العقد المتاحة في محرك الألعاب جودو كما يلي:

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

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

أصبح لدينا الآن العقدة Sprite2D في تبويب المشهد Scene، لذا نتأكد من تحديدها، ثم ننظر إلى تبويب الفاحص Inspector على الجانب الأيسر من شاشة محرر جودو حيث سنرى فيها جميع خاصيات العقدة التي حدّدناها.

نلاحظ أن الخاصيات الظاهرة للعقدة ليست فقط التي تخص عقدة Sprite2D نفسها، بل تشمل أيضًا الخصائص التي ورثتها من العقد الأخرى التي جاءت قبلها في سلسلة من العقد وهي منظَّمة حسب مصدرها، حيث ترث العقدة Sprite2D العقدة Node2D التي ترث بدورها العقدة CanvasItem التي ترث بدورها العقدة Node الأساسية البسيطة.

بعد إضافة هذه العقدة للعبتنا سنلاحظ أن الشخصية الرسومية Sprite لا تظهر كما هو متوقع في واجهة المستخدم. فالغرض من هذه العقدة هو عرض صورة أو خامة Texture. وبما أن الخاصية Texture في حاوية الفاحص Inspector فارغة حاليًا فلهذا السبب لم تظهر في نافذة العرض.

لحسن الحظ يأتي كل مشروع جديد من جودو مع صورة باسم icon.svg يمكننا استخدامها حاليًا، وهذه الصورة هي أيقونة محرك الألعاب جودو، لذا سنسحبها من التبويب نظام الملفات Filesystem في الجانب الأيمن ونفلتها في الحقل الخاص بالخاصية Texture.

ننقر لتوسيع قسم التحويل Transform في حاوية الفاحص Inspector، ونكتب ضمن خاصية الموضع Position القيمة 50 للمحور الأفقي x والقيمة 50 للمحور العمودي y لنحدد مكان ظهور عقدتنا داخل المشهد.

كما يمكننا أيضًا النقر على الشخصية الرسومية Sprite وسحبها ضمن نافذة العرض، وسنرى أن قيم الموضع Position تتغير أثناء تحريكنا لها.

إحدى الخصائص المهمة للعقد هي إمكانية ترتيبها في تسلسل هرمي من العقدة الأم إلى العقدة الابن، مما يتيح لنا تنظيم الكائنات داخل المشهد، على سبيل المثال يمكننا إنشاء عقدة رئيسية للاعب Player تحتوي على عقد فرعية متعددة مثل عقدة Sprite2D لتمثيل الشكل المرئي للاعب وعقدة فرعية أخرى AnimationPlayer لتحريك اللاعب.

لنجرب إنشاء تسلسل عقد هرمي دعونا نحدد أولاً عقدتنا Sprite2D، ثم نضغط على زر الإضافة مرة أخرى لإضافة عقدة Sprite2D جديدة. بعد ذلك، لنسحب الأيقونة نفسها لليسار قليلًا، ونعين خاصية الخامة Texture الخاصة بهذه العقدة الجديدة. نلاحظ أن قيم الموضع Position للعقدة الأب تتغير أثناء تحريكها. لكن في حال فحص قيم الموضع Position للعقدة الابن سنجد أنها ما تزال (50,50). فقيمة خاصية التحويل Transform لها نسبية وتعتمد على عقدة الكائن الأب.

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

المشاهد Scenes

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

فتجميع العقد مع بعضها البعض ضمن محرك ألعاب جودو يوفر لنا أداة قوية، ويمكّننا من إنشاء كائنات معقدة من وحدات البناء التي تمثلها العقد، فمثلًا قد تحتوي عقدة اللاعب Player في لعبتنا على العديد من العقد الأبناء المرتبطة بها مثل Sprite2D للعرض و AnimationPlayer لتحريكها و Camera2D لمتابعتها وغير ذلك.

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

الخاتمة

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

ترجمة -وبتصرّف- للقسم Nodes: Godot's building blocks من توثيقات Kidscancode.

اقرأ أيضًا

• الرؤية التصميمية لمحرك اﻷلعاب جودو Godot
• طبقات الحاوية في جودو
• إنشاء وبرمجة مشاهد لعبة ثنائية الألعاب في محرك جودو
• إنشاء نسخ من المشاهد والعقد في جودو

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

ما هو محرك الألعاب جودو؟

سنتعرّف فيما يلي على محرك الألعاب جودو وسبب استخدامه والميزات التي يوفّرها.

محركات الألعاب Game Engines

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

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

فمحرّك الألعاب هو مجموعة من الأدوات والتقنيات المُصمَّمة لمساعدة مطوري الألعاب، مما يسمح لنا بالتركيز أكثر على بناء لعبتنا دون الحاجة لإعادة اختراع العجلة، حيث سنوضّح فيما يلي بعض الميزات التي يوفرها محرك الألعاب الجيد:

• التصيير أو الإخراج Rendering ثنائي الأبعاد وثلاثي الأبعاد: هو عملية عرض اللعبة على شاشة اللاعب، ويجب أن يعمل محرك التصيير الجيد مع ميزات وحدة معالجة الرسوميات GPU الحديثة، ويدعم الشاشات عالية الدقة، ويحسن المؤثرات مثل الإضاءة ومنظور اللعب Perspective مع الحفاظ في الوقت نفسه على معدّل إطارات مرتفع لضمان تجربة لعب سلسة

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

• دعم المنصات: قد تحتاج لإصدار لعبتك على منصات متعددة كالهاتف المحمول والويب والحاسوب الشخصي والطرفية Console، فمحرّك الألعاب الجيد يتيح لنا بناء لعبتنا مرة واحدة وتصديرها إلى منصة أو منصات أخرى

• بيئة التطوير: تُجمَع كل هذه الأدوات في تطبيق واحد، مما يؤدي إلى وجود كل شيء في بيئة واحدة حتى لا تضطر إلى تعلّم سير عمل جديد لكل مشروع تعمل عليه

هناك عشرات محركات الألعاب الشهيرة التي يمكننا الاختيار من بينها مثل جودو GoDot ويونتي Unity وآن ريل Unreal وغيرها. وتجدر الإشارة لأن غالبية محرّكات الألعاب الشهيرة هي منتجات تجارية، فقد تكون مجانية للتنزيل وقد لا تكون كذلك، وأنها قد تتطلّب اتفاقية ترخيص أو حقوق ملكية إذا أردنا إصدار ألعابنا وخاصة إذا حقّقت أرباحًا، لذا يجب قراءة وفهم ما نوافق عليه وما يُسمح وما لا يُسمح بفعله عندما ننوي استخدام أي محرك.

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

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

اكتشاف واجهة محرر الألعاب جودو

سنكتشف فيما يلي واجهة محرك الألعاب جودو التي ستقضي فيها معظم وقتك عند بناء لعبتك.

مدير المشروع Project Manager

أول شيء سنراه عند فتح محرك ألعاب جودو هو نافذة مدير المشروع Project Manager،  والتي ستبدو كما يلي:

سنرى في هذه النافذة قائمة بمشاريع جودو، حيث يمكننا اختيار مشروع موجود مسبقًا والنقر على زر تشغيل Run لتشغيل اللعبة أو النقر على زر تحرير Edit للعمل على اللعبة في محرّر جودو. لنبدأ بالنقر على زر مشروع جديد New Project، في حال لم يكن لدينا أي مشاريع حتى الآن.

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

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

يجب أن نحرص على اختيار اسم يصف عمل مشروع لعبتنا عند تسميته، فمثلًا لا يعد الاسم New Game Project23 جيدًا لكونه لا يساعدنا في تذكر ما يفعله هذا المشروع. يجب أيضًا أن نفكر في التوافق، فقد تكون بعض أنظمة التشغيل حساسة لحالة الأحرف وبعضها الآخر غير حساس لحالة الأحرف، مما يؤدي لحدوث مشكلات إذا نقلنا المشروع أو شاركناه من حاسوب لآخر، لذا يعتمد العديد من المبرمجين قواعد تسمية موحّدة مثل عدم وجود مسافات بين الكلمات واستخدام شرطة سفلية _ بينها. سنسمّي المشروع الجديد getting_started، لذا نكتب هذا الاسم ونتأكد من تفعيل خيار أنشئ مجلد Create Folder، قبل النقر على زر إنشاء وتعديل Create & Edit أسفل النافذة.

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

• نافذة العرض Viewport: المكان الذي نرى فيه أجزاء لعبتنا أثناء العمل عليها
• مساحات العمل Workspaces: في الجزء العلوي الأوسط حيث يمكننا التبديل بين العمل في مساحات العمل ثنائية الأبعاد 2D أو ثلاثية الأبعاد 3D أو السكربت، ولكن تكون البداية من مساحة العمل ثلاثية الأبعاد
• أزرار اختبار اللعب Playtest Buttons: تتيح لنا هذه الأزرار تشغيل اللعبة والتحكم فيها أثناء الاختبار
• الحاويات Docks أو التبويبات Tabs: توجد على جانبي واجهة جودو عدد من الحاويات Docks والتبويبات حيث يمكننا من خلالها عرض عناصر اللعبة وضبط خاصياتها
• اللوحة السفلية Bottom Panel: تتضمن هذه اللوحة معلومات خاصة بالسياق لأدوات مختلفة، وأهمها لوحة الخرج Output، حيث سنرى رسائل الأخطاء أو المعلومات عند تشغيل لعبتنا

إعدادات المشروع Project Settings

تحدثنا عن الأجزاء الرئيسية لواجهة محرر جودو وكيفية عملها، ولنتحدّث الآن عن إعدادات المشروع، فإحدى المهام الأولى عند بدء مشروع جديد هي التأكد من صحة الإعدادات. ننقر على خيار مشروع Project من القائمة ثم نحدّد خيار إعدادات المشروع Project Settings.

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

القسم الثاني هو قسم الإظهار Display ثم نافذة Window، وهو المكان الذي يمكننا من تحديد طريقة ظهور لعبتنا وعرضها. إذ يمكننا ضبط العرض width والارتفاع height لضبط حجم نافذة اللعبة، فمثلًا إذا أنشأنا لعبة لهاتف محمول، فيجب ضبطها على دقة وأبعاد الجهاز المستهدف. توجد أيضًا إعدادات لتغيير الحجم Scaling والتمدّد Stretching ووضع ملء الشاشة وغير ذلك. سنترك الحجم الافتراضي كما هو حاليًا، حيث سنتحدث لاحقًا عن كيفية ضبط هذه الإعدادات بدقة لتشغيل اللعبة على أجهزة مختلفة.

توجد أيضًا بعض التبويبات في الجزء العلوي من النافذة مثل التبويب عام General الذي تحدّثنا عنه. سنتحدث الآن بإيجاز عن تبويب خريطة الإدخال Input Map، وهو المكان الذي يمكننا فيه تحديد إجراءات إدخال مختلفة للتحكم في إجراءات الإدخال أي كيف نتعامل مع مدخلات لوحة المفاتيح والفأرة وغير ذلك. حيث نهتم في لعبتنا في تحديد المفتاح أو الزر الذي يضغط عليه اللاعب، وتحديد الإجراء الذي سيحدث عند الضغط عليه للتعامل مع مدخلات اللاعب بكفاءة.

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

دليل الانتقال من الإصدار Godot 3.x للإصدار Godot 4.0

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

الأسماء الجديدة

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

• العقد ثنائية الأبعاد 2D وثلاثية الأبعاد 3D: حملت العقد ثنائية الأبعاد في الإصدار Godot 3.x اللاحقة 2D، ولكن لم يكن للعقد ثلاثية الأبعاد لاحقة، لذا أصبحت الآن جميع العقد تحمل إما اللاحقة 2D أو اللاحقة 3D لجعل الأمور متناسقة مثل RigidBody2D و RigidBody3D
• أعيدت تسمية العقدة Spatial إلى Node3D في الفئة ثلاثية الأبعاد لتتناسب معها
• أعيدت تسمية واحدة من أكثر العقد شهرة وهي KinematicBody إلى CharacterBody2D أو CharacterBody3D، وسنوضّح لاحقًا مزيدًا من تغييرات الواجهة البرمجية API لهذه العقدة.
• أعيدت تسمية الدالة instance()‎ الخاصة بالعقدة PackedScene إلى instantiate()‎
• حلت الخاصيات position و global_position محل الخاصيات translation و global_translation للعقد ثلاثية الأبعاد، مما يجعلها متوافقة مع العقد ثنائية الأبعاد

الإشارات Signals والعناصر القابلة للاستدعاء Callables

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

فيما يلي مثال لتعريف إشارة وتوصيلها وإرسالها:

extends Node

signal my_signal

func _ready():
    my_signal.connect(signal_handler)

func _input(event):
    if event.is_action_pressed("ui_select"):
        my_signal.emit()

func signal_handler():
    print("signal received")

عناصر الانتقال التدريجي Tweens

في حال استخدام SceneTreeTween في الإصدار Godot 3.5، فسنكون على دراية باستخدام عناصر الانتقال التدريجي Tween التي تُستخدَم مثلًا لتغيير اللون أو الموقع الخاص بالكائن تدريجيًا في الإصدار Godot 4.0.

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

العقدة AnimatedSprite[2D|3D]‎

يُعَد اختفاء الخاصية playing أكبر تغيير لمستخدمي الإصدار 3‎.x‎ لهذه العقدة، حيث أصبحت أكثر تناسقًا مع استخدام AnimationPlayer، إذ يمكن تبديل التشغيل التلقائي في لوحة SpriteFrames لتشغيل الرسوم المتحركة تلقائيًا. وعلينا استخدام الدالتين play()‎ و stop()‎ في الشيفرة البرمجية للتحكم في التشغيل.

العقدة CharacterBody[2D|3D]‎

أكبر تغيير في هذه العقدة هو استخدام الدالة move_and_slide()‎ التي لم تَعُد تستقبل معاملات، حيث فقد أصبحت جميع المعاملات خاصيات مُدمَجة، ويتضمن ذلك الخاصية velocity الأصيلة، لذا فلا حاجة للتصريح عن هذه الخاصيات.

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

عقدة TileMap

جُدّدت العقدة TileMap بالكامل في الإصدار 4.0 ابتداءً من كيفية إنشاء موارد TileSet إلى كيفية رسم عناصر الرقعة Tiles والتفاعل معها.

مولّد الأعداد العشوائية RNG

هناك بعض التغييرات على دوال توليد الأعداد العشوائية المُدمَجة مع لغة البرمجة GDScript، وهذه التغييرات هي:

• لم نعد بحاجة لاستدعاء الدالة randomize()‎، إذ سيكون الاستدعاء تلقائيًا. إذا أردنا الحصول على عشوائية قابلة للتكرار، نستخدم الدالة seed()‎ لضبطها على قيمة محدَّدة مسبقًا.
• حلّت الدالة randf_range()‎ للأعداد العشرية أو الدالة randi_range()‎ للأعداد الصحيحة محل الدالة القديمة rand_range()‎.

كشف تصادم الأشعة Raycasting

توجد واجهة برمجة تطبيقات جديدة عند كشف تصادم الأشعة لاكتشاف التصادم بين الكائنات في الشيفرة البرمجية، حيث تأخذ الدالة PhysicsDirectSpaceState[2D|3D].intersect_ray()‎ كائنًا خاصًا كمعامل، ويحدّد هذا الكائن خاصيات الشعاع، فمثلًا نستخدم ما يلي لكشف تصادم الأشعة في فضاء ثلاثي الأبعاد:

var space = get_world_3d().direct_space_state
var ray = PhysicsRayQueryParameters3D.create(position, destination)
var collision = space.intersect_ray(ray)
if collision:
    print("ray collided")

الخاتمة

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

ترجمة -وبتصرّف- للأقسام What is Godot و The Godot Editor و Migrating from 3.x من توثيقات Kidscancode.

اقرأ أيضًا

• الرؤية التصميمية لمحرك اﻷلعاب جودو Godot
• كتابة برنامجك الأول باستخدام جودو Godot
• العقد Nodes والمشاهد Scenes في جودو Godot
• تعرف على أشهر محركات الألعاب Game Engines

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

لنبدأ بمقدمة حول استخدام محرر التحريك Animation Editor المدمج في محرك ألعاب جودو.

استخدام محرر التحريك Animation Editor

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

إنشاء حركة اللاعب

لنبدأ بإنشاء حركة اللاعب، سنفتح مشهد اللاعب ونحدد العقدة Player ثم نضيف لها العقدة AnimationPlayer هذه العقدة هي المسؤولة عن تشغيل الحركات، بعد إضافة العقدة ستظهر لوحة خاصة بالتحريك باسم Animation في اللوحة السفلية.

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

لنبدأ بإنشاء حركة، ننقر على القائمة المنسدلة تحريك Animation في الأعلى، ثم نختار جديد New.

ينبغي علينا تسمية التحريك الجديد باسم مناسب وليكن float أي طفو أو عوم.

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

نريد أن يبدأ تشغيل الحركة تلقائيًا في بداية اللعب، وأن تتكرر عملية التحريك بدون توقف، ويمكننا تحقيق بذلك عن طريق النقر فوق الزر الذي يحمل أيقونة A+‎ في شريط أدوات التحريك والذي يعني التشغيل التلقائي Autoplay، ثم تفعيل الأسهم التي تدل على تكرار الحركة كما في الصورة التالية.

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

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

ينبغي أن نرى الآن الشريط الرمادي يتسع قليلاً، ليُظهر لنا بداية ونهاية الحركة التي صنعناها ونلاحظ الخط الأزرق العمودي الذي يمثل مؤشر الوقت.

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

إنشاء حركة الطفو Float Animation

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

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

دعونا ندرج الإطار الأول، سنجري هنا تحريكًا لكل من الموضع Position والتدوير Rotation للعقدة character، لذا ينبغي علينا تحديد العقدة character ثم فتح قسم التحويل Transform في الفاحص Inspector، ثم النقر فوق رمز المفتاح بجوار خاصيتي الموضع والتدوير.

عند النقر على رمز المفتاح يطلب منا تحديد نوع المسار الجديد للخاصية.

بالنسبة لسلسلتنا، سنختار إنشاء مسارات RESET وهو الخيار الافتراضي حيث يظهر مساران في المحرر، ويمثل رمز المعين كل إطار رئيسي keyframe.

يمكننا النقر على المعين وسحبه لتحريكه للوقت المناسب، سنحركه في مسار الموضع إلى 0.3 ثانية وفي مسار التدوير إلى 0.1 ثانية.

كما سنحرك مؤشر الوقت إلى 0.5 ثانية عن طريق النقر والسحب على المخطط الزمني الرمادي.

الآن نعود إلى الفاحص Inspector ونعيّن قيمة المحور Y لخاصية الموضع على 0.65 متر ، والمحور X لخاصية التدوير على 8 درجات.

بهذا نكون قد أنشأنا إطار رئيسي لكل من خاصيتي الموضع و التدوير.

لنحرّك الآن الإطار الرئيسي للموضع إلى0.7 ثانية عن طريق سحبه على المخطط الزمني.

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

الآن لنحدد كيف ستنتهي الحركة ونحرك مؤشر الوقت إلى الموضع 1.2 ثانية. ثم نضبط المحور Y لخاصية الموضع على القيمة 0.35 والمحور X لخاصية التدوير على 9- درجة، والآن ننشئ مرة أخرى مفتاح لكل خاصية.

يمكننا معاينة النتيجة بالنقر فوق زر التشغيل أو الضغط على Shift + D. و لإيقاف التشغيل ننقر فوق زر الإيقاف أو نضغط على S.

سنلاحظ أن المحرك يجري عملية تداخل Interpolation بين الإطارات الرئيسية Keyframes التي أنشأناها لإنتاج حركة مستمرة. لكن تبدو الحركة في الوقت الحالي مصطنعة جدًا. وذلك لأن التداخل الافتراضي خطي، مما يسبب انتقالات بتسارع ثابت constant transitions، وهذا يخالف الكيفية التي تتحرك فيها الكائنات الحية في عالمنا الحقيقي.

يمكننا التحكم في طريقة الانتقال بين الإطارات الرئيسية باستخدام ما يسمى بمنحنيات التخفيف easing curves. ننقر ونسحب بين المفتاحين الأوليين في المخطط الزمني لتحديدهما ضمن مربع.

يمكننا بعدها تحرير خصائص كلا المفتاحين في وقت واحد في الفاحص Inspector، حيث يمكنك رؤية خاصية التخفيف Easing.

انقر على المنحني الظاهر في الصورة واسحبه نحو اليسار. سيؤدي ذلك إلى جعل الحركة تتباطئ أو تخف تدريجيًا Ease-out، أي تنتقل سريعًا في البداية وتتباطأ عندما يصل مؤشر الوقت إلى الإطار الرئيسي التالي.

عندما نشغّل الحركة مرة أخرى سنرى الفرق، يجب أن يبدو النصف الأول من الحركة الآن أكثر مرونة.

بعدها نطبّق التخفيف Easing على الإطار الرئيسي الرئيسي الثاني في مسار التدوير.

سنفعل العكس بالنسبة للإطار الرئيسي الثاني لخاصية الموضع ونسحبه إلى اليمين.

الآن سوف يطفو اللاعب عند تشغيل اللعبة وستبدو الحركة كما يلي:

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

يمكننا على سبيل المثال تحريك Pivot لأعلى في حال كان اللاعب الذي أنشأناه قريبًا جدًا من الأرض.

التحكم بالحركة من خلال الشيفرة البرمجية

يمكننا التحكم في تشغيل الحركة التي أنشأناها برمجيًا بناء على مدخلات اللاعب. لنجرب على سبيل المثال تغيير سرعة الحركة عندما تتحرك الشخصية.

نفتح السكربت البرمجي للعقدة Player من خلال النقر على أيقونة السكربت المجاورة لها.

نضيف الشيفرة التالية في الدالة ‎_physics_process()‎، بعد السطر الذي نتحقق فيه من المتجه direction كما يلي:

func _physics_process(delta):
    #...
    if direction != Vector3.ZERO:
        #...
        $AnimationPlayer.speed_scale = 4
    else:
        $AnimationPlayer.speed_scale = 1

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

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

func _physics_process(delta):
    #...
    $Pivot.rotation.x = PI / 6 * velocity.y / jump_impulse

تحريك الأعداء

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

على سبيل المثال، يحتوي كل من مشهدي اللاعب Player والعدو Mob على عقدة محورية pivot وعقدة الشخصية character، لذا في هذه الحالة يمكننا إعادة استخدام الحركة بينهما.

لنفتح مشهد اللاعب player.tsc، ونحدد العقدة AnimationPlayer ونفتح التحريك float. بعد ذلك، ننقر فوق التحريك Animation ومن ثم نحتار نسخ Copy.

ثم نفتح مشهد العدو mob.tscn، وننشئ عقدة فرعية من نوع AnimationPlayer ونحددها، ثم نضغط على تحريك Animation ثم إدارة التحريك Manage Animations ونختار إضافة مكتبة Add Library، سنرى رسالة مفادها "Global library will be created" أي ستنشأ مكتبة عامة نترك الحقل النصي فارغًا ونضغط زر موافق.

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

يمكننا تغيير سرعة التشغيل بناءً على السرعة العشوائية random_speed للعدو. لذا سنفتح سكربت العقدة Mob ونضيف في نهاية دالة initialize()‎ السطر التالي:

func initialize(start_position, player_position):
    #...
    $AnimationPlayer.speed_scale = random_speed / min_speed

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

دورة تطوير الألعاب

ابدأ رحلة صناعة الألعاب ثنائية وثلاثية الأبعاد وابتكر ألعاب ممتعة تفاعلية ومليئة بالتحديات.

اشترك الآن

الكود الكامل للعبة ثلاثية الأبعاد بمحرك جودو

فيما يلي محتوى ملف السكربت Player.gd الخاص بعقدة اللاعب Player

extends CharacterBody3D

signal hit

# سرعة حركة اللاعب مقدرة بالمتر في الثانية
@export var speed = 14
# التسارع نحو الأسفل في الهواء مقدرة بالمتر في الثانية مربع 
@export var fall_acceleration = 75
# الدفعة العامودية المطبقة على الشخصية عند القفز مقدرة بالمتر في الثانية
@export var jump_impulse = 20
# الدفعة العامودية المطبقة على الشخصية عند القفز على عدو مقدرة بالمتر في الثانية
@export var bounce_impulse = 16

var target_velocity = Vector3.ZERO


func _physics_process(delta):
    # أنشأنا متغير محلي لتخزين دخل الاتجاه
    var direction = Vector3.ZERO

    # نتحقق من كل دخل حركة ونحدث الاتجاه حسبه
    if Input.is_action_pressed("move_right"):
        direction.x = direction.x + 1
    if Input.is_action_pressed("move_left"):
        direction.x = direction.x - 1
    if Input.is_action_pressed("move_back"):
        # ‫لاحظ أننا نعمل المحورين x و z الخاصين بالشعاع
        # المستوي‫ XZ هو مستوي الأرض في ثلاثي الأبعاد
        direction.z = direction.z + 1
    if Input.is_action_pressed("move_forward"):
        direction.z = direction.z - 1

    # يمنع الحركة القطرية السريعة
    if direction != Vector3.ZERO:
        direction = direction.normalized()
        $Pivot.look_at(position + direction,Vector3.UP)
        $AnimationPlayer.speed_scale = 4
    else:
        $AnimationPlayer.speed_scale = 1

    # السرعة الأرضية
    target_velocity.x = direction.x * speed
    target_velocity.z = direction.z * speed

    # السرعة العمودية
    if not is_on_floor(): # إذا كان في الهواء يسقط على الأرض أي الجاذبية
        target_velocity.y = target_velocity.y - (fall_acceleration * delta)

    # القفز
    if is_on_floor() and Input.is_action_just_pressed("jump"):
        target_velocity.y = jump_impulse

    # كرر خلال كل الاصطدامات التي تحصل في الإطار
    # ‫يكون ذلك في C كالتالي
# (int i = 0; i < collisions.Count; i++)
    for index in range(get_slide_collision_count()):
        #  نحصل على واحد من التصادمات مع اللاعب
        var collision = get_slide_collision(index)

        # إذا كان التصادم مع الأرض
        if collision.get_collider() == null:
            continue

        # إذا كان التصادم مع العدو
        if collision.get_collider().is_in_group("mob"):
            var mob = collision.get_collider()
            # نتحقق أننا نصدمه من الأعلى
            if Vector3.UP.dot(collision.get_normal()) > 0.1:
                # إذا كان كذلك نسحقه
                mob.squash()
                target_velocity.y = bounce_impulse
                #  يمنع أي استدعاءات مكررة.
                break

    # تحريك الشخصية
    velocity = target_velocity
    move_and_slide()

    $Pivot.rotation.x = PI / 6 * velocity.y / jump_impulse

# أضف ذلك في الأسفل.
func die():
    hit.emit()
    queue_free()

func _on_mob_detector_body_entered(body):
    die()

وفيما يلي ملف السكربت mob.gd الخاص بعقدة العدو Mob

extends CharacterBody3D

# السرعة الدنيا للعدو مقدرة بالمتر في الثانية
@export var min_speed = 10
# السرعة القصوى للعدو مقدرة بالمتر في الثانية
@export var max_speed = 18

# تنبثق عندما يقفز اللاعب على عدو
signal squashed

func _physics_process(_delta):
    move_and_slide()

# يتم استدعاء هذه الدالة من المشهد الأساسي
func initialize(start_position, player_position):
    # نحدد مكان العدو عن طريق وضعه في‫ start_position
    # ‫وندوره نحو player_position لينظر إلى اللاعب
    look_at_from_position(start_position, player_position, Vector3.UP)
    #تدوير العدو عشوائيًا ضمن مجال -90 و +90 درجة
    # لكي لا تتحرك مباشرة نحو اللاعب
    rotate_y(randf_range(-PI / 4, PI / 4))

    # نحسب سرعة عشوائية ‫(عدد صحيح)
    var random_speed = randi_range(min_speed, max_speed)
    # نحسب سرعة امامية تمثل السرعة
    velocity = Vector3.FORWARD * random_speed
    # ‫ثم ندور شعاع السرعة اعتمادًا على دوران العدو حول Y
    # للحركة في الاتجاه الذي ينظر إليه العدو
    velocity = velocity.rotated(Vector3.UP, rotation.y)

func _on_visible_on_screen_notifier_3d_screen_exited():
    queue_free()

func squash():
    squashed.emit()
    queue_free() # دمّر هذه العقدة

الخلاصة

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

ترجمة - وبتصرف - لقسم Character animation من توثيق جودو الرسمي.

اقرأ أيضًا

• المقال السابق: إضافة النقاط واللعب مجددًا وتأثيرات الصوت للعبة 3D ضمن جودو
• قتل اللاعب عند الاصطدام بالعدو ضمن لعبة 3D بجودو
• العقد Nodes والمشاهد Scenes في جودو Godot
• أشهر أنواع الألعاب الإلكترونية

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

إضافة عقدة واجهة المستخدم

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

نضيف عقدة Label ونسميها ScoreLabel

ثم نضبط الخاصية Text ضمن قائمة الفاحص Inspector للتسمية النصية بقيمة افتراضية مثل Score: 0

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

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

تتيح لنا عقدة UserInterface تجميع عناصر واجهة المستخدم الخاصة بنا في فرع من شجرة المشهد واستخدام مورد مظهر theme resource يتاح توارثه من قبل كل عناصرها الفرعية والذي سنستخدمه لتعيين خط لعبتنا.

إنشاء مظهر واجهة المستخدم

نحدد عقدة UserInterface مرة أخرى، وننشئ في لوحة الفاحص Inspector مورد مظهر theme resource جديد عبر الذهاب إلى Theme ومن ثم الحقل Theme كالتالي:

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

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

يتوقّع حقل ملف الخط ملفات كملفات خطوط الكتابة الموجودة على حاسوبنا، فهناك صيغتان شائعتان لملفات الخطوط هما TTF و OTF

من قائمة نظام الملفات FileSystem، نوسّع دليل الخطوط fonts وننقر ونسحب ملف Montserrat-Medium.ttf الذي أضفناه إلى المشروع على حقل الخط الافتراضي Default Font حتى يظهر النص مرة أخرى في معاينة المظهر.

سنلاحظ أن النص صغير قليلاً، لذا نضبط حجم الخط الافتراضي Default Font Size على قيمة 22 بكسل لزيادة حجم النص.

زيادة قيمة النتيجة

للعمل على نظام النقاط، نرفق سكريبت جديد بعقدة ScoreLabel ونعرّف فيه متغير النتيجة score

extends Label

var score = 0

يجب أن تزداد قيمة النتيجة بمقدار 1 في كل مرة ندمّر عدو، ويمكننا الاستفادة من إشارة squashed الخاصة بالأعداء لمعرفة متى يحدث ذلك، ولكن بما أننا نستنسخ الأعداء من خلال الشيفرة البرمجية، فلا يمكننا توصيل إشارة العدو ScroeLabelعبر المحرر، ويتعين علينا بدلاً من ذلك إنشاء الاتصال من الشيفرة نفسها في كل مرة نولّد فيها عدو.

نفتح السكربت الرئيسي main.gd، ويمكن النقر فوق اسمه في العمود الأيسر لمحرر النصوص البرمجية إذا كان لا يزال مفتوحًا.

أو بدلاً من ذلك يمكن النقر نقرًا مزدوجًا فوق ملف main.gd في نافذة نظام الملفات FileSystem، وإضافة السطر التالي أسفل دالة ‎onmobtimertimeout()‎:

func _on_mob_timer_timeout():
    #...
    # نربط العدو مع قائمة النتيجة لتحديث النتيجة عند تدمير عدو
    mob.squashed.connect($UserInterface/ScoreLabel._on_mob_squashed.bind())

يعني هذا السطر أنه عندما يصدر العدو إشارة squashed، ستستقبل عقدة ScoreLabel الإشارة وتستدعي الدالة ‎_on_mob_squashed ()‎، ننتقل إلى السكربت ScoreLabel.gd لتعريف دالة رد النداء callback function المسماة ‎_on_mob_squashed()‎، ونزيد هناك قيمة النتيجة ونحدث النص المعروض.

func _on_mob_squashed():
    score += 1
    text = "Score: %s" % score

يستخدم السطر الثاني قيمة متغير النتيجة score لاستبدال الموضع المؤقت ‎%s، ويحوّل محرك جودو القيم تلقائيًا إلى نص عند استخدام هذه الميزة، وهو أمر مفيد حين إخراج النص في التسميات النصية أو حين استخدام دالة print()‎.

لمزيد من المعلومات حول التعامل مع النصوص يمكن مراجعة تنسيقات النصوص في GDScript في توثيق جودو الرسمي.

يمكننا الآن تشغيل اللعبة وتدمير بعض الأعداء لمشاهدة زيادة قيمة النتيجة.

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

إعادة اللعب

الآن سنضيف القدرة على إعادة اللعب بعد موت اللاعب، فعندما يموت اللاعب، سنعرض رسالة على الشاشة وننتظر إدخالًا منه.

لتعد إلى المشهد الرئيسي main.tscn ونحدد عقدة UserInterface ثم نضيف عقدة فرعية جديدة من نوع ColorRect ونسميها Retry تُملأ هذه العقدة مستطيل بلون موحد وتُستخدم كطبقة تظليل لإعتام الشاشة.

لاستخدامها على كامل نافذة العرض viewport، نستخدم قائمة Anchor Preset في شريط الأدوات.

نفتحها ونطبق أمر مستطيل كامل Full Rect

لم يحدث شيء لكن تتحرك المقابض الخضراء الأربعة فقط إلى زوايا مربع التحديد.

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

نحدد UserInterface ونطبّق الأمر مستطيل كامل Full Rect عليها أيضًا من Anchor Preset، ويجب أن تغطي عقدة Retry الآن نافذة العرض بأكملها.

دعنا نغيّر لونها لتعتيم منطقة اللعبة، سنحدد Retry وفي لوحة الفاحص Inspector، نضبط لون Color إلى لون غامق وشفاف في نفس الوقت. للقيام بذلك، نسحب مؤشر A إلى اليسار في مُحدّد اختيار اللون. يتحكم هذا المؤشر بقناة ألفا Alpha للون، أي معامل العتامة أو الشفافية.

بعدها نضيف عقدة Label كعقدة ابن لعقدة Retry ونكتب فيها نص مفاده اضغط على مفتاح Enter لإعادة المحاولة ومن ثم نطبق الأمر Center من Anchor Preset لنقلها وتثبيتها في مركز الشاشة.

برمجة خيار إعادة المحاولة

يمكننا الآن الانتقال إلى الشيفرة لإظهار وإخفاء عقدة Retry عند موت اللاعب وإعادة اللعب. نفتح السكربت الرئيسي main.gd.

أولاً، نريد إخفاء التراكب في بداية اللعبة. لذا نضيف هذا السطر إلى الدالة ‎_ready()‎:

func _ready():
    $UserInterface/Retry.hide()

بعدها عندما يتعرض اللاعب للاصطدام، نُظهر عنصر واجهة المستخدم Retry كما يلي:

func _on_player_hit():
    #...
    $UserInterface/Retry.show()

أخيرًا، عندما تكون عقدة Retry مرئية، نحتاج إلى الاستماع إلى دخل اللاعب من أجل إعادة تشغيل اللعبة إذا ضغط على زر Enter. للقيام بذلك، نستخدم دالة رد النداء ‎_unhandled_input()‎، والتي يجري تشغيلها عند أي إدخال.

إذا ضغط اللاعب على زر الإدخال المحدد مسبقًا ui_accept وكانت عقدة Retry مرئية، فإننا نعيد تحميل المشهد الحالي.

func _unhandled_input(event):
    if event.is_action_pressed("ui_accept") and $UserInterface/Retry.visible:
        # هذا يعيد تشغيل المشهد الحالي
        get_tree().reload_current_scene()

تمنحنا دالة get_tree()‎ الوصول إلى كائن SceneTree العام الذي يسمح لنا بإعادة تحميل وتشغيل المشهد الحالي.

إضافة المؤثرات الصوتية

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

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

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

ننشئ مشهدًا جديدًا بالانتقال إلى قائمة مشهد Scene والنقر على مشهد جديد New Scene أو باستخدام الرمز + بجوار المشهد المفتوح حاليًا.

ننقر فوق الزر عقدة أخرى Other Node لإنشاء AudioStreamPlayer ونعيد تسميتها إلى MusicPlayer.

أضفنا مقطع صوتي إلى المسار art/‎ وهو House In a Forest Loop.ogg. لسحب هذا المقطع إلى اللعبة، نضغط عليه ثم نسحبه لخاصية Stream في لوحة الفاحص Inspector. بعد ذلك، نفعّل خيار التشغيل التلقائي Autoplay لتشغيل المؤثرات الصوتية تلقائيًا عند بدء اللعبة.

نحفظ المشهد باسم MusicPlayer.tscn، بعدها علينا تسجيله كمشهد تحميل تلقائي، ولفعل ذلك نتوجه إلى قائمة مشروع Project ومن ثم إعدادات المشروع Project Settings وتنقر على تبويبة التحميل التلقائي Autoload.

نحتاج إلى إدخال المسار إلى المشهد في حقل المسار Path، ولفعل ذلك ننقر فوق أيقونة المجلد لفتح مستعرض الملفات وننقر نقرًا مزدوجًا فوق MusicPlayer.tscn، ثم ننقر فوق الزر إضافة على اليمين لتسجيل العقدة.

يجري الآن تحميل MusicPlayer.tscn في أي مشهد نفتحه أو نشغله. لذا، إذا شغلنا اللعبة الآن، تعمل المؤثرات الصوتية تلقائيًا في أي مشهد.

قبل أن ننهي هذا الدرس، لنلقي نظرة سريعة على كيفية عمل الميزة، عند تشغيل اللعبة، تتغير نافذة Scene وتمنحنا تبويبتين هما عن بعد Remote ومحلي Local.

يتيح لنا تبويب Remote تصوّر شجرة عقد اللعبة التي نعمل عليها. سنرى هناك العقدة الرئيسية Main وكل ما يشتمل عليه المشهد والأعداء التي استنسخناها في الأسفل.

في الأعلى توجد العقدةMusicPlayer التي جرى تحميلها تلقائيًا، والعقدة الجذر root هي نافذة عرض لعبتنا.

شيفرة المشهد الرئيسي

فيما يلي سكربت main.gd الكامل بلغة GDScript للرجوع إليه

extends Node

@export var mob_scene: PackedScene

func _ready():
    $UserInterface/Retry.hide()


func _on_mob_timer_timeout():
    # إنشاء نسخة جديدة من مشهد العدو
    var mob = mob_scene.instantiate()

    # ‎‫اختيار مكان عشوائي على SpawnPath
    # ‫نخزن المرجع في عقدة SpawnLocation
    var mob_spawn_location = get_node("SpawnPath/SpawnLocation")
    # ونعطيه انزياح عشوائي
    mob_spawn_location.progress_ratio = randf()

    var player_position = $Player.position
    mob.initialize(mob_spawn_location.position, player_position)

    # توليد العدو عن طريق إضافته للمشهد الرئيسي
    add_child(mob)

    # نربط العدو مع قائمة النتيجة لتحديث النتيجة عند تدمير عدو 
    mob.squashed.connect($UserInterface/ScoreLabel._on_mob_squashed.bind())

func _on_player_hit():
    $MobTimer.stop()
    $UserInterface/Retry.show()

func _unhandled_input(event):
    if event.is_action_pressed("ui_accept") and $UserInterface/Retry.visible:
        # هذا يعيد تشغيل المشهد
        get_tree().reload_current_scene()

الخلاصة

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

ترجمة - وبتصرف - لقسم Score and replay من توثيق جودو الرسمي.

اقرأ أيضًا

• المقال السابق: قتل اللاعب عند الاصطدام بالعدو ضمن لعبة 3D بجودو
• إعداد مشهد اللاعب وعمليات الإدخال في لعبة ثلاثية الأبعاد باستخدام جودو
• القفز وتدمير الأعداء ضمن لعبة ثلاثية الأبعاد في جودو
• توليد الأعداء في لعبة ثلاثية الأبعاد في محرك الألعاب جودو

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

تحديد ما إذا كان اللاعب على الأرض

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

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

هيكل تصادم Hitbox مع عقدة Area

لنعد إلى مشهد player.tscn ونضف عقدة فرعية جديدة من النوع Area3D، سنطلق عليها اسم MobDetector أي كاشف الأعداء، ومن ثم سنضيف العقدة CollisionShape3D كعقدة فرعية لها.

بعدها سنعين شكله ليكون أسطوانيًا وذلك باختيار NewClindershape في قائمة الفاحص Inspector.

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

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

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

عندما تكتشف المناطق تصادمًا ستصدر إشارة، وكي نوصّل هذه الإشارة إلى عقدة اللاعب Player نحدد العقدة MobDetector وننتقل إلى التبويب Node في نافذة الفاحص Inspector، وننقر مرتين فوق إشارة body_entered التي جرى وصلها بعقدة Player.

تطلق العقدة MobDetctor إشارة body_entered عندما تدخلها عقدة CharacterBody3D أو RigidBody3D، لكن نظرًا لأن العقدة MobDetctor مهيأة لتعمل فقط مع الطبقات الفيزيائية الخاصة بالأعداء، فإنها ستكتشف فقط الأجسام التي تنتمي إلى هذه الطبقات، أي ستكتشف فقط عقد العدو.

من الناحية البرمجية، يتوجب علينا القيام بأمرين الأول إصدار إشارة سنستخدمها لاحقًا لإنهاء اللعبة والثاني تدمير اللاعب، ويمكننا تغليف هذه العمليات في دالة die()‎ التي تساعدنا بوضع دلالة مفيدة إلى شيفرتنا كالتالي:

# تنشر عندما يصطدم اللاعب بعدو
# ضع هذه في أعلى السكريبت
signal hit

# وأضف هذه الدالة في الأسفل
func die():
    hit.emit()
    queue_free()


func _on_mob_detector_body_entered(body):
    die()

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

var player_position = $Player.position

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

إنهاء اللعبة

يمكننا استخدام إشارة ضرب hit اللاعب player لإنهاء اللعبة، فكل ما يتعين علينا فعله هو توصيله بالعقدة الرئيسية Main وإيقاف MobTimer كرد فعل.

لنفتح المشهد الرئيسي للعبة main.tscn، ونحدد عقدة اللاعب Player، وفي نافذة العقدة Node نوصّل إشارة hit الخاصة بها بالعقدة الرئيسية Main.

ثم نحصل على المؤقت ونوقفه في الدالة ‎_on_player_hit()‎.

func _on_player_hit():
    $MobTimer.stop()

إذا جربنا اللعبة الآن، فستتوقف الأعداء عن الظهور عندما يموت اللاعب، وستغادر الأعداء المتبقية الشاشة.

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

الشيفرة النهائية للعبة ثلاثية الأبعاد في جودو

فيما يلي الشيفرات الكاملة للعقد الرئيسية Main وMob وPlayer للرجوع إليها.

شيفرة المشهد الرئيسي

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

extends Node

@export var mob_scene: PackedScene


func _on_mob_timer_timeout():
    # إنشاء نسخة جديدة من مشهد العدو
    var mob = mob_scene.instantiate()

    # اختيار مكان عشوائي على‫ SpawnPath
    # ‫نخزن المرجع على عقدة SpawnLocation
    var mob_spawn_location = get_node("SpawnPath/SpawnLocation")
    # ونعطيه انزياح عشوائي
    mob_spawn_location.progress_ratio = randf()

    var player_position = $Player.position
    mob.initialize(mob_spawn_location.position, player_position)

    # خلق العدو عن طريق إضافته إلى المشهد الرئيسي
    add_child(mob)

func _on_player_hit():
    $MobTimer.stop()

شيفرة العدو

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

extends CharacterBody3D

# السرعة الدنيا للعدو مقدرة بالمتر في الثانية
@export var min_speed = 10
# السرعة القصوى للعدو مقدرة بالمتر في الثانية
@export var max_speed = 18

# تنبثق عندما يقفز اللاعب على عدو
signal squashed

func _physics_process(_delta):
    move_and_slide()

# يتم استدعاء هذه الدالة من المشهد الأساسي
func initialize(start_position, player_position):
    # نحدد مكان العدو عن طريق وضعه في‫ start_position
    # وندوره نحو‫ player_position لينظر إلى اللاعب
    look_at_from_position(start_position, player_position, Vector3.UP)
    #تدوير العدو عشوائيًا ضمن مجال -90 و +90 درجة  
    # لكي لا تتحرك مباشرة نحو اللاعب
    rotate_y(randf_range(-PI / 4, PI / 4))

    # نحسب سرعة عشوائية ‫(عدد صحيح)
    var random_speed = randi_range(min_speed, max_speed)
    # نحسب سرعة امامية تمثل السرعة
    velocity = Vector3.FORWARD * random_speed
    # ‫ثم ندور شعاع السرعة اعتمادًا على دوران العدو حول Y
    # للحركة في الاتجاه الذي ينظر إليه العدو
    velocity = velocity.rotated(Vector3.UP, rotation.y)

func _on_visible_on_screen_notifier_3d_screen_exited():
    queue_free()

func squash():
    squashed.emit()
    queue_free() # تدمير العقدة

شيفرة اللاعب

وأخيرًا، نوضح سكربت Player.gd الذي يتحكم في حركة اللاعب كالقفز والتحرك على الأرض والسقوط في الهواء، فعندما يصطدم اللاعب بالعدو من الأعلى، سيدمره باستخدام الدالة squash()‎ ويعطى اللاعب دفعة قفز عمودية، وعند اصطدامه مع العدو  يموت باستخدام الدالة ‎die()‎.

extends CharacterBody3D

signal hit

# سرعة حركة اللاعب مقدرة بالمتر في الثانية
@export var speed = 14
# التسارع نحو الأسفل في الهواء مقدرة بالمتر في الثانية مربع 
@export var fall_acceleration = 75
# الدفعة العامودية المطبقة على الشخصية عند القفز مقدرة بالمتر في الثانية
@export var jump_impulse = 20
# الدفعة العامودية المطبقة على الشخصية عند القفز على عدو مقدرة بالمتر في الثانية
@export var bounce_impulse = 16

var target_velocity = Vector3.ZERO


func _physics_process(delta):
    # أنشأنا متغير محلي لتخزين دخل الاتجاه
    var direction = Vector3.ZERO

    # نتحقق من كل دخل حركة ونحدث الاتجاه حسبه
    if Input.is_action_pressed("move_right"):
        direction.x = direction.x + 1
    if Input.is_action_pressed("move_left"):
        direction.x = direction.x - 1
    if Input.is_action_pressed("move_back"):
        # ‫لاحظ أننا نعمل المحورين x و z الخاصين بالشعاع
        # المستوي‫ XZ هو مستوي الأرض في ثلاثي الأبعاد
        direction.z = direction.z + 1
    if Input.is_action_pressed("move_forward"):
        direction.z = direction.z - 1

    # منع الحركة القطرية السريعة
    if direction != Vector3.ZERO:
        direction = direction.normalized()
        $Pivot.look_at(position + direction, Vector3.UP)

    # السرعة الأرضية
    target_velocity.x = direction.x * speed
    target_velocity.z = direction.z * speed

    # السرعة العمودية
    if not is_on_floor(): # إذا كان في الهواء يسقط على الأرض أي الجاذبية
        target_velocity.y = target_velocity.y - (fall_acceleration * delta)

    # القفز
    if is_on_floor() and Input.is_action_just_pressed("jump"):
        target_velocity.y = jump_impulse

    # كرر خلال كل الاصطدامات التي تحصل في الإطار
    # ‫يكون ذلك بلغة C كالتالي
# (int i = 0; i < collisions.Count; i++)
    for index in range(get_slide_collision_count()):
        # نحصل على واحد من التصادمات مع اللاعب
        var collision = get_slide_collision(index)

        # إذا كان التصادم مع الأرض
        if collision.get_collider() == null:
            continue

        # إذا كان التصادم مع العدو
        if collision.get_collider().is_in_group("mob"):
            var mob = collision.get_collider()
            # نتحقق أننا نصدمه من الأعلى
            if Vector3.UP.dot(collision.get_normal()) > 0.1:
                # إذا كان كذلك نسحقه
                mob.squash()
                target_velocity.y = bounce_impulse
                # يمنع أي استدعاءات مكررة
                break

    # تحريك الشخصية
    velocity = target_velocity
    move_and_slide()

# أضف ذلك في الأسفل
func die():
    hit.emit()
    queue_free()

func _on_mob_detector_body_entered(body):
    die()

الخاتمة

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

ترجمة - وبتصرف - لقسم Killing the player من توثيق جودو الرسمي.

اقرأ أيضًا

• المقال السابق: القفز وتدمير الأعداء ضمن لعبة ثلاثية الأبعاد في جودو
• تصميم مشهد الأعداء للعبة ثلاثية الأبعاد في جودو
• العقد Nodes والمشاهد Scenes في جودو Godot
• الاستماع لمدخلات اللاعب في جودو Godot

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

التحكم في التفاعلات الفيزيائية

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

• تُحدد الطبقات Layers الطبقة الفيزيائية التي ينتمي إليها الكائن، وتستخدم لتنظيم الكائنات الفيزيائية في اللعبة
• تُحدد الأقنعة Masks ما هي الطبقات التي يمكن للجسم رصدها أو اكتشافها والتفاعل معها

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

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

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

تحديد أسماء الطبقات

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

ننتقل للقائمة اليسرى ونذهب للأسفل حتى نصل لقسم أسماء الطبقات، ثم نختار فيزياء 3D أو 3D Physics‎. ستظهر لنا قائمة بالطبقات وحقل نصي على يمين كل طبقة. يمكن من خلال هذا الحقل النصي تغيير اسم الطبقة، سنسمي الطبقات الثلاث الأولى بأسماء مناسبة وهي player لتمثيل طبقة اللاعب، و enemies لتمثيل طبقة الأعداء، و world لتمثيل عالم اللعبة.

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

تعيين الطبقات والأقنعة

حان دور تعيين الطبقات والأقنعة للكائنات الموجودة في مشهد اللعبة، بداية سنحدد عقدة الأرضية Ground في المشهد الرئيسي Main. ونوسّع قسم الاصطدام Collision في الفاحص Inspector. سنرى عندها طبقات العقدة وأقنعتها على شكل شبكة من الأزرار كما في الصورة التالية:

الأرضية جزء من عالم اللعبة، ونريدها أن تكون جزءًا من الطبقة الثالثة في مشهد لعبتنا. للقيام بذلك ليس علينا سوى تعطيل الزر المفعل رقم 1 الذي يمثل الطبقة الأولى، وتفعيل الزر رقم 3 الذي يمثل الطبقة الثالثة بالنقر فوقه، بعدها سنعطّل الزر رقم 1 للقناع بالنقر عليه أيضًا.

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

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

سنعالج الآن عقدتي Player و Mob، وللقيام ذلك افتح مشهد اللاعب player.tscn بالنقر المزدوج فوق ملفه الموجود أسفل نافذة نظام الملفات في جودو. وللتحكم في تفاعلات اللاعب مع الأعداء والعالم، حدد عقدة اللاعب وعيّن القناع Mask من قسم الاصطدام Collision لكل من الأعداء enemies والعالم world. يمكنك ترك خاصية الطبقة الافتراضية كما هي لأن الطبقة الأولى هي طبقة اللاعب player.

بعدها، لنفتح مشهد الأعداء Mob بالنقر المزدوج على الملف mob.tscn ونحدد عقدة Mob ونضبط طبقة تصادمه من قسم التصادم Collision الموجود داخل قسم الطبقة Layer ونجعل قيمته enemies لنحدد أنه سيصطدم فقط مع الأجسام التي تنتمي إلى طبقة الأعداء، ونلغي ضبط قناع التصادم من القسم تصادم Collision الموجود داخل قسم القناع Mask ونتركه فارغًا، لنمنعه من التفاعل مع الطبقات الأخرى كاللاعب أو البيئة.

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

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

تنفيذ القفز

في هذه الخطوة، سنكتب كود بسيط لتنفيذ القفز في اللعبة، تتطلب عملية القفز وحدها سطرين فقط من التعليمات البرمجية، ولكتابتها افتح السكربت الخاص بالعقدة Player. سنحتاج إلى قيمة للتحكم في قوة القفزة وتحديث ()‎_physics_process لبرمجة القفزة. لنضف jump_impulse بعد السطر الذي يحدد fall_acceleration في الجزء العلوي من السكربت.

#...
# تطبيق الدفعة العمودية للشخصية عند القفر مقدرة بواحدة المتر
@export var jump_impulse = 20

ثم أضف الشيفرة البرمجية التالية قبل كتلة التعليمات البرمجية move_and_slide()‎ داخل ‎_physics_process()‎.

func _physics_process(delta):
    #...

    # القفز
    if is_on_floor() and Input.is_action_just_pressed("jump"):
        target_velocity.y = jump_impulse

    #...

هذا كل ما تحتاجه للقفز!

يعد التابع is_on_floor()‎ أداة من الصنف CharacterBody3D، فهو يعيد true إذا اصطدم الجسم بالأرضية في هذا الإطار، ولهذا السبب نطبق الجاذبية على شخصية اللاعب فنجعله يصطدم بالأرض بدلاً من أن يطفو فوقها مثل شخصيات الأعداء.

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

تدمير الأعداء

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

افتح المشهد mob.tscn مرة أخرى وحدد عقدة Mob. انتقل إلى قائمة العقدة Node على اليمين لرؤية قائمة الإشارات. تحتوي قائمة العقدة Node تبوبين هما الإشارات Signals التي استخدمناها سابقًا، والمجموعات Groups التي تسمح لنا بإسناد وسوم للعُقد. انقر عليها لتكشف عن حقل مخصص لكتابة اسم الوسم، اكتب mob في هذا الحقل وانقر فوق زر إضافة Add.

سيظهر رمز في قائمة المشهد Scene للإشارة إلى أن العقدة جزء من مجموعة واحدة على الأقل.

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

برمجة عملية تدمير اللاعب

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

# تطبيق الدفعة العمودية للشخصية عند القفر مقدرة بواحدة المتر
@export var bounce_impulse = 16

والآن وبعد كتلة شيفرة القفز التي أضفناها أعلاه في ‎ _physics_process()‎ نضيف الحلقة التالية، إذ يجعل جودو الجسم يتحرك أحيانًا عدة مرات متتالية لتسهيل حركة الشخصية باستخدام move_and_slide()‎، لذلك علينا أن نراجع جميع الاصطدامات التي قد تكون حدثت.

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

func _physics_process(delta):
    #...

    # كرّر خلال كل الاصطدامات التي تحصل خلال هذا الإطار
    for index in range(get_slide_collision_count()):
        # نحصل على واحد من الاصطدامات مع اللاعب
        var collision = get_slide_collision(index)

        # إذا كان الاصطدام مع الأرض
        if collision.get_collider() == null:
            continue

        # إذا كان الاصطدام مع العدو
        if collision.get_collider().is_in_group("mob"):
            var mob = collision.get_collider()
            # نتأكد من الضربة أنها من الأعلى
            if Vector3.UP.dot(collision.get_normal()) > 0.1:
                # إذا كان كذلك ندمره ونقفز
                mob.squash()
                target_velocity.y = bounce_impulse
                # تمنع أي استدعاءات مكررة
                break

تأتي الدالتان get_slide_collision_count()‎ وget_slide_collision()‎ كلاهما من الصنف CharacterBody3D وهما مرتبطتان بالدالة move_and_slide()‎.

تُعيد الدالة get_slide_collision()‎ كائن KinematicCollision3D الذي يحتوي على معلومات حول مكان وكيفية حدوث التصادم، على سبيل المثال نستخدم الخاصية get_collider الخاصة بها للتحقق مما إذا كنا قد اصطدمنا بـعدو mob عن طريق استدعاء is_in_group()‎ عليه بهذا الشكل:

collision.get_collider().is_in_group("mob")

ملاحظة: التابع is_in_group()‎ متاح في كل صنف عقدة Node.

بعدها نستخدم جداء الأشعة النقطي vector dot product للتأكد من أننا هبطنا على العدو:

Vector3.UP.dot(collision.get_normal()) > 0.1

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

بعد التعامل مع منطق التدمير والارتداد، نخرج من الحلقة عبر عبارة Break لمنع المزيد من الاستدعاءات المكررة إلى mob.squash()‎، التي قد تؤدي بخلاف ذلك إلى أخطاء غير مقصودة مثل حساب النتيجة عدة مرات لقتل عدو واحد.

نستدعي هنا دالة واحدة غير معرّفة ألا وهي mob.squash()‎، لذلك يتعين علينا إضافتها إلى صنف العدو Mob.

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

# تنبثق عندما يقفز اللاعب على العدو
signal squashed

# ...


func squash():
    squashed.emit()
    queue_free()

لتجربة اللعبة، يمكن الضغط على F5 وتعيين main.tscn كمشهد رئيسي للمشروع.

الخلاصة

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

ترجمة - وبتصرف - لقسم Jumping and squashing monsters من توثيق جودو الرسمي.

اقرأ أيضًا

• المقال السابق: توليد الأعداء في لعبة ثلاثية الأبعاد في محرك الألعاب جودو
• إعداد مشهد اللاعب وعمليات الإدخال في لعبة ثلاثية الأبعاد باستخدام جودو
• العقد Nodes والمشاهد Scenes في جودو Godot
• كتابة برنامجك الأول باستخدام جودو Godot

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

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

تغيير دقة اللعبة

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

نفتح المشهد الرئيسي Main للعبة بالنقر نقرًا مزدوجًا على main.tscn في قائمة نظام الملفات Filesystem dock الموجود على الشريط الجانبي الذي يعرض ملفات المشروع.

ننتقل بعدها إلى تبويب المشروع Project ثم نختار إعدادات المشروع Project Settings.

ننتقل بعد ذلك إلى القسم Display في القائمة الموجودة يسار نافذة إعدادات المشروع، ثم ونمرر إلى الأسفل حتى نجد قسم Window. ونغير قيمة العرض Width إلى 720، وقيمة الارتفاع Height إلى 540 كما في الصورة أدناه.

إنشاء مسار توليد الأعداء Spawn Path

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

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

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

يجب أن تكون نافذة العرض مقسمة إلى قسمين مع معاينة الكاميرا في الأسفل. إذا لم تكن كذلك فاضغط على‎‎ ctrl + 2‎‎ ‎‎أو cmd + 2 في حال كنت تستخدم نظام تشغيل macOS لقسمها إلى قسمين، ثم حدد عقدة Camera3D وانقر فوق مربع الاختيار Preview في أسفل نافذة العرض.

إضافة أسطوانات مؤقتة CylinderMesh

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

لإضافة شبكة اسطوانات مؤقتة، أضف عقدة Node3D جديدة كعقدة فرعية للعقدة الرئيسية وسمّها Cylinders، ثم حددها وأضف عقدة فرعية MeshInstance3D لنستخدمها في تجميع الأسطوانات. حدّد Cylinders لإضافة عقدة MeshInstance3D فرعية.

أسند CylinderMesh إلى الخاصية Mesh من قائمة الفاحص Inspector كما يلي:

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

اضبط نافذة العرض على خيار العرض العمودي العُلوي Top View باستخدام القائمة الظاهرة أعلى يسار نافذة العرض.

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

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

حرك الأسطوانة بحيث تكون خارج رؤية الكاميرا مباشرة في الزاوية العلوية اليسرى كما في الصورة التالية.

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

لإنشاء نسخ من الشبكة ووضعها حول منطقة اللعب. نضغط على Ctrl + D‏ أو Cmd + D على نظام تشغيل macOS لتكرار العقدة، ويمكن أيضًا النقر بالزر الأيمن على العقدة في قائمة المشهد وتحديد خيار مضاعفة Duplicate، ثم تحريك النسخة لأسفل على طول المحور Z الأزرق حتى تصل لخارج معاينة الكاميرا مباشرة.

نحدد كلا الأسطوانتين بالضغط على مفتاح Shift والنقر على الأسطوانة التي لم يتم تحديدها ومضاعفتها.

نحركهم إلى اليمين عن طريق سحب المحور X باللون الأحمر.

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

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

من قائمة الفاحص Inspector، نوسع قسم المادة Material لتظهر الخيارات الموجودة بداخله، سنضيف الخيار StandardMaterial3D إلى الحيز الأول في القائمة -وهو الحيز رقم 0- وبذلك، ستطبق المادة على الاسطوانات التي حددتها في المشهد.

انقر على أيقونة الجسم الكروي لفتح مورد المادة Material resource حيث ستحصل هنا على معاينة للمادة وقائمة طويلة من الخصائص لاستخدامها في إنشاء جميع أنواع الأسطح، من المعدن إلى الصخور أو الماء.

لتغيير اللون افتح قسم Albedo داخل إعدادات المادة:

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

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

الآن أضف عقدة فرعية Path3D إلى العقدة الرئيسيةMain. ستظهر في شريط الأدوات أربع أيقونات، انقر على أداة Add Point التي تحمل علامة "+" الخضراء كما يلي:

ملاحظة: يمكنك تمرير المؤشر فوق أي رمز لرؤية تلميح توضيحي يصف الأداة.

انقر وسط كل أسطوانة لإنشاء نقطة، ثم انقر فوق رمز إغلاق المنحنى Close Curve في شريط الأدوات لإغلاق المسار. في حال كانت أي من النقاط بعيدة قليلاً، يمكنك النقر فوقها وسحبها لإعادة تموضعها.

يجب أن يبدو مسارك كالتالي.

نحتاج إلى عقدة PathFollow3D لاختيار مواضع عشوائية عليها، لذا أضف PathFollow3D كعنصر فرعي لعقدة Path3D ثم أعد تسمية العقدتين إلى SpawnLocation و SpawnPath على التوالي فذلك سيوضّح حالة استخدامنا هنا.

نحن جاهزون الآن لبرمجة آلية توليد الأعداء في اللعبة.

توليد الأعداء عشوائيًا

انقر بالزر الأيمن على العقدة الرئيسية وأرفق سكريبت جديد لها من أجل توليد الأعداء بشكل دوري، أي على فترات زمنية منتظمة.

نضيف أولاً متغير إلى قائمة الفاحص Inspector بحيث يمكننا إسناد mob.tscn أو أي عدو آخر إليه كما يلي:

extends Node

@export var mob_scene: PackedScene 

وبما أننا نريد توليد العدو على فترات زمنية منتظمة، سنحتاج إلى العودة إلى المشهد وإضافة مؤقت، لكن قبل ذلك نحتاج إلى إسناد ملف mob.tscn إلى خاصية mob_scene أعلاه بخلاف ذلك سيكون فارغ.

عد إلى الشاشة ثلاثية الأبعاد وحدد العقدة الرئيسية، ثم اسحب mob.tscn من قائمة نظام الملفات إلى حيز مشهد العدو في قائمة الفاحص Inspector.

أضف عقدة Timer جديدة كعنصر فرعي للعقدة الرئيسية، وسمها MobTimer

اضبط من قائمة الفاحص Inspector وقت الانتظار Wait Time على القيمة 0.5 ثانية وفعّل التشغيل التلقائي Autostart حتى يبدأ توليد الأعداء تلقائيًا عند تشغيل اللعبة.

تطلق المؤقتات إشارة timeout في كل مرة تصل فيها إلى نهاية وقت انتظارها، وبشكل افتراضي يُعاد تشغيلها تلقائيًا، مما يؤدي إلى إصدار الإشارة بشكل متواصل، ويمكن الاتصال بها من العقدة الرئيسية لتوليد عدو كل 0.5 ثانية.

توجه إلى قائمة العقدة على اليمين أثناء تحديد MobTimer وانقر نقرًا مزدوجًا على إشارة timeout

صِلها بالعقدة الرئيسية

سيعيدك هذا إلى النص البرمجي مع دالة جديدة ‎_on_mob_timer_timeout()‎ هذه الدالة فارغة ولا تحتوي الدالة أي منطق برمجي لذا نحتاج لبرمجة منطق توليد العدو فيها عن طريق الخطوات التالية:

1. إنشاء نسخة من مشهد العدو باستخدام mob_scene.instantiate()‎
2. أخذ عينة عشوائية لموقع العدو باستخدام randf_range()‎
3. الحصول على موضع اللاعب عبر الوصول إلى العقدة Player في المشهد
4. استدعاء دالة initialize()‎ لإعداد العدو باستخدام الموقع العشوائي وموقع اللاعب 5 إضافة العدو كعنصر فرعي للعقدة الرئيسية في المشهد باستخدامadd_child()‎

بهذا يمكن توليد الأعداء بشكل دوري في نقاط عشوائية على المسار، مع الأخذ بعين الاعتبار مكان اللاعب ليتفاعل العدو معه كما توضح الشيفرة التالية:

func _on_mob_timer_timeout():
    # إنشاء نسخة جديدة من مشهد العدو
    var mob = mob_scene.instantiate()

    # اختر مكان عشوائي على‫ SpawnPath
    # ‫نخزن المرجع إلى عقدة SpawnLocation
    var mob_spawn_location = get_node("SpawnPath/SpawnLocation")
    # ونعطيها انزياح عشوائي
    mob_spawn_location.progress_ratio = randf()

    var player_position = $Player.position
    mob.initialize(mob_spawn_location.position, player_position)

    # توليد الأعداء عن طريق إضافتها إلى المشهد الأساسي
    add_child(mob) 

تُنتج دالة randf()‎ قيمة عشوائية بين 0 و1، وهي تمثل القيمة المتوقعة للمتغير progress_ratio في عقدة PathFollow. حيث تشير 0 إلى بداية المسار، وتشير 1 إلى نهايته. وبما أن المسار الذي حددناه يحيط بنافذة عرض الكاميرا، لذا فإن أي قيمة عشوائية بين 0 و1 ستحدد موقعًا عشوائيًا على طول حواف نافذة العرض.

فيما يلي الكود البرمجي الكامل للملف main.gd للرجوع إليه عند الحاجة:

extends Node

@export var mob_scene: PackedScene


func _on_mob_timer_timeout():
    # إنشاء نسخة جديدة من مشهد العدو
    var mob = mob_scene.instantiate()

    # اختر مكان عشوائي على‫ SpawnPath
    # ‫نخزن المرجع إلى عقدة SpawnLocation
    var mob_spawn_location = get_node("SpawnPath/SpawnLocation")
    #  ونعطيها انزياح عشوائي
    mob_spawn_location.progress_ratio = randf()

    var player_position = $Player.position
    mob.initialize(mob_spawn_location.position, player_position)

    #  توليد الأعداء عن طريق إضافتها إلى المشهد الأساسي
    add_child(mob)

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

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

الخلاصة

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

ترجمة -وبتصرف- لقسم Spawning monsters من توثيق جودو الرسمي.

اقرأ أيضًا

• المقال السابق: تصميم مشهد الأعداء للعبة ثلاثية الأبعاد في جودو
• استخدام الإشارات Signals في جودو Godot
• دليلك الشامل إلى برمجة الألعاب
• أشهر أنواع الألعاب الإلكترونية

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

إنشاء مشهد الأعداء

لنصمم الأعداء في لعبتنا نحتاج لإنشاء مشهد جديد وسيكون هيكل العقدة مشابهًا لمشهد اللاعب الذي أطلقنا عليه اسم player.tscn.

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

بعد سحب الملف ستنشأ عقدة جديدة تمثل الكائن الرسومي داخل اللعب، يمكنك إعادة تسميتها إلى Character

نحتاج إلى هيكل تصادم collision shape ليعمل الجسم بالشكل المتوقع ويتمكن من التفاعل مع الفيزياء أو الاصطدامات داخل اللعبة بطريقة صحيحة، لذا انقر بزر الفأرة الأيمن على عقدة جذر المشهد Mob ثم انقر فوق إضافة عقدة فرعية Add Child Node.

أضف العقدة CollisionShape3D

تحتوي العقدة CollisionShape3D على خاصية الشكل Shape.  اربط بهذه الخاصية عقدة BoxShape3D من قائمة الفاحص Inspector لإضافة شكل صندوق ثلاثي الأبعاد لتحديد حدود تصادم الكائنات كما في الصورة التالية:

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

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

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

دورة تطوير الألعاب

ابدأ رحلتك في برمجة وتطوير الألعاب ثنائية وثلاثية الأبعاد وصمم ألعاب تفاعلية ممتعة
ومليئة بالتحديات.

اشترك الآن

إزالة شخصيات الأعداء الموجودين خارج الشاشة

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

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

ملاحظة: عندما تستمر في استنساخ كائن ما ينصح باستخدام تقنية تسمى pooling وتعني تجميع الكائنات وإعادة استخدامها لتجنب تكلفة إنشاء وتدمير النسخ في كل مرة، فهي تعتمد على إنشاء مسبق لمصفوفة من الكائنات وحفظها في الذاكرة وإعادة استخدامها مرارًا وتكرارًا لتحسين الأداء. لكن لا داعي للقلق بشأن هذا الأمر عند العمل بلغة GDScript، فالسبب الرئيسي لاستخدام تقنية pooling هو تجنب التجمد في اللغات التي تعتمد على كنس المهملات garbage-collected مثل لغة C#‎، أما لغة GDScript فتستخدم تقنية عد المراجع مختلفة في ‎إدارة الذاكرة.

لمراقبة ما إذا كان الكائن قد خرج من الشاشة حدد عقدة Mob وأضف عقدة فرعية VisibleOnScreenNotifier3D، سيظهر صندوق آخر وردي اللون هذه المرة وستصدر العقدة إشارة عندما يخرج هذا المربع تمامًا عن الشاشة.

غيّر حجمه باستخدام النقاط البرتقالية حتى يغطي النموذج ثلاثي الأبعاد بالكامل.

برمجة حركة العدو

دعنا الآن نعمل على حركة الأعداء، وسننجز ذلك على مرحلتين، الأولى سنكتب سكريبت على Mob يعرّف دالة لتهيئة العدو، ثم نبرمج آلية الظهور العشوائي في مشهد main.tscn ونستدعي الدالة من هناك.

أرفق سكريبت بالعقدة Mob.

فيما يلي الشيفرة البرمجية التي ستنجز الحركة بلغة GDScript، كما تلاحظ عرفنا خاصيتين min_speed و max_speed لتحديد نطاق سرعة عشوائي والذي سنستخدمه لاحقًا  لضبط قيمة سرعة الحركة CharacterBody3D.velocity.

extends CharacterBody3D

# سرعة العدو الدنيا مقدرة بالمتر في الثانية.
@export var min_speed = 10
# سرعة العدو القصوى مقدرة بالمتر في الثانية.
@export var max_speed = 18


func _physics_process(_delta):
    move_and_slide()

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

نحتاج إلى تعريف دالة أخرى لحساب CharacterBody3D.velocity حيث تحوّل هذه الدالة العدو باتجاه اللاعب وتضفي طابعًا عشوائيًا على كل من زاوية حركته وسرعته.

ستأخذ الدالة موقع ظهور العدو أول مرة start_position، وموقع اللاعب player_position كوسيط. نضع العدو في الموقع start_position ونوجهه نحو اللاعب باستخدام الدالةlook_at_from_position()‎، ولجعل الحركة أكثر طبيعية نعطي العدو زاوية عشوائية عن طريق الدوران بمقدار عشوائي حول المحور Y بحيث لا يكون دائمًا موجهًا بشكل مباشر نحو اللاعب. تعطينا الدالة randf_range()‎ في الكود التالي قيمة عشوائية بين ‎-PI/4 راديان و PI/4 راديان وسنستخدمها لتدوير العدو.

# يتم استدعاء هذه الدالة من المشهد  الأساسي
func initialize(start_position, player_position):
    # نحدد واحد من الأعداء بوضعه في‫ start_position
    # ‫ونديره باتجاه player_position ليواجه اللاعب
    look_at_from_position(start_position, player_position, Vector3.UP)
    # دوّر هذا العدو تلقائيًا بين  -45 و +45 درجة
    # لكي لا تتحرك نحو اللاعب بشكل مباشر.
    rotate_y(randf_range(-PI / 4, PI / 4))

لقد حصلنا على موقع عشوائي، والآن نحتاج إلى تحديد سرعة عشوائية باستخدام random_speed. سنستخدم الدالة randi_range()‎ للحصول على قيمة عدد صحيح عشوائي حيث سنحدد الحد الأدنى min_speed والحد الأقصى max_speed للسرعة.أما random_speed فهو مجرد عدد صحيح نستخدمه لمضاعفة سرعة الحركة CharacterBody3D.velocity. بعد ذلك، سنوجه  شعاع CharacterBody3D.velocity  نحو اللاعب مع تطبيق random_speed لتحديد السرعة.

func initialize(start_position, player_position):
    # ...

    # ‫‎نحسب السرعة العشوائية (عدد صحيح)‎‎‏
    var random_speed = randi_range(min_speed, max_speed)
    # نحسب سرعة أمامية تمثّل السرعة
    velocity = Vector3.FORWARD * random_speed
    # ‫ثم ندوّر شعاع السرعة على اتجاه دوران العدو حول Y
    # لكي يتحرك في اتجاه نظر العدو
    velocity = velocity.rotated(Vector3.UP, rotation.y)

مغادرة الشاشة

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

عد إلى نافذة العرض لاثي الأبعاد، اضغط على التسمية ثلاثي الأبعاد 3D أعلى المحرر أو يمكنك الضغط على Ctrl+F2 أو Alt+2 على نظام التشغيل macOS.

حدد العقدة VisibleOnScreenNotifier3D وانتقل إلى القائمة التي تعرض معلومات  العقدة في الجانب الأيمن من واجهة المحرر، ثم انقر نقرًا مزدوجًا فوق الإشارة screen_exited()التي تُرسل عندما يخرج الكائن من الشاشة.

صِل هذه الإشارة بالعقدة Mob

سيؤدي هذا إلى إعادتك إلى محرر النصوص وإضافة دالة جديدة ‎_on_visible_on_screen_notifier_3d_screen_exited()‎ ثم استدعِ من خلالها تابع queue_free()‎ حيث تعمل هذه الدالة على تدمير النسخة التي يتم استدعاؤها عليها.

func _on_visible_on_screen_notifier_3d_screen_exited():
    queue_free() 

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

إليك الشيفرة البرمجية الكاملة للملف Mob.gd للرجوع إليها:

extends CharacterBody3D

# سرعة العدو الدنيا مقدرة بالمتر في الثانية
@export var min_speed = 10
# سرعة العدو القصوى مقدرة بالمتر في الثانية
@export var max_speed = 18

func _physics_process(_delta):
    move_and_slide()

# يتم استدعاء هذه الدالة من المشهد  الأساسي
func initialize(start_position, player_position):
    # ‫نحدد واحد من العدو بوضعه في start_position
    # ‫ونديره باتجاه player_position, ليواجه اللاعب..
    look_at_from_position(start_position, player_position, Vector3.UP)
    # دوّر هذا العدو تلقائيًا بين  -45 و +45 درجة,
    # لكي لا تتحرك نحو اللاعب بشكل مباشر
    rotate_y(randf_range(-PI / 4, PI / 4))

    # نحسب السرعة العشوائية ‫(عدد صحيح)‎‎‏‫
    var random_speed = randi_range(min_speed, max_speed)
    # نحسب سرعة أمامية تمثّل السرعة
    velocity = Vector3.FORWARD * random_speed
    # ثم ندوّر شعاع السرعة على اتجاه دوران العدو حول‫ Y
    # لكي يتحرك في اتجاه نظر العدو
    velocity = velocity.rotated(Vector3.UP, rotation.y)

func _on_visible_on_screen_notifier_3d_screen_exited():
    queue_free() 

الخلاصة

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

ترجمة -وبتصرف- لقسم Designing the mob scene من توثيق جودو الرسمي.

اقرأ أيضًا

• المقال السابق: تحريك اللاعب برمجيًا في لعبة ثلاثية الأبعاد باستخدام محرك جودو
• الاستماع لمدخلات اللاعب في جودو Godot
• الرؤية التصميمية لمحرك اﻷلعاب جودو Godot
• إعداد محرك الألعاب جودو Godot للعمل مع قاعدة البيانات SQLite

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

انقر بزر الفأرة الأيمن على عقدة Player وحدد خيار إضافة سكريبت Attach Script لإضافة سكربت جديد إليها، ثم اضبط القالب Template في النافذة المنبثقة على Empty قبل الضغط على زر إنشاء Create.

سنعرّف خصائص الصنف class مثل سرعة الحركة movement speed وتسارع السقوط fall acceleration الذي يمثل الجاذبية، والسرعة التي سنستخدمها لتحريك الشخصية.

extends CharacterBody3D

# سرعة اللاعب بواحدة المتر في الثانية
@export var speed = 14
# التسارع نحو الأسفل في الهواء بوحدة متر في الثانية للتربيع
@export var fall_acceleration = 75

var target_velocity = Vector3.ZERO

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

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

لتحديد اتجاه الحركة نبدأ بحساب شعاع اتجاه الإدخال باستخدام الكائن العام input في ‎_physics_process()‎ لبرمجة الحركة كما في الشيفرة التالية:

func _physics_process(delta):
    # أنشأنا متغير محلي لتخزين اتجاه الإدخال
    var direction = Vector3.ZERO

    # نتحقق من كل خطوة ونحدّث الاتجاه حسب ذلك
    if Input.is_action_pressed("move_right"):
        direction.x += 1
    if Input.is_action_pressed("move_left"):
        direction.x -= 1
    if Input.is_action_pressed("move_back"):
        # لاحظ أننا نعمل مع محاور أشعة x و z
        # إن المسطح xz في ثلاثي الأبعاد هو مستوي الأرض
        direction.z += 1
    if Input.is_action_pressed("move_forward"):
        direction.z -= 1 

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

ولتعلّم المزيد حول الفرق بين الدالتين ‎ _process()‎ و ‎ ‎ ‎_physics_process()‎ راجع توثيق جودو حول معالجة الفيزياء والسكون ومعرفة كيفية استخدام هذه الدوال لضبط الحركات الفيزيائية بطريقة مستقرة وواقعية.

نبدأ بتهيئة قيمة المتغير direction إلى Vector3.ZERO ليكون متجهًا فارغًا (أي أن قيمته تكون صفرًا في المحاور الثلاثة x و y و z) ثم نتحقق مما إذا كان اللاعب يضغط على إدخال move_*‎ واحد أو أكثر ونغيّر مكوني x وz للشعاع وفقًا لذلك بحيث تتوافق هذه مع محاور مستوى الأرض.

توفر لنا هذه الحالات الأربعة ثمانية احتمالات، وثمانية اتجاهات ممكنة.

سيكون طول الشعاع في حالة ضغط اللاعب مثلًا على كل من W و D في وقت واحد حوالي 1.4، ولكن إذا ضغط على مفتاح واحد سيكون طوله 1. نستدعي تابع normalized()‎ ليكون طول الشعاع ثابتًا ولا يتحرك بشكل أسرع قطريًا.

وفيما يلي شيفرة تحريك أو تدوير الكائن في اتجاه حركة اللاعب بناءً على المدخلات.

#func _physics_process(delta):
    #...

    if direction != Vector3.ZERO:
        direction = direction.normalized()
        # تهيئة خاصية‫ basis سيؤثر على دوارن العقدة.
        $Pivot.basis = Basis.looking_at(direction)

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

الآن سنحسب الاتجاه الذي ينظر إليه ‎$‎Pivot عن طريق إنشاء Basis ينظر في اتجاه direction، ومن ثم نحدّث قيمة السرعة حيث يتعين علينا حساب سرعة الأرض أو السرعة الأفقية وسرعة السقوط أو السرعة العمودية بشكل منفصل، حيث تُدمج السرعات معًا وتُحرّك الشخصية باستخدام الدالة move_and_slide()‎ لتطبيق الحركة الفعلية مع الفيزياء.

تأكد من الضغط على مفتاح Tab مرة واحدة بحيث تكون الأسطر داخل دالة ‎_physics_process()‎ ولكن خارج الشرط الذي كتبناه للتو أعلاه.

func _physics_process(delta):
    #...
    if direction != Vector3.ZERO:
        #...

    # السرعة الأرضية
    target_velocity.x = direction.x * speed
    target_velocity.z = direction.z * speed

    # السرعة العمودية
    if not is_on_floor(): # إذا كان في الهواء، فسيسقط على الأرض 
        target_velocity.y = target_velocity.y - (fall_acceleration * delta)

    # تحريك الشخصية
    velocity = target_velocity
    move_and_slide()

تعيد دالة ‏‎CharacterBody3D.is_on_floor()‎‏ قيمة true إذا تصادم الجسم مع الأرض في هذا الإطار، لهذا السبب نطبق الجاذبية على اللاعب Player فقط عندما يكون في الهواء.

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

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

نستدعي في السطر الأخير التابع CharacterBody3D.move_and_slide()‎ وهو تابع ذو قدرات عظيمة لصنف CharacterBody3D إذ يسمح لك بتحريك الشخصية بسلاسة، حيث سيحاول محرك جودو إصلاح الحركة إذا اصطدمت بحائط في منتصفها باستخدام قيمة السرعة الأصلية CharacterBody3D.

هذه هي كل الشيفرة التي تحتاجها لتحريك الشخصية على الأرض. فيما يلي شيفرة Player.gd الكاملة لاستخدامها كمرجع:

extends CharacterBody3D

# سرعة اللاعب بواحدة المتر في الثانية
@export var speed = 14
# التسارع نحو الأسفل في الهواء بوحدة متر في الثانية للتربيع.
@export var fall_acceleration = 75

var target_velocity = Vector3.ZERO


func _physics_process(delta):
    var direction = Vector3.ZERO

    if Input.is_action_pressed("move_right"):
        direction.x += 1
    if Input.is_action_pressed("move_left"):
        direction.x -= 1
    if Input.is_action_pressed("move_back"):
        direction.z += 1
    if Input.is_action_pressed("move_forward"):
        direction.z -= 1

    if direction != Vector3.ZERO:
        direction = direction.normalized()
        $Pivot.basis = Basis.looking_at(direction)

    # السرعة الأرضية
    target_velocity.x = direction.x * speed
    target_velocity.z = direction.z * speed

    # السرعة العمودية
    if not is_on_floor(): # إذا كان في الهواء، فيسقط على الأرض 
        target_velocity.y = target_velocity.y - (fall_acceleration * delta)

    # تحريك الشخصية
    velocity = target_velocity
    move_and_slide()

دورة تطوير الألعاب

ابدأ رحلتك في برمجة وتطوير الألعاب ثنائية وثلاثية الأبعاد وصمم ألعاب تفاعلية ممتعة ومليئة بالتحديات

اشترك الآن

اختبار حركة اللاعب

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

احفظ المشهد Player وافتح المشهد Main من خلال النقر على تبويب Main  أعلى المحرر.

إذا أغلقت المشهد من قبل، فتوجه إلى نافذة نظام الملفات FileSystem Dock وانقر نقرًا مزدوجًا فوق main.tscn لإعادة فتحه.

انقر بزر الفأرة الأيمن على العقدة الرئيسية Main وحدد Instantiate Child Scene لاستنساخ المشهد Player .

الآن انقر نقرًا مزدوجًا فوق player.tscn في النافذة المنبثقة لتظهر الشخصية في وسط نافذة العرض.

إضافة كاميرا

سننشئ إعدادًا أساسيًا تمامًا كما فعلنا مع `Pivot. انقر بزر الفأرة الأيمن على عقدة المشهد الرئيسيMainمرة أخرى وحدد خيار "إضافة عقدة فرعية Add Child Node"، ثم أنشئ عقدةMarker3Dجديدة وسمهاCameraPivot، ومن ثم حددCameraPivotوأضف إليها عقدة فرعيةCamera3D` لتبدو شجرة المشهد على هذا النحو

ستلاحظ مربع اختيار معاينة Preview يظهر في الزاوية العلوية اليسرى عند تحديد الكاميرا حيث يمكنك النقر فوقه لمعاينة إسقاط الكاميرا داخل اللعبة.

سنستخدم المحور Pivot لتدوير الكاميرا كما لو كانت على رافعة، لذا دعنا أولاً نقسم نافذة العرض ثلاثي الأبعاد 3D view لنتمكن من التنقل بحرية في المشهد ورؤية ما تراه الكاميرا. في شريط الأدوات أعلى النافذة مباشرةً، انقر فوق View ثم 2‎ ‎Viewports. يمكنك أيضًا الضغط على Ctrl + 2 (أو Cmd + 2على نظام التشغيل macOS).

حدد Camera3D في النافذة السفلية، وشغّل معاينة الكاميرا بالنقر فوق مربع الاختيار Preview.

حرك الكاميرا في النافذة العلوية حوالي 19 وحدة على المحور Z ذي اللون الأزرق.

هنا نرى ثمرة عملنا، حدد CameraPivot ودوره بمقدار ‎-‎45 درجة حول محور X باستخدام الدائرة الحمراء لترى الكاميرا تتحرك كما لو كانت متصلة برافعة.

يمكنك تشغيل المشهد بالضغط على F6 ثم الضغط على مفاتيح الأسهم لتحريك الشخصية.

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

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

ملاحظة: تعتمد جودة الظل الاتجاهي directional shadow على قيمة Far للكاميرا عند استخدام كاميرا متعامدة فإعداد Far يحدد المسافة الأبعد التي يمكن للكاميرا رؤيته، وكلما زادت قيمة البعد زادت المسافة التي ستتمكن الكاميرا من الرؤية فيها. بالرغم من ذلك، فإن قيم البعد الأعلى ستقلل أيضًا من جودة الظل حيث يجب أن يغطي عرض الظل مسافة أكبر.

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

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

الخلاصة

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

ترجمة - وبتصرف - لقسم Moving the player with code من توثيق جودو الرسمي.

اقرأ أيضًا

• المقال السابق: أنشئ لعبة ثلاثية الأبعاد باستخدام محرك جودو: مشهد اللاعب وعمليات الإدخال
• العقد Nodes والمشاهد Scenes في جودو Godot
• تعرف على أشهر محركات الألعاب Game Engines
• تعرف على أشهر لغات برمجة الألعاب

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

إنشاء مشهد اللاعب

أنشئ مشهدًا جديدًا بالانتقال إلى قائمة "مشهد Scene" في أعلى اليسار وانقر فوق "مشهد جديد New Scene"

أنشئ عقدة CharacterBody3D كعقدة جذر حيث تستخدم هذه العقدة للتحكم في شخصيات الألعاب ثلاثية الأبعاد، مثل اللاعبين أو الأعداء. وتوفر أدوات للتحكم في الحركة والتصادم.

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

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

أضف عقدة Node3D كعقدة فرعية للعقدة Player وسمّها Pivot لتكون عقدة وسيطة يمكننا التحكم من خلالها في زاوية دوران النموذج.

بعد ذلك، في لوحة "نظام الملفات FileSystem"، افتح مجلد الرسومات art/‎ بالنقر المزدوج عليه، ثم اسحب وأفلت الملف player.glb على العقدة Pivot.

يجب أن يؤدي هذا إلى إنشاء النموذج كعقدة فرعية للعقدة Pivot، كما يمكنك إعادة تسميتها إلى Character.

ملاحظة: تحتوي ملفات ‎.glb على بيانات مشهد ثلاثي الأبعاد بناءً على مواصفات GLTF 2.0 مفتوحة المصدر، وهي بديل حديث وقوي لنوع الملفات الاحتكارية FBX، والذي يدعمه جودو أيضًا. وقد صممنا النموذج في Blender 3D لإنتاج هذه الملفات، ثم صدّرناه إلى GLTF.

كما هو الحال مع جميع أنواع العقد، نحتاج إلى شكل تصادم لشخصيتنا كي تتصادم به مع البيئة. حدد عقدة Player مرة أخرى وأضف عقدة فرعية CollisionShape3D في قائمة "الفاحص Inspector" ومن خاصية الشكل "Shape" أضف شكل SphereShape3D جديد.

سيظهر الإطار السلكي للكرة أسفل الشخصية كما في الصورة التالية.

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

يمكنك إخفاء وإظهار النموذج عن طريق النقر فوق أيقونة العين بجوار عقدة Character أو عقدة Pivot.

احفظ المشهد باسم player.tscn

نحتاج الآن إلى تعريف بعض إجراءات الإدخال قبل البدء بالبرمجة عندما تصبح العقد جاهزة.

إنشاء إجراءات الإدخال

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

هذا النظام هو "خريطة الإدخال Input Map"، وللوصول إلى المحرر الخاص بها، توجه إلى قائمة "المشروع Project" وحدد "إعدادات المشروع Project Settings".

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

تأتي مشاريع جودو مع بعض الإجراءات المحددة مسبقًا predefined actions والموجهة لتصميم واجهة المستخدم التي يمكننا استخدامها هنا، لكننا سنحدد إجراءاتنا الخاصة لدعم وحدات التحكم gamepads.

سنسمي إجراءاتنا move_left للتحرك يسارًا، و move_right للتحرك يمينًا و move_forward للتحرك للأمام، و move_back للتحرك للخلف، و jump للقفز.

اكتب اسم الإجراء في الشريط العلوي واضغط على Enter لإضافته.

أنشئ الإجراءات الخمسة التالية:

لربط مفتاح أو زر بإجراء، انقر فوق زر إشارة "+" على يمينه. افعل ذلك من أجل move_left للتحرك يسارًا، ثم اضغط على مفتاح السهم الأيسر وانقر فوق موافق OK.

اربط أيضًا مفتاح A على إجراء move_left

لنضيف الآن دعمًا لعصا التحكم اليسرى في وحدة التحكم Gamepad من خلال النقر فوق الزر "+" مرة أخرى ولكن هذه المرة سنحدد خيار Manual Selection ومن ثم‏ محاور عصا التحكم Joypad Axes ‏

حدد المحور السالب X لعصا التحكم اليسرى.

اترك القيم الأخرى كقيمة افتراضية واضغط على موافق OK.

ملاحظة: إذا كنت تريد أن تحتوي وحدات التحكم على إجراءات إدخال مختلفة، فيجب عليك استخدام خيار أجهزة Devices في قائمة الخيارات الإضافية Additional Options. يقابل الجهاز 0 أول وحدة تحكم موصولة، ويقابل الجهاز 1 ثاني وحدة تحكم ...إلخ.

افعل الشيء نفسه لإجراءات الإدخال الأخرى. على سبيل المثال، اربط السهم الأيمن و المفتاح D، والمحور الموجب لعصا التحكم اليسرى بالإجراء move_right، وبعد ربط جميع المفاتيح، يجب أن تبدو واجهتك على هذا النحو.

آخر إجراء مطلوب إعداده هو إجراء القفز jump، اربط مفتاح المسافة Space وزر A في وحدة التحكم Gamepad من أجل تحقيقه في لعبتك.

يجب أن يبدو إجراء إدخال القفز الخاص بك على هذا النحو.

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

الخلاصة

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

ترجمة -وبتصرف- لقسم Player scene and input actions من توثيق جودو الرسمي.

اقرأ أيضًا

• المقال السابق: إعداد منطقة اللعب للعبة ثلاثية الأبعاد باستخدام جودو
• الاستماع لمدخلات اللاعب في جودو Godot
• ألعاب الفيديو: تطورها وأهميتها وخطوات برمجتها
• كيف تحصل على أفكار ألعاب فيديو ناجحة

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

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

إليك ما ستتعلمه خلال تطوير لعبة ثلاثية الأبعاد في جودو:

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

سنبدأ مع تعليمات مشروحة بالتفصيل ونختصرها كلما مررنا بخطوات مشابهة، وإذا كنت من المبرمجين المتمرسين يمكنك النظر إلى الشيفرة البرمجية النهائية على الرابط التالي: Squash the Creep source code

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

البدء بإعداد منطقة اللعب

سنتعلم في البداية كيفية إعداد منطقة اللعب، إذ ستكون أحداث اللعبة تقع بكاملها في هذه المنطقة. لنبدأ بإعداد منطقة اللعب عن طريق استيراد موارد البدء start assets وإعداد مشهد اللعبة. حضّرنا مشروع جودو مع النماذج ثلاثية الأبعاد والأصوات التي سنستخدمها في هذه السلسلة، إذا لم تحمّل الملف المضغوط حتى الآن، يمكنك تنزيله من هنا، بعد ذلك، استخرج ملف ‎.‎zip على حاسوبك، وافتح مدير مشروع جودو وانقر على زر "استيراد Import".

أدخل المسار الكامل للمجلد الذي أُنشئ حديثًا squash_the_creeps_start/‎ في نافذة الاستيراد المنبثقة، ثم انقر على زر "تصفح Browse" على اليمين لفتح مستعرض الملفات والانتقال إلى ملف project.godot الموجود داخل المجلد.

الآن انقر فوق "استيراد وتعديل Import & Edit" لفتح المشروع في المحرر

يحتوي مشروع البداية على أيقونة ومجلدين هما art و fonts، حيث ستجد هناك الموارد الفنية كالصور والأيقونات والصوتية التي سنستخدمها في اللعبة.

كما هو ملاحظ من الصورة السابقة التي توضّح محتويات نظام الملفات في مشروع جودو؛ هناك نموذجان ثلاثيا الأبعاد هما player.glb الخاص بالشخصية الرئيسية للاعب وmob.glb الخاص بشخصية العدو في مجلد art وبعض المواد التي تنتمي إلى هذه النماذج مع مقطوعة موسيقية.

خطوات إنشاء منطقة اللعب

سنُنشئ الآن المشهد الرئيسي في اللعبة باستخدام عقدة Node اعتيادية. انقر في نافذة "المشهد Scene" على زر "إضافة عقدة فرعية Add Child Node" المتمثل برمز إشارة الجمع في أعلى اليسار وانقر نقرًا مزدوجًا فوق Node ثم سمّي العقدة الرئيسية باسم Main.

هناك طريقة بديلة لإعادة تسمية العقدة وهي النقر بالزر الأيمن فوق العقدة واختيار "إعادة التسمية Rename" أو F2 يمكنك الضغط أيضًا على Ctrl + A (أو Cmd + A على نظام التشغيل macOS) لإضافة عقدة إلى المشهد.

احفظ المشهد باسم main.tscn بالضغط على Ctrl + S‏ (Cmd + S‎ ‏على نظام التشغيل macOS).

سنبدأ بإضافة أرضية تمنع الشخصيات من السقوط، ويمكنك استخدام عقد StaticBody3D لإنشاء تصادمات مع أجسام ثابتة static colliders مثل الأرضية أو الجدران أو الأسقف بحيث تصطدم بها الشخصيات أو الأجسام الأخرى دون أن تتأثر هي، لكنها تتطلب عقدًا فرعية CollisionShape3D لتحديد منطقة التصادم. أضف عقدة StaticBody3D بعد تحديد العقدة الرئيسية Main، ثم عقدة CollisionShape3D وأعد تسمية العقدة StaticBody3D إلى Ground.

يجب أن يظهر تسلسل العقد في المشهد الخاص بك على هذا النحو:

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

حدد العقدة CollisionShape3D لإنشاء شكل التصادم، ثم توجه إلى قائمة "الفاحص Inspector" وانقر على الحقل بجوار خاصية الشكل "Shape" لإنشاء "BoxShape3D" وهو شكل صندوقي ثلاثي الأبعاد.

سنختار شكل الصندوق لكونه مثالي للأرضية المستوية والجدران، ويعتبر موثوقًا من ناحية اعتراض وصد الأجسام سريعة الحركة بفضل سماكته التي تجعل التصادم أكثر استقرارًا.

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

كما يمكنك تحديد الحجم بدقة من قائمة "الفاحص Inspector" من خلال النقر فوق BoxShape3D لتوسيع المورد، ثم ضبط قيمة الحجم إلى 60 على محور X، و 2 على محور Y، و 60 على محور Z.

ونظرًا لكون أشكال التصادم غير مرئية، فستحتاج إلى إضافة أرضية مرئية معها من خلال تحديد العقدة Ground وإضافة MeshInstance3D كعقدة فرعية لها.

انقر على الحقل بجوار الشبكة "Mesh" في قائمة "الفاحص Inspector"، ثم أنشئ مورد BoxMesh لإنشاء صندوق مرئي.

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

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

سنحرّك الأرضية إلى أسفل حتى نتمكن من رؤية شبكة الأرضية floor grid. حدد العقدة Ground واضغط باستمرار على مفتاح Ctrl لتشغيل التقاط الشبكة grid snapping، ثم انقر واسحب لأسفل على محور Y الذي هو السهم الأخضر في أداة التحريك move gizmo.

اقتباس

ملاحظة: إذا لم تتمكن من رؤية محرك Manipulator كائن ثلاثي الأبعاد كما هو موضح في الصورة أعلاه، فتأكد من تنشيط وضع التحديد Select Mode في شريط الأدوات أعلى نافذة العرض.

حرك الأرضية إلى أسفل بمقدار1 متر حتى تصبح شبكة المحرر مرئية، وستخبرك إشارة في الركن الأيسر السفلي من نافذة العرض بمدى انتقال translating العقدة.

اقتباس

ملاحظة: يؤدي تحريك العقدة Ground إلى تحريك العقدتين الفرعيتين معها. تأكد من تحريك العقدة Ground، وليس العقدة MeshInstance3D أو CollisionShape3D

في النهاية، يجب أن تكون قيمة ‎‎transform.position.y للعقدة Ground هي ‎-‎1.

لنضف ضوءًا اتجاهيًا directional light حتى لا يكون مشهدنا بالكامل باللون الرمادي ولتوفير إضاءة طبيعية، لذا حدد العقدة الرئيسية Main وأضف عقدة فرعية DirectionalLight3D لها فهذه العقدة هي المسؤولة عن توفير الإضاءة في المشهد.

نحن بحاجة إلى تحريك وتدوير العقدة DirectionalLight3D حيث يمكنك تحريكها لأعلى بالنقر والسحب على السهم الأخضر لأداة التحريك، وانقر واسحب على القوس الأحمر لتدويرها حول محور X حتى تضاء الأرضية.

شغل الظل من قائمة "الفاحص Inspector"، حيث يمكن تفعيله بالنقر فوق مربع الاختيار جانب "فعّال On".

في هذه المرحلة، يجب أن يبدو مشروعك كما يلي.

الخلاصة

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

ترجمة - وبتصرف - لقسم Your first 3D game وقسم Setting up the game area من توثيق جودو الرسمي.

اقرأ أيضًا

• المقال السابق: بناء لعبة ثنائية البعد عبر محرك الألعاب Godot - الجزء الأخير: ربط مشاهد اللعبة ووضع اللمسات اﻷخيرة
• مدخل إلى محرك الألعاب جودو Godot
• دليلك الشامل إلى برمجة الألعاب
• أشهر أنواع الألعاب الإلكترونية

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

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

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

قبل أن نبدأ التطبيق العملي، إليك شيفرة الشعار الوارد في تمرين شاشة توقف DVD‎‎‎ الذي شرحناه في المقال السابق.

الدرس التعليمي لبروسيسنج Processing: لعبة بسيطة

اللعبة التي سنبنيها في هذا الدرس التعليمي باستخدام Processing هي مزيج بين كل من الألعاب الإلكترونية التالية "Flappy Bird" و "Pong" و "Brick Breaker". وسبب اختيار هذه اللعبة هو احتواؤها على معظم المفاهيم التي يصادفها المبتدئون عند تعلم برمجة الألعاب. وتشمل هذه المفاهيم الجاذبية، والتصادمات، والحفاظ على النقاط، والتعامل مع شاشات مختلفة وتفاعل لوحة المفاتيح/الفأرة. ولعبة "Flappy Pong" تحتوي على كل هذه المفاهيم.

العب الآن!

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

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

بناء لعبة Flappy Pong

الخطوة 1: تهيئة ومعالجة الشاشات المختلفة

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

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

/********* VARIABLES *********/

// نتحكم بالشاشة التي نريد تنشيطها من خلال تحديث وضبط متغيّر‫ gameScreen
// ‫ نعرض الشاشة الصحيحة بحسب قيمة هذا المتغير
//
// 0: الشاشة الأساسية
// 1: شاشة اللعبة
// 2: شاشة نهاية اللعبة

int gameScreen = 0;

/********* SETUP BLOCK *********/

void setup() {
  size(500, 500);
}


/********* DRAW BLOCK *********/

void draw() {
  // يعرض محتوى الشاشة الحالية
  if (gameScreen == 0) {
    initScreen();
  } else if (gameScreen == 1) {
    gameScreen();
  } else if (gameScreen == 2) {
    gameOverScreen();
  }
}


/********* SCREEN CONTENTS *********/

void initScreen() {
  // الشيفرة البرمجية للشاشة الرئيسية
}
void gameScreen() {
  // الشيفرة البرمجية لشاشة اللعبة
}
void gameOverScreen() {
  // الشيفرة البرمجية لشاشة انتهاء اللعبة
}


/********* INPUTS *********/

public void mousePressed() {
  // إذا كنا على الشاشة الرئيسية عند النقر، ابدأ اللعبة
  if (gameScreen==0) {
    startGame();
  }
}


/********* OTHER FUNCTIONS *********/

// هذا التابع يحدد المتغيرات الضرورية لبدء اللعبة 
void startGame() {
  gameScreen=1;
}

قد تبدو الشيفرة معقدة في البداية، ولكن كل ما فعلناه هو بناء الهيكل الأساسي وفصل الأجزاء المختلفة باستخدام كتل التعليقات.

كما ترى، نحدد تابعًا مختلفًا لعرض كل شاشة. ونتحقق ببساطة من قيمة متغير gameScreen في كتلة الرسم الخاصة بنا، ونستدعي التابع المقابل.

في الجزء void mousePressed(){...}‎، نستمع إلى نقرات الفأرة وإذا كانت الشاشة النشطة هي 0، الشاشة الأولية، نستدعي تابع startGame()‎ الذي يبدأ اللعبة. ويغيّر السطر الأول من هذا التابع متغير gameScreen إلى 1 شاشة اللعبة.

إذا فهمت ذلك، فالخطوة التالية هي تنفيذ شاشتنا الأولية. وللقيام بذلك، سنحرر تابع initScreen()‎. الذي يبدأ من هنا :

void initScreen() {
  background(0);
  textAlign(CENTER);
  text("Click to start", height/2, width/2);
}

و

الآن، في شاشة البداية، أضفتا خلفية سوداء ونص بسيط يظهر في منتصف الشاشة مكتوب عليه "انقر للبدء Click to start". ومع ذلك، عند النقر على الشاشة، لا يحدث أي شيء، وهذا متوقع لأننا لم نكتب بعد أي كود لتنفيذ محتوى اللعبة بعد الضغط على الزر. حالياً، لا تحتوي  الدالة ()gameScreen على أية تعليمات، ولذلك عند الانتقال لشاشة اللعبة، فإن المحتوى السابق (أي النص) لا يزال يظهر لأننا لم نضع تعليمة ()background لإعادة رسم الخلفية وإخفاء المحتويات السابقة. لهذا السبب، يستمر النص في الظهور حتى بعد الانتقال، تمامًا كما كان يحدث في مثال الكرة المتحركة التي كانت تترك أثراً خلفها.لذلك دعونا نمضي قدمًا ونبدأ في تنفيذ شاشة اللعبة.

void gameScreen() {
  background(255);
}

بعد هذا التغيير، ستلاحظ أن الخلفية تتحول إلى بيضاء ويختفي النص.

الخطوة 2: إنشاء الكرة وتطبيق الجاذبية

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

أولًا نضيف ما يلي:

...
int ballX, ballY;
int ballSize = 20;
int ballColor = color(0);
...
void setup() {
  ...
  ballX=width/4;
  ballY=height/5;
}
...
void gameScreen() {
  ...
  drawBall();
}
...
void drawBall() {
  fill(ballColor);
  ellipse(ballX, ballY, ballSize, ballSize);
}

عرّفنا الإحداثيات كمتغيرات عامّة، وأنشأنا تابعًا لرسم الكرة التي استدعيناها من التابع gameScreen، الشيء الوحيد الذي يجب الانتباه إليه هنا هو أننا هيّئنا الإحداثيات، ولكننا عرفناها في setup()‎. السبب وراء قيامنا بذلك هو أننا أردنا أن تبدأ الكرة من مسافة ربع من اليسار وخمس من الأعلى. ليس هناك سبب محدد وراء رغبتنا في ذلك، إلا أنّ هذه نقطة جيدة لبدء الكرة. لذلك نحن بحاجة للحصول على width وheight للرسم ديناميكيًا. يتم تعريف حجم الرسم في setup()‎ بعد السطر الأول. لم يتم ضبط width وheight قبل تنفيذ setup()‎، ولهذا السبب لم نتمكن من تحقيق ذلك إذا حدّدنا المتغيرات في الأعلى.

الجاذبية

الآن تطبيق الجاذبية هو الجزء السهل في الواقع. إذ لا يوجد سوى عدد قليل من الحيل. وهذا التطبيق أولًا:

...
float gravity = 1;
float ballSpeedVert = 0;
...
void gameScreen() {
  ...
  applyGravity();
  keepInScreen();
}
...
void applyGravity() {
  ballSpeedVert += gravity;
  ballY += ballSpeedVert;
}
void makeBounceBottom(float surface) {
  ballY = surface-(ballSize/2);
  ballSpeedVert*=-1;
}
void makeBounceTop(float surface) {
  ballY = surface+(ballSize/2);
  ballSpeedVert*=-1;
}
// ابقِ الكرة داخل الشاشة
void keepInScreen() {
  // تصل الكرة إلى الأرض
  if (ballY+(ballSize/2) > height) { 
    makeBounceBottom(height);
  }
  // تضرب الكرة السقف
  if (ballY-(ballSize/2) < 0) {
    makeBounceTop(0);
  }
}

والنتيجة هي:

تمهّل يا عالم الفيزياء! أعلم أن هذه ليست الطريقة التي تعمل بها الجاذبية في الحياة الواقعية. بدلًا من ذلك، هي عملية رسوم متحركة أكثر من أي شيء آخر. المتغير الذي عرفناه gravity هو مجرد قيمة رقمية float حتى نتمكن من استخدام القيم العشرية، وليس فقط الأعداد الصحيحة - نضيفها إلى ballSpeedVert في كل حلقة. و ballSpeedVert هي السرعة الرأسية للكرة، التي تضاف إلى محور Y للكرة (ballY) في كل حلقة. نشاهد إحداثيات الكرة ونتأكد من بقائها في الشاشة. إن لم نفعل ذلك، ستسقط إلى ما لا نهاية. في الوقت الحالي، تتحرك الكرة رأسيًا فقط. لذلك نشاهد حدود الأرضية والسقف للشاشة.

نتحقق مما إذا كانتballY (+ نصف القطر) أقل من الارتفاع باستخدام التابع keepInScreen()‎، وبالمثل ballY (- نصف القطر) أكبر من0. إذا لم تتحقق الشروط، نجعل الكرة ترتد (من الأسفل أو الأعلى) باستخدام تابعيّ makeBounceBottom()‎ وmakeBounceTop()‎. لجعل الكرة ترتد، نحرك الكرة إلى الموقع المحدد الذي يجب أن ترتد فيه ونضرب السرعة العمودية (ballSpeedVert) في-1 (الضرب في -1 يغير الإشارة). عندما تحتوي قيمة السرعة على علامة سالب، فإن إضافة الإحداثي Y تجعل السرعة (ballY + (-ballSpeedVert، وهي ballY - ballSpeedVert. لذا تغيّر اتجاه الكرة على الفور بنفس السرعة. بعد ذلك، عندما نضيف الجاذبية إلى ballSpeedVert وتكون قيمة ballSpeedVert سالبة، فإنها تبدأ في الاقتراب من 0، وتصبح في النهاية 0، وتبدأ في الزيادة مرة أخرى. وهذا يجعل الكرة ترتفع، وترتفع بشكل أبطأ، إلى أن تتوقف وتبدأ بالسقوط.

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

...
float airfriction = 0.0001;
float friction = 0.1;
...
void applyGravity() {
  ...
  ballSpeedVert -= (ballSpeedVert * airfriction);
}
void makeBounceBottom(int surface) {
  ...
  ballSpeedVert -= (ballSpeedVert * friction);
}
void makeBounceTop(int surface) {
  ...
  ballSpeedVert -= (ballSpeedVert * friction);
}

والآن ستبدو عملية التحريك الخاصة بنا بهذا الشكل:

كما يوحي الاسم، friction هو الاحتكاك السطحي و airfriction هو احتكاك الهواء. لذا من الواضح أن friction يجب أن يحدث في كل مرة تلمس فيها الكرة أي سطح. ومع ذلك، يجب أن نطبّق airfriction باستمرار. وهذا ما فعلناه. والآن ننفّذ تابع applyGravity()‎ على كل حلقة، لذلك نحذف 0.0001 بالمئة من قيمتها الحالية من ballSpeedVert في كل حلقة. ثمّ ننفذ تابعي makeBounceBottom()‎ و makeBounceTop()‎ عندما تلمس الكرة أي سطح. لذا، في تلك الطرق، فعلنا نفس الشيء، ولكن هذه المرة باستخدام friction.

الخطوة 3: إنشاء مضرب تنس

الآن نحتاج إلى مضرب تنس للكرة لكي ترتدّ عليه. ويجب أن نتحكم بالمضرب. والآن لنتحكم به من خلال الفأرة. هذه هي الشيفرة البرمجية:

...
color racketColor = color(0);
float racketWidth = 100;
float racketHeight = 10;
...
void gameScreen() {
  ...
  drawRacket();
  ...
}
...
void drawRacket(){
  fill(racketColor);
  rectMode(CENTER);
  rect(mouseX, mouseY, racketWidth, racketHeight);
}

لقد عرّفنا اللون، الطول والعرض الخاصين بالمضرب كمتغير عام، لأننا قد نريدهم أن يتغيروا أثناء اللعب. طبّقنا التابع drawRacket()‎ الذي ينفّذ ما يوضحه اسمه (يرسم المضرب). ضبطنا وضع rectMode على المركز، بحيث يكون مضربنا محاذيًا لمركز المؤشر.

الآن بعد أن أنشأنا المضرب، علينا أن نجعل الكرة ترتد عليه.

...
int racketBounceRate = 20;
...
void gameScreen() {
  ...
  watchRacketBounce();
  ...
}
...
void watchRacketBounce() {
  float overhead = mouseY - pmouseY;
  if ((ballX+(ballSize/2) > mouseX-(racketWidth/2)) && (ballX-(ballSize/2) < mouseX+(racketWidth/2))) {
    if (dist(ballX, ballY, ballX, mouseY)<=(ballSize/2)+abs(overhead)) {
      makeBounceBottom(mouseY);
      // يتحرك المضرب إلى الأعلى
      if (overhead<0) {
        ballY+=overhead;
        ballSpeedVert+=overhead;
      }
    }
  }
}

وهذه هي النتيجة:

إذن ما يفعله watchRacketBounce()‎ هو التأكد من اصطدام المضرب والكرة. هناك شيئان يجب التحقق منهما هنا، وهما إذا ما كانت الكرة والمضرب مصطفين رأسيًا وأفقيًا. تتحقق عبارة if الأولى مما إذا كان إحداثي X للجانب الأيمن من الكرة أكبر من إحداثي X للجانب الأيسر من المضرب (والعكس صحيح). إذا كان الأمر كذلك، فإن العبارة الثانية تتحقق مما إذا كانت المسافة بين الكرة والمضرب أصغر من أو تساوي نصف قطر الكرة (مما يعني أنهما يتصادمان). لذا، إذا استوفيت هذه الشروط، فسيتم استدعاء تابع makeBounceBottom()‎ وترتد الكرة على مضربنا (عند mouseY، حيث يوجد المضرب).

هل لاحظت مقدار المتغير overhead الذي يتم حسابه بواسطة mouseY - pmouseY؟ يخزّن المتغيّران pmouseX و pmouseY إحداثيات الفأرة في الإطار السابق. نظرًا لأن الفأرة يمكن أن تتحرك بسرعة كبيرة، فهناك احتمال كبير أننا قد لا نكتشف المسافة بين الكرة والمضرب بشكل صحيح بين الإطارات إذا كان الفأر يتحرك نحو الكرة بسرعة كافية. لذا، سنأخذ اختلاف إحداثيات الماوس بين الإطارات ونأخذ ذلك في الاعتبار أثناء اكتشاف المسافة. كلما تحركت الفأرة بشكل أسرع، كانت المسافة الأكبر مقبولة.

نستخدم أيضًا overhead لسبب آخر. نكتشف الاتجاه الذي تتحرك به الفأرة من خلال التحقق من علامة overhead. إذا كان overhead سالبًا، فهذا يعني أن الفأرة كانت في مكان ما أسفل الإطار السابق، لذا فإن الفأرة (المضرب) يتحرك نحو الأعلى. في هذه الحالة، نريد إضافة سرعة إضافية للكرة وتحريكها أبعد قليلًا من الارتداد العادي لمحاكاة تأثير ضرب الكرة بالمضرب. إذا كان overhead أقل من 0، فإننا نضيفه إلى ballY و ballSpeedVert لجعل الكرة ترتفع إلى أعلى وأسرع. لذا، كلما أسرع المضرب في ضرب الكرة، كلما تحركت إلى أعلى وأسرع.

الخطوة 4: الحركة الأفقية والسيطرة على الكرة

في هذا القسم، سنضيف الحركة الأفقية إلى الكرة. ثمّ، سنحقّق التحكم بالكرة أفقياً بدون مضرب. لنبدأ:

...
// سنبدأ بـ 0، لكننا نعطي 10 للاختبار فقط
تعويم الكرة SpeedHorizon = 10؛

float ballSpeedHorizon = 10;
...
void gameScreen() {
  ...
  applyHorizontalSpeed();
  ...
}
...
void applyHorizontalSpeed(){
  ballX += ballSpeedHorizon;
  ballSpeedHorizon -= (ballSpeedHorizon * airfriction);
}
void makeBounceLeft(float surface){
  ballX = surface+(ballSize/2);
  ballSpeedHorizon*=-1;
  ballSpeedHorizon -= (ballSpeedHorizon * friction);
}
void makeBounceRight(float surface){
  ballX = surface-(ballSize/2);
  ballSpeedHorizon*=-1;
  ballSpeedHorizon -= (ballSpeedHorizon * friction);
}
...
void keepInScreen() {
  ...
  if (ballX-(ballSize/2) < 0){
    makeBounceLeft(0);
  }
  if (ballX+(ballSize/2) > width){
    makeBounceRight(width);
  }
}

وستكون النتيجة كالتالي:

الفكرة هنا هي نفسها التي نفذناها للحركة الرأسية. أنشأنا متغير السرعة الأفقي، ballSpeedHorizon. لقد أنشأنا تابعاً لتطبيق السرعة الأفقية على ballX وإزالة احتكاك الهواء. أضفنا عبارتي if إضافيتين إلى تابع keepInScreen()‎‎ والتي ستراقب الكرة وهي تضرب الحواف اليسرى واليمنى للشاشة. وأخيرًا، أنشأنا تابعي makeBounceLeft()‎ وmakeBounceRight()‎ للتعامل مع الارتدادات من اليسار واليمين.

الآن بعد أن أضفنا السرعة الأفقية إلى اللعبة، نريد التحكم في الكرة بالمضرب. كما هو الحال في لعبة أتاري الشهيرة Breakout‎ وفي جميع ألعاب كسر الطوب الأخرى، يجب أن تتحرك الكرة يسارًا أو يمينًا وفقًا للنقطة التي تضربها على المضرب. يجب أن تمنح حواف المضرب الكرة سرعة أفقية أكبر بينما لا ينبغي أن يكون للوسط أي تأثير. الشيفرة البرمجية أولا:

void watchRacketBounce() {
  ...
  if ((ballX+(ballSize/2) > mouseX-(racketWidth/2)) && (ballX-(ballSize/2) < mouseX+(racketWidth/2))) {
    if (dist(ballX, ballY, ballX, mouseY)<=(ballSize/2)+abs(overhead)) {
      ...
      ballSpeedHorizon = (ballX - mouseX)/5;
      ...
    }
  }
}

النتيجة هي:

إن إضافة هذا السطر البسيط إلى watchRacketBounce()‎ أدى المهمة. ما فعلناه هو أننا حددنا مسافة النقطة التي تضربها الكرة من مركز المضرب باستخدام ballX - mouseX. ثم نجعلها بالسرعة الأفقية. كان الفرق الفعلي كبيرًا جدًا، لذا أجرينا بعض المحاولات واكتشفنا أن عُشر القيمة تبدو طبيعية أكثر.

الخطوة 5: إنشاء الجدران

بدأ رسمنا يبدو وكأنه لعبة مع كل خطوة. في هذه الخطوة، سنضيف جدران تتحرك نحو اليسار، تمامًا كما في Flappy Bird:

...
int wallSpeed = 5;
int wallInterval = 1000;
float lastAddTime = 0;
int minGapHeight = 200;
int maxGapHeight = 300;
int wallWidth = 80;
color wallColors = color(0);
// تقوم قائمة المصفوفات هذه بتخزين بيانات الفجوات بين الجدران. يتم رسم الجدران الفعلية وفقًا لذلك
// [gapWallX, gapWallY, gapWallWidth, gapWallHeight]
ArrayList<int[]> walls = new ArrayList<int[]>();
...
void gameScreen() {
  ...
  wallAdder();
  wallHandler();
}
...
void wallAdder() {
  if (millis()-lastAddTime > wallInterval) {
    int randHeight = round(random(minGapHeight, maxGapHeight));
    int randY = round(random(0, height-randHeight));
    // {gapWallX, gapWallY, gapWallWidth, gapWallHeight}
    int[] randWall = {width, randY, wallWidth, randHeight}; 
    walls.add(randWall);
    lastAddTime = millis();
  }
}
void wallHandler() {
  for (int i = 0; i < walls.size(); i++) {
    wallRemover(i);
    wallMover(i);
    wallDrawer(i);
  }
}
void wallDrawer(int index) {
  int[] wall = walls.get(index);
  // للحصول على إعدادات جدار الفجوة 
  int gapWallX = wall[0];
  int gapWallY = wall[1];
  int gapWallWidth = wall[2];
  int gapWallHeight = wall[3];
  // رسم الجدران الفعلية
  rectMode(CORNER);
  fill(wallColors);
  rect(gapWallX, 0, gapWallWidth, gapWallY);
  rect(gapWallX, gapWallY+gapWallHeight, gapWallWidth, height-(gapWallY+gapWallHeight));
}
void wallMover(int index) {
  int[] wall = walls.get(index);
  wall[0] -= wallSpeed;
}
void wallRemover(int index) {
  int[] wall = walls.get(index);
  if (wall[0]+wall[2] <= 0) {
    walls.remove(index);
  }
}