התאמת גרפיקה ליחסי מסך שונים

כיום פרויקט Unity חייב להיות מוצג כראוי על 16:9, 18:9, 19.5:9, 4:3 (אייפד), 1:1 (מכשירים מתקפלים) ו-21:9 (מסכים אולטרה-רחבים). אם ממשק המשתמש עוצב רק באמצעות Canvas Scaler עם Screen Match Mode = Match Width Or Height והמספר הקסום 0.5 — באייפד ממשק המשתמש יזוז, ב-21:9 יהיו פסים ריקים או אלמנטים חתוכים. שליטה בהתאמת יחסי מסך היא המפתח לעקביות ממשק המשתמש.

צוות המהנדסים שלנו לפיתוח משחקים עם ניסיון של 10 שנים (מעל 50 פרויקטים של התאמת גרפיקה) מספק התאמה מלאה: מביקורת ממשק משתמש ועד הטמעת Aspect Ratio Manager. אנו מבטיחים תצוגה נכונה בכל המכשירים, מגובה בניסיון של 10+ שנים — ממסכים אולטרה-רחבים ועד מכשירים ניידים עם Dynamic Island. צרו קשר להערכת פרויקט.

למה Canvas Scaler לא פותר את הבעיה

ה-Aspect Ratio Manager המותאם אישית שלנו אמין פי 5 מהסתמכות על Canvas Scaler בלבד. Canvas עם גדלים קבועים. כפתור המעוגן לפינה הימנית-תחתונה, במעבר מ-16:9 ל-21:9, נסחף מחוץ למסך — כי מיקומו מוגדר בפיקסלים מוחלטים, לא דרך Anchors כראוי. זה מסמן שממשק המשתמש נבנה במקור ללא התחשבות ביחסי מסך משתנים.

איך לטפל ב-Safe Area במכשירים ניידים

Safe Area במכשירים ניידים. באייפונים עם Dynamic Island ובמכשירי אנדרואיד עם מצלמות punch-hole, הפינה העליונה של המסך תפוסה פיזית. אם שורת הסטטוס וכפתורי המשחק לא מתחשבים ב-Screen.safeArea — ממשק המשתמש מוסתר על ידי חיתוך המצלמה. Unity לא מחיל Safe Area על Canvas אוטומטית — צריך סקריפט שקורא את Screen.safeArea ומעדכן את ה-RectTransform השורשי. לפי תיעוד ה-Safe Area של Unity, יש לטפל ב-Safe Area ידנית.

התאמת המצלמה האורתוגרפית ליחסים שונים

מצלמת משחק אורתוגרפית עם Orthographic Size קבוע. במשחק דו-ממדי עם Camera.orthographicSize = 5 קבוע, מעבר מ-16:9 ל-4:3 אומר שהשחקן רואה פחות מהעולם אופקית. עבור משחק פלטפורמה, זה אומר שהדמות לא יכולה לראות מכשולים בזמן. פתרון: חישוב דינמי של Orthographic Size באמצעות רוחב מטרה: orthographicSize = targetWidth / (2 * Camera.aspect).

איך לבחור אסטרטגיה: Letterbox, Pillarbox או Crop

שלוש אסטרטגיות למילוי יחסי מסך לא תואמים. לכל משחק יש את שלו. משחק לחימה על 21:9: pillarbox (פסים בצדדים) נראה מוזר — עדיף crop עם הרחבת זירה. אסטרטגיה באייפד: letterbox לא רצוי — עדיף להציג יותר מפה. בחירת אסטרטגיה היא החלטה עיצובית, אבל חייבת להתקבל במפורש וליושם טכנית.

1. קבעו את הז'אנר ומכשירי היעד.
2. בחרו יחס מסך ראשי (עצבו את ממשק המשתמש עבורו).
3. עבור יחסים אחרים החליטו: letterbox, pillarbox או crop.
4. יישמו דרך Camera Viewport Rect או מצלמות נפרדות.

גישה מעשית: Camera Viewport Rect ו-Multiple Canvas

Camera Viewport Rect. עבור Letterbox/Pillarbox אנו שולטים ב-camera.rect בהתאם ליחס המסך הנוכחי. עבור 21:9 על תוכן 16:9: חשבו את ה-Viewport Rect הנדרש כך שאזור המשחק יהיה ממורכז, ופסים מצוירים דרך מצלמה נפרדת עם רקע בצבע אחיד.

