إنشاء لعبة AR مع Vuforia

[هناك صور GIF ثلاثية الأبعاد قيد التشغيل]

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

على الرغم من أن إصدار ARKit و ARCore ساعد في زيادة شعبية الواقع المعزز ، إلا أن هناك منصات أخرى و SDK موجودة بالفعل. كان واحد منهم Vuforia. ومؤخراً ، دخلت Unity في اتفاقية شراكة مع Vuforia ودمجت نظام AR هذا في محرك ألعاب Unity.

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

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

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

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

هناك العديد من أجهزة AR في السوق ، لكن الهدف الرئيسي لتطبيقات AR هو مساحة الأجهزة المحمولة مثل منصات iOS و Android. وهنا مزيج من Unity و Vuforia مناسب - في تطوير النظام الأساسي. ميزة أخرى هي أنه يمكن اختبار التطبيق في المحرر. لهذا ، تحتاج فقط كاميرا ويب!

قبل أن تبدأ ، قم بتنزيل أحدث إصدار من Unity وتثبيت مكون دعم Vuforia Augmented Reality Support . إذا كنت تستخدم Unity Hub ، يمكنك إضافة هذا المكون إلى إصدار مثبت بالفعل من Unity.

الحصول على العمل

الآن بعد أن أصبح لديك Unity و Vuforia وكاميرا ويب ، يلزمك تنزيل مشروع نموذج ( من هنا ).

بعد التنزيل ، قم باستخراج الملفات وافتح مشروع How to Make a AR باستخدام مشروع Vuforia Starter في Unity. عند تحميل المشروع ، افتح مشهد Starter من مجلد Scenes وانظر إلى إطار التسلسل الهرمي:


بعد مراجعة تركيبة المشروع ، انقر فوق الزر " تشغيل" في المحرر لملء الطلب في لعبة البيتزا لدينا.


رائع ، يمكننا اللعب بالبيتزا ، لكن التحدي الحقيقي لدينا هو تحويل هذا إلى لعبة AR.

ملاحظة: تم تنزيل أصول واجهة المستخدم لهذا البرنامج التعليمي من shareicon.net

.

قابل شيف Vuforia

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

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

ثم أضف Vuforia -> AR Camera . هذا سوف يطفو على السطح هذه النافذة:


انقر فوق " استيراد" وانتظر حتى يتم استيراد "حزمة Vuforia" إلى المشروع ، وسيتم إضافة عدد غير قليل من الملفات.


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

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

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

ملاحظة: إذا لم يكن مشروعك يحتوي على مفتاح ترخيص تطبيق ، فيمكنك العثور عليه في ملف README. انسخ السطر إلى حقل المفتش لملف VuforiaConfiguration .

الآن بعد أن أصبح لدينا كاميرا AR في المشهد ، لم يتبق سوى شيء واحد - تشغيل الواقع المعزز!

انتقل إلى تحرير -> إعدادات المشروع -> المشغل . قم بالتمرير لأسفل إلى خيارات إعدادات XR وتأكد من تحديد خانة الاختيار Vuforia Augmented Reality Supported .

انقر في محرر Play وقل مرحباً بنفسك!


ملاحظة: إذا قمت بالنقر فوق "تشغيل" وظهرت شاشة "فشل تهيئة Vuforia" ، فحاول إعادة تشغيل الوحدة. هذا خطأ عشوائي لا يظهر إلا في بعض الأنظمة.

مقدمة في التعرف على الأنماط

بالطبع ، الإعجاب بنفسك أمر رائع ، لكن ألم نكن سنصنع لعبة بيتزا؟

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

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

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


كما ترون ، يتم توزيع النقاط المميزة بشكل جيد. إنها أيضًا بيتزا مريحة!

إضافة أهداف الصورة إلى المشهد

حان الوقت للقيام السحر! سنجعل البيتزا الافتراضية تظهر أعلى البيتزا لدينا. مرة أخرى ، استخدم قائمة " إنشاء " في التسلسل الهرمي وحدد Vuforia -> صورة .

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

• تم تعيين قاعدة البيانات إلى RW_ItsaPizza
  
• تعيين صورة الهدف إلى PizzaClipArt

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

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

الآن بعد أن قمنا بتهيئة AR Camera و Image Tracker في المشهد ، لدينا كل ما تحتاجه للواقع المعزز للعمل! في "المحرر" ، انقر فوق الزر " تشغيل" ثم ضع الصورة المطبوعة أمام الكاميرا.


لقد حصلنا على البيتزا!

إرفاق كائنات اللعبة إلى Trackers ككائنات تابعة

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

الحقيقة هي أنه في حين أن كاميرا الويب يمكنها رؤية متتبع الصور ، فإن Vuforia قادرة على تحديث موضع كاميرا AR في المشهد. إذا كنت تريد أن ترى هذا الأمر قيد التنفيذ ، فقم بتكوين Unity Editor بحيث يصبح كل من Windows و Scene مرئيًا في نفس الوقت ، ثم حدد AR Camera وانقر فوق Play.


