יצירת משחק AR באמצעות AR Foundation של Unity's

1. סקירה כללית

‫ARCore הוא מסגרת העבודה של Google ליצירת חוויות במציאות רבודה בסמארטפונים. אפשר להשתמש ב-AR Foundation של Unity כדי ליצור אפליקציות AR בפלטפורמות שונות.

מה תפַתחו

ב-Codelab הזה תבנו משחק פשוט באמצעות AR Foundation. מטרת המשחק היא לאסוף חבילות באמצעות מכונית שאתם שולטים בה באמצעות מכשיר שניתן להחזיק ביד.

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

בסיום ה-codelab הזה, המשחק שלכם יוכל:

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

מה תלמדו

  • איך מגדירים פרויקט שמשתמש ב-AR Foundation של Unity.
  • איך משתמשים ב-ARPlaneManager כדי להירשם לתוכניות חדשות.
  • איך משתמשים ב-Raycast כדי למצוא נקודות חיתוך עם גיאומטריה וירטואלית
  • איך משתמשים ב-ARLightEstimationData כדי להאיר את הסצנה.

הדרישות

2. הגדרת סביבת הפיתוח

בשלב הזה תכינו את הסביבה לפיתוח באמצעות AR Foundation של Unity.

מוודאים שהמכשיר תואם ל-AR

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

הגדרת ניפוי באגים ב-USB במכשיר

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

התקנה של Unity (2020.3 LTS)

ב-Workstation, מתקינים את Unity 2020 LTS. ב-codelab הזה מוצגים צילומי מסך של ממשק המשתמש של Unity בגרסה 2020.3 (LTS). יכול להיות שגרסאות אחרות של Unity יפעלו, אבל יכול להיות שיידרשו שלבים נוספים. יכול להיות שהממשק בפועל יהיה שונה מצילומי המסך שמוצגים כאן.

יצירת פרויקט חדש

יוצרים פרויקט חדש באמצעות התבנית Universal Render Pipeline. נותנים לו שם תיאורי ומיקום מתאים, ולוחצים על יצירה.

התקנת המסגרות הנדרשות

אפשר למצוא את AR Foundation של Unity במנהל החבילות של Unity.

  1. פותחים אותו על ידי לחיצה על Window > Package Manager (חלון > ניהול חבילות).

  1. בחלון הזה, מתקינים את החבילות שבהן תשתמשו ב-codelab הזה. כדי לראות את הגרסאות העדכניות של המסגרות האלה, מרחיבים את הרשומה שלהן באמצעות הסמל ►. מתקינים את הגרסאות העדכניות של כל אחת מהמסגרות הבאות:
    • AR Foundation
    • ‫ARCore XR Plugin

בסיום התהליך, מנהל החבילות אמור להיראות בערך כך:

התקנת חבילת המתחילים

ב-codelab הזה סיפקנו חבילת התחלה שמכילה רכיבים מוכנים מראש וסקריפטים שיעזרו לכם להשלים חלקים מסוימים ב-codelab במהירות, כדי שתוכלו להתמקד בשימוש ב-AR Foundation.

  2. כדי להתקין את חבילת המתחילים, פותחים את Assets > Import Package > Custom Package...‎ (נכסים > ייבוא חבילה > חבילה מותאמת אישית...) ופותחים את starter-package.unitypackage.
  3. בחלון הקופץ, מוודאים שהכול מסומן.
  4. לוחצים על ייבוא.

שינוי הגדרות הבנייה

מכיוון שהאפליקציה תפעל ב-Android, צריך לשנות את פלטפורמת הבנייה ל-Android:

  1. פותחים את File > Build Settings (קובץ > הגדרות בנייה).
  2. בחלונית פלטפורמה, בוחרים באפשרות Android.
  3. אופציונלי: מפעילים את האפשרויות גרסת פיתוח וניפוי באגים בסקריפט כדי לשמור את מידע על תוצאות ניפוי הבאגים בזמן שהאפליקציה פועלת.
  4. לוחצים על החלפת פלטפורמה.

