תמיכה בכמה גורמי צורה וגודל מסך

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

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

  • טלפונים ניידים
  • טאבלטים
  • טלוויזיות וממירים לטלוויזיה
  • מחשבים ניידים עם Android Runtime for Chrome

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

  • טלפון בכיוון לרוחב עם יחס גובה-רוחב של 19:9 (2280x1080)
  • טלפון אחר בפריסה לרוחב עם יחס גובה-רוחב של 20:9 (3,200x1,400)
  • טלוויזיה באיכות HD ‏(1080p) עם יחס גובה-רוחב של 16:9 ‏(1920x1080)
  • טאבלט עם יחס גובה-רוחב של 4:3 (2048x1536)

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

רזולוציית המסך

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

הגדרת הרזולוציה הבסיסית

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

  1. בסרגל התפריטים של Godot, בוחרים באפשרות Project -> Project Settings… (פרויקט -> הגדרות פרויקט…).
  2. בחלון Project Settings, מאתרים את הרשימה Display בכרטיסייה Category ובוחרים באפשרות Window.
  3. בקטגוריה Size, מגדירים בשדות Width ו-Height את רזולוציית הבסיס הרצויה בפיקסלים.
הגדרות הרוחב והגובה של פרויקט Godot
איור 1. השדות רוחב וגובה בהגדרות הפרויקט

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

המלבן של רזולוציית הבסיס בתצוגת הדו-ממד של כלי העריכה של Godot
איור 2. מלבן הרזולוציה הבסיסית בתצוגת 2D של עורך Godot, כשהרזולוציה הבסיסית מוגדרת ל-640x360 פיקסלים

הגדרות מתיחה

שתי הגדרות קובעות איך הרזולוציה הבסיסית מותאמת כשהיא שונה מרזולוציית התצוגה: מצב מתיחה ומתיחת יחס הגובה-רוחב. ההגדרות האלה נמצאות בחלון Project Settings (הגדרות הפרויקט), בקטע Display -> Window (תצוגה -> חלון).

הגדרות פרויקט של Godot stretch
איור 3. השדות Stretch Mode (מצב מתיחה) ו-Stretch Aspect (יחס גובה-רוחב של מתיחה) בProject Settings (הגדרות הפרויקט)

למצב מתיחה יש שלוש הגדרות: disabled,‏ 2d ו-viewport. בקטע הבא יש דוגמאות ויזואליות של הגדרות שונות של Stretch Aspect ו-Stretch Mode. כל הדוגמאות מבוססות על רזולוציית בסיס של 320x180 פיקסלים.

ההגדרה disabled לא משנה את הגודל של הרזולוציה הבסיסית או מתאימה אותה. המערכת תמיד מתעלמת מהערך של Stretch Aspect אם Stretch Mode מוגדר ל-disabled.

מצב מתיחה מושבת ברזולוציית תצוגה של 320x180
איור 4. מצב מתיחה disabled ברזולוציית מסך של 320x180

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

מצב מתיחה מושבת ברזולוציית תצוגה של ‎256x128
איור 5. מצב מתיחה disabled עם רזולוציית מסך של ‎256x128

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

מצב מתיחה מושבת ברזולוציית מסך של ‎512x256
איור 6. מצב מתיחה disabled ברזולוציית מסך של 512x256

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

ההגדרה Stretch Aspect מציינת אילוצים שחלים על שינוי הגודל כדי לשמור על יחס הגובה-רוחב של רזולוציית הבסיס. האפשרויות של ההגדרה Stretch Aspect (שינוי יחס הגובה-רוחב) מפורטות בקטע בנושא יחס גובה-רוחב. בדוגמאות הבאות מוצגת ההגדרה 2d Stretch Mode עם Stretch Aspect של ignore, שמשנה את גודל התמונה בהתאם לרזולוציית המסך ללא הגבלות:

מצב מתיחה דו-ממדי עם רזולוציית תצוגה של ‎256x128
איור 7. מצב מתיחה 2d עם רזולוציית מסך של 256x128
מצב מתיחה דו-ממדי עם רזולוציית מסך של ‎512x256
איור 8. מצב מתיחה 2d ברזולוציית מסך של 512x256

