תבנית מוט מוט

המדריך הזה מתאר את הרכיבים שמרכיבים חוויית טבילה פשוטה, בצורת משחק Charades. משחקים הם תרחיש השימוש המושלם למגוון רחב של משחקים, כי ברובם יש צורך בממשק משתמש מותאם אישית ובפקדי קלט.

בדרך, תלמדו גם טיפים לעיצוב, לפיתוח ולהפצה שחשובים לבניית כלי ה-Glass שלכם.

לפני שמתחילים

המקור המלא של משחק Charades זמין ב-GitHub. כדאי לייבא אותו ל-Android Studio לפני שמתחילים, כי המדריך הזה מתייחס אליו במידה רבה.

  1. במסך 'התחלה מהירה', לוחצים על יציאה מניהול גרסאות > Git.
  2. מעתיקים את כתובת ה-URL של השכפול מ-Charades.
  3. מדביקים את כתובת ה-URL של השכפול בכתובת ה-URL של המאגר של Vcs ולוחצים על שכפול.
  4. לוחצים על כן במסך הבא.
  5. לוחצים על OK במסך הבא.
  6. בונים את הפרויקט ומריצים אותו ב-Glass המחובר על ידי לחיצה על הלחצן Play. חשוב לבדוק את פרטי ההפעלה בREADME של הדוגמה.

מה תלמדו

תלמדו גם איך להשתמש ברכיבים מ-Android SDK כדי לבנות את רוב התוכן של ה-Charades, ולאחר מכן לחקור את ה-GDK כדי להתחבר לחוויית ה-Glass. הנה רשימה של נושאים שתלמדו:

  • תכנון התהליך בממשק המשתמש בעזרת משאבי העיצוב שאנחנו מספקים
  • עיצוב טריגרים קוליים להפעלת Glassware
  • שימוש בפעילויות ב-Android כדי להגדיר את המבנה של ממשק המשתמש של המשחק
  • המערכת יוצרת אפשרויות בתפריט ב-Android שמאפשרות למשתמשים לבחור אפשרויות משחקים
  • שילוב בחוויית Glass באמצעות טריגר קולי בתפריט הראשי
  • שימוש במזהי תנועות של GDK שמזהים קלט של משתמשים ומבצעים פעולות מותאמות אישית
  • ללמוד הטמעות פשוטות של ממשק המשתמש ב-Android שמניבות ליטוש נוסף לפי סגנון Glass
  • ללמוד על תהליך ההפצה ועל מה שאנחנו מחפשים כאשר משיקים את Glassware

העיצוב

לפני שתתחילו לפתח, קחו קצת זמן ועצבו את ה-Glassware. כך תוכלו להבין אילו תהליכים בממשק המשתמש פועלים בצורה הטובה ביותר ב-Glass, באיזו פקודה קולית תשתמשו ואיך הכרטיסים שלכם ייראו.

כמובן שעיצוב Glassware הוא תהליך איטרטיבי, וחלק מהדברים שמעצבים עכשיו ישתנו, אבל חשוב לבצע חלק משמעותי מהעבודה הזו בהתחלה.

תהליך עבודה בממשק המשתמש

עיצוב התהליך בממשק המשתמש הוא תרגיל פשוט שמאפשר לכם להציג באופן ויזואלי את ה-Glassware לפני שתכתבו שורת קוד. כל הזמן אנחנו עובדים על כלי ה-Glass שאנחנו בונים.

בואו נעבור על הרכיבים העיקריים בממשק המשתמש כדי לקבל מושג לגבי אופן הפעולה של ממשק המשתמש, ועד כמה התהליך יכול להועיל כשיוצרים כלי Glassware.

מסך פתיחה

המסך הזה הוא הראשון שהמשתמשים רואים כשהם מתחילים את הרצף של Charades. היא מאפשרת למשתמשים להתמצא לפני שהם נכנסים לחוויית הגיימינג, והיא מבנה כללי של משחק שהמשתמשים מכירים.

כשמשתמשים מקישים על לוח המגע, מופיעה מערכת תפריטים עם שני פריטים: משחק חדש והוראות.

מצב הוראות

כשיוצרים נקודות מבט עמוקות, מנגנוני קלט הם לפעמים חדשניים, ולכן מועיל ליידע את המשתמשים איך הם יכולים לקיים אינטראקציה עם התוכן העשיר, במיוחד במשחק.

