لطالما كانت ألعاب الواقع الافتراضي موضع إعجاب بالنسبة لنا. هذا نوع من السحر في غلاف رقمي ، التأثير الكامل للغمر في عالم آخر. في جميع المؤتمرات ، تحظى مشاريع الواقع الافتراضي بأكبر قدر من الاهتمام والمدرجات على نطاق واسع ، حيث ينتظر المئات من المتفرجين في طابور ليغوصوا في عالم تم إنشاؤه حديثًا. نظرًا لأن شركتنا في معظمها لا تتعلق بالترفيه ، بل تتعلق بالتطور والمناهج التقدمية ، فقد درسنا بالتفصيل مسألة كيف يمكن أن تكون لعبة blockchain مفيدة في هذا النوع من ألعاب الشباب مثل VR.
جاءت الإجابة فورًا - العقود الذكية وأحدث معايير الرمز المميز لشبكة Ethereum ERC1155 ، المصممة خصيصًا لإنشاء أصول ألعاب / رقمية. يعد ERC1155 رمزًا مميزًا يجمع بين أفضل ميزات ERC20 و ERC721 الرائجة (يمكن العثور على التفاصيل الفنية في الملف التمهيدي لمستودع github ). تخيل موقفًا كلاسيكيًا - لقد أطاحت ببشرة نادرة أو باهظة الثمن. كيف تبيعها بحيث لا يخدعك المشتري أو أنت نفسك تفتقر إلى القدرة على أخذ أموال الآخرين بحرية دون التخلي عن السلعة؟ الجواب الصحيح هو العقود الذكية. ورمز ERC1155 هو بالضبط ما تحتاجه لتنفيذ هذه الوظيفة. يمكن أن يكون للعنصر خصائصه الخاصة - في شكل القوة والأضرار والمتانة والحماية والأضرار الإضافية (سمة من سمات الرمز المميز ERC721) وقيمته (سمة من سمات الرمز المميز ERC20) في قذيفة واحدة - هل هذا لا يبدو ملهمًا؟ يمكن أن تصبح جميع الألعاب آمنة وسهلة لتخزين ونقل وبيع أصولها الرقمية. دعونا نحاول حل هذه المشكلة باستخدام مثال لعبة صممناها.
لقد توصلنا إلى هذا المفهوم بسرعة إلى حد ما - وهو التماثلية للعبة البطاقات الشهيرة "Munchkin" ، التي تم نقلها إلى عالم الواقع الافتراضي ، بعقود ذكية لتداول أي عناصر أو دروع أو أسلحة تم التخلص منها أثناء اللعبة. لم يكن اختيار تقنية التنفيذ لمطوري برامجنا المستقلين أمرًا سهلاً ، لكننا نريد أن نخبركم المزيد عن هذه التجربة.
تتفاعل 360
نظرًا لأن معظم الفريق يتمتع بخبرة واسعة في التطوير على React ، كانت هناك رغبة في تجربة React-360 لحل هذه المهمة. بدا وصف الأداة وظيفيًا جدًا ، لذلك اخترنا اتجاهه.
التثبيت والوصف
يبدأ تثبيت React-360 بتثبيت CLI الخاص به مع npm ، مما يساعدك في تهيئة مشروع وبدءه وإنشائه بسرعة وسهولة من سطر الأوامر.
بعد تهيئة المشروع ، تلقينا قالب مشروع جاهزًا حيث يكون الملفان الرئيسيان هما client.js و index.js ، بالإضافة إلى مجلد static_assets ، حيث يتم تخزين جميع ملفات aset للعرض و index.html وملفات التكوين الأخرى.
تقديم
يحتوي الملف الأول (client.js) على رمز التقديم ويعمل مع الفئة الرئيسية React360. يحتوي React360 على نوعين من كائنات التجسيد: renderToLocation ، وهو المسؤول عن تقديم كائن ثلاثي الأبعاد ، و renderToSurface ، وهو المسؤول عن تقديم كائن ثنائي الأبعاد. حددنا أيضًا وحدة تحكم للكاميرا ، والتي تصف سلوكها: في حالتنا ، يتم وصف حركة الكاميرا (باعتبارها الشخصية الرئيسية) عن طريق الضغط على أزرار لوحة مفاتيح معينة. ثم قمنا بتعيين الخلفية الافتراضية للمشروع بأكمله وفي السطر الأخير كتب React360 في كائن النافذة (وهو كائن عالمي لتطبيقات المستعرض).
بعد ذلك ، يتم استدعاء أسلوب init من React360 في ملف index.html كما يلي:
في الملف الثاني (index.js) ، يتم تسجيل المكونات في التطبيق ، لغرض استخدامها مرة أخرى للتقديم في ملف client.js.
وبالتالي فإن تدفق التدفق للعنصر (الكائن) يخرج كما يلي:
أ) إنشاء في ملف منفصل ؛
ب) التسجيل في index.js ؛
ج) تقديم في client.js.
المواقع
اللحظة التالية هي وضع كائن في طائرة ثلاثية الأبعاد. في React-360 ، عند تحديد الموضع ، كما هو الحال في التقديم ، هناك اختلافات بين الكائنات ثلاثية الأبعاد والكائنات ثنائية الأبعاد. يمكن وضع الكائنات ثلاثية الأبعاد بطريقتين.
- عبر الموقع عند التقديم.
- عبر التحويل في الكائن نفسه.
اخترنا التحويل في الموقع الافتراضي ، كما ينصح موقع React-360 الرسمي. الترجمة هي المسؤولة عن تحديد المواقع في الطائرة ثلاثية الأبعاد.
يتم وضع الكائنات ثنائية الأبعاد باستخدام النظام المرن ، كما في React Native ، والتي في حالتنا كانت غير مريحة تمامًا:
لوضع الزر على يمين الكاميرا ، كان عليك إنشاء طريقة عرض ، كما هو الحال في React Native ، وقم بتعيين عرضه المطابق للمسافة من أقصى اليسار من الشاشة إلى المكان الذي يجب أن يكون فيه الكائن ، والارتفاع المقابل للمسافة من النقطة العليا من الشاشة إلى المنطقة ، حيث يجب أن يكون الكائن. كان من الضروري أيضًا تعيين أنماط معينة بحيث يكون المحتوى الداخلي موجودًا في الركن الأيمن السفلي من العرض. نتيجة لذلك ، يبدو كل شيء مرهقًا وغير مريح ، فمن الأسهل استخدام نفس الترجمة لوضع مثل هذه الكائنات ، وتقديمها ككائنات ثلاثية الأبعاد بعمق 0.
استيراد الكائنات
العنصر التالي هو استيراد كائنات ثلاثية الأبعاد إلى React-360. وهنا ، للوهلة الأولى ، كل شيء بسيط وواضح. يوجد مكون Model قياسي يحتوي على مصدر props يقبل كائن JS للمسار إلى ملفات .obj (ملف الكائن نفسه) و .mtl (الملف المادي لهذا الكائن):
ولكن حتى هنا كانت هناك مطبات مثيرة للاهتمام. خلاصة القول هي أن ملف .mtl يحتوي على مخطط خريطة افتراضيًا بتنسيق .tga والمسار المحدد على قرص الشخص الذي قام بتطويره. لم يكن علينا فقط تغيير المسار إلى الملفات يدويًا ، ولكن أيضًا تغييرها إلى .png ، نظرًا لأن ملفات بتنسيق tga. لم يتم عرضها في المستعرض. سمح لنا تنسيق .png بتقديم القوام بشكل صحيح.
إضاءة
نظرًا لأن نظام الإضاءة لم يكن موصوفًا في الوثائق على الإطلاق ، فقد اضطررت للذهاب إلى التعليمات البرمجية المصدر react-360 والعثور على شيء هناك يتعلق بـ Lights ، ثم ابحث في أمثلة عن من كان يفعل ماذا وكيف يعمل مع حديقة الحيوان هذه. بالتجربة والخطأ ، اكتشفنا ذلك ، وطبقه على نماذج AmbientLight و SpotLight و PointLight. إن موضعها هو نفس موضع الكائنات ثلاثية الأبعاد ، ولكن هناك أيضًا زاوية:
لم يتم تطبيق الضوء على الكائن ، لكننا لم نتراجع ، وبعد بحث طويل وتجولنا في العديد من القضايا في مستودع التفاعل - 360 ، واجهنا الحاجة إلى وضع الدعائم مضاءة ، وفقط بعد ذلك بدأ الضوء في العمل على الكائن.
الحركة
لقد اتخذنا الكاميرا الرئيسية كلاعب رئيسي ننفذ به الحركة والإجراءات. للقيام بذلك ، كتبوا جهاز التحكم عن الكاميرا ، حيث قاموا بتهيئة الوظيفة الرئيسية للواجهة:
الذي ينقل الوضع الحالي للكاميرا وتدويرها. يمكنك العمل معهم في الكاميرا للتغيير وفقًا لبعض الأحداث ، فقد ضغطنا على أزرار WASD كحدث (كالمعتاد) ، وبعد ذلك أردنا استبدالها بالضغط على الزر والانتقال إلى الإحداثي الذي تم فيه الضغط على الزر ، بحيث ثم استبداله مع وحدة تحكم VR. من أجل حلوة ، قاموا بتعيين سرعة الحركة والمسافة التي عملوا بها. لقد حصلنا على حركة مع تشنجات ونقص كامل في الفيزياء: صعدنا من خلال القوام ، وخرجنا من الحدود ، إلخ. في الوثائق ، لم يتم وصف الفيزيائي من كلمة "بشكل عام" (ومن حيث المبدأ ، فإن كلمة مماثلة ليست "صديقة للعبة" في هذه المرحلة من الغمر تصبح مألوفة).
الخاتمة
على الرغم من أن React-360 يعمل مع Three.js و WebGL ، إلا أنه غير مناسب تمامًا لحل مثل هذه المشكلات ؛ علاوة على ذلك ، ربما لم يكن الغرض منه هو تطوير اللعبة. React-360 يقوم بعمل ممتاز من خلال العروض التقديمية ثلاثية الأبعاد ، والجولات الافتراضية للكائنات ، ومشاهدة الصور البانورامية ، إلخ.
ولكن حتى لو تعهدت بالقيام بمثل هذه الأشياء في هذه المجموعة التكنولوجية ، فستواجه صعوبة في شكل وثائق ضعيفة ، مما سيجبرك على قضاء ساعات في حل مهمة صغيرة وبسيطة على ما يبدو.
JS, React, JSX, ( ), , , React, React Native. - .
الوحدة
بعد كل العذاب ، قررنا استخدام الأداة الثانية ضمن كفاءاتنا. هذه المرة وقع الاختيار على Unity ، حيث أن لدى الفريق مطورين C #.
التثبيت والوصف
التثبيت بسيط للغاية - تنزيل عادي وفك أدوات التوزيع من الموقع الرسمي. هناك واحد "لكن": الوحدة حتى الآن تعمل فقط على Windows و Mac (من الإصدار 10). لذلك ، كان علينا الانتقال من أوبونتو إلى ماك.
نظرًا لأن Unity هو محرك ألعاب يتضمن واجهة مستخدم جيدة ومريحة ، يتم إنشاء المشروع بنقرة بسيطة على الزر ، وبعد ذلك يمكنك الحصول على قالب كامل من الملفات الضرورية. في الأساس ، كل شيء يكمن في مجلد الأصول.
تقديم
نظرًا لأن المحرك نفسه يتم عرضه ، فلست بحاجة إلى تسجيل أي شيء.
المواقع
الموضع سهل مثل التقديم. يكفي سحب الكائن إلى الحقل والعمل مع المنزلق بالشكل المناسب أو في واجهة المستخدم الرسومية المريحة. كما هو الحال مع التقديم ، فإن الموقف لا يتطلب تسجيل أي شيء.
استيراد الكائنات
Drag'n'Drop بسيط ، مبدئيًا داخل Asset في المجلد المناسب ، ثم عملية مماثلة في حقل واجهة المستخدم الرسومية. لا يوجد كود.
إضاءة
العمل مع الإضاءة بسيط مثل الفقرات السابقة. يتم إنشاء إضاءة جديدة في علامة التبويب المناسبة للمشروع. يوصف النظام أيضًا بتفاصيل كافية في الوثائق.
الحركة
هذه هي النقطة الأولى حيث تحتاج إلى رمز شيء. وهي سلوك اللاعب والكاميرا أثناء الحركة. بالنسبة لنظام الحركة ، استخدمنا نظام NavMesh ووكلائه. لقد حددنا المنطقة التي يمكنك المشي فيها في واجهة المستخدم الرسومية ، وحددنا الكاميرا والطراز كعامل في نظام الملاحة. ثم قمنا بإنشاء برنامج نصي ، ويتم ذلك ببساطة شديدة في واجهة المستخدم الرسومية:
- الكائن محدد ؛
- يتم إضافة الزر "إضافة مكونات" ؛
- يختار سيناريو جديد
- الاسم مكتوب.
وفويلا - يتم إنشاء قالب البرنامج النصي القياسي في المجلد الجذر. نحتاج فقط إلى نقله إلى مجلد البرامج النصية وفتحه (بشكل افتراضي ، يتم فتحه في VS ، وهو مريح للغاية). يحتوي قالب البرنامج النصي القياسي على واجهة سهلة الاستخدام في شكل وظيفتين:
- البدء - يستخدم عند تكوين المكونات ؛
- تحديث - دعا في كل إطار.
في وظيفة البدء ، قمنا بإغلاق المؤشر في وسط الشاشة وقمنا بتسجيل مكوننا في الخاصية المقابلة للفئة ، وقمنا أيضًا بإعلان المعلمات الافتراضية للخصائص المتبقية.
في وظيفة التحديث ، كتبنا منطق دوران الكائن خلف المؤشر ، وكذلك حركة الكائن بالنقر:
الخاتمة
بالإضافة إلى الاستنتاج الواضح إلى حد ما حول راحة الوحدة ، أود أن أشير إلى أنه من أجل العمل على الوحدة لا يمكنك أن تكون مبرمجًا على الإطلاق. لدى الوحدة العديد من البرامج التعليمية الرائعة للمبتدئين ، وهي وثائق بسيطة وواضحة للغاية ، فضلاً عن وثائق مستفيضة عالية الجودة ومجتمع نشط ونشط.