ההגדרה viewport מגדירה את Viewport של סצנת הבסיס לרזולוציית הבסיס. הפלט המעובד של השורש Viewport מותאם לרזולוציית המסך. אובייקטים של Godot Viewport משמשים ליצירת תצוגות במסך, או ליצירת תצוגות משנה בתוך אובייקט אחר של Viewport. בניגוד להגדרה 2d, ההגדרה viewport לא חלה על סינון כשמשנים את קנה המידה לרזולוציית המסך. ההגדרה viewport משתמשת גם בערך של Stretch Aspect כדי לקבוע אם יחולו אילוצים על שינוי הגודל כדי לשמור על יחס הגובה-רוחב. ההגדרה viewport עדיפה על ההגדרה 2d כשנדרש דיוק מושלם ברמת הפיקסל, כי הרינדור הראשי עדיין מתבצע ברזולוציית הבסיס. בהמשך מופיעות דוגמאות להגדרה viewport Stretch Mode עם Stretch Aspect של ignore:

חלון תצוגה במצב מתיחה עם רזולוציית מסך של ‎256x128
איור 9. מצב מתיחה viewport ברזולוציית מסך של 256x128
אזור תצוגה במצב מתיחה עם רזולוציית מסך של ‎512x256
איור 10. מצב מתיחה viewport ברזולוציית מסך של 512x256

יחס גובה-רוחב

Stretch Aspect כולל כמה אפשרויות להגבלות על שינוי קנה מידה של יחס הגובה-רוחב. אם ההגדרה Stretch Aspect מוגדרת לערך ignore, לא מוחלות אילוצים. כשהאפשרות מתיחת יחס הגובה-רוחב מוגדרת ל-keep, הרזולוציה הבסיסית משתנה בהתאם לממדים הגדולים ביותר האפשריים שמתאימים לרזולוציית המסך, תוך שמירה על יחס הגובה-רוחב המקורי. אזורים בתצוגה שלא מכוסים על ידי התמונה המותאמת ממולאים בפסים שחורים. בהתאם לממד הדומיננטי של ההבדל ביחס הגובה-רוחב, הפסים יהיו פסים אופקיים שנקראים letterboxes, או פסים אנכיים שנקראים pillarboxes.

אזור תצוגה במצב מתיחה, שמירה על יחס הגובה-רוחב במצב מתיחה, עם רזולוציית מסך של ‎384x256
איור 11. מצב מתיחה viewport, מתיחת יחס הגובה-רוחב keep, ברזולוציית מסך של 384x256
אזור תצוגה במצב מתיחה, שמירה על יחס הגובה-רוחב במתיחה, עם רזולוציית מסך של 512x200
איור 12. מצב מתיחה viewport, מתיחת יחס גובה-רוחב keep, ברזולוציית מסך של 512x200

ההגדרה Stretch Aspect כוללת שני וריאנטים של ההגדרה keep: keep_width ו-keep_height. אם המדיניות keep_width מוגדרת, נוסף Pillarboxing אם יחס הגובה-רוחב של רזולוציית המסך רחב יותר מיחס הגובה-רוחב של רזולוציית הבסיס. עם זאת, אם יחס הגובה-רוחב של רזולוציית המסך גבוה יותר מיחס הגובה-רוחב של הרזולוציה הבסיסית, האזור הנוסף יישאר ריק. האזור הריק ימלא את החלק התחתון של המסך.

אזור תצוגה במצב מתיחה, יחס גובה-רוחב במצב מתיחה keep_width, עם רזולוציית מסך של 512x384
איור 13. מצב מתיחה viewport, מתיחת יחס גובה-רוחב keep_width, ברזולוציית מסך של 512x384

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

חלון תצוגה במצב מתיחה, יחס גובה-רוחב של מתיחה עם שמירה על הגובה, ברזולוציית תצוגה של ‎512x200
איור 14. מצב מתיחה viewport, מתיחת יחס גובה-רוחב keep_height, ברזולוציית מסך של 512x200

ההגדרה הסופית של Stretch Aspect (שינוי יחס הגובה-רוחב) היא expand. ההגדרה expand שומרת על יחס הגובה-רוחב של הרזולוציה הבסיסית, אבל משאירה את האזור העודף ריק במקום להוסיף פסים בפורמט letterbox או pillarbox.

