نمط غموض

يصف هذا الدليل المكونات التي تشكّل تجربة اندماج بسيطة في شكل لعبة Charades. وتُعد الألعاب حالة استخدام مثالية للانغماس بأن معظمها يتطلب واجهة مستخدم مخصصة وعناصر تحكم في الإدخال.

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

قبل البدء

المصدر الكامل للعبة Charades متاح على Github. يمكنك استيراده إلى Android Studio قبل البدء، لأن هذا الدليل يشير إليه بكثافة.

  1. من شاشة البدء السريع، انقر على الدفع من إصدار التحكم > Git.
  2. انسخ عنوان URL المستنسَخ من Charades.
  3. الصِق عنوان URL للنسخة في عنوان URL لمستودع Vcs وانقر على نسخ مطابقة.
  4. انقر على نعم في الشاشة التالية.
  5. انقر على OK (حسنًا) في الشاشة التالية.
  6. أنشئ المشروع وشغّله على Glass المرتبطة بالنقر على الزر تشغيل. احرص على التحقق من نموذج README للحصول على تفاصيل الاستدعاء.

ما ستتعرَّف عليه

ستتعلّم طريقة استخدام مكوّنات من حزمة تطوير البرامج (SDK) لنظام التشغيل Android لإنشاء الجزء الأكبر من تجربة اندماج "تشارادس" ثم تجربة GDK للاستفادة من تجربة Glass. إليك قائمة بالمواضيع التي ستتعرف عليها:

  • تصميم تدفق واجهة المستخدم باستخدام موارد التصميم التي نقدمها
  • تصميم العوامل المشغِّلة الصوتية لبدء تشغيل Glassware
  • استخدام أنشطة Android لتحديد بنية واجهة مستخدم اللعبة
  • إنشاء عناصر قائمة Android التي تتيح للمستخدمين تحديد خيارات اللعبة
  • التكامل مع تجربة Glass باستخدام مشغِّل الصوت في القائمة الرئيسية
  • استخدام أدوات رصد إيماءات GDK التي ترصد مدخلات المستخدمين وتنفذ الإجراءات المخصصة
  • تعلَّم كيفية تنفيذ واجهة مستخدم Android البسيطة التي تضفي لمسة مميزة وتتبع نمط Glass
  • تعرّف على عملية التوزيع وما نبحث عنه عند إصدار Glassware

تصميم

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

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

تدفق واجهة المستخدم

يُعد تصميم تدفق واجهة المستخدم تمرينًا بسيطًا، حيث يتيح لك عرض نظارة Glassware قبل كتابة سطر من الشفرة. ونحن نفعل ذلك طوال الوقت لـ Glassware الذي ننشئه!

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

شاشة البداية

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

عندما ينقر المستخدمون على لوحة اللمس، يظهر نظام قائمة يشتمل على عنصرين، لعبة جديدة وتعليمات.

وضع التعليمات

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

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

وضع اللعب

وتشكّل هذه الشاشات مسار اللعب الرئيسي. ويمكن للمستخدمين الوصول إلى هذه العملية من خلال النقر على عنصر القائمة لعبة جديدة من شاشة البداية.

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

شاشة نتائج الألعاب

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

بطلب صوتي

يجب اكتشاف أمر صوتي مبكرًا خلال عملية التصميم. تتيح الأوامر الصوتية للمستخدمين إمكانية تشغيل Glassware من قائمة صوت Glass Home (بطاقة الساعة)، إذا لزم الأمر، وتشكّل هذه الأجهزة جزءًا رئيسيًا من كيفية تصميم Glassware.

على سبيل المثال، يعمل الأمر Post an update (نشر تحديث) بشكلٍ جيد في نموذج تنشيط ونسيان المعلومات، حيث يتحدث المستخدمون عن الأمر ويعالجه بعض النص ويتولى Glassware هذا الأمر بدون أي تدخّل إضافي من المستخدم. وهذا يسمح للمستخدمين بالعودة إلى ما يفعلونه بسرعة.

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