שינוי הגדרות הפרויקט

צריך להגדיר את AR Foundation כך שמערכות XR יאותחלו בהפעלה.

  1. פותחים את Edit > Project Settings...‎ (עריכה > הגדרות הפרויקט...) ולוחצים על הקטע XR Plug-in Management (ניהול פלאגינים של XR).
  2. בכרטיסייה Android, מפעילים את ARCore.

  1. בחלונית הימנית, לוחצים על הקטע נגן.
  2. בכרטיסייה Android, בקטע Other Settings (הגדרות אחרות), מסירים את Vulkan מGraphics APIs (ממשקי API של גרפיקה).

  1. אפליקציות שנדרש בהן AR ומשתמשות ב-ARCore דורשות רמת API של 24 לפחות. גוללים למטה ומחפשים את האפשרות רמת API מינימלית. מגדירים את רמת ה-API המינימלית ל-24.

הוספת רכיבים נדרשים לסצנה

תבנית Universal Render Pipeline כוללת כמה אובייקטים של משחקים שלא תשתמשו בהם במדריך הזה.

  1. מחיקה של כל האובייקטים של המשחק ב-SampleScene.

  1. הוספה של אובייקטים של AR Foundation. לוחצים לחיצה ימנית בחלונית היררכיה. בתפריט הזה אפשר להוסיף:
  • ‫XR > AR Session: האובייקט הזה שולט במחזור החיים של חוויית AR.
  • ‫XR > AR Session Origin: האובייקט הזה משנה את הקואורדינטות של AR לקואורדינטות של עולם Unity.
  • ‫Light > Directional Light (תאורה > תאורה כיוונית): מספק מקור אור להארת אובייקטים במשחק.

ההיררכיה שלכם צריכה להיראות כך:

  1. מרחיבים את AR Session Origin שיצרתם בהיררכיה ובוחרים באובייקט AR Camera. בחלון הבדיקה, משנים את התג שלו ל-MainCamera.

הגדרת עיבוד

כדי ש-Unity's Universal Render Pipeline יהיה תואם ל-AR Foundation, צריך לבצע בו שינוי אחד.

  1. בחלונית Project (פרויקט), עוברים אל Assets > Settings (נכסים > הגדרות) כדי למצוא את הנכס ForwardRenderer.

  1. בוחרים באפשרות ForwardRenderer.
  2. בחלונית Inspector, משתמשים באפשרות Add Renderer Feature (הוספת תכונת רכיב עיבוד) כדי להוסיף AR Background Renderer Feature (תכונת רכיב עיבוד של רקע AR). הרכיב הזה יציג את פיד המצלמה בסצנה.

אימות ההגדרה

  1. מוודאים שהמכשיר מחובר לחשמל ושהאפשרות 'ניפוי באגים ב-ADB' מופעלת.
  2. לוחצים על קובץ > Build והרצה... האפליקציה תועלה למכשיר ותופעל אחרי ההתקנה.
  3. פיד המצלמה אמור להופיע במסך המכשיר.

בשלב הבא מתחילים להוסיף פונקציונליות לאפליקציה.

3. זיהוי מטוסים בעולם האמיתי

אחרי שמגדירים סצנה בסיסית, אפשר להתחיל לפתח את המשחק. בשלב הזה, תזהו את המישורים ותציירו אותם בסצנה.

הוספת רכיב ARPlaneManager

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

  1. בחלונית Hierarchy (היררכיה), יוצרים GameObject ריק.
  2. משנים את השם ל-Driving Surface Manager. הרכיב הזה יציג מטוסים עד שהשחקן יבחר אחד מהם.
  3. בוחרים את אובייקט המשחק החדש. בחלונית Inspector, לוחצים על Add Component (הוספת רכיב) כדי להוסיף AR Plane Manager (כלי לניהול מישורי AR).

  1. מגדירים את ARPlaneManager על ידי הגדרת השדה Plane Prefab:
    1. לוחצים על הלחצן לצד None כדי להציג את החלון Select GameObject (בחירת אובייקט GameObject).
    2. לוחצים על הכרטיסייה נכסים ומחפשים את מישור משטח הנסיעה.

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

  1. משנים את Detection Mode ל-Horizontal. ההגדרה הזו קובעת ש-ARPlaneManager יספק רק מישורים אופקיים, שמתאימים במיוחד לנהיגה.