חלון תצוגה במצב מתיחה, הרחבת יחס הגובה-רוחב במצב מתיחה, עם רזולוציית מסך של ‎384x256
איור 15. מצב מתיחה viewport, מתיחת יחס הגובה-רוחב expand, עם רזולוציית מסך של 384x256
חלון תצוגה במצב מתיחה, הרחבת יחס הגובה-רוחב במצב מתיחה, עם רזולוציית מסך של ‎512x256
איור 16. מצב מתיחה viewport, מתיחת יחס הגובה-רוחב expand, ברזולוציית מסך של ‎512x256

תווי עוגן

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

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

לחצן בקרה שנבחר עם מאפייני עוגן ושוליים שמוצגים בכלי לבדיקת רכיבים
איור 17. אמצעי בקרה Button נבחר, והמאפיינים Anchor ו-Margin גלויים בכלי לבדיקת רכיבים

ל-Godot יש כלי Layout שמאפשר להגדיר במהירות את המאפיינים Anchor,‏ Margin ו-Size לערכים מוגדרים מראש שמשמשים בדרך כלל. כשבוחרים Controlאובייקט נגזר בעורך, התפריט הנפתח פריסה זמין בסרגל הכלים שמעל תצוגת הסצנה. ההגדרות הקבועות מראש של הכלי פריסה כוללות מיקום ומיקום בשילוב עם גודל. הגדרות המיקום המוגדרות מראש תומכות בתרחישי שימוש כמו: מיקום במרכז, הצמדה לפינה הימנית העליונה, הצמדה למרכז בצד שמאל. הגדרות קבועות מראש של מיקום וגודל כוללות תרחישי שימוש כמו הצמדה לחלק התחתון תוך כיסוי כל הרוחב של רכיב האב.

התפריט הנפתח של פריסת העורך ב-Godot
איור 18. בתפריט הנפתח פריסה של כלי העריכה של Godot

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

שדה תצוגה

ל-Godot יש הגדרות של שדה הראייה ששולטות בהצגה של סצנה תלת-ממדית ביחסי גובה-רוחב שונים. ההתאמות של שדה הראייה נשלטות באמצעות המאפיין Keep Aspect של אובייקט Camera. ערך ברירת המחדל של Keep Height מיועד לפרויקטים שמופעלים במצב לרוחב. Keep Height משתנה לשדה ראייה רחב יותר או צר יותר כשיש הבדל בין יחסי הגובה-רוחב של רזולוציית הבסיס ורזולוציית המסך. ההגדרה Keep Width מתאימה יותר לפרויקטים שמופעלים בפריסה לאורך. Keep Width התצוגה מותאמת לשדה ראייה גבוה או נמוך יותר בהתאם להבדל ביחס הגובה-רוחב.

שליטה באזור התצוגה

Viewport אובייקטים מאפשרים שליטה מדויקת ביחס הגובה-רוחב ובשינוי הגודל. בפרויקטים אפשר להשתמש ב-Viewports כדי לבצע פעולות כמו:

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

דוגמאות לשימוש באובייקט Viewport מופיעות במאמר בנושא Godot Viewport.

קלט של משתמשים

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

בפרויקטים שבהם אפשר להשתמש לסירוגין בנגיעות ובעכבר, Godot כולל אפשרויות proxy שיוצרות אירועי נגיעה מאירועי עכבר ולהפך. האפשרויות האלה מייתרות את הצורך בכתיבת קוד נפרד לטיפול בקלט של אירועי עכבר ומגע. האפשרויות הזמינות הן: הדמיית מגע באמצעות עכבר והדמיית עכבר באמצעות מגע. שתי האפשרויות נמצאות בקטע Project Settings (הגדרות הפרויקט) בקטע Input Devices -> Pointing (מכשירי קלט -> הצבעה).

הגדרות פרויקט ב-Godot למכשירי קלט
איור 19. ההגדרות Input Devices -> Pointing (מכשירי קלט > הצבעה) בהגדרות הפרויקט

מקורות מידע נוספים