Multiple Canvas ו-Reference Resolution. חלקו את ממשק המשתמש למספר Canvases עם הגדרות קנה מידה שונות. HUD (בריאות, מיני-מפה) — Canvas Scaler Scale With Screen Size, Match = 1 (Match Height). דיאלוגים ותפריטים — Match = 0 (Match Width). זה נותן קנה מידה צפוי יותר עבור קטגוריות אלמנטים שונות.

מהניסיון שלנו: התאמת משחק אסטרטגיה נייד

משחק אסטרטגיה נייד, שוחרר ב-iOS ואנדרואיד. הפיתוח נעשה עבור iPhone 14 (19.5:9). בבדיקות על iPad Pro (4:3) גילינו: פאנל המשאבים התחתון נחתך, מפת העולם הציגה רק 60% מהשטח הנדרש, וכפתור ה-"Attack" היה מכוסה על ידי Safe Area. הפתרון לקח 5 ימים: כתבנו AspectRatioManager עם שלושה פרופילים (צר: < 1.6, סטנדרטי: 1.6–2.0, רחב: > 2.0), עבור כל פרופיל Anchor Presets נפרדים לאלמנטים קריטיים בממשק המשתמש, בתוספת Safe Area Controller. בדיקה סופית על 7 מכשירים עם יחסי מסך שונים — כל המסכים תקינים.

public class AspectRatioManager : MonoBehaviour
{
    public enum AspectProfile
    {
        Narrow,
        Standard,
        Wide
    }

    private AspectProfile currentProfile;

    void Update()
    {
        float ratio = (float)Screen.width / Screen.height;
        if (ratio < 1.6f)
            currentProfile = AspectProfile.Narrow;
        else if (ratio <= 2.0f)
            currentProfile = AspectProfile.Standard;
        else
            currentProfile = AspectProfile.Wide;

        ApplyProfile();
    }

    void ApplyProfile()
    {
        // Apply anchor presets and camera rect based on profile
    }
}

התאמה ברמת Shader

התאמה ברמת Shader. עבור תמונות רקע (מסך טעינה, תפריט ראשי) — shader עם פרמטר Tiling שמתאים UVs ליחס המסך הנוכחי. התמונה לא נמתחת או נחתכת, אלא מתקפלת עם מסגור חכם (מקביל ל-CSS public class AspectRatioManager : MonoBehaviour { public enum AspectProfile { Narrow, Standard, Wide } private AspectProfile currentProfile; void Update() { float ratio = (float)Screen.width / Screen.height; if (ratio < 1.6f) currentProfile = AspectProfile.Narrow; else if (ratio <= 2.0f) currentProfile = AspectProfile.Standard; else currentProfile = AspectProfile.Wide; ApplyProfile(); } void ApplyProfile() { // Apply anchor presets and camera rect based on profile } } ).

בדיקות על מכשירים אמיתיים

אנו משתמשים ב-Unity Device Simulator (Window → General → Device Simulator) לבדיקות מקדימות. אבל בדיקות סופיות הן רק על מכשירים אמיתיים: iOS Safe Area מחושב אחרת בסימולטור מאשר באייפון פיזי.

מטריצת בדיקות:

תוצרים כלולים

• דוח ביקורת ממשק משתמש עם דוח בעיות (2–3 ימים)
• Aspect Ratio Manager עם חבילת Unity (1–2 שבועות)
• סקריפט Safe Area Controller למכשירים ניידים
• Shaders מותאמים אישית לרקע עם מסגור חכם
• תיעוד פריסת ממשק המשתמש ואסטרטגיית ההתאמה
• סרטון הדרכה לצוות שלכם
• 30 ימי תמיכה לאחר המסירה

לוחות זמנים ומחירים משוערים

ביקורת ממשק משתמש טיפוסית מתחילה ב-$500, והתאמה מלאה יכולה לחסוך עד $2,000 בתיקונים לאחר השחרור. המחיר מחושב באופן אישי לפי מורכבות הפרויקט. חיסכון בזמן בתיקונים לאחר השחרור יכול להגיע ל-40% מהתקציב.

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