קבוצת הכרטיסים הזו מציגה את הוראות המשחק ומנחה את המשתמשים איך לשחק ובאילו תנועות להשתמש כדי לנווט בממשק המשתמש. המשתמשים מגיעים לדף הזה בהקשה על האפשרות הוראות במסך הפתיחה.

מצב גיימפליי

המסכים האלה הם חלק מתהליך הגיימפליי העיקרי. המשתמשים יכולים להגיע לתהליך הזה על ידי הקשה על האפשרות בתפריט משחק חדש במסך הפתיחה.

בקבוצת הכרטיסים הזו מוצגת מילה אקראית (עד 10). כדי שהמשתמשים מדלגים על מילה, הם מחליקים קדימה ומקישים על לוח המגע כשהם מתארים את המילה בצורה נכונה.

מסך תוצאות המשחקים

במסך זה מוצגות תוצאות המשחק. מסך 'המשחק נגמר' מופיע והמשתמשים יכולים להחליק קדימה כדי לראות את תוצאות המשחק. כשמשתמשים יקישו על אחד מכרטיסי התוצאות, האפשרות New Game (משחק חדש) תופיע בתפריט כדי לאפשר להם להתחיל משחק נוסף.

פקודה קולית

תכננו את הפקודה הקולית בשלב מוקדם בתהליך התכנון. הפקודות הקוליות מאפשרות למשתמשים להפעיל את Glassware מהתפריט הקולי של Glass Home (כרטיס השעון), לפי הצורך, והן חלק מרכזי באופן התכנון של Glassware.

לדוגמה, הפקודה Post an update (פרסום עדכון) פועלת היטב במודל אש ושכח שבו משתמשים אומרים את הפקודה, טקסט מסוים וה-Glassware מעבדים אותם בלי התערבות נוספת של המשתמש. כך המשתמשים יכולים לחזור במהירות למה שהם עושים.

לעומת זאת, בפעולות כמו Play a game, בדרך כלל רצוי להפנות את המשתמשים למסך פתיחה כדי שיוכלו להתמצא קודם. מכיוון שסביר להניח שהפקודה הקולית הזו תשתפר, המשתמשים יספיקו לראות מסכים ותפריטים נוספים כדי להתחיל את המשחק. השלכה של המשתמשים מיד לאחר הפקודה הקולית היא בדרך כלל חוויה לא טובה במשחקים.

Charades משתמשת בפקודה הקולית Play a game . אחרי שהמשתמשים יפעילו את הפקודה הקולית, מסך הפתיחה של Charades יופיע עם בקשה למשתמשים מקישים כדי להציג אפשרויות נוספות (במקרה הזה משחק חדש או הוראות).

פריסות כרטיסים

מומלץ להשתמש ב-CardBuilder או בפריסות XML כשאפשר, גם אם אתם יוצרים מקומות מוצלחים וגם אם אתם רוצים ליצור כרטיסים בשידור חי.

לעיתים קרובות עדיין תצטרכו ליצור פריסה משלכם, לכן חשוב לפעול בהתאם להנחיות בממשק המשתמש כדי לקבל את ה-Glassware שהכי ייראו.

שעון העצר תואם להנחיות הפריסה הכלליות, אבל יש לו פריסות מותאמות אישית של ממשק המשתמש באמצעות רכיבים סטנדרטיים של Android כמו תצוגות ופריסות.

פיתוח

כדי לפתח הצללים, משתמשים באותם כלים שמשמשים לפיתוח של Android כדי לבנות את רוב מוצרי ה-Glassware, ולאחר מכן משתמשים בממשקי ה-API שבתוסף 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 – הצליל שיושמע כשמשתמשים עוברים על כל 10 המילים.
  • 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 מתוארים הרכיבים העיקריים של ה-Glassware, כדי שהמערכת תדע איך להריץ אותם. במניפסט של Charades מופיעים הפרטים הבאים:

  • הסמל והשם של ה-Glassware. Glass מציג את המידע הזה בתפריט המגע הראשי אם יותר מ-Glassware אחד מגיב לאותה פקודה קולית.
  • כל הפעילויות שמשויכות ל-Charades. הפעולה הזו נדרשת כדי שהמערכת תוכל לדעת איך להתחיל את הפעילות של ה-Glassware.
  • הפקודה הקולית ומסנן Intent שמפעילים פעילות ספציפית כשהפקודה הקולית נאמרת.
  • קוד גרסה של ה-Glassware. יש לעדכן את הקוד הזה (ובדרך כלל גם את שם הגרסה) בכל פעם שמעלים גרסה חדשה של ה-APK הזה ל-MyGlass.