يستخدم Charades الأمر الصوتي تشغيل لعبة . بعد أن يستدعي المستخدمون الأمر الصوتي، تظهر شاشة البداية المائية، ومن ثم تطالب المستخدمين بالنقر للحصول على مزيد من الخيارات (لعبة جديدة أو تعليمات في هذه الحالة).

تنسيقات البطاقة

سواء كنت تنشئ بطاقات تفاعلية أو بطاقات تفاعلية، يجب استخدام تنسيق CardBuilder أو تنسيقات XML متى أمكن.

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

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

التطوير

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

ستستخدم مكونات Android الشائعة بشكل متكرر لإنشاء Glassware، ولكن ضع في اعتبارك أن بعض المفاهيم قد تكون مختلفة في بعض الأحيان. على سبيل المثال، لا تساوي الانغماس في نشاط Android. تُعد تجارب "الانغماس" تجارب مصممة لـ Glass التي تم تصميمها باستخدام واحد أو أكثر من أنشطة Android، بالإضافة إلى العديد من المكونات الأخرى لـ GDK وAndroid SDK.

تتناول بقية أقسام "التطوير" كيفية تنظيم لعبة Charades والمكونات الرئيسية للمشروع الذي استوردته من قبل. من المفيد الآن تثبيت Android Studio بحيث يمكنك المتابعة. يتم تعليق شفرة المصدر نفسها، ولذلك يستعرض هذا القسم الغرض الرئيسي من كل ملف بالإضافة إلى نصائح مفيدة يمكنك تطبيقها على Glassware.

في ما يلي نظرة عامة مختصرة على أهم المكونات الأساسية في Charades:

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

بطلب صوتي

يمكنك إنشاء أوامر صوتية باستخدام ملف مورد XML يحدد الأمر الذي تستخدمه، ثم من خلال تحديد مورد XML في ملف AndroidManifest.xml.

الملفات التالية مرتبطة بالأمر الصوتي لـ Charades:

  • res/xml/voice_trigger_play_a_game .xml: يذكر هذا الخيار الطلب الصوتي الذي تريد استخدامه.
  • AndroidManifest.xml - يعلن عن النشاط ليبدأ عند قول الأمر الصوتي.

نشاط شاشة البداية

شاشة البداية هي أول ما يراه المستخدمون عند بدء تشغيل Charades وتوجيهها قبل بدء اللعبة.

الملفات التالية مرتبطة بهذا النشاط:

  • res/layout/activity_start_game.xml - للإعلان عن تنسيق شاشة البداية.
  • res/menu/start_game.xml - للإعلان عن نظام القائمة لشاشة البداية، والذي يحتوي على عناصر قائمة التعليمات ولعبة جديدة.
  • res/values/dimens.xml: يذكر أبعاد البطاقات العادية وحشوها التي تستخدمها أنشطة هذا المشروع لاتباع نمط Glass.
  • src/com/google/android/glass/sample/charades/StartGameActivity.java - الفئة الرئيسية في شاشة البداية.
  • res/drawable-hdpi/ic_game_50.png - رمز القائمة للعبة جديدة.
  • res/drawable-hdpi/ic_help_50.png - رمز القائمة للتعليمات.

نموذج اللعبة

من الأفضل دائمًا فصل نموذج اللعبة (حالة اللعبة) عن واجهة المستخدم. يتتبع صف CharadesModel نتيجة اللعبة وعدد العبارات التي تم تخمينها في وضع اللعب والتعليمات المتنوعة وما إذا كان المستخدمون قد مروا بها في وضع التعليمات أم لا.

الملفات التالية مرتبطة بنموذج اللعبة:

  • src/com/google/android/glass/sample/charades/CharadesModel.java

نشاط الألعاب الأساسي

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

