PracticU

יצירת תפריט ראשי

בלי כתוביותעם כתוביות
PracticU › קורס פיתוח משחקים יוניטי - Unity - שפת #C › יצירת תפריט ראשי
מילון מושגים:
כפתור - רכיב בממשק המשתמש שהמשתמש לוחץ עליו כדי להפעיל פעולה, כמו שליחת טופס או מעבר לדף אחר.
אירוע - התרחשות שהמערכת מזהה ויכולה להגיב לה, כמו לחיצת עכבר, הקשה או סיום פעולה.
תמונה - קובץ גרפי המוצג על המסך. בהקשר של וירטואליזציה או Docker, תבנית מוכנה שממנה יוצרים מכונה או קונטיינר.
מתודה - פונקציה המוגדרת בתוך מחלקה ומתארת פעולה שאובייקטים מאותה מחלקה יכולים לבצע.
אובייקט - יחידה בתכנות מונחה עצמים שמאגדת נתונים (תכונות) ופעולות (מתודות). נוצר בדרך כלל ממחלקה המשמשת כתבנית.

יצירת תפריט ראשי
בשיעור בונים תפריט ראשי בסצנה נפרדת, ומראים איך לעבור מהתפריט למשחק בלחיצה על כפתור. השיעור מכסה גם את מערכת ה-UI של Unity וגם את המעבר בין סצנות.
השלבים העיקריים
1. סצנה חדשה ו-Canvas: התפריט נוצר בסצנה נפרדת. כשמוסיפים אלמנט UI נוצר אוטומטית Canvas, שמותאם לגודל המסך, ו-Event System, שמטפל בלחיצות.
2. תמונת רקע: תמונה נמתחת על כל המסך, ובתור רקע מוסיפים את גרפיקת המשחק. בלי רקע, האלמנטים שמעל הקנבס יסתירו את מה שמאחוריהם.
3. כותרת וכפתור: הכותרת מוסיפה Image ומחוברת לחלק העליון, והכפתור מוגדר לגודל 240 על 100 פיקסלים עם טקסט בולט. ניתן לשנות צבעי הדגשה ולחיצה.
4. כפתור שקוף: אם הגרפיקה של הכפתור כבר מכילה את הטקסט, מבטלים את תמונת הכפתור ונשאר רק הטקסט.
5. יישור ועוגנים: מגדירים נקודת עוגן ואופסט, בעזרת Shift ו-Alt, כדי שהאלמנט יישאר במקום הנכון בכל גודל מסך.
6. מעבר לסצנה: במחלקת MenuManager מוסיפים מתודה ציבורית שקוראת ל-SceneManager.LoadScene עם שם הסצנה Game. לפני כן יש להוסיף את שני השדות, ולייבא את המרחב UnityEngine.SceneManagement.
7. Build Settings: בהגדרות הבנייה מוסיפים את הסצנות לרשימה, והתפריט מוגדר במקום הראשון כדי שייטען ראשון.
שימו לב
המרצה ממליץ לשמור את המעבר בין הסצנות באובייקט מנהל אחד בלבד, ולא לתת לכל אובייקט גישה לכל המעברים וה-UI. כך הקוד מסודר יותר.

פרקי ההרצאה: יצירת תפריט ראשי

  1. 00:00

    מבוא: סצנת תפריט ו-UI ביוניטי

  2. 00:41

    הוספת תמונת רקע ו-Canvas

  3. 01:50

    עוגנים ומיקום אלמנטים במסך

  4. 02:30

    יחידות פיקסל והגודל של הקנבס

  5. 03:31

    מתיחת רקע על כל המסך

  6. 04:42

    הוספת כותרת ושמירה על פרופורציות

  7. 05:38

    יצירת כפתור והגדרת הטקסט שלו

  8. 06:34

    מצבי כפתור: הדגשה ולחיצה

תמלול ההרצאה: יצירת תפריט ראשי

הטקסט המלא של הדקות הראשונות בהרצאה «יצירת תפריט ראשי» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:03

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

  2. 00:30

    אם אני לוחץ פה על כפתור ימני אני יכול ליצור פה אובייקטים יש לנו את ה-empty אנחנו מכירים 2D 3D Object וכן כאן הלאה ופה למטה יש לי את ה-UI עכשיו הדבר הראשון שאני הולך לעשות זה לשים לי תמונת רקע אז לצורך זה אני פשוט לוחץ פה על אימייג' ושימו לב שקרו לי פה כמה דברים

  3. 00:51

    האימייג' מופיע פה הוא מופיע בתוך קנבאס קנבאס זה הצורה שבה יוניטי עובד עם UI יש לי פה קנבאס שיודע למתוח את עצמו לפי הגודל של המסך הגודל של המצלמה יש לי Event System שנוצר לי, אנחנו לא צריכים להסתכל עליו בכלל, הוא

  4. 01:12

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

  5. 01:32

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

  6. 02:01

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

  7. 02:36

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

  8. 03:02

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

  9. 03:35

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

  10. 03:53

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

  11. 04:14

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

  12. 04:31

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

  13. 04:54

    אני אגרור אותו לכאן אני אגדיל אותו נניח 500 על 300 עכשיו אם אני רוצה לשמור על פרופורציה של הגרפיקה אז יש לי פה את האופציה של preserve aspect ואז בעצם לא משנה מה איך אני אגדיל את זה בסופו של דבר הפרופורציות יישארו אותו דבר והגרפיקה לא מתעוותת לי אני אקרא לאובייקט הזה title ואני אעגן אותו למעלה ואני אגדיר לו שהפוזיציה שלו יהיה

  14. 05:25

    מינוס 100 זה נראה לי נחמד סביר ועכשיו אני רוצה רק להוסיף פה כפתור. כפתור ימני פה, UI Button, ובואו נראה מה נוצר לנו.

  15. 05:38

    יש לנו פה כפתור, אני רוצה לשנות את הפרופורציות שלו ל-240 ל-100 נניח. עכשיו יש לי פה, בתוך הכפתור נוצר לי גם טקסט וגם אותו אני יכול לשנות.

  16. 05:54

    כמובן, אני אקרא לזה פליי. יש לי פה את הפונט, אפשר גם לייבא פונטים ל-Unity ולשנות ולהשתמש בהם.

  17. 06:04

    יש לי פונט סטייל, נגדיר לו בולד, נגדיר אותו 100 עכשיו הכפתור כבר קטן מדי בשביל להציג את הטקסט אז נגדיל אותו ל-120 הנה יש לנו פליי מה שאני כן לצורך סתם לצורך אני תכף אדגים משהו אבל אז אני מה שאני רוצה לעשות זה בעצם לבטל את הגרפיקה של הכפתור ולהשתמש רק בטקסט אני אבטל את האימג' אבל לפני זה אני רק רוצה להראות שיש לנו פה מה

  18. 06:29

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

  19. 06:51

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

  20. 07:16

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

לקורס המלא: קורס פיתוח משחקים ביוניטי

ההרצאה הקודמת: Sound Effects

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

  • יצירת תפריט לוגין בריאקט
  • מפתח ראשי ואינדקס
  • עיצוב של תפריט עליון עם Bootstrap
  • Dataset - מפתח ראשי - Primary Key

קורסים נוספים במסלול

  • קורס יסודות התכנות - שפת C# .NET - קורס תכנות למתחילים - דוט-נט / סי-שארפ - חומר לימוד של מדעי המחשב