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

نقطة الانطلاق

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

كما يمكنكم تحميل مشروع اللعبة كاملًا من مستودعه المخصص على جيتهب، أو من هنا مباشرة classic_shmup.zipوتجربتها لديكم لمزيد من الفهم.

إعداد المشروع

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

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

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

تحميل أصول اللعبة Assets

يمكنكم تحميل المحلقات أو الأصول الخاصة باللعبة من صور وأيقونات مختلفة من موقع Mini Pixel Pack by Grafxkid، بعد التحميل علينا أن نستخرج الملفات وننسخها إلى المشروع بسحب المجلد وإفلاته ضمن نافذة مدير الملفات File System لتبدأ عمليه استيرادها لداخل اللعبة.

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

ننتقل الآن إلى القائمة مشروع Project، ثم نختار إعدادات المشروع Project Settings وننقر على زر التبديل إعدادات متقدمة Advanced settings في الزاوية العليا اليسارية، ونضبط ما يلي في قسم النافذة window الموجود ضمن قسم لإظهار Display كما يلي:

• عرض منفذ العرض viewport width وطول منفذ العرض viewport height على القيمتين 240 و 320
• تجاوز عرض النافذة window width override وتجاوز ارتفاع النافذة window height override على القيمتين 480 و 640 على التوالي
• الخيار تمدد stretch ضمن القسم وضع mode على القيمة canvas_items لجعل عناصر المشهد اللعبة تتمدد وتتناسب مع حجم الشاشة

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

الآن لننتقل ضمن إعدادات المشروع للقسم معالجة Rendering ثم نختار ملمس Texture ونضبط الخيار تصفية الملمس الافتراضي Default Texture Filter على القيمة Nearest. 

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

ننقر الآن على تبويب خريطة الإدخال Input Map في إعدادت المشروع حيث سنضبط هنا عناصر الإدخال التي نستخدمها في اللعبة. نكتب كل كلمة مما يلي right و left و up و down و shoot على حدة في صندوق إضافة إجراء جديد Add New Action ثم ننقر بعدها المفتاح Enter لتتكون لدينا خمسة إجراءات، أربعة منها للتحرك في الاتجاهات المختلفة وواحدة للإطلاق. ننقر بعد ذلك الزر + إلى جانب كل إجراء ثم ننقر أي مفتاح من من لوحة المفاتيح كي نعينه لتنفيذ هذا الإجراء. من المفترض أن نرى نتيجة مشابهة لما يلي:

بإمكانكم اختيار المفاتيح التي تشاؤنها إن لم تجدوا أن المفاتيح التي عيّناها مناسبة لكم.

الخاتمة

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

ترجمة -وبتصرف- للمقالين: Your first 2D game و Project setup

اقرأ أيضًا

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

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

أهمية العقدة RayCast2D في تطوير الألعاب

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

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

أهم خصائص العقدة RayCast2D

تتضمن العقدة RayCast2D في جودو مجموعة من الخصائص المهمة التي تساعدنا على ضبط سلوك الشعاع بشكل دقيق. 

دعونا ننشئ مشروع جديد للعبة ثنائية الأبعاد، ونضيف للمشهد عقدة RayCast2D ونتحقق من خصائصها الظاهرة في الفاحص Inspector كما يلي:

فيما يلي الخاصيات الرئيسية التي ستحتاج إلى فهمها للتعامل مع هذه العقدة:

الخاصية Enabled

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

الخاصية Exclude Parent

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

الخاصية Target Position

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

ملاحظة: تمثل الإحداثيات المحلية Local Coordinates موقع العقدة بالنسبة لنقطة الأصل الخاصة بالعقدة الأم، بينما تمثل الإحداثيات العامة Global Coordinates الموقع المطلق للعقدة داخل المشهد بأكمله.

لنلاحظ أيضًا القسم بعنوان Collide With ضمن الفاحص، ففي هذا القسم يمكننا تحديد أنواع الكائنات التي يجب أن يتفاعل معها الشعاع، حيث سيكتشف الشعاع افتراضيًا الأجسام الفيزيائية Bodies فقط مثل KinematicBody2D أو RigidBody2D، ولو أردنا منه اكتشاف المناطق أيضًا مثل Area2D فعلينا تفعيل الخيار Area.

دوال مفيدة للعقدة RayCast2D

يمكن الاطلاع على القائمة الكاملة لدوال العقدة RayCast2D في توثيق واجهة برمجة التطبيقات API، ولكن سنوضح تاليًا بعض الدوال المفيدة للتعامل مع التصادمات:

• is_colliding()‎: دالة منطقية تتيح معرفة فيما إذا كان الشعاع يصطدم بشيء ما
• get_collision_point()‎: إذا اصطدم الشعاع بشيء ما ستعيد هذه الدالة موضع التصادم في الإحداثيات العامة
• get_collider()‎: إذا اصطدم الشعاع بشيء ما ستعيد هذه الدالة مرجعًا إلى الكائن المتصادم
• get_collision_normal()‎: تعيد هذه الدالة الشعاع الناظم Normal على الكائن المتصادم عند نقطة الاصطدام

أمثلة عملية

توجد العديد من الاستخدامات العملية المفيدة لتقنية كشف تصادم الأشعة مثل الرؤية Visibility أي هل يمكن للكائن A أن يرى الكائن B أم أن هناك عائقًا بينهما يحول دون ذلك، والقرب Proximity أي هل اللاعب قريب من جدار أو أرض أو عائق وغير ذلك من الاستخدامات المختلفة.

سنوضح فيما يلي بعض الأمثلة العملية المفيدة.

المثال الأول: إطلاق النار

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

يمثّل الشكل التالي شخصية اللاعب حيث أضفنا عقدة Raycast2D عند نهاية السلاح، وضبطنا موضع الهدف target_position على القيمة (250,0)لضبط اتجاه الشعاع الذي يُطلق من السلاح.

إذا أطلق اللاعب قذيفة، فيجب التحقق فيما إذا كان الشعاع يصطدم بشيء ما كما يلي:

func _input(event):
    if event.is_action_pressed("shoot"):
        if $RayCast2D.is_colliding():
            print($RayCast2D.get_collider().name)

المثال الثاني: اكتشاف حافة منصة

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

نتحقق متى سيتوقف الشعاع عن الاصطدام بأي شيء في سكربت العدو من خلال الدالة ()is_colliding، ففي حال أعادت الدالة false، فهذا يعني أننا وجدنا الحافة ويجب علينا الالتفاف:

func _physics_process(delta):
    velocity.y += gravity * delta
    if not $RayRight.is_colliding():
        dir = -1
    if not $RayLeft.is_colliding():
        dir = 1
    velocity.x = dir * speed
    $AnimatedSprite.flip_h = velocity.x > 0
    velocity = move_and_slide(velocity, Vector2.UP)

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

وسيبدو الأمر أثناء العمل كما يلي:

الخاتمة

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

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

اقرأ أيضًا

• التفاعل بين الشخصيات والأجسام الصلبة في جودو
• استخدام RigidBody2D في جودو للتوجه نحو هدف والتحرك نحوه
• ترتيب معالجة العقد والتنقل في شجرة المشاهد في Godot
• تحريك سفينة فضاء باستخدام RigidBody2D في جودو

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

مشروع مشغل الصوت

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

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

AudioDemo (MarginContainer)
├── CenterContainer (CenterContainer)
│   └── GridContainer (GridContainer)
├── CanvasLayer (CanvasLayer)
│   └── HBoxContainer (HBoxContainer)
│       ├── Label (Label)
│       ├── Label2 (Label)
│       ├── VSeparator (VSeparator)
│       ├── Label3 (Label)
│       └── Label4 (Label) 

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

كما سنضيف عقدة CanvasLayer لعرض واجهة المستخدم ونضيف لها عقدة ابن من نوع HBoxContainer وضمنها عدة عناصر تسمية  Label لعرض إحصائيات عن الملفات الصوتية التي نشغلها، وعدد الملفات الصوتية الموجودة في قائمة الانتظار وعقدة VSeparator للفصل بين العناصر.

بعدها نضيف مجلد الموارد assets الذي يتضمن مجموعة ملفات صوتية، ويمكنك الحصول عليه من خلال تحميل هذا المشروع من مستودع جيتهب أو من هنا مباشرة audio_manager.zip.

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

الكود البرمجي لمدير الصوت

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

extends Node

var num_players = 8
var bus = "master"

var available = [] # المشغلات المتاحة
var queue = [] # رتل الأصوات التي ستُشغل


func _ready():
    # AudioStreamPlayer ننشئ حلقة من العقد
    for i in num_players:
      var player = AudioStreamPlayer.new()
      add_child(player)
      available.append(player)
      player.finished.connect(_on_stream_finished.bind(player))
      player.bus = bus


func _on_stream_finished(stream):
    # نجعل المشغل متاحًا مجددًا بعد الانتهاء من تشغيل المقطع الصوتي
    available.append(stream)


func play(sound_path):
    queue.append(sound_path)


func _process(delta):
    # نشغل الأصوات في الرتل إن وجد أي لاعب
    if not queue.empty() and not available.empty():
      available[0].stream = load(queue.pop_front())
      available[0].play()
      available.pop_front()

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

سنضبط هذا السكريبت حتى يُحمّل تلقائيًا Auto-load  من إعدادات المشروع كي نتمكن من استدعائه من أي مكان بسهولة، للقيام بذلك سنفتح إعدادات المشروع من خلال القائمة Project ثم Project Settings، نذهب بعدها إلى تبويب Global ثم لتبويب التحميل التلقائي AutoLoad كما في الصورة التالية ونختار ملف السكريبت audio_manager.gd من ملفات المشروع، وفي خانة Node Name نمنحه اسمًا سهل التمييز مثل AudioManager ثم نضغط على Add، وبهذا سيضاف السكربت إلى قائمة التحميل التلقائي، وستُفعَّل خانة Enabled تلقائيًا.

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

AudioManager.play("res://path/to/sound")

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

الكود البرمجي لواجهة المشروع الديناميكية

الخطوة التالية التي سنقوم بها هي توليد الواجهة الديناميكية المكونة من زر لتشغيل كل ملف صوتي، لتحقيق ذلك نلحق سكريبت للعقدة الجذر AudioDemo ونكتب فيه الكود التالي لتشغيل كافة الملفات الصوتية الموجودة في مجلد المشروع:

extends MarginContainer

# المجلد الذي يحتوي على الملفات الصوتية
@export var sound_dir: String = "res://assets"


func _ready():
	# نحمل كل الملفات الصوتية الموجودة في المجلد
	var dir = DirAccess.open(sound_dir)
	if dir:
		dir.list_dir_begin()
		var file_name = dir.get_next()
		while file_name != "":
			if file_name.get_extension() in ["wav", "ogg"]:
				add_button(file_name)
			file_name = dir.get_next()
		dir.list_dir_end()
		

func add_button(file_name):
	# إضافة زر لتشغيل الملف الصوتي المخصص له
	var b = Button.new()
	$CenterContainer/GridContainer.add_child(b)
	b.add_theme_font_override("font", load("res://assets/Poppins-Medium.ttf"))
	b.text = file_name
	b.pressed.connect(on_audio_button_pressed.bind(b))
	
	
func on_audio_button_pressed(button):
	# تشغيل الصوت المرتبط بالزر
	var path = sound_dir + "/" + button.text
	AudioManager.play(path)
	

func _process(delta):
	# تحديث عدد المشغلات المتاحة وعدد الأصوات في قائمة الانتظار
	$CanvasLayer/HBoxContainer/Label2.text = str(AudioManager.available.size())
	$CanvasLayer/HBoxContainer/Label3.text = str(AudioManager.queue.size())

الخاتمة

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

ترجمة -وبتصرف- للمقال: Audio manager

اقرأ أيضًا

• المقال السابق: تحريك جسم صلب RigidBody2D بواقعية في الفضاء باستخدام جودو
• الطريقة الصحيحة للتواصل بين العقد في جودو Godot
• مدخل إلى محرك الألعاب جودو Godot
• إضافة النقاط واللعب مجددًا وتأثيرات الصوت للعبة 3D ضمن جودو
• إضافة المؤثرات الصوتية للعبة المطورة باستخدام بايثون ومكتبة Pygame

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

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

بناء الحركة

سننشئ مشهد جديد ثنائي الأبعاد في جودو ونستخدم فيه العقد التالية:

RigidBody2D (Ship)
├── Sprite2D
└── CollisionShape2D

وإليكم وظيفة كل عقدة منها:

• تمثل RigidBody2D(Ship) العقدة الرئيسية للجسم الصلب الذي نريد تحريكه، والذي يتفاعل مع البيئة ويتأثر بقوانين الفيزياء
• تمثل العقدة Sprite2D الشكل المرئي للجسم الصلب، وهي في حالتنا صورة سفينة الفضاء التي تتحرك تلقائيًا مع الجسم الفيزيائي الصلب
• تستخدم العقدة CollisionShape2D لتحديد شكل وحجم منطقة التصادم للجسم الصلب، وهي ضرورية كي تتعرف الفيزياء على حدود الجسم وتتفاعل معه بشكل صحيح عند اصطدامه بأجسام أخرى

توجيه الشخصية

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

كما سنستخدم المدخلات التالية في خريطة الإدخال Input Map:

بعدها، سنضيف سكريبت إلى الجسم الصلب ونعرّف فيه بعض المتغيرات:

extends RigidBody2D

@export var engine_power = 800
@export var spin_power = 10000

var thrust = Vector2.ZERO
var rotation_dir = 0

يحدد أول متغيران كيفية التحكم بحركة سفينة الفضاء. إذ يتحكم المتغير engine_power بالتسارع أي سرعة الحركة للأمام، بينما يتحكم المتغير spin_power بسرعة دوران السفينة. ويُضبط كل من thrust و rotation_dir بناءً على مدخلات المستخدم، وهذا ما سنفعله تاليًا:

func get_input():
    thrust = Vector2.ZERO
    if Input.is_action_pressed("thrust"):
      thrust = transform.x * engine_power
    rotation_dir = Input.get_axis("rotate_left", "rotate_right")

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