الملفات التالية مرتبطة بهذا النشاط:

  • res/layout/activity_game_play.xml - لتحديد التنسيق الذي تتم مشاركته من خلال أوضاع اللعب وإرشادات التعليمات من Charades.
  • src/com/google/android/glass/sample/charades/BaseGameActivity.java: تحدّد الوظيفة الأساسية لأسلوب اللعب وتعليمات ألعاب Charades المتاحة للجميع.

تعليمات النشاط

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

الملفات التالية مرتبطة بهذا النشاط:

  • src/com/google/android/glass/sample/charades/TutorialActivity.java - توسيع القسم BaseGameActivity، وتحديد نص التعليمات الذي يجب عرضه وكيفية التعامل مع الإيماءات بينما يراجع المستخدمون التعليمات الخاصة باللعبة.

أنشطة الألعاب

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

الملفات التالية مرتبطة بهذا النشاط:

  • GamePlayActivity - توسيع BaseGameActivity وتحتوي على منطق تدفق الألعاب الرئيسي.

نشاط النتائج

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

الملفات التالية مرتبطة بهذا النشاط:

  • res/layout/game_results.xml - لتعريف تنسيق بطاقة "انتهت اللعبة"
  • res/layout/card_results_summary.xml - لتعريف التنسيق لعرض الكلمات التي تم تخمينها ولا يتم تخمينها في قائمة.
  • res/layout/table_row_result.xml - لتحديد تنسيق صف فردي لملخص النتائج.
  • src/com/google/android/glass/sample/charades/GameResultsActivity.java - لتحديد النشاط الفعلي الذي يعرض التنسيقات والقوائم المحددة بواسطة موارد XML المذكورة أعلاه.
  • res/raw/sad_trombone.ogg - الصوت الذي يتم تشغيله عندما لا يستوعب المستخدمون جميع الكلمات.
  • res/raw/triumph.ogg - الصوت الذي سيتم تشغيله عندما يصل المستخدمون إلى الكلمات العشر كلها.
  • res/drawable-hdpi/ic_done_50.png - رمز علامة الاختيار الذي يظهر عند إجراء التخمين بشكل صحيح.

موارد الصور المتحركة

تضيف موارد الصور المتحركة هذه لمسة إضافية إلى Charades:

  • res/anim/slide_out_left.xml - يؤدي هذا إلى تحريك عرض الخروج للخروج إلى اليمين (على سبيل المثال، عند تمرير كلمة).
  • res/anim/slide_in_right.xml - يؤدي هذا إلى تحريك عرض إدخال إلى اليمين من اليسار (على سبيل المثال، عند دخول كلمة جديدة إلى العرض).
  • res/anim/tug_right.xml - يحدد هذا الرسم المتحرك، إذا مررت سريعًا على طريقة عرض لا تستهلك التمرير السريع. يتيح ذلك للمستخدمين معرفة أن التمرير السريع لم يكن له أي تأثير.

بيان Android

يصف ملف AndroidManifest.xml المكونات الرئيسية للأواني الزجاجية حتى يعرف النظام كيفية تشغيلها. يعلن ملف البيان لبرنامج Charades عن الأشياء التالية:

  • رمز Glassware واسمه. يعرض تطبيق Glass هذه المعلومات على قائمة اللمس الرئيسية في حالة استجابة أكثر من جهاز Glassware لأمر صوتي واحد.
  • جميع الأنشطة المرتبطة بلعبة Charades. هذا الأمر مطلوب حتى يعرف النظام كيفية بدء أنشطة Glassware.
  • الأمر الصوتي وفلتر intent يبدأ نشاطًا محددًا عند قول الأمر الصوتي.
  • رمز إصدار لـ Glassware. يجب تحديث هذا الرمز (وعادةً ما يكون اسم الإصدار أيضًا) في كل مرة يتم فيها تحميل إصدار جديد من ملف APK هذا إلى MyGlass.