كيفية جعل البيتزا تتصرف بشكل صحيح عندما تعمل الكاميرا؟ حدد ImageTarget في التسلسل الهرمي. سترى أن حجمه على كل محور هو 10 . يتم التحكم في هذا بواسطة مكون سلوك الصورة المستهدفة . في القسم المتقدم ، يمكنك أن ترى أن معلمة العرض لها قيمة 10 . تم ضبطه عندما تم تحميل الصورة على موقع Vuforia Developer.

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

الآن حدد GameObject Pizza في التسلسل الهرمي . اسحبه إلى ImageTarget لجعله طفلًا. سيتغير المقياس إلى (X: 0.1, Y: 0.1, Z: 0.1) . أعده إلى القيم (X: 1, Y: 1, Z: 1) ، وقم أيضًا بتحويل الموضع إلى 0.01 على طول المحور Y. بفضل هذا ، سوف تتطابق بيتزا مع ImageTarget .


اضغط على " تشغيل" مرة أخرى وسترى أن البيتزا أعلى الصورة ، كما تختفي عندما تختفي الصورة من الإطار.

استكشاف DefaultTrackableEventHandler

يؤخذ هذا السلوك من DefaultTrackableEventHandler من ImageTarget . افتح البرنامج النصي وشاهده.

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

• تقوم وظيفة Start بتسجيل هذا البرنامج النصي كمعالج أحداث لـ TrackableBehaviour (في هذه الحالة ، ImageTargetBehaviour ).
• يزيل OnDestroy هذا الرابط.
• OnTrackableStateChanged هي الوظيفة الأكثر أهمية. يروي رمزها ما يجب أن يحدث عندما تتغير حالة التتبع.
• تسمى OnTrackingFound و OnTrackingLost من OnTrackableStateChanged . في DefaultTrackableEventHandler ، يقومون بتبديل مكونات Renderer و Collider و Canvas لأي طفل.

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


هضم هذه المعلومات الآن.

إنشاء إجراءات التتبع الخاصة بك

لقد حان الوقت لفعل شيء مع هذه المعلومات!

إزالة المكون DefaultTrackableEventHandler من ImageTarget . ثم أضف PizzaTrackableEventHandler ، والذي يمكن العثور عليه في مجلد البرامج النصية . ثم افتح PizzaTrackableEventHandler . هذا استنساخ لـ DefaultTrackableEventHandler ، لكن تم حذف الكود الموجود في OnTrackingFound و OnTrackingLost - عليك حل هذه المشكلة!

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


نحن على استعداد لتحويل هذا المشروع إلى لعبة في الواقع المعزز!

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


كما ترون ، عند الضغط على زر ، GameManager.CompleteOrder() استدعاء Event GameManager.CompleteOrder() . بدلاً من إجبار المشغل على الضغط على الزر ، يمكنك التأكد من أنه "قدم" البيتزا لإكمال الطلب (نقل المقتفي إلى خارج رؤية الكاميرا).

في بداية PizzaTrackableEventHandler ، أضف UnityEvent للاتصال عندما تفقد الصورة التعقب.

 using Vuforia; using UnityEngine; using UnityEngine.Events; public class PizzaTrackableEventHandler : MonoBehaviour, ITrackableEventHandler { public UnityEvent OnTrackingLostEvent; ... 

الآن دعونا ندعو الحدث في أسلوب OnTrackingLost :

 protected virtual void OnTrackingLost() { var rendererComponents = GetComponentsInChildren<Renderer>(true); // Enable rendering: foreach (var component in rendererComponents) { component.enabled = false; } //Trigger our event OnTrackingLostEvent.Invoke(); } 

هذا يجعل PizzaTrackableEventHandler أكثر مرونة ، لأنه يمكننا الآن ضبط تنفيذ أي إجراءات في حالة فقد التتبع. حفظ PizzaTrackableEventHandler ، والعودة إلى محرر الوحدة وانتظر اكتمال الترجمة . عندما ينتهي ، اجعل GameManager.CompleteOrder() استدعاؤه عند فقدان تعقب البيتزا للتتبع. أخيرًا ، قم بتعطيل CompleteOrderButton أو إزالته في واجهة المستخدم.


حفظ المشهد ، انقر فوق تشغيل وخدمة البيتزا!

إلى أين أذهب بعد ذلك

تهانينا ، لقد أكملت البرنامج التعليمي!

مثال مشروع يمكن تحميله من هنا .

لمزيد من المعلومات حول التطوير باستخدام Vuforia in Unity ، راجع مكتبة مطوري Vuforia أو البرنامج التعليمي Unity .

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

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

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