הוספת רכיב ARRaycastManager

‫ARRaycastManager חושף את הפונקציונליות של raycast. בשלב הבא נשתמש באובייקט הזה כדי לספק את אמצעי הבקרה למשתמש.

  1. מוודאים שהאובייקט שנקרא Driving Surface Manager מסומן בחלונית Hierarchy.
  2. ב-Inspector, לוחצים על Add Component כדי להוסיף רכיב ARRaycastManager לאובייקט המשחק.

אין צורך בהגדרות נוספות לרכיב הזה.

הוספת רכיב DrivingSurfaceManager

DrivingSurfaceManager הוא סקריפט עזר מחבילת Starter שמאפשר לבחור ARPlane. אחרי שבוחרים ARPlane, כל שאר המטוסים מוסתרים והמטוסים החדשים מושבתים.

  1. מוודאים שהאובייקט שנקרא Driving Surface Manager מסומן בחלונית Hierarchy.
  2. ב-Inspector, לוחצים על Add Component כדי להוסיף רכיב DrivingSurfaceManager לאובייקט המשחק.

אין צורך בהגדרות נוספות לרכיב הזה.

הפעלת האפליקציה

  1. לוחצים על File > Build And Run...‎ (קובץ > בנייה והפעלה) כדי לבדוק את השינויים.
  2. מכוונים את המכשיר אל משטח אופקי בעולם האמיתי ומזיזים את המכשיר כדי לשפר את ההבנה של ARCore לגבי העולם.

  1. כש-ARCore מזהה מישור, אמור להופיע טקסטורה של אדמה שמכסה את פני השטח בעולם האמיתי. הפונקציה ARPlaneManager יוצרת מופע של Plane Prefab לכל מישור שזוהה. ל-Prefab‏ Driving Surface Plane יש רכיב ARPlaneMeshVisualizer שיוצר רשת עבור ARPlane נתון.

בשלב הבא, תשתמשו במישור שזוהה כשדה משחק.

4. ביצוע בדיקה של מיקום המצביע במישורים שזוהו

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

יצירת כוונת

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

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

הוספת הכוונת

  1. בחלונית Project (פרויקט) בחלק התחתון של המסך, עוברים אל Assets > Starter Package (נכסים > חבילת התחלה).
  2. ממקמים את Reticle Prefab בסצנה על ידי גרירה שלו אל Hierarchy pane של הפרויקט.
  3. בוחרים את הכוונת בהיררכיה.
  4. בכלי לבדיקת רכיבים, לוחצים על Add Component (הוספת רכיב). מוסיפים את הסקריפט ReticleBehaviour מהחבילה למתחילים. הסקריפט הזה מכיל קוד boilerplate לשליטה בכוונת.
  5. הסקריפט ReticleBehaviour תלוי ב-Driving Surface Manager שיצרתם קודם, לכן צריך להוסיף את התלות על ידי לחיצה על בורר Driving Surface Manager. לוחצים על הכרטיסייה סצנה ובוחרים את Driving Surface Manager.

עריכת ReticleBehaviour

הסקריפט ReticleBehavior ימקם את הכוונת במישור שנמצא במרכז אזור התצוגה של המכשיר.

  1. פותחים את הסקריפט ReticleBehaviour.cs באמצעות לחיצה כפולה על השדה Script.
  2. קובעים את מרכז המסך באמצעות התכונה 'מצלמה' ViewToScreenPoint. עורכים את השיטה Update() כדי להוסיף את הפרטים הבאים:
var screenCenter = Camera.main.ViewportToScreenPoint(new Vector3(0.5f, 0.5f));
  1. משתמשים בנקודה הזו כדי לבצע raycast. מוסיפים את הפרטים הבאים:
var hits = new List<ARRaycastHit>();
DrivingSurfaceManager.RaycastManager.Raycast(screenCenter, hits, TrackableType.PlaneWithinBounds);

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

  1. כדי לקבוע את נקודת העניין של החיתוך, שולחים שאילתה לרשימה hits. תנו עדיפות למטוס הנעול שמופיע ב-DrivingSurfaceManager, ואם הוא לא קיים, השתמשו במטוס הראשון שפגעתם בו. מוסיפים את הטקסט הבא לסוף הקובץ Update():
CurrentPlane = null;
ARRaycastHit? hit = null;
if (hits.Length > 0)
{
    // If you don't have a locked plane already...
    var lockedPlane = DrivingSurfaceManager.LockedPlane;
    hit = lockedPlane == null
        // ... use the first hit in `hits`.
        ? hits[0]
        // Otherwise use the locked plane, if it's there.
        : hits.SingleOrDefault(x => x.trackableId == lockedPlane.trackableId);
}
  1. אם התוצאה מופיעה ב-hit, מעבירים את הטרנספורמציה של GameObject למיקום ההיט.
if (hit.HasValue)
{
    CurrentPlane = DrivingSurfaceManager.PlaneManager.GetPlane(hit.Value.trackableId);
    // Move this reticle to the location of the hit.
    transform.position = hit.Value.pose.position;
}
Child.SetActive(CurrentPlane != null);

בדיקת הכוונת

  1. לוחצים על File > Build And Run...‎ (קובץ > בנייה והפעלה) כדי לבדוק את השינויים.
  2. כשמכוונים את המכשיר למטוס, אמורה להופיע כוונת שעוקבת אחרי התנועות של המצלמה.

יצירת רכב

השחקן ישלוט במכונית צעצוע שתנוע לכיוון המיקום של הכוונת. חבילת המתחילים כוללת מודל והתנהגות של המכונית הזו.

הוספת CarManager לסצנה

  1. בהיררכיה, יוצרים GameObject חדש וריק.
  2. משנים את השם ל-Car Spawner.
  3. בוחרים את האובייקט שיצרתם. בחלונית Hierarchy, לוחצים על Add Component (הוספת רכיב) כדי להוסיף את הרכיב CarManager.
  4. מגדירים את התלויות של CarManager על ידי לחיצה על הכלי לבחירה של כל שדה:
    • ‫Car Prefab: ב-Assets, בוחרים באפשרות Car Prefab.
    • כוונת: בסצנה, בוחרים באפשרות Reticle Prefab.
    • המרכז לניהול משטחי נהיגה: בקטע Scene (סצנה), בוחרים באפשרות Driving Surface Manager (המרכז לניהול משטחי נהיגה).

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

נהיגת מבחן

  1. לוחצים על File > Build And Run (קובץ > בנייה והרצה) כדי לבדוק את השינויים.
  2. כשמקישים על מטוס, אמורה להופיע מכונית קטנה במיקום הזה. המכונית תעקוב אחרי הכוונת.

הוספת רכיב המשחק

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

  1. יוצרים GameObject חדש וריק בהיררכיה.
  2. משנים את השם ל-Package Spawner.
  3. בוחרים את האובייקט שיצרתם. בחלונית Hierarchy, לוחצים על Add Component כדי להוסיף את הרכיב PackageSpawner.
  4. מגדירים את התלויות של PackageSpawner על ידי לחיצה על הכלי לבחירה של כל שדה:
    • ‫Package Prefab: ב-Assets, בוחרים באפשרות Package Prefab.
    • המרכז לניהול משטחי נהיגה בסצנה, בוחרים באפשרות המרכז לניהול משטחי נהיגה.

ההתנהגות הזו של PackageSpawner יוצרת חבילה חדשה במיקום אקראי ב-ARPlane נעול, אם עדיין אין חבילה.