يمكن للسفينة الفضائية البدء بالطيران عند تطبيق القيم التالية في الدالة (physics_process(delta_.

func _physics_process(_delta):
    get_input()
    constant_force = thrust
    constant_torque = rotation_dir * spin_power

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

لننتقل إلى خصائص العقدة ومنها إلى Linear ثم Damp و Angular ثم Damp ونضبط قيمتي هاتين الخاصيتين على 1 و 2 على الترتيب. تحدّ هاتان القيمتان من سرعة الحركة وسرعة الدوران مما يسبب توقف السفينة الفضائية.

ملاحظة: يمكن أن نجرّب تغيير قيم هذه الخاصيات ونرى كيف تتفاعل مع engine_power و spin_power.

العودة إلى الشاشة

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

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

لننتقل الآن إلى screensize في أعلى السكريبت:

@onready var screensize = get_viewport_rect().size

نضيف بعد ذلك دالة جديدة باسم ()integrate_forces_:

func _integrate_forces(state):
    var xform = state.transform
    xform.origin.x = wrapf(xform.origin.x, 0, screensize.x)
    xform.origin.y = wrapf(xform.origin.y, 0, screensize.y)
    state.transform = xform

نلاحظ أن الدالة ()integrate_forces_  تستقبل معاملًا باسم state، وهو كائن من النوع PhysicsDirectBodyState2D يمثل الحالة الفيزيائية الحالية للجسم الصلب. يحتوي هذا الكائن على معلومات مثل موضع الجسم position والقوى المؤثرة forces والسرعة velocity في الاتجاهات المختلفة وغيرها من الخصائص الفيزيائية.
وبالتالي يمكن أن نحصل من خلال state على التحويل الحالي للجسم  current transform أي موقعه واتجاهه، ثم نعدّل إحداثيات الموقع باستخدام الدالة ()wrapf لتطبيق التفاف حول الشاشة مما يعني أن الجسم سيتجاوز حافة الشاشة ويظهر من الجهة المقابلة لإعطاء تأثير الحركة المستمرة. وأخيرًا، نُعيد ضبط التحويل الجديد داخل state لضمان استمرار حركة الجسم بشكل طبيعي وواقعي.

ستبدو الحركة كما في الصورة التالية:

الانتقال الفوري

لنلقِ نظرة على مثال آخر يوضح استخدام ()integrate_forces_ لتغيير حالة الجسم دون مشكلات. لنضف آلية انتقال آني أو فوري بحيث يتمكن اللاعب من نقل المركبة الفضائية فورًا إلى موقع عشوائي داخل الشاشة عند الضغط على مفتاح مخصص.

نضيف بداية متغيرًا جديدًا:

var teleport_pos = null

نحضّر تاليًا موقعًا عشوائيًا ضمن الدالة ()get_input:

    if Input.is_action_just_pressed("warp"):
      teleport_pos = Vector2(randf_range(0, screensize.x), randf_range(0, screensize.y))

وأخيرًا وضمن الدالة ()integrate_forces_ سنستخدم teleport_position إن كان موجودًا ومن ثم نمسحه:

    if teleport_pos:
      physics_state.transform.origin = teleport_pos
      teleport_pos = null

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

الخاتمة

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

ترجمة -وبتصرف- للمقال: Asteroids-style Physics (using RigidBody2D)

اقرأ أيضًا

• المقال السابق: التفاعل بين الشخصيات والأجسام الصلبة في جودو
• بناء وتنفيذ لعبة ثنائية الأبعاد في جودو
• العمل مع إجراءات الدخل Inputs Actions في جودو
• تحريك الشخصية في لعبة 3D باستخدام محرر التحريك في جودو
• التحريك باستخدام SpriteSheet و AnimationTree StateMachine في جودو

بدأنا في المقال السابق شرح بعض المفاهيم الرياضية الأساسية التي يحتاج مطور الألعاب لمعرفتها، مثل الاستيفاء الخطي linear interpolation -أو lerp اختصارًا- والجداء النقطي Dot Product، والجداء الشعاعي Cross Product. وسنستكمل في مقال اليوم شرح مفهوم رياضي مهم وهو التحويلات الهندسية Transforms الذي يسمح لنا بتغيير مكان أو شكل الأشياء في الفضاء باستخدام المصفوفات.

متطلبات العمل

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

التحويلات في المستوي ثنائي البعد

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

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

تشير السفينة هنا إلى نفس اتجاه المحور X، فلو أردنا منها التحرك نحو اﻷمام، نضيف مقدار الحركة إلى الإحداثي اﻷفقي X فتتحرك نحو اليمين:

position += Vector2(10, 0)

لكن ما الذي يحدث عندما تدور السفينة؟

كيف يمكن اﻵن تحريكها نحو اﻷمام؟ إن كنتم تتذكرون علم المثلثات في المدرسة، فقد تبدأون بالتفكير في الزوايا والنسب المثلثية sin و cos، ثم تنفذون عملية حسابية مثل:

position += Vector2(10 * cos(angle), 10 * sin(angle))

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

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

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

    position += transform.x * 10

ينص السطر السابق على إضافة الشعاع X للتحويل مضروبًا بالعدد 10. 

لنشرح هذا الأمر بشيء من التفصيل، تضم الخاصية transform اﻹحداثيين x و y الممثلان للإحداثيات المحلية الخاصة بالعقدة، وهما شعاعي واحدة unit vector أي أن طويلة كل منهما تساوي الواحد. كما يطلق على هذان الشعاعان شعاعي توجيه direction vectors، ويدلان على الاتجاه الذي يشير إليه المحور X الخاص بالسفينة. نضرب بعد ذلك شعاعي التوجيه بالعدد 10 لتكبيرهما والانتقال إلى مسافة أبعد.

ملاحظة: تتعلق الخاصية transform لعقدة بالعقدة اﻷم لها أي تنسب إحداثياتها الخاصة إلى إحداثيات العقدة اﻷم. فإن أردنا الحصول على اﻹحداثيات العامة بالنسبة إلى الشاشة، نستخدم global_transform.

تضم الخاصية transform إضافة إلى المحاور المحلية، مكونًا يُدعى شعاع الأصل origin ويمثل اﻹنسحاب translation أو تغيير الموضع.

يمثل الشعاع اﻷزرق في الصور التالية شعاع اﻷصل transform.origin ويساوي شعاع الموضع position للكائن:

التحويل بين الفضاء المحلي والعام

يمكننا تحويل اﻹحداثيات من الفضاء المحلي للعقدة إلى الفضاء العام عن طريق التحويلات. حيث تضم العقد من النوع Noode2D والنوع Spatial في جودو دوال برمجية مساعدة مثل ()to_local و ()to_global لتحقيق هذا الأمر:

    var global_position = to_global(local_position)

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

extends Sprite

func _unhandled_input(event):
    if event is InputEventMouseButton and event.pressed:
      if event.button_index == BUTTON_LEFT:
        printt(event.position, to_local(event.position))

للمزيد حول آلية التحويل من إحداثيات عامة إلى إحداثيات محلية في محرك جودو ننصحكم بقراءة توثيق Transform2D للاطلاع على كافة الخاصيات والتوابع المتاحة.

التحويلات في الفضاء ثلاثي البعد

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

ترث العقد ثلاثية البعد من العقدة الأساسية Node3D التي تضم معلومات التحويل. ويحتاج التحويل في الفضاء ثلاثي البعد لمعلومات أكثر مقارنة مع الفضاء الثنائي البعد. حيث يبقى شعاع الموضع Position محفوظًا ضمن الخاصية Origin، لكن الدوران موجود ضمن خاصية تدعى basis تضم ثلاثة أشعة واحدة unit vectors تمثل المحاور اﻹحداثية المحلية الثلاث للعقدة X و Y و Z.

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

تفعيل نمط الفضاء المحلي Local Space

لنتذكر أن الفضاء العام Global Space هو الفضاء الذي يعتمد على محاور المشهد العامة. بمعنى آخر، إذا كنا نحرك أو ندير كائنًا في هذا الفضاء، فإن تحركاته ستكون بناءً على محاور العالم أو المشهد الذي يوجد فيه هذا الكائن، أما الفضاء المحلي Local Space فهو الفضاء الذي يعتمد على محاور الكائن نفسه. أي أن للكائن لديه محاور خاصة به مثل المحور X و Y و Z الخاص به وعندما نحرك أو ندير الكائن في الفضاء المحلي، فإن تحركاته تكون بالنسبة له هو، وليس بالنسبة للمشهد بأكمله.

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

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

    position += -transform.basis.z * speed * delta

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

Vector3.FORWARD == Vector3(0, 0, -1)

الخاتمة

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

ترجمة -وبتصرف- لمقال Transforms

اقرأ أيضًا

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

يحتاج أي مطور ألعاب لمعرفة بعض المفاهيم الرياضية الأساسية ليتحكم في انتقال الشخصيات من حالة لأخرى بانسيابية ويتحكم في اتجاهاتها وتمكينها من معرفة ماذا يوجد أمامها وخلفها، وسنناقش في مقال اليوم مفاهيم تستخدم بكثرة في تطوير اﻷلعاب، مثل الاستيفاء الخطي linear interpolation -أو lerp اختصارًا- والجداء الداخلي أو النقطي أو السلمي Dot Product، والجداء الخارجي أو الشعاعي Cross Product.
قد تبدو هذه المصطلحات مقعدة وغامضة لمن يسمعها لأول مرة، لكن لا داعي للقلق فبعد قراءة هذا المقال ومعرفة تطبيقاتها العملية في برمجة اﻷلعاب ستغدو سهلة وبسيطة.

الاستيفاء العددي

تُعطى الصيغة اﻷساسية للاستيفاء الخطي رياضيًا كالتالي:

func lerp(a, b, t):
    return (1 - t) * a + t * b

يمثل كل من a و b قيمتين، بينما تمثل t مقدار الاستيفاء بينهما أي النسبة التي تحدد إلى أي درجة ننتقل من a إلى b. وتتراوح قيم t نمطيًا بين 0 وعندها سيعيد الاستيفاء قيمة a، وبين القيمة 1 وعندها سيعيد الاستيفاء قيمة b. يعطي تابع الاستيفاء قيمة ما بين a و b كما في المثال التالي:

x = lerp(0, 1, 0.75) # x is 0.75
x = lerp(0, 100, 0.5) # x is 50
x = lerp(10, 75, 0.3) # x is 29.5
x = lerp(30, 2, 0.75) # x is 9

يُدعى هذا الاستيفاء بالاستيفاء الخطي لأنه يعدّ المسافة بين نقطتي الاستيفاء خطًا مستقيمًا.

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

extends Sprite2D

var time = 0
var duration = 2 # المدة الزمنية للتأثير

func _process(delta):
    if time < duration:
      time += delta
      modulate.a = lerp(1, 0, time / duration)
      scale = Vector2.ONE * lerp(1, 5, time / duration)

الاستيفاء الشعاعي

من الممكن الاستيفاء أيضًا بين شعاعين وهذا يعني إيجاد شعاع جديد يقع بينهما بناءً على مقدار معين t تمامًا مثل الاستيفاء بين رقمين، لكن هنا نتعامل مع اتجاهات أو مواقع في الفضاء، إذ توفر كلا العقدتين Vector2 و Vector3 التابع ()linear_interpolate لتنفيذ اﻷمر.

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

var forward = -transform.basis.z
var left = transform.basis.x
var forward_left = forward.linear_interpolate(left, 0.5)

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

extends Sprite2D

var target

func _input(event):
    if event is InputEventMouseButton and event.pressed:
      target = event.position

func _process(delta):
    if target:
      position = position.linear_interpolate(target, 0.1)

الجداء الشعاعي الداخلي والخارجي

يمكن تنفيذ عمليتي جداء على اﻷشعة هما الجداء الداخلي السلمي أو النقطي dot product والذي تكون نتيجته عدد، والجداء الخارجي أو الشعاعي والذي تكون نتيجته شعاعًا.

الجداء الداخلي

هو عملية حسابية على شعاعين تكون نتيجته عدد حقيقي، وتمثل عادة على أنها مسقط شعاع A على حامل الشعاع اﻵخر B:

تُعطى الصيغة الرياضية للجداء الداخلي بالعلاقة:

حيث:

• θ : هي الزاوية بين الشعاعين
• ||A||: طويلة الشعاع اﻷول
• ||B||:طويلة الشعاع الثاني

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

تشير هذه العلاقة إلى الارتباط المباشر بين الجداء الداخلي والزاوية بين الشعاعين، وطالما أن cos(0)=1 و cos(180)=-1 ستدل قيمة الجداء السلمي على اتجاه الشعاعين بالنسبة لبعضهما، فهما في الزاوية 0 منطبقان وفي الزاوية 180 في اتجاهين مختلفين:

وسنرى في فقرة قادمة كيف نستفيد من هذا الجداء عمليًا.

الجداء الخارجي

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

تعطى طويلة الشعاع الناتج عن الجداء الخارجي بالعلاقة:

A x B = ||A||.||B||.sin(θ) //هي الزاوية بين الشعاعين θ

وإن كانت طويلة كل من الشعاعين هي الواحد ستكون نتيجة الحساب أبسط، إذ تكون طويلة الشعاع الناتج قيمة بين 1- و 1.

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

من ناحية أخرى، في أطر العمل ثنائية البعد ومن ضمنها جودو، لا يمكن تمثيل الشعاع العمودي داخل نفس المستوى، وبالتالي عند استخدام التابع Vectro2.cross في جودو، فإنه لا يُرجع شعاعًا جديدًا، بل عددًا يمثل طول الشعاع العمودي على الشعاعين في اتجاه الفضاء الثالث أو المحور z وتكون قيمته بين 1- و 1 وتعكس مدى التعامد بين الشعاعين.

تطبيقات عملية

لنلق نظرة على الصورة المتحركة التالية التي تمثل نتيجة جداء خارجي وداخلي لشعاعين ()Vector2.dot و ()Vector2.cross وكيف تتغير كل نتيجة مع تغير الزاوية بين الشعاعين:

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

كما يساعد الجداء الخارجي في معرفة إن كان الكائن إلى اليسار -عندما تكون قيمة الجداء أكبر من الصفر- أو إلى اليمين -عندما تكون قيمة الجداء أصغر من الصفر-.

الخاتمة

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

ترجمة -وبتصرف- للمقالين: Interpolation و Vectors:Using Dot product and Cross product

اقرأ أيضًا

• المقال السابق: سحب وإفلات جسم صلب RigidBody2D في جودو
• استخدام RigidBody2D في جودو للتوجه نحو هدف والتحرك نحوه
• تطبيق الجداء النقطي Dot Product على الأشعة في التصاميم 3D
• تعرف على محرر محرك اﻷلعاب جودو Godot

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

التفاعل مع الأجسام الصلبة

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

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

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

سنجد أن أمامنا خيارين لتحديد أسلوب التفاعل مع الأجسام الصلبة فبإمكاننا دفع هذه الأجسام متجاهلين الفيزياء. وهذا الأمر مماثل لخيار العطالة اللانهائية infinite inertia المستخدم في الإصدار 3 من جودو.

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

العطالة اللانهائية

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

لتوضيح الأمر، عرّفنا في مثالنا ثلاث طبقات فيزيائية

ووضعنا الجسم الصلب ضمن الطبقة رقم 3 وأبقينا على القناع كما هو لتقنيع كل الطبقات:

وضعنا بعد ذلك اللاعب في الطبقة الثانية وهي الطبقة player وضبطنا القناع ليتجاهل العناصر الأخرى.

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

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

لا بأس بهذا الأمر في بعض الألعاب، لكن إن أردنا منع الجسم من التسلق، علينا الاعتماد على الخيار الثاني.

تطبيق الاندفاعات

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

# عطالة اللاعب
var push_force = 80.0

func _physics_process(delta):
    # move_and_slide() بعد استدعاء
    for i in get_slide_collision_count():
      var c = get_slide_collision(i)
      if c.get_collider() is RigidBody2D:
        c.get_collider().apply_central_impulse(-c.get_normal() * push_force)

يتجه ناظم التصادم collision normal خارج الجسم الصلب، لهذا عكسناه ليتجه بعكس اتجاه الشخصية ويُطبّق العامل push_force. وهكذا ستدفع الشخصية الصناديق مجددًا لكنها لن تجبر الصناديق عندما تدفعها نحو الجدار على تسلقه.

الخاتمة

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

ترجمة -وبتصرف- للمقال: Character to rigid Body interaction

• اقرأ أيضًا

• المقال السابق: سحب وإفلات جسم صلب RigidBody2D في جودو
• استخدام RigidBody2D في جودو للتوجه نحو هدف والتحرك نحوه
• استخدام الإشارات Signals في جودو Godot
• إنشاء خرائط مصغرة MiniMap للألعاب في جودو

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

إعداد المشروع

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

سيبدو المشهد الرئيسي للعبة كالتالي:

نستخدم العقدة CanvasLayer لتجميع عناصر واجهة المستخدم بما في ذلك الخريطة المصغرة التي سننشؤها في هذا المقال، ونستخدم العقدة TileMap لرسم الخريطة باستخدام الرقع tiles، بينما نستخدم العقدة Player لتمثيل شخصية اللاعب.

تخطيط واجهة المستخدم

الخطوة اﻷولى في مثالنا هي بناء تخطيط للخريطة المصغرة. وللتعامل مع أية عناصر واجهة مستخدم تضمها اللعبة، لا بد من إعادة تحجيمها بشكل سلس ودمجها جيدًا في تخطيط يتلائم مع الحاوية. لهذا سنضيف أولًا العقدة MarginContainer  التي تساعدنا على وضع حواشي داخلية padding للعناصر داخل الحاوية، ونضبط الخاصية Constants في القسم Theme Overrides على 5. يضم عنصر التحكم هذا بقية العقد ويضمن أن العناصر داخل الحاوية ستبقى بعيدًا عن حواف الحاوية نفسها بشكل متناسق. سنسمي هذه العقدة MiniMap ثم نحفظ المشهد.

نضيف تاليًا العقدة NinePatchRect وهي مشابهة للعقدة TextureRect لكنها تتعامل مع تغيير اﻷبعاد بطريقة مختلفة، إذ لا تمدد الزوايا أو الحواف مما يحافظ على مظهر الصورة بشكل أفضل عند تغيير الأبعاد. نفلت الصورة panel_woodDetail_blank.png من مجلد assets في لعبتنا في الخاصية Texture، وهي صورة أبعادها 128x128 بكسل، لكن إن غيرنا أبعاد العقدة MarginContainer ستصبح الصورة ممددة وسيئة المظهر.

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

بإمكاننا تعريف هذه الخاصيات رسوميًا في اللوحة TextureRegion ، لكن من اﻷسهل أحيانًا إدخال القيم مباشرة. نضبط الخاصيات اﻷربعة الموجودة في Patch Margin على 64 ونغيّر اسم العقدة إلى Frame. لنلاحظ اﻵن ما يحدث عند تغيير اﻷبعاد:

علينا تاليًا ملء الجزء الداخلي من اﻹطار بنمط يمثل شبكة وذلك باستخدام الصورة pattern_blueprintPaper.png:

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

لهذا، نضيف عقدة جديدة MarginContainer كابن للعقدة MiniMap وشقيق للعقدة Frame ثم نضبط خاصيات  Constants  في القسم Theme Overrides على القيمة 20. نضيف بعد ذلك عقدة TectureRect كابن للعقدة السابقة ثم نضبط قيمة الخاصية Texure على نفس الصورة السابقة، والخاصية Strech Mode على Tile ونسمي العقدة أخيرًا Grid. لنجرّب تغيير أبعاد العقدة اﻷصلية لرؤية تأثير ما فعلناه حتى اللحظة:

لنبق أبعاد الخريطة المصغرة حاليًا على 200x200 بكسل، وبإمكاننا التأكد من هذه اﻷبعاد من الخاصية Size في القسم Layout. ستبدو اﻵن شجرة المشهد كالتالي:

نقاط علام الخريطة

سنضيف للخريطة نقاط العلام Marker ترمز  كل منها لأشياء معينة في اللعبة، نضيف أولًا عقدة من النوع Sprite2D كابن للعقدة Grid ونسميها PlayerMarker لتمثل اللاعب ونمنحها الصورة minimapIcon_arrowA.png، وننتبه إلى أن قيمة الخاصية Position في القسم Transform هي (0,0)مما يجعلها في الزاوية العليا اليسارية من العقدة Grid.

إن كانت أبعاد الشبكة (150,150)سيكون مركزها عند (75,75)، لنضبط إذًا موقع PlayerMarker على تلك القيمة، ننوه أن هذه العملية ستكون آلية لاحقًا.

نضيف اﻵن عقدتين جديدتين من نوع Sprite2D ونسميهما AlertMarker و MobMarker ونمنحهما الصورتين minimapIcon_jewelRed.png التي تمثل جوهرة حمراء و minimapIcon_exclamationYellow.png التي تمثل علامة تعجب صفراء كما يلي:

تمثل العقدتان السابقتان نوعين جديدن من نقاط العلام في عالم اللعبة. ننقر على الزر Toggle Visibility المجاور لكل منهما كي لا تظهر العقدة افتراضيًا.

كتابة سكريبت نقاط العلام

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

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

نضيف كل كائن نريده أن يظهر على الخريطة ضمن المجموعة minimap_objects ثم نضبط المتغير minimap_icon في سكريبت كل كائن على القيمة المناسبة من المجموعة:

# mob في سكريبت:
var minimap_icon = "mob"

# crate في سكريبت:
var minimap_icon = "alert"

بإمكاننا اﻵن إضافة سكريبت إلى العقدة MiniMap.

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

extends MarginContainer
class_name Minimap

@export var player: Player
@export var zoom = 1.5

@onready var grid = $MarginContainer/Grid
@onready var player_marker = $MarginContainer/Grid/PlayerMarker
@onready var mob_marker = $MarginContainer/Grid/MobMarker
@onready var alert_marker = $MarginContainer/Grid/AlertMarker

نستخدم تاليًا قاموسًا ونسميه minimap-icon  لربط الأنواع بالرموز، حيث نظهر الكائن  mob  الذي يمثل العدو كنقطة حمراء على الخريطة، والكائن  alert  الذي يمثل تحذير كعلامة صفراء:

@onready var icons = {
    "mob": mob_marker,
    "alert": alert_marker
}

نحتاج أيضُا إلى متغير يخزّن نسبة حجم الخريطة إلى حجم عالم اللعبة. كما نستفيد من قاموس آخر لإسناد نقاط العلام الفعالة إلى كل كائن. وسيكون المفتاح Key في القاموس هو الكائن نفسه أي نسخة عن Mob أو Crate والقيمة value هي نقطة العلام المسندة إليه:

var grid_scale
var markers = {}

نضبط موقع نقطة علام اللاعب في منتصف الخريطة ضمن الدالة ()ready_، ونحسب عامل المقياس.

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

func _ready():
    await get_tree().process_frame
    player_marker.position = grid.size / 2
    grid_scale = grid.size / (get_viewport_rect().size * zoom)

العقد الموجودة في الحاويات

نظرًا للطريقة التي تعامل فيها العقدة Container أبناءها وتغير حجمهم أو موقعهم، لن نحصل على القيمة الصحيحة لأبعاد اﻷبناء وقت تنفيذ الدالة ()ready_، لهذا علينا أن ننتظر حتى اﻹطار التالي لنحصل على أبعاد الشبكة.

ننشئ أيضًا نقطة علام لكل لكائن في اللعبة باستخدام المجموعة minimap_objects بمضاعفة العقدة المطابقة لنقطة العلام وربط العلامة بالكائن بالاستفادة من القاموس markers:

    var map_objects = get_tree().get_nodes_in_group("minimap_objects")
    for item in map_objects:
      var new_marker = icons[item.minimap_icon].duplicate()
      grid.add_child(new_marker)
      new_marker.show()
      markers[item] = new_marker

بعد أن أنشأنا نقاط العلام وربطناها بالكائنات الموجودة، نستطيع اﻵن تحديث مواقعها ضمن الدالة ()process_. وإن لم يُعين أي لاعب player بعد، لا نفعل شيئًا:

func _process(delta):
    if !player:
      return

وﻹن كان هناك لاعب، ندور أولًا نقطة علام اللاعب لتطابق جهة حركته. وطالما أن نقطة العلامة PlayerMarker تتجه إلى اﻷعلى وليس بالاتجاه اﻷفقي x، لا بد من إضافة 90 درجة:

player_marker.rotation = player.rotation + PI/2

نبحث اﻵن عن موقع كل كائن بالنسبة إلى اللاعب ونستخدمه في إيجاد موقع نقطة العلام، لنتذكر إزاحة الموقع بمقدار grid.size/2 لأن نقطة المرجع هي الزاوية العليا اليسارية:

for item in markers:
    var obj_pos = (item.position - player.position) * grid_scale + grid.size / 2
    markers[item].position = obj_pos

تبقى المشكلة إمكانية ظهور بعض نقاط العلام خارج الشبكة كما في الصورة التالية:

وﻹصلاح اﻷمر، نحصر موقع نقطة العلامة بمربع الشبكة باستخدام الدالة clamp بعد حساب المتغير obj_pos وقبل تحديد موقع العلامة:

obj_pos = obj_pos.clamp(Vector2.ZERO, grid.size)

بإمكاننا أيضًا معالجة العلامات التي تقع خارج الشاشة وخارج مربع الشبكة. باختيار أحد الحلين التاليين وقبل استخدام ()clamp. 

الخيار اﻷول هو كالتالي:

if grid.get_rect().has_point(obj_pos + grid.position):
    markers[item].show()
else:
    markers[item].hide()

الخيار الثاني هو تغيير مظهر العلامات، بأن نجعلها أصغر لتدل على أنها أبعد مسافة:

if grid.get_rect().has_point(obj_pos + grid.position):
    markers[item].scale = Vector2(1, 1)
else:
    markers[item].scale = Vector2(0.75, 0.75)

إزالة الكائنات

ستزدحم اللعبة وتتوقف إن قُتِل أي كائن Mob أو التُقط كائن Crate لأن نقاط العلام حينها لن تكون صحيحة. لهذا نحتاج إلى طريقة نتأكد من خلالها من إزالة نقاط العلام في حال إزالة الكائنات، وفيما يلي طريقة سريعة سنتبعها في هذا المقال:

نضيف signal removed إلى أي كائن وضعناه ضمن المجموعة minimap_object ثم نبث هذه الرسالة عندما يتدمر الكائن أو يُلتقط مع مرجع إلى الكائن نفسه كي تتعرف عليه الخريطة:

removed.emit(self)

نصل هذه اﻹشارات إلى الخريطة في الدالة ()ready_ للسكريبت الرئيسي:

func _ready():
    for object in get_tree().get_nodes_in_group("minimap_objects"):
      object.removed.connect(minimap._on_object_removed)

نضيف اﻵن دالة استقبال اﻹشارات إلى سكريبت الخريطة المصغرة لتحرير نقطة العلام وإزالة المرجع:

func _on_object_removed(object):
    if object in markers:
      markers[object].queue_free()
      markers.erase(object)

تكبير وتصغير الخريطة المصغرة

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

نضف بداية دالة تهيئة setter إلى الخاصية zoom:

@export var zoom = 1.5:
    set = set_zoom

func set_zoom(value):
    zoom = clamp(value, 0.5, 5)
    grid_scale = grid.size / (get_viewport_rect().size * zoom)

نصل في نافذة الفاحص اﻹشارة _gui_input بالعقدة MiniMap حتى نتمكن من معالجة أفعال تدوير عجلة الفأرة:

func _on_gui_input(event):
    if event is InputEventMouseButton and event.pressed:
      if event.button_index == MOUSE_BUTTON_WHEEL_UP:
        zoom += 0.1
      if event.button_index == MOUSE_BUTTON_WHEEL_DOWN:
        zoom -= 0.1

فيما يلي نتيجة الشيفرة:

الخاتمة

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

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

ترجمة -وبتصرف- للمقال: MinMap/Radar

اقرأ أيضًا

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

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

إعداد الجسم الصلب

لننشئ مشروع لعبة جديدة ثنائية الأبعاد في جودو ونعمل مع كائن يمثل الجسم الصلب بإضافة العقدتين Sprite2D و CollisionShape2D. بإمكاننا أيضًا إضافة العقدة PhysicsMaterial إن أردنا ضبط خاصيتي الارتداد Bounce والاحتكاك Friction. 

كما سنستخدم الخاصية freeze لإبعاد الجسم عن سيطرة محرّك الفيزياء عندما نسحبه. وطالما أننا نريد من الجسم الصلب أن يكون قابلًا لحركة، لا بد من ضبط قيمة الخاصية Freeze في القسم Mode على القيمة kinematic بدلًا من القيمة الافتراضية Static.

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

نضيف سكريبت برمجي للجسم الصلب ثم نصل الإشارة _input_event الخاصة به كما يلي.

extends RigidBody2D

signal clicked

var held = false

func _on_input_event(viewport, event, shape_idx):
    if event is InputEventMouseButton and event.button_index == MOUSE_BUTTON_LEFT:
        if event.pressed:
            print("clicked")
            clicked.emit(self)

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

func _physics_process(delta):
    if held:
        global_transform.origin = get_global_mouse_position()

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

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

func pickup():
    if held:
        return
    freeze = true
    held = true

func drop(impulse=Vector2.ZERO):
    if held:
        freeze = false
        apply_central_impulse(impulse)
        held = false

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

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

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

اشترك الآن

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

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

extends Node2D

var held_object = null

func _ready():
    for node in get_tree().get_nodes_in_group("pickable"):
        node.clicked.connect(_on_pickable_clicked)

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

func _on_pickable_clicked(object):
    if !held_object:
        object.pickup()
        held_object = object

عندما نحرر الفأرة خلال السحب بإمكاننا تنفيذ الخطوات المعاكسة.

func _unhandled_input(event):
    if event is InputEventMouseButton and event.button_index == MOUSE_BUTTON_LEFT:
        if held_object and !event.pressed:
            held_object.drop(Input.get_last_mouse_velocity())
            held_object = null

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

الخاتمة

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

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

يمكن تحميل المثال كاملًا من هذا الرابط لفهمه بصورة جيدة وتجربة التعديل عليه، أو تحميله مباشرة من هنا rigidbody_drag_drop-master.zip

ترجمة -وبتصرف- للمقال: RigidBody2D Drag and Drop

اقرأ أيضًا

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

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

مراحل بناء القائمة

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

بناء صندوق المستوى LevelBox

ستكون هيكلية العقدة اللازمة لبناء هذا الصندوق على النحو التالي:

LevelBox: PanelContainer
     Label
     MarginContainer
       TextureRect

استخدمنا العناصر التالية لتشكيل الصندوق:

• حاوية PanelContainer لتنظيم وعرض العناصر داخلها
• عقدة تسمية نصية Label لعرض رقم المستوى
• حاوية MarginContainer لإضافة هوامش حول المحتوى 
• عقدة LevelBox من نوع  TextureRect لعرض صورة قفل عندما يكون المستوى مغلق، ورقم عندما يكون مفتوح

نتأكد من ضبط الخاصية Layout  في القسم Custom Minimum Size للعقدة LevelBox  على القيمة (110,110) ويمكن اختيار أي حجم آخر مناسب لتخطيط القائمة.

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

@tool
extends PanelContainer  

signal level_selected  # إشارة تُطلق عند تحديد المستوى

@export var locked = true:  # يحدد إذا كان المستوى مغلقًا
    set = set_locked

@export var level_num = 1:  # رقم المستوى
    set = set_level

@onready var lock = $MarginContainer/Lock  # صورة القفل
@onready var label = $Label  #  رقم المستوى

# دالة لضبط حالة القفل وإظهارأو إخفاء العناصر
func set_locked(value):
    locked = value
    if not is_inside_tree():  # ننتظر حتى يكتمل تحميل العنصر داخل المشهد
      await ready
    lock.visible = value  # نعرض صورة القفل إذا كان المستوى مغلقًا
    label.visible = not value  # نظهر النص إذا كان المستوى غير مغلق

# دالة لضبط رقم المستوى وتحديث النص المعروض
func set_level(value):
    level_num = value
    if not is_inside_tree():  # ننتظر تحميل العنصر في المشهد
      await ready
    label.text = str(level_num)  # تحديث النص برقم المستوى

# دالة لمعالجة مدخلات المستخدم 
func _on_gui_input(event):
    if locked:  # إذا كان المستوى مغلقًا، نتجاهل النقر
      return
    if event is InputEventMouseButton and event.pressed:  # التحقق من النقر بزر الفأرة
      level_selected.emit(level_num)  # إطلاق الإشارة مع رقم المستوى
      print("Clicked level ", level_num)  # طباعة رسالة لاختبار النقر

نستخدم في شيفرتنا التوجيه tool@ حتى نتمكن من تغيير قيم الخاصيات عبر نافذة الفاحص inspector ونرى التأثير مباشرة دون الحاجة لتشغيل المشهد. لنجرب اﻵن النقر على الخاصية Locked ونتحقق من رؤية صورة القفل تظهر وتختفي. وطالما أن اللعبة لا تضم مستويات فعلية لتحميلها، ستساعدنا الدالة ()print على اختبار التقاط حدث النقر.

بناء الشبكة

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

ننتقل للقسم Theme Overrides ثم Seperation ونضبط قيمتي الخاصيتين V Seperation و  H Seperation على 10، ونحفظ المشهد باسم LevelGrid. سنستخدم في القائمة عدة نسخ عن عقدة الشبكة لعرض العدد المطلوب من المستويات.

شاشة القائمة

بإمكاننا اﻵن تجميع القائمة النهائية. توضح الصورة التالية التخطيط اﻷولي الذي سننفذه:

ننشئ المشهد انطلاقًا من العقد التالية:

LevelMenu: MarginContainer
     VBoxContainer
      Title: Label
       HBoxContainer
        BackButton: TextureButton
        ClipControl: Control
        NextButton: TextureButton

نضبط خواص العقد كالتالي:

• العقدة LevelMenu: نضبط Theme Overrides ثم Constants ثم Margins على القيمة 20
• العقدة VBoxContainer:نضبط Theme Overrides ثم Constants ثم Margins على القيمة 50
• العقدة Title: ننسقها بالطريقة التي نريدها
• نضبط العقدتين BackButton و NextButton كالتالي:
  • Ignore Texture Size: On لضبط حجم الزر وفقًا لحجمه داخل واجهة المستخدم
  • Stretch Mode: Keep Centered للحفاظ على محاذاة المحتوى داخل الأزرار
  • Layout/Container: On  ليعمل الزر كحاوية
  • Sizing/Horizontal/Expand: On لتوسيع الأزرار أفقيًا داخل المساحة المتاحة
• نضبط العقدة ClipControl كما يلي:
  • Layout/Clip Contents:On لاقتصاص أي محتوى يتجاوز حجم الإطار
  • Layout>Custom Minimum Size:(710, 350) لتحديد الحجم الأدنى للعقدة  

بعد ذلك نضع الشبكة ضمن العقدة ClipControl، بما أننا  تمكين الخاصية Clip Content سيقتص محتوى العقدة إن كانت أكبر من عنصر التحكم. وسنتمكن اﻵن من بناء شبكة من صناديق المستويات قابلة للتمرير، لهذا نضيف عقدة من النوع HBoxContainer تُدعى GridBox إلى ClipControl إضافة إلى ثلاث نسخ من العقدة LevrlGrid أو أكثر إن أردنا. ونتأكد من ضبط الخاصية Theme Overrides ثم Constants ثم Separation على القيمة 0.

ينبغي أن يبدو تخطيط المشهد اﻵن كما في الشكل التالي تقريبًا، مع العلم أننا عطلنا الخاصية Clip content لنعرض ما يحدث بشكل أوضح:

الشبكات الثلاثة موجودة ضمن Clip Content لكن لا يمكن للمتحكم ClipControl عرض سوى شبكة واحدة كل مرة. لهذا ولكي ننتقل إلى الشبكتين الباقيتين عن طريق التمرير، لا بد من إزاحة GridBox مقدار 710 بكسل يمينًا أو يسارًا

110 (width of each LevelBox)
    * 6 (grid columns)
    + 10 (grid spacing) * 5
    == 710

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

نضيف السكربت التالي إلى العقدة LevelMenu لوصل إشارتي pressed الخاصتين بكل زر:

extends MarginContainer

var num_grids = 1
var current_grid = 1
var grid_width = 710

@onready var gridbox = $VBoxContainer/HBoxContainer/ClipControl/GridBox

func _ready():

    # ترقيم جميع صناديق المستويات وإلغاء قفلها   
    # يمكن استبداله بما يتناسب مع نظام المستويات في اللعبة
    # يمكن أيضًا ربط إشارات "level_selected" هنا 
    num_grids = gridbox.get_child_count()
    for grid in gridbox.get_children():
      for box in grid.get_children():
        var num = box.get_position_in_parent() + 1 + 18 * grid.get_position_in_parent()
        box.level_num = num
        box.locked = false

func _on_BackButton_pressed():
    if current_grid > 1:
      current_grid -= 1
      gridbox.rect_position.x += grid_width

func _on_NextButton_pressed():
    if current_grid < num_grids:
      current_grid += 1
      gridbox.rect_position.x -= grid_width

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

الخاتمة

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

ترجمة -وبتصرف- للمقال: Level Select Menu

اقرأ أيضًا

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

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

الإطباق على هدف

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

لا بد من تطبيق عزم دوراني torque حتى نتمكن من تدوير الجسم، وبمجرد أن يبدأ الجسم بالدوران، علينا تقليل عزم الدوران تدريجيًا مع اقتراب hg[sl من الوجهة النهائية بحيث لا يفرط الجسم في الدوران ويتوقف في الاتجاه الصحيح بدقة. تُعدُّ هذه حالة مثالية لتطبيق الجداء النقطي المعروف أيضًا باسم الداخلي dot product فهو مناسب جدًا لتحديد الاتجاه المطلوب للوصول للوجهة النهائية.

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

ناتج الجداء النقطي موجب

هذا يعني أن الزاوية بين اتجاه الجسم الحالي واتجاه الوجهة أقل من 90 درجة، أي أن الجسم يحتاج إلى تعديل بسيط، أو لا يحتاج تعديل للوصول للوجهة لأنه قريب من الاتجاه الصحيح بالفعل.

ناتج الجداء النقطي صفر

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

ناتج الجداء النقطي سالب

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

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

لنلقِ نظرة على الكود التالي المكتوب بلغة GDScript لتدوير جسم ثنائي الأبعاد 2D باتجاه هدف معين بتطبيق عزم دوراني torque:

extends RigidBody2D

var angular_force = 50000
var target = position + Vector2.RIGHT

func _physics_process(delta):
    var dir = transform.y.dot(position.direction_to(target))
    constant_torque = dir * angular_force

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

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

تفادي مشكلات تدوير الجسم الصلب RigidBody2D

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

تحرك جسم نحو الهدف

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

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

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

لنلقِ نظرة على الكود التالي الذي يجعل الجسم الصلب RigidBody2D  يتحرك نحو هدف معين بطريقة سلسة:

# تحريك الجسم بسلاسة نحو الهدف
extends RigidBody2D

var linear_force = 5
var target = position


func _physics_process(delta):
    var dist = position.distance_to(target)
    constant_force = dir * linear_force * dist

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

أهمية الخاصية linear_damp

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

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

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

الخاتمة

تعلمنا في مقال اليوم كيفية تحريك وتدوير جسم صلب RigidBody2D  في جودو بشكل سلس نحو هدف معين باستخدام القوى والعزم الدوراني، كما شرحنا كيفية التحكم في التباطؤ باستخدام الخاصية linear_damp لضمان حركة طبيعية للجسم.

ترجمة -وبتصرف- للمقالين: RigidBody2D: Look at Target و RigidBody2D: Move to Target

اقرأ أيضًا

• تعرف على واجهة محرك الألعاب جودو
• استخدام الإشارات Signals في جودو Godot
• تعرف على أشهر محركات الألعاب Game Engines
• التعامل مع إجراءات دخل الفأرة في جودو

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

ثلاث طرق لبناء شريط صحة يضم قلوبًا

من الطرق الشائعة في إظهار صحة اللاعب عرض سلسلة من اﻷيقونات -غالبًا بشكل قلوب- يختفي بعضها عندما يتعرض اللاعب إلى ضرر. وسنناقش ثلاث طرق لعرض الأيقونات أطلقنا عليها تسميات بسيطة simple وفارغة empty وجزئية partial.

تعرض الصورة السابقة ثلاث حالات ممكنة لعرض شريط الصحة:

• الطريقة البسيطة: تعرض القلوب ممتلئة بالكامل
• الطريقة الفارغة: تعرض قلوب فارغة وأخرى ممتلئة
• الطريقة الجزئية: تعرض القلوب نصف ممتلئة

إعداد شريط اﻷيقونات

نستخدم في هذا المثال صور قلوب أبعادها 53x45 حصلنا عليها من موقع Kenney.nl: Platformer Art Deluxe. ومن المفترض أن يكون وضع الشريط ضمن شاشة عرض معلومات المستخدم HUD أو واجهة المستخدم UI سهلًا، لذا من المنطقي أن نبني هذا الشريط ضمن مشهد مستقل.

سنبدأ بعقدة من النوع Node2D كي نُبقى اﻷمور على نفس السوية، ونضبط قيمة الخاصية Sepration ضمن Constants في القسم  Theme Overrides من الفاحص على القيمة 5.

نضيف بعد ذلك عقدة ابن من النوع TextureRect ثم نسحب أيقونة القلب إلى الخاصية Texture ونضبط قيمة Strech Mode على Keep. نعيد تسمية العقدة لتكون 1 ثم باستخدام مفتاحي Ctrl+D ننسخ هذه العقدة بعدد القلوب التي نريد عرضها في الشريط 5 مثلًا. ستبدو لوحة العقد في محرك جودو كالتالي:

إضافة السكريبت

يغطي السكريبت التالي حالات الشريط الثلاث التي ذكرناها، حيث سنحمّل في البداية الخامات وهي هنا اﻷيقونات التي نحتاجها ونعرف اﻷشرطة الثلاث، وتجدر الملاحظة بأن الكود سيغطي جميع حالات الشريط الثلاثة، وقد نحتاج لاستخدام حالة واحدة فقط في اللعبة، عندها نزيل الكود المتعلق بالحالات الأخرى كما يلي:

extends HBoxContainer

enum modes {SIMPLE, EMPTY, PARTIAL}

var heart_full = preload("res://assets/hud_heartFull.png")
var heart_empty = preload("res://assets/hud_heartEmpty.png")
var heart_half = preload("res://assets/hud_heartHalf.png")

@export var mode : modes

func update_health(value):
    match mode:
      MODES.simple:
        update_simple(value)
      MODES.empty:
        update_empty(value)
      MODES.partial:
        update_partial(value)

يؤدي استدعاء الدالة ()update_health العائدة إلى الشريط عرض القيمة الممرة إليه وفقًا للنمط المختار.

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

نتنقل في الدالة ()update_simple بين أشرطة الأيقونات ونضبط ظهور كل عقدة TextureRect:

func update_simple(value):
    for i in get_child_count():
      get_child(i).visible = value > i

واﻷمر مشابه في الدالة ()update_empty ما عدا أننا نغير اﻷيقونة إلى اﻷيقونة الفارغة بدلًا من إخفائها:

func update_empty(value):
    for i in get_child_count():
      if value > i:
        get_child(i).texture = heart_full
      else:
        get_child(i).texture = heart_empty

أما في الحالة اﻷخيرة، فلدينا أيقونة ثالثة وضعف القيم الممكنة فمن خلال إنقاص القيمة بمقدار 1 مثلًا يعطي نصف قلب وإنقاص 1 مرة أخرى تعطي قلبًا فارغًا:

func update_partial(value):
    for i in get_child_count():
      if value > i * 2 + 1:
        get_child(i).texture = heart_full
      elif value > i * 2:
        get_child(i).texture = heart_half
      else:
        get_child(i).texture = heart_empty

توضح الصورة أدناه مثالًا عن عمل كل شريط:

إنشاء نصوص طافية فوق الشخصية

هناك طرق عدة لتحقيق النصوص الطافية floating text، منها استخدام خط كتابة نقطية bitmap font وبناء صورة لكل عدد انطلاقًا من اﻷرقام المكونة له، ومن ثم استخدام العقدة Sprite2D لعرض وتحريك النص الناتج.

لكن ما سنفعله في مقالنا هو استخدام العقدة Label واسمها FCT وبهذا سنمتلك مرونة في تغيير الخط إضافة إلى سهولة عرض اﻷعداد كنصوص أو عرض نصوص أخرى مثل "أخفق miss".

نضيف المورد الذي نريده في الخاصية Label Settings ونختار خطًا مناسبًا وقياسًا مناسبًا له، وقد استخدمنا في المثال الخط Xolonium.ttf والقياس 28 مع إطار خارجي أسود بعرض 4 بكسل.

نضيف اﻵن السكريبت التالي إلى العقدة Label:

extends Label

func show_value(value, travel, duration, spread, crit=false):

نستدعي عند توليد النصوص الطافية الدالة ()show_value التي تضبط قيم المعاملات التالية:

• value وهو العدد أو النص الذي نريد توليده
• travel وهو عقدة شعاع Vector2 التي تمثل اتجاه حركة النص أو العدد
• duration تحدد كم سيبقى النص على قيد الحياة
• spread يحدد أن الحركة ستكون عشوائية عبر هذا القوس
• crit يشير لأن الضرر كبير في حال كانت قيمته true

وهذا ما تفعله الدالة ()show_value:

    text = value
    var movement = travel.rotated(rand_range(-spread/2, spread/2))
    rect_pivot_offset = rect_size / 2

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

    $Tween.interpolate_property(self, "rect_position",
        rect_position, rect_position + movement,
        duration, Tween.TRANS_LINEAR, Tween.EASE_IN_OUT)
    $Tween.interpolate_property(self, "modulate:a",
        1.0, 0.0, duration,
        Tween.TRANS_LINEAR, Tween.EASE_IN_OUT)

نجري بعد ذلك استيفاء interpolation على قيمتي الخاصية بين لحظتين هما rect_position لتحريك العدد الطافي و modulate.a ﻹخفاء هذا النص بشكل تدريجي وسلس:

    if crit:
      modulate = Color(1, 0, 0)
      $Tween.interpolate_property(self, "rect_scale",
        rect_scale*2, rect_scale,
        0.4, Tween.TRANS_BACK, Tween.EASE_IN)

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

    $Tween.start()
    yield($Tween, "tween_all_completed")
    queue_free()

نبدأ بعد ذلك عملية بناء اﻹطارات البينية من خلال التعليمة Tween وننتظر حتى تنتهي ثم نزيل العنوان Label.

إدراة النصوص الطافية FCTManager

ننشئ اﻵن عقدة صغيرة تدير توليد النصوص وتحديد مكانها، وستُلحق بكيانات اللعبة التي نريد أن نضيف إليها تأثير النصوص الطافية. نسمي هذه العقدة من النوع Node2D بالاسم FCTManager ونضيف إليها السكريبت التالي:

extends Node2D

var FCT = preload("res://FCT.tscn")

export var travel = Vector2(0, -80)
export var duration = 2
export var spread = PI/2

func show_value(value, crit=false):
    var fct = FCT.instance()
    add_child(fct)
    fct.show_value(str(value), travel, duration, spread, crit)

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

$FCTManager.show_value(dmg, crit)

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

الخاتمة

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

ترجمة -وبتصرف- للمقالين: HeartContainers: 3 ways و Floating Combat Text

اقرأ أيضًا

• المقال السابق: عرض عداد تنازلي Countdown وقائمة دائرية Radial Menu في جودو
• استخدام الإشارات Signals في جودو Godot
• الاستماع لمدخلات اللاعب في جودو Godot
• تعرف على واجهة محرك الألعاب جودو

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

بناء أزرار العد التنازلي

قد نرغب في إضافة عدة أزرار تمنح اللاعب مهارات أو قدرات خاصة ability buttons مع توفير ميزة الانتظار لفترة معينة قبل تمكين اللاعب من النقر على كل زر منها واكتساب القدرة المطلوبة، يمكننا تحقيق ذلك من خلال ميزة العد التنازلي countdown، وفي حال احتجنا لأيقونات ورسومات مناسبة لاستخدامها مع هذه الأزرار فستجد كمًا كبيرًا من التصاميم المناسبة في موقع Game-icons.net وسنستخدم بعضها في مقالنا.

إعداد مشهد اللعبة

يضم المشهد الذي سنعمل عليه العقد nodes التالية:

لنوضح بإيجاز دور كل عقدة منها:

سنحدد الأيقونة الخاصة بكل زر من خلال الخاصية Textures  ثم Normal لزر القدرة  AbilityButton حيث يمكننا من هنا تحديد الأيقونة  الافتراضية للزر عندما لا يكون مضغوطًا، ثم نختار القيمة Full Rect في العقدة Sweep من القائمة Presets لتحديد تأثيرات التعبئة أو المسح التدريجي ليكون على كامل الزر. بعد ذلك، نضبط الخاصية FillMode للعقدة Counter بالقيمة clockwise.

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

نضبط عقدة المؤقت Timer على القيمة One Shot لجعلها تعمل مرة واحدة فقط، وفيما يخص العقدة Counter وهي حاوية تحتوي النص وتحاذيه، ينبغي ضبط تخطيطها على Bottom Wide وضبط الخاصيتين Margin Right و Margin Left للمسافات الجانبية على القيمة 5 وذلك ضمن القسم Theme Overrides ثم Constants.

بالنسبة للعقدة value سنضبط خاصية المحاذاة الأفقية Horizontal Alignment على القيمة Right، وخاصية اقتصاص النص Clip Text على القيمة on لتجنب تجاوز النص لحدود الحاوية. ونختار الخط المناسب من القسم Theme Overrides ثم Font ونضع قيمة 0.0 في الحقل النصي. وطالما أن اﻷيقونة التي نستخدمها سوداء، فمن الجيد ضبط قيمة خاصية حجم الحدود Theme Outline Size من القسم  Overrides ثم  Constants  بالقيمة 1 لجعل الأيقونة أكثر وضوحًا.

إضافة كود برمجي لزر العد التنازلي

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

extends TextureButton
class_name AbilityButton

@onready var time_label = $Counter/Value

@export var cooldown = 1.0


func _ready():
    time_label.hide()
    $Sweep.value = 0
    $Sweep.texture_progress = texture_normal
    $Timer.wait_time = cooldown
    set_process(false)

يبدأ السكريبت بتصدير المتغير cooldown الذي يحدد طول فترة الانتظار قبل تفعيل الزر، ومن ثم نضبط المؤقت Timer داخل التابع ()ready_ لاستخدام هذه القيمة.

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

أخيرًا، لنتأكد من أن العمليات الخاصة بالمتغير Sweep قد انتهت بشكل صحيح، سنتأكد إن كانت قيمة Sweep هي 0 ونضبط قيمة معالجة العقدة processing على false. وبما أننا ننفذ التحريك ضمن التابع ()process_ لذا لا نحتاج لتنفيذ هذا التابع إن لم نكن في فترة التهدئة CoolDown.

func _process(delta):
    time_label.text = "%3.1f" % $Timer.time_left
    $Sweep.value = int(($Timer.time_left / cooldown) * 100)

نلاحظ في الكود السابق أننا استخدمنا الخاصية time_left للمؤقت Timer لضبط الخاصية text للعقدة labe والخاصية value للعقدة Sweep.

func _on_AbilityButton_pressed():
    disabled = true
    set_process(true)
    $Timer.start()
    time_label.show()

عندما يُنقر الزر سيبدأ كل شيء:

func _on_Timer_timeout():
    print("ability ready")
    $Sweep.value = 0
    disabled = false
    time_label.hide()
    set_process(false)

كما يعود كل شيء إلى وضعه عندما ينتهي المؤقت من العد.

بإمكاننا وضع عدة أزرار ضمن عقدة حاوية من النوع HBoxContainer وسنحصل على شريط أفقي من أزرار القدرة كما يلي:

بناء قائمة دائرية منبثقة

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

نحتاج لاستخدام عقدة TextureButton من النوع RadialMenuButton لتكون عقدة جذر وهي تمثل الزر الرئيسي الذي سننقره لفتح أو إغلاق القائمة الدائرية، وعقدة Buttons من النوع control كحاوية تتضمن كافة الأزرار التي نريد عرضها في القائمة الدائرية، ونتأكد من ضبط قيمة الخاصية Mouse ثم Filter على القيمة Ignore كي لا تعترض أفعال النقر على الفأرة. كما سنستخدم تسعة أزرار لعرض القدرات الخاصة من نوع العداد التنازلي Cooldown.

الخطوة التالية هي إضافة السكريبت التالي للعقدة الجذر:

extends TextureButton
class_name RadialMenuButton

export var radius = 120
export var speed = 0.25

var num
var active = false

يمثل المتغير radius حجم القائمة وهو قطر الدائرة التي سنوزع عليها اﻷزرار، بينما يُستخدم المتغير speed في تحديد سرعة تحريك أزرار القائمة فالقيم اﻷصغر هي اﻷسرع. ويحدد المتغير num عدد اﻷزرار في القائمة، بينما يمثل المتغير active راية flag تدل على إغلاق أو فتح القائمة.

func _ready():
    $Buttons.hide()
    num = $Buttons.get_child_count()
    for b in $Buttons.get_children():
      b.position = position

نبدأ بإعداد منطق القائمة في التابع ()ready_ وذلك بإخفاء جميع أزرار القائمة افتراضيًا وضبط المسافة بينها وبين الزر الرئيسي للقائمة. ثم نربط اﻹشارة pressed للزر الرئيسي:

func _on_pressed():
    disabled = true
    if active:
      hide_menu()
    else:
      show_menu()

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

func _on_tween_finished():
    disabled = false
    if not active:
      $Buttons.hide()

عندما ينتهي تحريك اﻹطارات البينية، ننقل حالة الزر إلى تمكين مجددًا. 

لنلقِ نظرة على الدالة ()show_menu:

func show_menu():
    $Buttons.show()
    var spacing = TAU / num
    active = true
    var tw = create_tween().set_parallel()
    tw.finished.connect(_on_tween_finished)
    for b in $Buttons.get_children():
      #لوضع الزر اﻷول في اﻷعلى PI/2 اطرح 
      var a = spacing * b.get_position_in_parent() - PI / 2
      var dest = Vector2(radius, 0).rotated(a)
      tw.tween_property(b, "position", dest, speed).from(Vector2.ZERO).set_trans(Tween.TRANS_BACK).set_ease(Tween.EASE_OUT)
      tw.tween_property(b, "scale", Vector2.ONE, speed).from(Vector2(0.5, 0.5)).set_trans(Tween.TRANS_LINEAR)

نحسب في هذه الدالة المسافة spacing أو بالأصح الزاوية التي نريدها بين كل عنصرين على القائمة، ومن ثم نتنقل بين اﻷزرار ونحدد وجهة كل زر dest وفقًا للزاوية المحسوبة وقيمة نصف القطر radius. ونولد لكل زر خاصيتين هما position و scale لإعطاء اﻷثر المرغوب عند توليد إطارات التحريك tween أثناء تحرك الزر. وتنفذ الدالة ()hide_menu العكس تمامًا:

func hide_menu():
    active = false
    var tw = create_tween().set_parallel()
    tw.finished.connect(_on_tween_finished)
    for b in $Buttons.get_children():
      tw.tween_property(b, "position", Vector2.ZERO, speed).set_trans(Tween.TRANS_BACK).set_ease(Tween.EASE_IN)
      tw.tween_property(b, "scale", Vector2(0.5, 0.5), speed).set_trans(Tween.TRANS_LINEAR)

ستبدو القائمة كالتالي:

الخاتمة

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

ترجمة -وبتصرف- للمقالين: CoolDown Button و Radial Popup Menu

اقرأ أيضًا

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

نتحدث في هذا المقال عن طرق التقاط مدخلات الفأرة في جودو، وذلك من خلال العمل مع الصنف الأساسي InputEventMouse الذي يتضمن الخاصيتين position و global_position ويرث من هذا الصنف كل من الصنفين InputEventMouseButton و InputEventMouseMotion.

ملاحظة: بإمكاننا تعيين أحداث النقر على أزرار الفأرة من خلال الصنف InputMap وهو صنف متفرد singleton وبالتالي سنتمكن من استخدامها مع الدالة ()is_action_pressed.

استخدام الصنف InputEventMouseButton

يضم الصنف GlobalScope.ButtonList@ قائمة بكل ثوابت اﻷزرار الممكنة *_BUTTON التي قد نحددها في الخاصية button_index. ولنتذكر أن عجلة التمرير في الفأرة scrollwheel تُعد زرًا -أو زرين إن أردنا توخي الدقة- لأن الحدثين BUTTON_WHEEL_UP و BUTTON_WHEEL_DOWN منفصلان.

تلميح: يولد النقر على عجلة تمرير الفأرة الحدث pressed فقط، ولا يوجد حدث لتحرير الزر كما في اﻷزرار الأخرى.

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

func _unhandled_input(event):
    if event is InputEventMouseButton:
      if event.button_index == BUTTON_LEFT:
        if event.pressed:
          print("Left button was clicked at ", event.position)
        else:
          print("Left button was released")
      if event.button_index == BUTTON_WHEEL_DOWN:
        print("Wheel down")

استخدام الصنف InputEventMouseMotion

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

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

# حساسية الفأرة التي تتحكم في سرعة التدوير عند تحريك الفأرة
var mouse_sensitivity = 0.002

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

الاحتفاظ بمؤشر الفأرة ضمن نافذة اللعبة

بإمكاننا إخفاء مؤشر الفأرة ومنعها من مغادرة نافذة اللعبة، وهذا سلوك شائع في اﻷلعاب ثلاثية الأبعاد وحتى بعض اﻷلعاب ثنائية البعد. وللفأرة أربعة أنماط يمكنك اختيار أي منها باستخدام Input.mouse_mode:

• MOUSE_MODE_VISIBLE: المؤشر مرئي ويمكن تحريكه بحرية داخل وخارج نافذة اللعبة
• MOUSE_MODE_HIDDEN:المؤشر مخفي ويمكن له مغادرة نافذة اللعبة
• MOUSE_MODE_CAPTURED:المؤشر مخفي ولا يمكن له مغادرة نافذة اللعبة
• MOUSE_MODE_CONFINED:مؤشر الفأرة مرئي ولا يمكن له مغادرة نافذة اللعبة

الخيار الثالث Captured هو الخيار اﻷكثر شيوعًا، ويمكننا أيضًا ضبط حالة مؤشر الفأرة أثناء التنفيذ:

func _ready():
    Input.mouse_mode = Input.MOUSE_MODE_CAPTURED

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

func _input(event):
    if event.is_action_pressed("ui_cancel"):
      Input.mouse_mode = Input.MOUSE_MODE_VISIBLE

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

if Input.mouse_mode == Input.MOUSE_MODE_CAPTURED:

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

    if event.is_action_pressed("click"):
      if Input.mouse_mode == Input.MOUSE_MODE_VISIBLE:
        Input.mouse_mode = Input.MOUSE_MODE_CAPTURED

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

get_tree().set_input_as_handled()

سحب وتحديد عدة عناصر باستخدام الفأرة

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

إعداد عناصر اللعب

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

إعداد عالم اللعبة

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

extends Node2D

var dragging = false # هل نسحب الفأرة حاليًا؟
var selected = [] # مصفوفة العناصر المسحوبة
var drag_start = Vector2.ZERO # موقع بداية السحب
var select_rect = RectangleShape2D.new() # شكل التصادم لصندوق السحب

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

رسم الصندوق

نستخدم زر الفأرة اﻷيسر في هذه الطريقة، إذ تبدأ عملية النقر برسم مربع السحب وتنهي عملية تحرير زر الفأرة الرسم، وبهذا يُرسم الصندوق أثناء سحب الفأرة:

func _unhandled_input(event):
    if event is InputEventMouseButton and event.button_index == MOUSE_BUTTON_LEFT:
      if event.pressed:
        # إن نُقر زر الفأرة ولم نختر شيء نبدأ عملية السحب
        if selected.size() == 0:
          dragging = true
          drag_start = event.position
      # إن حُرر زر الفأرة ونحن في حالة سحب نوقف السحب
      elif dragging:
        dragging = false
        queue_redraw()
    if event is InputEventMouseMotion and dragging:
      queue_redraw()

func _draw():
    if dragging:
      draw_rect(Rect2(drag_start, get_global_mouse_position() - drag_start),
          Color.YELLOW, false, 2.0)

اختيار العناصر

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

نستخدم التابع ()PhysicsDirectSpaceState2D.intersect_shape ﻹيجاد العناصر، ويتطلب التابع رسم شكل مستطيل في حالتنا وإجراء تحويل transform للموقع:

elif dragging:
    dragging = false
    queue_redraw()
    var drag_end = event.position
    select_rect.extents = abs(drag_end - drag_start) / 2

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

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

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

    # مساحة عالم اللعبة
    var space = get_world_2d().direct_space_state
    # استعلام بحث عن التصادم
    var query = PhysicsShapeQueryParameters2D.new()
    # تحديد الشكل الذي سنبحث عنه
    query.shape = select_rect
    # 2 تحديد العناصر في طبقة التصادم
    query.collision_mask = 2 
    # ضبط موقع الشكل
    query.transform = Transform2D(0, (drag_end + drag_start) / 2)
    # البحث عن التصادمات
    selected = space.intersect_shape(query)

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

ستكون النتيجة عند استدعاء التابع ()intersect_shape مصفوفة تتضمن معلومات عن الأجسام المتصادمة مع الشكل المستطيل، وتبدو كالتالي:

[{ "rid": RID(4093103833089), "collider_id": 32145147326, "collider": Unit2:<CharacterBody2D#32145147326>, "shape": 0 },
{ "rid": RID(4123168604162), "collider_id": 32229033411, "collider": Unit3:<CharacterBody2D#32229033411>, "shape": 0 }]

يدل كل متصادم collider في هذه المصفوفة إلى عنصر، لهذا يمكن استخدامه لتمييز العناصر التي اختيرت وتفعيل طار ملون يحيط بهذه العناصر:

    for item in selected:
      item.collider.selected = true

إرسال اﻷوامر إلى العناصر

بإمكاننا اﻵن إرسال أمر التحرك للعناصر لتتجه نحو مكان ما على الشاشة:

func _unhandled_input(event):
    if event is InputEventMouseButton and event.button_index == MOUSE_BUTTON_LEFT:
      if event.pressed:
        # إن نُقر زر الفأرة ولم نختر شيء نبدأ عملية السحب
        if selected.size() == 0:
          dragging = true
          drag_start = event.position
        # وإلا ستخبر النقرة جميع العناصر المختارة بالتحرك
        else:
          for item in selected:
            item.collider.target = event.position
            item.collider.selected = false
          selected = []

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

الخاتمة

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

ترجمة -وبتصرف- للمقالات: Mouse Input و Capturing the mouse و Mouse:Drag-Select multiple units

اقرأ أيضًا

• المقال السابق: العمل مع إجراءات الدخل Inputs Actions في جودو
• حفظ واسترجاع البيانات المحلية بين جلسات اللعب
• تحريك اللاعب برمجيًا في لعبة ثلاثية الأبعاد باستخدام محرك جودو
• تحريك الشخصية في لعبة 3D باستخدام محرر التحريك في جودو

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

لنفترض أن لدينا شخصية تتحرك في لعبتنا من اﻷعلى إلى اﻷسفل وأردنا كتابة شيفرة باستخدام العقدة InputActionKey التي تتيح لنا بالتحكم بالشخصية عبر مفاتيح اﻷسهم في لوحة المفاتيح، لكن سنجد أن الكثير من اللاعبين يفضلون استخادم المفاتيح W و A و S و D للتحكم بالشخصية، قد نحاول العودة إلى اللعبة وإضافة مفاتيح إضافية لكن النتيجة ستكون شيفرة مضاعفة وزائدة.

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

إنشاء المدخلات

بإمكاننا تعريف إجراءات دخل وتعيينها من داخل محرر جودو من خلال الانتقال إلى المشروع Project ثم إعدادات المشروع Project Settings ثم الانتقال لتبويب خريطة اﻹدخال Input Map.

سنجد عند النقر على هذا التبويب بعض إجراءات الدخل المهيأة افتراضيًا تُعرف جميعها بالاسم *_ui كي نعلم بوجود إجراءات إدخال افتراضية.

ملاحظة: نحتاج لتفعيل مفتاح التبديل أظهر الإجراءات المدمجة Show default Actions من أجل عرض إجراءات الدخل.

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

سننشئ إجراءً جديدًا يُدعى shoot بكتابة اسم اﻹجراء ضمن الحقل إضافة إجراء جديد Add New Action ثم ننقر على زر أضف Add أو الضغط على مفتاح Enter، وسنرى أن الإجراء أضيف إلى القائمة الموجودة.

سنتمكن اﻵن من تعيين مدخلات لهذا اﻹجراء بالنقر على الزر + إلى اليمين. قد تكون المدخلات من لوحة المفاتيح أو أزرار الفأرة أو عصا التحكم. وقد اخترنا في حالتنا لوحة المفاتيح Key ثم نقرنا ضمن حقل الاستماع إلى المدخلات listen to inputs ونقرنا بعدها على مفتاح المسافة Spacebar لتعيينه كمفتاح لحدث الدخل، ثم نقرنا على زر حسنًا OK للموافقة على الإضافة كما في الصورة التالية:

بنفس الطريقة سندخل إجراء آخر ونختار أزرار الفأرة Mouse Button ونتأكد من وجودنا ضمن حقل الاستماع إلى المدخلات listen to inputs ثم ننقر زر الفأرة اﻷيسر لتعيينه.

استخدام إجراءات الدخل

بإمكاننا التحقق من اﻹجراء باستدعاء الصنف Input في كل إطار:

func _process(delta):
    if Input.is_action_pressed("shoot"):
      #ستُنقذ هذه الشيفرة في كل إطار طالما أن زر اﻹدخال مضغوط

ولهذا اﻷمر أهميته للإجراءات المستمرة التي نريد التحقق منها باستمرار مثل حركة اللاعب. لكن إن أردنا التقاط اﻹجراء لحظة وقوعه، نستطيع استخدام دالة رد النداء ()input_ أو ()unhandled_input_:

func _unhandled_input(event):
    if event.is_action_pressed("shoot"):
      # ستعمل الشيفرة في اﻹطار بمجرد الضغط على عنصر اﻹدخال

بإمكاننا استخدام دوال متعددة للتحقق من حالة اﻹدخال:

• is_action_pressed: تعيد القيمة true إن كانت حالة اﻹجراء حاليًا pressed
• is_action_released: تعيد القيمة true إن لم تكن حالة اﻹجراء حاليًا pressed.
• is_action_just_pressed و is_action_just_released: تعيدان true فقط ضمن إطار واحد عند وقوع الحدث. وهي مفيدة في اﻹجراءات غير المستمرة التي لابد فيها من تحرير الزر ثم ضغطه لتكرار اﻹجراء

إضافة إجراءات دخل إلى الشيفرة مباشرة

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

فيما يلي مثال يضيف إجراءً جديدًا باسم attack عند الضغط على مفتاح المسافة Spacebar:

func _ready():
    InputMap.add_action("attack")
    var ev = InputEventKey.new()
    ev.keycode = KEY_SPACE
    InputMap.action_add_event("attack", ev)

وإن أردنا أيضًا إضافة النقر على الزر اﻷيسر للفأرة إلى اﻹجراءات:

ev = InputEventMouseButton.new()
ev.button_index = MOUSE_BUTTON_LEFT
InputMap.action_add_event("attack", ev)

ملاحظة: سيرمي التابع ()InputMap.add_action خطأ إن كان اﻹجراء موجودًا مسبقًا، لهذا علينا التحقق من وجوده من خلال التابع ()InputMap.has_action قبل محاولة إضافته.

مثال تطبيقي

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

بدلًا من ذلك، نستطيع إضافة الشيفرة التالية إلى سكريبت اللاعب ونتأكد أن المدخلات اللازمة ستُضاف تلقائيًا:

var controls = {"walk_right": [KEY_RIGHT, KEY_D],
          "walk_left": [KEY_LEFT, KEY_A],
          "jump": [KEY_UP, KEY_W, KEY_SPACE]}

func _ready():
    add_inputs()

func add_inputs():
    var ev
    for action in controls:
      if not InputMap.has_action(action):
        InputMap.add_action(action)
      for key in controls[action]:
        ev = InputEventKey.new()
        ev.keycode = key
        InputMap.action_add_event(action, ev)

الخاتمة

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

ترجمة -وبتصرف- للمقالين: Input Actions و Adding Input Action in Code

اقرأ أيضًا

• المقال السابق: التحريك باستخدام SpriteSheet و AnimationTree StateMachine في جودو
• تعرف على مفهوم Delta في تطوير الألعاب
• تعرف على واجهة محرك الألعاب جودو
• تعرف على أشهر محركات الألعاب Game Engines

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

الحركات داخل جدول الشخصيات SpriteSheet

تُعد جداول الشخصيات Spritesheets من الطرق الشائعة لتوزيع الحركات للرسوم المتحركة ثنائية البعد، إذ توضع جميع إطارات الشخصية ضمن صورة واحدة. سنستخدم في مقالنا شخصية المغامر، ويمكن الحصول عليها وعلى غيرها من الشخصيات من متجر Elthen's Pixel Art Shop الذي يوفر ملحقات مفيدة يمكن استخدامها في تطوير الألعاب.

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

إعداد عقد التحريك

تستخدم تقنية التحريك العقدة Sprite2D لعرض الخامة، بعدها نحرّك الإطارات المتغيرة باستخدام العقدة AnimationPlayer. يمكن لهذا الترتيب أن يعمل على أي عقدة ثنائية البعد، لكننا سنستخدم في مثالنا العقدة CharacterBody2D.

لنضف العقد التالية إلى المشهد:

CharacterBody2D: Player
  Sprite2D
  CollisionShape2D
  AnimationPlayer

نسند جدول الشخصيات إلى الخاصية Texture للعقدة Sprite2D وسنلاحظ أن الجدول بكامله قد ظهر في نافذة العرض. ولكي نقطعه إلى إطارات فردية، نوسّع قسم التحريك Animation في نافذة الفاحص وناضبط قيم الخاصيتين Hframes و Vframes على 13 و 8 على الترتيب، وهما يمثلان عدد الإطارات الأفقية والعمودية في جدول الشخصيات:

لنجرّب تغيير الخاصية Frame لمراقبة تغيّر الصورة، فهي الخاصية التي سنعمل على تحريكها.

تحريك الشخصية

سنختار العقدة AnimationPlayer ثم ننقر الزر تحريك Animation يتبعه الزر جديد New ونسمي الحركة الجديدة idle. نضبط بعد ذلك مدة الحركة على 2 ثانية وننقر الزر Loop كي تتكرر الحركة باستمرار.

نجعل شريط التقدم Scrubber عند الزمن 0 ثم نختار العقدة Sprite2D. نضبط الخاصية Animation>Frame على 0 ثم ننقر على أيقونة المفتاح إلى جوار القيمة.

إن حاولنا الآن تشغيل الحركة فلن نرى شيئًا، لأن الإطار الأخير رقم 12 يبدو مشابهًا للإطار الأول رقم 0. مع ذلك لم نتمكن من رؤية الإطارات بينهما. لإصلاح الأمر نغير الخاصية Update Mode للمسار من القيمة الافتراضية Discrete إلى Continuous وسنجد هذا الزر في نهاية المسار من الجانب الأيمن.

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

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

استخدام المتحكم AnimationTreeStateMachine

لنتخيل أن لدينا كم كبير من الحركات، وأصبح من الصعب علينا التحكم عملية التنقل فيما بينها، وامتلأ السكريبت بعبارات if وكلما أردنا تصحيح شيء أخفق ما تبقى. لحل الأمر نستخدم العقدة AnimationTree لإنشاء مُتحكّم يسمح لنا بترتيب الحركات المختلفة للشخصية وإدارة عملية التنقل فيما بينها.

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

• سكون idle 
• ركض run 
• هجوم attack1 
• هجوم attack2 
• إصابة hurt 
• موت die

استخدام شجرة الرسوميات AnimationTree

نضيف العقدة AnimationTree إلى المشهد ثم نختار New AnimationNodeStateMachine من الخاصية TreeRoot.

تتحكم العقدة AnimationTree بالرسوميات التي تنشأ ضمن العقدة AnimationPlayer، ولكي نسمح لها بالوصول إلى الرسوميات الموجودة، ننقر على الخاصية Assign ضمن الخاصية Anim Player ثم نختار عقدة الحركة.

يمكننا الآن إعداد متحكم التنقل ضمن نافذة AnimationTree:

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

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

عندما تختار حركة، ستتبع الشجرة المسار الذي يصل العقدة الحالية إلى الوجهة. لكن في طريقة إعداد المثال السابق، لن نرى الهجوم الأول attack1 إن شغلنا الهجوم الثاني attack2. يعود السبب في ذلك إلى أن نمط التبديل switch mode للاتصال نوعه مباشر immediate. لهذا، ننقر على زر Move/select ثم ننقر على الاتصال بين attack1 و attack2 ثم نغير من نافذة الفاحص الخاصية Switch Mode إلى At End ونكرر ذلك على الاتصال بين attack2 و idle.

ما يحدث الآن أنه عند تشغيل في AnimationTree، أنه عند الانتقال من idle إلى attack2، يجري تشغيل الحركتين attack1 و attack2 على التتابع، ولكن بعد ذلك تتوقف الرسوم المتحركة عند attack2 بدلاً من العودة تلقائيًا إلى idle. لحل هذه المشكلة، نضبط الخاصية Advance>Mode  على Auto مما يسمح للشجرة بالعودة إلى الحركة idle بشكل تلقائي بعد تنفيذ حركتي الهجوم attack، ونلاحظ أن أيقونة الاتصال تتحول إلى اللون الأخضر لإظهار ذلك.

وهكذا ستُتنفذ الحركات على التتابع بمجرد تفعيلها.

استدعاء الحالات في الشيفرة

فيما يلي شجرة الحركات بأكملها:

لنهيئ الآن الشخصية كي تستخدم هذه الحركات:

extends CharacterBody2D

var state_machine
var run_speed = 80.0
var attacks = ["attack1", "attack2"]

@onready var state_machine = $AnimationTree["parameters/playback"]

تضم الخاصية state_machine مرجعًا إلى المتحكم بالحالة وهو AnimationNodeStateMachinePlayback، ولاستدعاء حركة محددة، نستخدم التابع travel الذي سيتّبع الاتصالات إلى الرسم المتحرك المحدد:

func hurt():
    state_machine.travel("hurt")

func die():
    state_machine.travel("die")
    set_physics_process(false)

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

func get_input():
    var current = state_machine.get_current_node()
    velocity = Input.get_vector("move_left", "move_right", "move_up", "move_down") * run_speed
    if Input.is_action_just_pressed("attack"):
      state_machine.travel(attacks.pick_random())
      return
    # اقلب الشخصية من اليمين إلى اليسار
    if velocity.x != 0:
      $Sprite2D.scale.x = sign(velocity.x)
    # اختر رسمًا متحركًا
    if velocity.length() > 0:
      state_machine.travel("run")
    else:
      state_machine.travel("idle")
    move_and_slide()

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

الخاتمة

تعرفنا في هذا المقال على طريقة استخدام SpriteSheet في جودو لتوليد حركات مختلفة للشخصية، كما تعرفنا على استخدام AnimationTree Animation Tree State Machine في إدارة التنقل بين الرسوميات المختلفة للشخصية. وبإمكانك من الاطلاع على المشروع بصيغته المكتملة لتنفيذه وفهمه بصورة أفضل.

ترجمة -وبتصرف- للمقالين: SpriteSheet ANimation و Using AnimationTreeStateMachine

اقرأ أيضًا

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

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

كيف نحفظ البيانات المحلية في جودو

يعتمد نظام إدخال وإخراج الملفات الخاص بمحرك الألعاب جودو Godot على كائن يسمى FileAccess ويمكنا فتحه من خلال استدعاء التابع open()‎ كما يلي:

var file = FileAccess.open("user://myfile.name", File.READ)

ملاحظة: يجب تخزين بيانات المستخدم فقط في المسار user://‎، ويمكننا استخدام المسار res://‎ عند التشغيل من المحرّر، ولكن يصبح هذا المسار للقراءة فقط عند تصدير مشروعنا.

الوسيط الثاني الموجود بعد مسار الملف هو راية الوضع Mode Flag ويمكن أن يكون لها أحد الخيارات التالية:

• FileAccess.READ: مفتوح للقراءة
• FileAccess.WRITE: مفتوح للكتابة، وينشئ الملف إن لم يكن موجودًا مسبقًا ويقتطعه Truncate إذا كان موجودًا مسبقًا
• FileAccess.READ_WRITE: مفتوح للقراءة والكتابة، ولا يقتطع الملف
• FileAccess.WRITE_READ: مفتوح للقراءة أو الكتابة، وينشئ الملف إن لم يكن موجودًا مسبقًا ويقتطعه إذا كان موجودًا مسبقًا

تخزين البيانات

يمكننا حفظ البيانات باستخدام نوع البيانات المحدّد مثل store_float()‎ و store_string()‎ وغير ذلك، أو باستخدام الدالة store_var()‎ المعمَّمة، والتي ستستخدم التسلسل Serialization المُدمَج في جودو لتشفير بياناتك بما في ذلك البيانات المعقدة مثل الكائنات التي سنتحدث عنها لاحقًا.

لنبدأ بمثال بسيط لحفظ أعلى نتيجة للاعب، حيث يمكننا كتابة دالة يمكن استدعاؤها كلما احتجنا إلى حفظ النتيجة:

var save_path = "user://score.save"

func save_score():
    var file = FileAccess.open(save_path, FileAccess.WRITE)
    file.store_var(highscore)

نحفظ النتيجة، ولكن يجب تحميلها عند بدء اللعبة كما يلي:

func load_score():
    if FileAccess.file_exists(save_path):
        print("file found")
        var file = FileAccess.open(save_path, FileAccess.READ)
        highscore = file.get_var()
    else:
        print("file not found")
        highscore = 0

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

كما يمكن استخدام الدالتين store_var()‎ و get_var()‎ عدة مرات حسب حاجتك مع أيّ عدد من القيم.

حفظ الموارد

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

يمكن حفظ الموارد وتحميلها باستخدام صنفي جودو ResourceSaver و ResourceLoader.

لنفترض مثلًا تخزين جميع بيانات الإحصائيات الخاصة بشخصية لعبتنا في مورد كما يلي:

extends Resource
class_name PlayerData

var level = 1
var experience = 100

var strength = 5
var intelligence = 3
var charisma = 2

يمكننا بعد ذلك الحفظ والتحميل كما يلي:

func load_character_data():
    if ResourceLoader.exists(save_path):
        return load(save_path)
    return null

func save_character_data(data):
    ResourceSaver.save(data, save_path)

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

هل يمكن تخزين البيانات في ملف JSON

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

إضافة لذلك لا تدعم JSON العديد من أنواع البيانات، إذ لا يوجد نوع البيانات int مقابل نوع البيانات float مثلًا، لذا يجب إجراء الكثير من عمليات التحويل والتحقق لمحاولة حفظ أو تحميل بياناتنا، ويُعَد ذلك أمرًا مرهقًا ويستغرق وقتًا طويلًا.

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

الخاتمة

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

ترجمة -وبتصرّف- للقسم Saving/loading data من توثيقات Kidscancode.

اقرأ أيضًا

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

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

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

ليكن لدينا عقدة Sprite تتحرك عبر الشاشة. إذا كان عرض الشاشة 600 بكسل ونريد أن نعبر الشخصية الرسومية Sprite الشاشة خلال 5 ثوانٍ، فيمكننا استخدام العملية الحسابية التالية لإيجاد السرعة اللازمة لذلك:

600 pixels / 5 seconds = 120 pixels/second

سنحرّك الشخصية الرسومية في كل إطار باستخدام الدالة ‎_process()‎، بحيث إذا شُغِّلت اللعبة بمعدل 60 إطارًا في الثانية، فيمكننا إيجاد الحركة لكل إطار باستخدام العملية الحسابية التالية:

120 pixels/second * 1/60 second/frame = 2 pixels/frame

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

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

extends Node2D

# الحركة المطلوبة بالبكسلات لكل إطار
var movement = Vector2(2, 0)

func _process(delta):
    $Sprite.position += movement

نشغّل الشيفرة البرمجية السابقة وسنجد أن الصورة تعبر الشاشة خلال 5 ثوانٍ.

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

إذا تخيلنا مثلًا أن معدل الإطارات انخفض إلى النصف بحيث يستغرق كل إطار 1/30 بدلًا من 1/60 من الثانية. فمعنى هذا أن الأمر سيستغرق ضعف الوقت حتى تصل الشخصية الرسومية إلى طرف الشاشة عند التحرك بمعدل 2 بكسل لكل إطار.

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

إصلاح مشكلة معدل الإطارات

تتضمن الدالة ‎_process()‎ تلقائيًا عند استخدامها معاملًا بالاسم delta يمرّره المحرّك كما في الدالة ‎_physics_process()‎ التي تُستخدَم في الشيفرة البرمجية المتعلقة بالفيزياء.

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

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

# ‫60 إطار في الثانية
120 pixels/second * 1/60 second/frame = 2 pixels/frame

# ‫30 إطار في الثانية
120 pixels/second * 1/30 second/frame = 4 pixels/frame

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

extends Node2D

# الحركة المطلوبة بالبكسلات لكل إطار
var movement = Vector2(120, 0)

func _process(delta):
    $Sprite.position += movement * delta

يكون زمن الانتقال متناسقًا عند التشغيل بمعدل 30 إطارًا في الثانية كما يلي:

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

استخدام معامل دلتا مع معادِلات الحركة

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

ملاحظة: يُعَد التعامل بالبكسلات والثواني أسهل بكثير لأنه يتعلق بكيفية قياس هذه الكميات في العالم الحقيقي، فمثلًا الجاذبية Gravity هي 100 بكسل/ثانية/ثانية، لذا ستتحرك الكرة بسرعة 200 بكسل/ثانية بعد سقوطها لمدة ثانيتين، وإذا استخدمنا وحدة الإطارات، فيجب استخدام التسارع Acceleration بوحدة البكسل/إطار/إطار، ولكننا سنجد أن هذه الوحدة غير مألوفة.

إذا طبّقنا الجاذبية مثلًا، فإنها تمثّل التسارع، بحيث ستزيد السرعة بمقدارٍ معين في كل إطار، وستغير السرعة موضع العقدة كما هو الحال في المثال السابق؛ وهنا سنضبط قيم delta و target_fps في الشيفرة البرمجية التالية لمعرفة النتائج:

extends Node2D

# التسارع بالبكسل/ثانية/ثانية
var gravity = Vector2(0, 120)
# التسارع بالبكسل/إطار/إطار
var gravity_frame = Vector2(0, .033)

# السرعة بالبكسل/ثانية أو بالبكسل/إطار
var velocity = Vector2.ZERO

var use_delta = false
var target_fps = 60

func _ready():
    Engine.target_fps = target_fps

func _process(delta):
    if use_delta:
        velocity += gravity * delta
        $Sprite.position += velocity * delta
    else:
        velocity += gravity_frame
        $Sprite.position += velocity

وكما هو ظاهر، فقد ضربنا القيمة المحدثة في الخطوة الزمنية لكل إطار لتحديث السرعة velocity والموضع position، إذ يجب ضرب أي كمية مُحدَّثة في كل إطار بقيمة delta لضمان تغيرها بحيث تكون مستقلة عن معدل الإطارات.

استخدام الدوال الحركية Kinematic

استخدمنا Sprite للتبسيط في الأمثلة السابقة، مع تحديث الموضع position في كل إطار.

إذا استخدمنا جسمًا حركيًا Kinematic ثنائي الأبعاد أو ثلاثي الأبعاد، فسنحتاج لاستخدام أحد توابع الحركة الخاصة به بدلًا من ذلك، خاصةً في حالة استخدام التابع move_and_slide()‎؛ إذ قد يحدث بعض الارتباك لأنه يستخدم متجه السرعة وليس الموضع، وهذا يعني أننا لن نضرب السرعة بقيمة delta لإيجاد المسافة، إذ تنجز الدالة ذلك نيابةً عنا، ولكن يجب تطبيقها على أيّ عمليات حسابية أخرى مثل التسارع كما في المثال التالي:

# الشيفرة البرمجية لحركة الشخصية الرسومية‫:
velocity += gravity * delta
position += velocity * delta

# الشيفرة البرمجية لحركة الجسم الحركي‫:
velocity += gravity * delta
move_and_slide()

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

ملاحظة: يجب أيضًا تطبيق قيمة delta على أي كميات أخرى مثل الجاذبية والاحتكاك وغير ذلك عند استخدام التابع move_and_slide()‎.

ختامًا

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

ترجمة -وبتصرّف- للقسم Understanding delta من توثيقات Kidscancode.

اقرأ أيضًا

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

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

اقتباس

ملاحظة: اُستلهم المخطط الأصلي لهذا المقال من ‎@TheDuriel على Godot Discord.

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

get_node("../../SomeNode/SomeOtherNode")
get_parent().get_parent().get_node("SomeNode")
get_tree().get_root().get_node("SomeNode/SomeOtherNode")

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

يجب أن تدير العقد أبناءها وليس العكس؛ حيث إذا استخدمنا الدالة get_parent()‎ أو get_node("..")‎، فيُحتمَل أننا نتجه إلى مشكلة ما، إذ تكون مثل هذه المسارات للعقد سهلة الكسر. سنذكر ففيما يلي المشاكل الرئيسية الثلاث في هذا الترتيب:

1. لا يمكن اختبار مشهد بطريقة مستقلة؛ فإذا شغّلنا المشهد بمفرده أو في مشهد اختبار لا يحتوي على إعداد العقدة نفسه، فستسبّب الدالة get_node()‎ عطلًا
2. لا يمكننا تغيير الأشياء بسهولة، لأننا إذا قرّرنا إعادة ترتيب أو تصميم الشجرة، فلن تكون المسارات صالحةً مجددًا
3. يبدأ ترتيب الجاهزية من الأبناء أولًا حتى الوصول إلى الأب أخيرًا، وهذا يعني فشل محاولة الوصول إلى خاصية الأب في التابع ‎_ready()‎ الخاصة بالعقدة، لأن الأب غير جاهزٍ بعد

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

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

تشير هذه القاعدة إلى أنه في حال استدعَت العقدة ابنًا، بمعنى تنقلها إلى أسفل الشجرة، فسيكون استدعاء الدالة get_node()‎ مناسبًا؛ وإذا كانت العقدة بحاجة إلى التواصل مع أعلى الشجرة، فيجب استخدام إشارة لذلك. يؤدي استخدام هذه القاعدة عند تصميم إعداد المشهد الخاص بنا إلى الحصول على مشروع قابل للصيانة ومنظم جيدًا، وسنتجنب بذلك استخدام مسارات العقد المعقدة التي تؤدي إلى مشاكل.

لنلقِ الآن نظرةً على كلٍّ من هذه الاستراتيجيات مع بعض الأمثلة.

استخدام الدالة get_node()‎

يعبُر استدعاء الدالة get_node()‎ شجرة المشاهد باستخدام مسار معين للعثور على العقدة المسماة.

مثال عن استخدام get_node()‎

ليكن لدينا الضبط التالي:

يجب أن يُعلِم السكربت الموجود في العقدة Player العقدةَ AnimatedSprite2D بالرسوم المتحركة التي تُشغَّل بناءً على حركة اللاعب، بحيث تعمل الدالة get_node()‎ في هذه الحالة بنجاح كما يلي:

extends CharacterBody2D

func _process(delta):
    if speed > 0:
        get_node("AnimatedSprite2D").play("run")
    else:
        get_node("AnimatedSprite2D").play("idle")

ملاحظة: يمكننا استخدام المحرف $ في لغة GDScript كاختصار لاستدعاء get_node()‎، لذا بإمكاننا كتابة ‎$AnimatedSprite2D مباشرةً.

طريقة أفضل للاستدعاء

تتمثل سلبية الطريقة السابقة في تحديد مسار العقدة، حيث إذا تغير هذا المسار لاحقًا، فيجب تعديل الشيفرة البرمجية أيضًا؛ ولهذا يمكننا استخدام الميزة ‎@export لتحديد عقدة مباشرةً كما يلي:

extends CharacterBody2D

@export var animation : AnimatedSprite2D

func _process(delta):
    if speed > 0:
        animation.play("run")
    else:
        animation.play("idle")

يمكننا باستخدام هذه الطريقة إسناد قيمةٍ إلى المتغير مباشرةً في الفاحص Inspector من خلال اختيار العقدة.

استخدام الإشارات Signals

يجب استخدام الإشارات لاستدعاء الدوال في العقد الموجودة في مستوًى أعلى من الشجرة أو الموجودة على المستوى نفسه (أي العقد الأشقاء Siblings).

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

signal_name.connect(target_node.target_function)

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

مثال عن استخدام الإشارات

يُعَد تحديث واجهة المستخدم UI الخاصة بك حالة استخدام شائعة جدًا للإشارات، لأننا نريد مثلًا تحديث عرض Label أو ProgressBar كلما اختلف المتغير health الخاص باللاعب، ولكن تكون عقد واجهة المستخدم الخاصة بك منفصلة تمامًا عن اللاعب إذ لا يعرف اللاعب شيئًا عن مكان هذه العقد وكيفية العثور عليها.

ليكن لدينا إعداد المثال التالي:

يمكننا ملاحظة أن واجهة المستخدم هي نسخة من مشهد، لأننا نعرض العقد المضمَّنة فقط، وهو المكان الذي نرى فيه أشياء مثل get_node("../UI/VBoxContainer/HBoxContainer/Label).text = str(health)‎ التي نريد تجنبها، لذا يصدر اللاعب بدلًا من ذلك إشارة health_changed كلما أضاف أو فقد جزءًا من صحته، ويجب إرسال هذه الإشارة إلى الدالة update_health()‎ الخاصة بواجهة المستخدم UI، والتي تتولّى ضبط قيمة Label.

سنستخدم الشيفرة البرمجية التالية في سكربت Player كلما تغيرت صحة اللاعب:

health_changed.emit(health)

لدينا ما يلي في سكربت واجهة المستخدم UI:

onready var label = $VBoxContainer/HBoxContainer/Label

func update_health(value):
    label.text = str(value)

كل ما نحتاجه الآن هو توصيل الإشارة بالدالة، والمكان المثالي ذلك موجود في سكربت World الذي يمثّل الأب المشترك للعقدتين ويعرف مكانهما:

func _ready():
    $Player.health_changed.connect($UI.update_health)

استخدام المجموعات

تُعَد المجموعات طريقةً أخرى لفك الارتباط بين عقدتين، وخاصةً عندما تكون لدينا الكثير من الكائنات المتشابهة التي تطبّق الشيء نفسه؛ إذ يمكن إضافة عقدة إلى أيّ عددٍ من المجموعات، كما يمكن تغيير العضوية ديناميكيًا في أيّ وقت باستخدام الدالتين add_to_group()‎ و remove_from_group()‎.

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

تتعقّب شجرة المشهد SceneTree الوسوم ويكون لديها دوال مثل الدالة get_nodes_in_group()‎ للمساعدة في العثور على جميع العقد التي يكون لها وسم معين.

مثال عن استخدام المجموعات

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

سنحتاج أولًا إلى إضافة جميع الأعداء إلى المجموعة enemies في المحرّر باستخدام تبويب العقدة Node:

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

func _ready():
    add_to_group("enemies")

لنفترض أن لكل عدو الدالة explode()‎ التي تتعامل مع ما يحدث عندما يموت، مثل تشغيل رسوم متحركة أو توليد عناصر متساقطة وما إلى ذلك. يمكننا الآن تنفيذ دالة القنبلة الذكية smart bomb الخاصة بنا كما يلي بعد أن أصبح كل عدو في مجموعته:

func activate_smart_bomb():
    get_tree().call_group("enemies", "explode")

استخدام خاصية المالك owner

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

مثال عن استخدام الخاصية owner

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

ليكن لدينا مثلًا الإعداد التالي:

يحتوي السكربت الموجود على العقدة الجذر CenterContainer على الدالة التالية التي نريد استدعاءها عند الضغط على أيّ زر:

extends CenterContainer

func _on_button_pressed(button_name):
    print(button_name, " was pressed")

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

extends Button

func _ready():
    pressed.connect(owner._on_button_pressed.bind(name))

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

ختامًا

بهذا نكون قد تعرفنا على كيفية تحقيق تواصل سليم بين العقد Nodes في محرك الألعاب جودو Godot، وسنتابع في المقال التالي من هذه السلسلة في شرح مفهوم جديد من عالم الألعاب وهو delta.

ترجمة -وبتصرّف- للقسم Node communication من توثيقات Kidscancode.

اقرأ أيضًا

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

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

ترتيب معالجة العقد في شجرة المشاهد

يتضمن محرك ألعاب جودو مفهوم يسمى شجرة المشاهد Scene Tree تتكون هذه الشجرة من عدة عقد Nodes، تمثل كل عقدة جزءًا من مشهد اللعبة، ويُذكَر مصطلح ترتيب الشجرة Tree Order في توثيق جودو، ولكنه غير واضح بالنسبة للمبتدئين، حيث يكون هذا الترتيب من أعلى الشجرة لأسفلها بدءًا من الجذر نزولًا إلى كل فرع بدوره، أي يبدأ الترتيب من العقد الرئيسية ثم يتنقل عبر الفروع وصولًا للعقد الفرعية، وهذا الترتيب مهم لأن كل عقدة تؤثر في العقد التي تحتها، لاحظ هذا الترتيب في الشكل التالي:

سنرفق هذا الكود بكل عقدة:

extends Node

func _init():
    # ملاحظة: العقدة ليس لها اسم بعد هنا
    print("TestRoot init")

func _enter_tree():
    print(name + " enter tree")

func _ready():
    print(name + " ready")

# ‫يضمن ما يلي أننا نطبع مرة واحدة فقط في process()‎
var test = true
func _process(delta):
    if test:
        print(name + " process")
    test = false

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

• تستدعى الدالة ‎_init()‎ عند إنشاء العقدة أو الكائن لأول مرة، وتكون العقدة حينها موجودة في ذاكرة الحاسوب ولم تُضف لشجرة المشاهد
• تستدعى الدالة ‎_enter_tree()‎ عند إضافة العقدة للشجرة لأول مرة، ويمكن أن يحدث ذلك عند إنشاء نسخة من العقدة أو عند إنشاء عقدة ابن من عقدة ما باستخدام التابع add_child()‎ مثلًا
• تستدعى الدالة ‎_ready()‎ عند اكتمال إضافة العقدة وأبنائها بنجاح لشجرة المشاهد وجاهزيتها للعمل
• تستدعى الدالة ‎_process()‎ بشكل دوري في كل إطار -60 مرة في الثانية عادةً- وذلك لكل عقدة في الشجرة ويمكن استخدامها للتعامل مع التحديثات المتكررة

إذا شغّلنا الكود على عقدة واحدة بمفردها، فسيكون ترتيب استدعاء الدوال كالمتوقع وفق ما يلي:

TestRoot init
TestRoot enter tree
TestRoot ready
TestRoot process

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

TestRoot init
TestChild1 init
TestChild3 init
TestChild2 init

TestRoot enter tree
TestChild1 enter tree
TestChild3 enter tree
TestChild2 enter tree

TestChild3 ready
TestChild1 ready
TestChild2 ready
TestRoot ready

TestRoot process
TestChild1 process
TestChild3 process
TestChild2 process

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

يقودنا ذلك إلى قاعدة أساسية مهمة يجب تذكرها عند إعداد بنية العقد وهي: يجب أن تدير العقد الأب أبناءها وليس العكس، ويجب أن تكون أيّ شيفرة برمجية للعقدة الأب قادرةً على الوصول الكامل إلى بيانات أبنائها، لذا يجب معالجة استدعاءات التابع ‎_ready()‎ بترتيب الشجرة العكسي.

علينا تذكّر ذلك عند محاولة الوصول لعقد أخرى في التابع ‎_ready()‎، فإذا كنا بحاجة للانتقال لأعلى الشجرة إلى عقدة أب أو عقدة جَد، فيجب تشغيل هذه الشيفرة البرمجية في العقدة الأب وليس في العقدة الابن.

فهم مسارات العقد والتنقل في شجرة المشاهد

تُستخدم مسارات العقد Node Paths في جودو لفهم كيفية التنقل بين العقد في شجرة المشاهد Scene Tree. وهذه المسارات أساسية لفهم كيفية الوصول للعقد المختلفة داخل الشجرة وتجنب مشكلة وجود مرجع عقدة غير صالح، والتي تظهر على هيئة رسالة خطأ كالتالي:

Invalid get index ‘position’ (on base: ’null instance’).

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

مسارات العقد

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

يوجد كود هذا المشهد في العقدة Player. إذا كان السكربت بحاجة إلى استدعاء الدالة play()‎ مع العقدة AnimatedSprite، فسيحتاج إلى مرجع إلى تلك العقدة:

get_node("AnimatedSprite").play()

إن وسيط الدالة get_node()‎ هو سلسلة نصية تمثّل المسار إلى العقدة المطلوبة، وتكون هذه السلسلة النصية في حالتنا هي ابن العقدة التي يوجد ضمنها الكود. إذا كان المسار المُقدّم لها غير صالح، فسنحصل على خطأ null instance وخطأ عدم العثور على العقدة Node not found أيضًا.

يُعَد الحصول على مرجع عقدة باستخدام الدالة get_node()‎ حالة شائعة لدرجة أن لغة GDScript لديها اختصار له حيث يمكنك كتابة $ للوصول إلى العقدة مباشرة بدلًا من استدعاء الدالة، على سبيل المثال للوصول إلى العقدة AnimatedSprite‎ وتشغيل الدالة ()play عليها مباشرة نكتب:

$AnimatedSprite.play()

ملاحظة: تعيد الدالة get_node()‎ مرجعًا Reference إلى العقدة المطلوبة.

لنأخذ الآن مثالًا لشجرة مشهد أكثر تعقيدًا كما يلي:

إذا احتاج الكود المرفق بالعقدة Main إلى الوصول إلى العقدة ScoreLabel، فيمكنه ذلك باستخدام هذا المسار:

get_node("HUD/ScoreLabel").text = "0"
# ‫أو باستخدام الاختصار:
$HUD/ScoreLabel.text = "0"

ملاحظة: سيكمل محرر جودو المسارات تلقائيًا نيابةً عنا عند استخدام صيغة $، ويمكننا أيضًا النقر بزر الفأرة الأيمن على عقدة ما في تبويب المشهد Scene واختيار نسخ مسار العقدة Copy Node Path.

إذا كانت العقدة التي نريد الوصول إليها موجودة في مكان أعلى من الشجرة، فيمكننا استخدام الدالة get_parent()‎ أو ".." للإشارة إلى العقدة الأب، حيث يمكننا الحصول على العقدة Player من العقدة ScoreLabel في شجرة المثال السابق كما يلي:

get_node("../../Player")

يمثّل المسار ‎"../../Player"‎ الحصول على العقدة التي تقع في مستوى واحد أعلى HUD ثم العقدة التي تقع في مستوى أعلى وهي Main ثم الوصول إلى العقدة الابن لها وهي Player.

ملاحظة: تعمل مسارات العقد مثل مسارات المجلدات في نظام التشغيل، حيث تشير الشرطة المائلة / إلى علاقة أب-ابن، وتعني .. مستوى واحد أعلى.

المسارات النسبية Relative والمسارات المطلقة Absolute

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

get_node("/root/Main/Player")

لا يعيد المسار ‎/root والذي يمكن الوصول إليها أيضًا باستخدام get_tree().root العقدة الجذر لمشهدنا الحالي، ولكنه يعيد العقدة الجذر لنافذة العرض Viewport التي توجد دائمًا في شجرة المشهد SceneTree افتراضيًا.

مشكلة في التعامل مع مسارات العقد في جودو

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

func take_damage(amount):
    health -= amount
    get_node("../Main/UI/HealthBar").text = str(health)

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

1. لا يمكننا اختبار مشهد اللاعب بصورة مستقلة، فإذا شغلنا مشهد اللاعب بمفرده أو في مشهد اختبار دون واجهة مستخدم، فسيسبّب سطر الدالة get_node()‎ في حدوث عطل
2. لا يمكننا تغيير واجهة المستخدم الخاصة بنا، فإذا قررنا إعادة ترتيبها أو تصميمها، فلن يكون المسار صالحًا بعد الآن ويجب تغييره

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

الخاتمة

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

ترجمة -وبتصرّف- للقسمين Understanding tree order و Understanding node paths من توثيقات Kidscancode.

اقرأ أيضًا

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