هل تعلم أن واجهة محرك غودو Godot بُنيت بنفس العقد التي يُقدمها لك المحرك بداخله بناء الواجهات؟
في الواقع، يوجد أكثر من 40 عقدة خاصة بواجهات المستخدم في محرك الألعاب غودو Godot، منها الذي يضيف عناصر مرئية مثل الأزرار والنصوص والصور، ومنها الذي يختص في احتواء العقد الاخرى والتحكم بها !
في هذا المقال اقوم بعرض مقدمة بسيطة حول عقد التحكم Control nodes في المحرك، ورغم أن الاسم قد يبدو مضللاً، إلا أن معناه يتضح أثناء قراءة المقال والشرح.
هذا المقال ليس شرحا لجميع عقد التحكم، بل فقط مهمته هو فهم كيفية عمل تلك العقد والنظر في بعض الخصائص العامة لها.
المقال بالكامل يتحدث عن الاصدار الـ4 من محرك غودو، ورغم أن المبدأ واحد، الا أن بعض الخواص امكانُها تغيرت
عناصر المقال
عقد التحكم Control
جميع عقد الواجهات ترث من عقدة التحكم الرئيسية المسماة Control، لذا تجد أن جميعها يملُك نفس الخصائص والأدوات تقريبا، مع بعض فروقات صغيرة.
كما تسمى عقد التحكم بها الاسم لأنها تعتمد بشكل كبير على التحكم في مكان عرض عقد الواجهات، أما العقدة نفسها أو التي اسفلها في شجرة المشهد scene tree، وبفهم هذا المبدأ يتيسر شرح بقية الادوات والخصائص.
كما أن عقد الواجهات تتواجد في شكل مربع أو مستطيل، لذا يوجد لها 4 أضلاع وحواف، بالإضافة إلى نقطة المركز وهي النقطة التي تحدد الاحداثيات والاستدارة وغيرها، في العادة تكون نقطة المركز في المنتصف، لكن في عقد التحكم تتواجد تلك النقطة في أعلى يسار المربع.
وعند تحديد اي عقدة منهم، يظهر في شريط الأدوات أدوات جديدة، تلك الادوات بها قيم تلقائية مُحددة مسبقا في المحرك، ولكن يمكنك التلاعب بالخواص بشكل يدوي في لوحة الخصائص Inspector اسفل خانة التخطيط Layout
لتكون أهم تلك الخصائص كما يلي :
[ تنسيق Size : Alignment – ارتكاز Anchor – الفأرة Mouse – مدخلات Input – سمة Theme – استثناء Theme overrides]
تنسيق Size : Alignment
يمكنك الوصول إليها عبر خانة التخطيط layout، او بالضغط على مربع المنقط المتواجد في شريط الأدوات وذلك بعد تحديد عقدة من عقد التحكم ــ قد لا تظهر في حال كانت العقدة داخل حاوية.
مهمة التنسيق هو التلاعب في قيمتين، المساحة – size، والموضع – position، عن طريق تعيين قيم بوحدات ثابتة، فربما تحتاج الى 100 بكسل حتى تملأ الحيز كله، وربما 269 بكسل وربما اقل بكثير. لذا يمكنك تعيين القيم بوحدات ثابتة.
كما يجب التنبيه أن ذلك الحيز هو حيز الحاوية التي بها العقدة أو إطار العرض ViewPort (النافذة في العادة)
ارتكاز Anchor
يمكنك الوصول إليها عبر خانة التخطيط layout، او بالضغط على الدائرة ذات علامة + المتواجد في شريط الأدوات وذلك بعد تحديد عقدة من عقد التحكم.
أدوات التنسيق تقوم بتعيين قيم محددة بالبكسلات، ولكن ماذا عن تحديد نسبة مئوية؟
وهذا دور الارتكاز Anchor، التي تحدد 4 حواف اساسية (ارتكازية) ــ موجودة باللون الاخضر ــ ومنها تستطيع تعيين نسبة مئوية، حيث النسبة تكون من 0 الى 1.
فلو وضعت نسبة 0.3 في الخاصية “اعلى”، ذلك يعني أن الضلع الذي في الاعلى، يبتعد بنسبة 30% عن الطرف الاعلى من حاويته
فتأمل الصورة التالية، حيث المربع الأكبر هو الحاوية، والمربع الصغير هو ما تلاعبت بنسب الارتكاز خاصته، ولاحظ أن جميعها تعتمد على اعلى يسار مربع العقدة الأب، في تحديد النسب، أن لم يكن هناك عقدة اب، سيعتمد الارتكاز على إطار العرض ViewPort
الفأرة Mouse
جميع عقد التحكم تتعامل مع الفأرة بشكل أو بآخر، مثل عقد التحرير lineEdit التي تتعامل مع الضغطة لبدء الكتابة فيها، وعقد الأزرار التي حتى التأشير عليها يتسبب في تغير شكلها.
وهناك عقد لا تهتم على الاطلاق بتلك الاحداث، مثل عقدة النصوص والصور، حيث الأحداث هي الضغطات والتأشير وحتى الحركة بالفارة في مساحة تلك العقدة.
وعند النظر على خواص الفأرة، تجد 3 خيارات مختلفة توضح لنا كيف تتعامل العقدة معها، وهم كالاتي :
- توقف Stop :تستقبل أحداث الفأرة، ولكن لا تسمح للعقد التي تحتها بذلك.
اي لو كان هناك زر وفوقه عقدة تحكم بهذا الخيار، هكذا لن يُمكن للمستخدم الضغط على الزر. - مرر Pass : أن لم تكن عقدة تستقبل احداث الفأرة ، فتقوم بتمرير هذه الاحداث للعقدة الاب.
- تجاهل Ignore : تجاهل جميع احداث الفأرة لهذه العقدة.
ان لاحظت أن احد الازرار لا يعمل أو أن أحد الكائنات يجب أن يتفاعل مع الفأرة ولكنه لا يفعل، فهناك احتمال أنه يوجد عقدة تحكم بخاصية “توقف” للفأرة فوقه، لذا يمكنك تغيير الخاصية لشيء اخر مثل التمرير أو التجاهل لحل المشكلة.
سمة Theme
كل لعبة لها مظهرها وسمتها الخاصة في عرض واجهات المستخدم، والمحرك به طرق عديدة لتغير شكل الواجهات، وواحدة من تلك الطرق تسمى السمات themes.
السمة theme هو نوع من الملفات الخاصة بالمحرك، يُمكنك صنعها داخل المحرك لتحديد شكل/مظهر عقد واجهات المستخدم في المحرك، هكذا يتحول الشكل التلقائي default لتلك العقد الى الشكل الذي حددته انت.
ويمكن بسهولة سحب وإلقاء الملف في الخانة المخصصة له ليتغير شكل العقد في اللعبة، وفي حال لم تضع الملف في الخانة، فإنها ترث من عقدتها الأب تلك الخاصية. هكذا يمكنك وضع الملف في الأب فقط حتى تجد أن جميع الأبناء توارثوا تلك السمة
للاسف فان إنشاء السمات يُعد عملية معقدة قليلا، ولكن مُجتمع المحرك دائما ما يحاول انشاء ملفات سمات جاهزة.
استثناء Theme Overrides
بعض عقد الوجهات (وبالاخص الحاويات)، يكون لها خصائص مختلفة عن بقية العقد، فرغم أن جميعها يرث من عقدة التحكم control، إلا أنه يوجد بعض العقد ذات استثناءات.
تلك الخواص الجديدة ــ أو قل المختلفة ــ تظهر اسفل خانة استثناءات السمة theme overrides، وبما انها تختلف من عقدة لاخرى، فلا يمكن شرح خواصها. ولكن وجب التنبيه لوجودها نظرا لحاجة بعض العقد في التعامل معها.
أخرى
يوجد ايضا خواص التحديد focus وخواص المدخلات input، وتهدف الى تحديد كيفية الانتقال أو تحديد العناصر باستخدام لوحة المفاتيح. في الوقت الحالي لا حاجة لفهم كيفية عملها، وفي المستقبل اقوم بنشر مقال حول الأمر ـ بمشيئة الله.
عقد مرئية وعقد الحاويات
بما انه يوجد اكثر من 40 عقدة مختلفة لواجهات المستخدم في المحرك، فلا يمكن شرحها في مقال واحد مثل هذا، ولكن يمكن تقسيمها لقسمين هما العقد المرئية وعقد الحاويات :
- العقد المرئية: تلك التي تظهر عناصر متعارف عليها مثل النصوص والصور والازرار والفيديو
- الحاويات : وهي عقد هدفها احتواء عقد الواجهات الاخرى وتحديد مساحات و اماكن محددة لها
هذه التصنيفات هي من تأليفي الشخصي ولن تجد لها مكانا آخر، وفقط صنفتها لتسهيل شرحها
العقد مرئية
وهي واجهات المستخدم المتعارف عليها، هي الاساس الخاص باي واجهة مستخدم، مثل عقدة النصوص Label وعارض الصور RectTexture، ومُشغل الفيديو VideoPlayer.
وايضا يوجد عقد لها نسختان، واحدة عادية واخرى يُمكن تحديد مظهرها بسهولة عن طريق وضع صور لها، مثل عقدة شريط التقدم ProgressBar ونظيرتها TextureProgressBar، وايضا الزر Button ونظيره TextureButton.
إضافة الى ذلك يوجد عقد تختص بالاعدادات، مثل عقدة العداد SpinBox و شريط التبويب TabBar و الازاحة ScrollBar، وغيرهم الكثير والكثير من العقد المشابهة.
اغلبها تجد بها خواص المظهر styles اسفل خانة الاستثناء، وتلك الخواص تهدف لتحديد شكل أجزاء معينة منها، فمثلا في عقدة شريط التقدم، تجد خاصية تمكنك من تحديد مظهر خلفية الشريط، واخرة للشريط نفسه.
الحاويات Contaniers
وهي العقد الاهم، و شخصيا أظن أن عقد التحكُم سُميت بهذا الاسم فقط بسببها، لان فائدتها الاساسية هو التحكم في عقد الأبناء، وإلزامها بمساحات وأماكن محددة.
يوجد 16 منها، وتجد أن جميعها به كلمة حاوي Container، بالإضافة إلى أن خاصية الاستثناء بها إعدادات الاحتواء تلك.
ابسط عقدة يُمكن أن تفهم منها الفكرة، هي واحدة باسم حاوية الهامش MarginContainer، وفي الخصائص الاستثنائية، ستجد تعيين لقيم الهوامش في 4 اتجاهات. يمكنك وضع ارقام عشوائية الان، ثم اضف للعقد عقدة واجهات مستخدم اخرى، وسترى بنفسك أن تلك العقد الابن التزمت بالهوامش التي تم تحديدها.
تلك كانت عقدة واحدة فقط ، جرب وقم باستخدام عقدة الترتيب الأفقي والعامودي VboxContanier, HboxContanier، واضف لها 3 عقد واجهات مستخدم كأبناء لها (مثل عارض الصور TextureRect)، وانظر كيف يتم ترتيبها في المشهد لديك تلقائيا.
ثم قم باخفاء واحدة من تلك العقد المرئية ــ وليس الحاوية بالطبع 👀ــ لتجد أن بقية العقد يعاد تنسيقها.
هذا مبدأ الحاويات. التحكم في عقد الأبناء وإلزامها بأماكن ومساحات محددة، أو قل احتوائها في أماكن محددة
عرضها مع اللاعب
عندما تقوم باضافة اي عقد من عقد الواجهات، تجد انها دائما ثابتة ولا تتحرك مع اللاعب، وأن قمت بعمل واجهة لعب HUD، وتريدها أن تتحرك مع اللاعب أثناء حركته، فلا تضعها مع الكاميرا أو مع اللاعب.
بل قم بإضافة عقدة الطبقة CanvasLayer، ثم أضف لها عقد الواجهات التي تريدها، هكذا تجد أن الواجهات دائما تتحرك مع اللاعب ومع الكاميرا.
هذه كانت مقدمة
كل ما تطرقنا إليه في هذا المقال يعد القليل بشأن عقد الواجهات في محرك غودو، يمكننا أن نتطرق لكيفية جعل الواجهة تعمل على ابعاد الشاشات المختلفة، ويمكن أن نتعرف على كيفية إنشاء واجهات خاصة بالبرامج.
ولكن من الصعب جدا أن ندخل على تلك الدروس والمقالات دون أن نتعرف على هذا النظام الرائع بشكل عام، وكما قلت من قبل، فإن واجهة مُحرك غودو نفسه قد تم انشائها بنفس هذا العقد، أي نعم كانت باسلوباً مختلف قليلا، ولكن تظل هذه نقطة مشرفة لصالح اسلوبها.
أخبرني برأيك حول عقد التحكم، أخبرني ما الذي قد نسيت توضيحه وما الذي لم تكن تعرفه من قبل، باب النقاش مفتوح دائما في التعليقات للحصول على الفائدة الكبرى.