בדיקת המשחק

  1. לוחצים על File > Build And Run (קובץ > בנייה והרצה) כדי לבדוק את השינויים. ‫2. אחרי שיוצרים מכונית, אמורה להופיע חבילה.
  2. נוסעים ברכב אל החבילה.
  3. הוא יופיע שוב במיקום אקראי.

5. הגדרת הערכת התאורה

אחרי שסיימתם ליצור את המשחק הבסיסי, תוכלו להוסיף לסצנת ה-AR מגע של מציאות. בשלב הזה, תשתמשו ב-Lighting Estimation API של ARCore כדי לזהות את התאורה שקיימת בעולם האמיתי על סמך פריימים נכנסים מהמצלמה. המידע הזה ישמש להתאמת התאורה בסצנה לתאורה בעולם האמיתי.

הפעלת הערכת תאורה

  1. בקטע Hierarchy, מרחיבים את AR Session Origin ובוחרים באובייקט AR Camera.
  2. ב-Inspector, מרחיבים את הסקריפט AR Camera Manager.
  3. משנים את השדה Lighting Estimation (הערכת תאורה) לEverything (הכול).

שינוי התאורה הכיוונית

  1. בהיררכיה, בוחרים באובייקט Directional Light.
  2. מוסיפים את הרכיב LightEstimation. הרכיב הזה מחבילת Starter מספק קוד boilerplate להרשמה לשינויים בתאורה.
  3. בפונקציה FrameReceived(), מוסיפים:
ARLightEstimationData lightEstimation = args.lightEstimation;

if (lightEstimation.averageBrightness.HasValue)
    Light.intensity = lightEstimation.averageBrightness.Value;

if (lightEstimation.averageColorTemperature.HasValue)
    Light.colorTemperature = lightEstimation.averageColorTemperature.Value;

if (lightEstimation.colorCorrection.HasValue)
    Light.color = lightEstimation.colorCorrection.Value;

if (lightEstimation.mainLightDirection.HasValue)
    Light.transform.rotation = Quaternion.LookRotation(lightEstimation.mainLightDirection.Value);

if (lightEstimation.mainLightColor.HasValue)
    Light.color = lightEstimation.mainLightColor.Value;

if (lightEstimation.mainLightIntensityLumens.HasValue)
    Light.intensity = lightEstimation.averageMainLightBrightness.Value;

if (lightEstimation.ambientSphericalHarmonics.HasValue)
{
    RenderSettings.ambientMode = AmbientMode.Skybox;
    RenderSettings.ambientProbe = lightEstimation.ambientSphericalHarmonics.Value;
}

בדיקת השינויים

  1. לוחצים על File > Build And Run (קובץ > בנייה והרצה) כדי לבדוק את השינויים.
  2. כשמסתכלים על האובייקטים בסצנה, אפשר לראות שהצבע שלהם משתנה בהתאם לתאורה בסביבה.
  3. אם אפשר, כדאי לשנות את התאורה. לדוגמה, אפשר לנסות לכבות את האורות בחדר שבו אתם נמצאים. התאורה של האובייקטים אמורה להשתנות בהתאם לשינוי בתאורה בעולם האמיתי.

6. סיכום

מזל טוב! הגעתם לסוף ה-Codelab הזה בנושא Unity AR Foundation.

מה נכלל

  • איך מגדירים פרויקט בסיסי באמצעות AR Foundation ו-Universal Rendering Pipeline של Unity.
  • איך משתמשים ב-ARPlaneManager כדי להירשם לתוכניות חדשות.
  • איך משתמשים ב-Raycast כדי למצוא נקודות חיתוך עם גיאומטריה וירטואלית.
  • איך משתמשים ב-ARLightEstimationData כדי להאיר את הסצנה.

השלבים הבאים

משימות בונוס

אם רוצים להרחיב את המשחק שיצרתם כאן, הנה כמה רעיונות שיכולים לעזור:

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