دليل إنشاء واجهة ويب باستخدام Unreal Engine Remote Control

ما الذي ستتعلمه في هذا الدليل؟

Unreal Engine Remote Control نظام يتيح إدارة محتوى المشروع من خارج واجهة محرر المحرك. يستقبل طلبات HTTP ورسائل WebSocket عبر خادم ويب، ويمكن لتطبيقات الويب استخدام هذه الواجهة لقراءة الخصائص المتاحة لـ Blueprint وPython وتغييرها. في هذا الدليل، نستعرض كيفية تفعيل إضافة Remote Control Web Interface، وإتاحة خصائص من Remote Control Preset لتطبيق ويب، والتحكم فيها باستخدام widget ضمن الواجهة.

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

المتطلبات والتثبيت

يحدد الدليل الرسمي لـ Remote Control Web Interface الإصدار 8 بوصفه الحد الأدنى لإصدار NodeJS، والإصدار 14.15.5 بوصفه الحد الأقصى. هذا النطاق هو المتطلب المذكور في الوثائق؛ لذا من المهم التحقق قبل التثبيت من التوافق مع إصدار Unreal Engine المستخدم وبيئة التطوير الحالية. ولأن المصادر لا تحدد رقم إصدار بعينه من Unreal Engine، لا نفترض هنا أي معلومات إضافية عن توافق الإصدارات.

بعد فتح المشروع في Unreal Editor، انتقل من القائمة الرئيسية إلى نافذة Edit > Plugins. ابحث عن إضافة Remote Control Web Interface ضمن فئة Messaging، وفعّلها ثم أعد تشغيل المحرك. للتحقق مما إذا كانت الإضافة قد شغّلت تطبيق الويب، افتح Output Log عبر Window > Developer Tools > Output Log، ثم صفِّ النتائج باستخدام عبارة “remote control web”. ويعرض الدليل الرسمي مثالًا على رسالة بدء ناجحة تفيد بأن تطبيق الويب يعمل على المنفذ 7000.

يمكن تغيير المنفذ المستخدم لـ Remote Control Web Interface من إعدادات Plugins > Remote Control ضمن Edit > Project Settings. لفتح تطبيق الويب مبدئيًا من الجهاز الذي يعمل عليه المحرك، أدخل 127.0.0.1:7000 في شريط عنوان المتصفح. أما للوصول من أجهزة أخرى، فيحيل الدليل الرسمي إلى تعليمات Quick Start الخاصة بإتاحة Remote Control API لأجهزة أخرى؛ وبما أن هذا الدليل لا يتضمن خطوات إضافية لإعداد الشبكة، فسنقتصر على الاتصال المحلي.

خطوة بخطوة: ربط preset بواجهة الويب

1. جهّز preset. يتيح نظام Remote Control التعامل مع الوظائف والخصائص المتاحة لـ Blueprint وPython. ويمكنك استخدام Remote Control Preset لإتاحة محتوى المشروع عبر API من دون كتابة كود. يقرأ تطبيق الويب محتوى preset المفتوح في جلسة Unreal؛ لذلك تحقّق قبل الانتقال إلى الواجهة من أن الخصائص التي تريد التحكم فيها موجودة ضمن preset.

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

3. انتقل إلى وضع التصميم. عند فتح الصفحة، قد تظهر واجهة Remote Control فارغة. استخدم مفتاح Control في الواجهة للانتقال إلى وضع Design. بعد ذلك، استعرض خصائص preset في تبويب Properties. عند سحب إحدى الخصائص من القائمة الموجودة على اليسار وإفلاتها في مساحة الواجهة، يُنشأ widget مرتبط بها. وإذا أفلتّ الخاصية فوق لوحة، فسيُضاف widget إليها؛ أما إذا لم تكن هناك لوحة بعد، فسينشئ التطبيق لوحة ويضع widget فيها.

4. اختر نوع widget وفقًا للحاجة. تتضمن الواجهة widget مثل الأزرار ومحددات الألوان وdial والقوائم المنسدلة وjoystick والتسميات والقوائم واللوحات وslider وعلامات التبويب والنصوص ومفاتيح التبديل وvector. تستوعب اللوحة widget أخرى، لذا يجب إضافتها أولًا. ويمكن لـ List widget استيعاب اللوحات لعرض مجموعات مختلفة من عناصر الواجهة ضمن علامات تبويب. كما يمكن تغيير طريقة عرض بعض تنسيقات البيانات؛ فعلى سبيل المثال، يمكن عرض بيانات vector بصيغة joystick أو dial أو slider.

5. اختبر في وضع التحكم. بعد وضع widget، عُد إلى وضع Control. غيّر الخاصية في واجهة الويب ولاحظ ما إذا كانت تتحدث في Unreal Editor. ولظهور التغييرات بينما يكون المحرر في الخلفية، يُوصى بتعطيل خيار Use Less CPU when in Background ضمن General > Performance في Edit > Editor Preferences.

6. احفظ التخطيط. لحفظ تخطيط واجهة الويب، احفظ Remote Control Preset المعني في Unreal Editor. عند فتح التطبيق مرة أخرى، سيستخدم آخر تخطيط محفوظ. أثناء التصميم، يمكن تغيير تسمية widget من لوحة الإعدادات عند تحديده؛ وإذا كان widget مرتبطًا بخاصية، فيمكن أيضًا تغيير الخاصية التي يتصل بها. ويمكن حذف widget غير الضرورية كلٌّ على حدة، أو حذفها مع اللوحة التي تحتويها.

أثر ذلك في سير عمل العمارة وarchviz

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

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

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

-RCWebControlEnable -RCWebInterfaceEnable

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

مشكلات شائعة

إذا لم يُفتح تطبيق الويب، فتحقّق أولًا من تفعيل الإضافة وإعادة تشغيل المحرك. بعد ذلك، ابحث في Output Log عن سجل بدء التشغيل باستخدام مرشح “remote control web”. وإذا غُيّر إعداد المنفذ، فيجب أن يتطابق المنفذ في عنوان المتصفح معه. وإذا لم تظهر التحديثات في المحرر، فتحقّق من إعداد تقليل استخدام المعالج في الخلفية.

إذا لم تظهر خاصية في القائمة، فتحقّق من وجودها في Remote Control Preset المفتوح. يمكن استخدام أكثر من preset، لكن لا يكون مفتوحًا إلا preset واحد في الوقت نفسه. كذلك، قد لا يُحفَظ تخطيط الواجهة بالشكل المتوقع عند فتحها لاحقًا ما لم يُحفَظ preset المعني. وحتى إذا ظهرت علامتا التبويب Level Snapshots أو Sequencer، فتحقّق من الإضافة المطلوبة أو شروط المستوى اللازمة لاستخدام الوظيفة المعنية.

الخطوات التالية

ابدأ بـ preset واحد وعدد قليل من widget، ثم تحقّق من الاتصال المحلي. بعد ذلك، رتّب الواجهة المطلوبة باستخدام علامات التبويب واللوحات واحفظ preset. وإذا كنت تخطط لاستخدام عدة عملاء أو Level Snapshots أو Sequencer، فاختبر كل ميزة ضمن ظروف تشغيلها الخاصة. وعند إعداد الوصول من أجهزة أخرى، راجع تعليمات Quick Start الرسمية؛ ولا تفترض إعدادات شبكة غير موضحة في هذا المصدر.

المصدر والترخيص

أُعد هذا المحتوى باللغة التركية استنادًا إلى الوثائق الرسمية لـ Unreal Engine Remote Control وRemote Control Web Application الصادرة عن Epic Games. وقد أُتيح المصدران بموجب ترخيص حر.