יצירת אייקונים ואלמנטים לממשק משתמש למשחקים ניידים
ממשק המשתמש של משחק אינו אייקוני אינטרנט או ממשק ארגוני. הוא חייב לעבוד על מסכים מ-4.7" עד 6.7", להישאר קריא במהלך משחק פעיל (בעוד השחקן צופה בפעולה, לא בממשק), ולהעביר את הסגנון של המשחק ללא טקסט. לצוות שלנו יש 5 שנות ניסיון בממשקי משחק: מעל 30 פרויקטים, מהיפר-קז'ואל ועד RPG. נקודות הכאב המרכזיות הן אריזת טקסטורות ללא אובדן ביצועים וסגנון עקבי בכל המסכים. שגיאות ב-9-slice או באטלסים מובילות לשימוש יתר בזיכרון ולירידות FPS. בואו נצלול לאיך להימנע מכך.
גודל מינימלי לנקודת מגע — 44×44pt — Apple HIG.
דרישות טכניות לממשק משתמש במשחק
גדלים וצפיפות
גודל מינימלי לנקודת מגע לפי Apple HIG הוא 44×44pt. לכפתורי משחקי אקשן, 60×60pt או יותר עדיף—שחקנים מקישים בלי להסתכל. אייקוני מלאי קטנים: מ-64×64px עד 128×128px בהתאם לצפיפות המסך.
למה 9-Slice קריטי לכפתורים?
כפתורים ומסגרות לא פשוט נמתחים—הם מתרחבים באמצעות 9-slice: הפינות קבועות, הקצוות נמתחים. ב-Unity, Sprite Editor → Sprite Border מגדיר את הגבולות. כפתור אחד של 40×40px עם 9-slice עובד לכפתור של 80×200px ללא עיוות.
Sprite Atlas: אריזת ממשק משתמש
כל אלמנטי הממשק של מסך אחד נכנסים לאטלס אחד. Unity UI → Canvas → Render Mode: Screen Space Overlay מצייר הכל במעבר אחד אם משתמשים ב-Material/Atlas אחד. אטלסים נפרדים ל-HUD (תמיד על המסך) ולמלאי (נפתח לעיתים רחוקות).
הגדרות צפיפות פיקסלים
לממשק פיקסל ארט: Filter Mode: Point, Compression: None. לממשק מצויר בוקטור: ASTC 6x6 עובד מצוין. אייקונים עם קווים דקים (1–2px) מתמודדים רע עם ASTC—השתמשו ב-ASTC 4x4 או ללא דחיסה.
אלמנטים טיפוסיים בממשק משחק
HUD: ממשק קבוע
פס בריאות, מאנה, ניסיון, ניקוד, טיימר—תמיד על המסך במהלך המשחק. הם צריכים להיות מינימליים בהפרעה: לתפוס את קצוות המסך, לא לכסות את אזור המשחק. אזור בטוח באייפון עם חריץ תמיד נלקח בחשבון.
אייקוני פריטים: מערכת מסגרות
מסגרת עקבית + פריט ייחודי. מערכת: מסגרת לפי נדירות (אפור—נפוץ, כחול—נדיר, זהב—אגדי) + אייקון פריט מעל. מסגרות—אטלס אחד, אייקוני פריטים—נפרד (מתווספים דרך עדכוני תוכן ללא שינוי אטלס המסגרות).
כפתורים: מצבים ואנימציה
רגיל, לחוץ (קנה מידה 0.95 + גוון), מושבת (אטימות 50%). ב-Unity Button: ColorTintTransition או AnimationTransition עם אנימציה דרך Animator. לכפתורים קריטיים (קנייה בכסף אמיתי) — מצב מודגש עם אפקט זוהר.
עוד על אייקוני אפליקציה
משימה נפרדת. iOS דורש סט: 1024×1024 (App Store), בתוספת גדלים שנוצרים אוטומטית דרך Xcode `AppIcon`. אנדרואיד: `mipmap-xxxhdpi` (192×192), `xxxhdpi`, `xxhdpi`, `xhdpi`, `hdpi`, `mdpi`. אייקון אדפטיבי באנדרואיד 8.0+: שכבת חזית + שכבת רקע, לחזית חייב להיות שוליים של 33% מהקצוות—מעטפת המערכת עשויה לחתוך לצורות שונות (עיגול, ריבוע מעוגל).מהניסיון: RPG Collector, Unity
אייקוני פריטים נוצרו כקבצי PNG נפרדים ללא אטלס—200 אייקונים × 2 קריאות ציור כל אחד = 400 קריאות ציור נוספות במסך המלאי. ה-FPS במלאי ירד ל-40. אחרי אריזה ל-2 אטלסים של 2048×2048 — קריאות הציור במלאי הפכו ל-8, וה-FPS הגיע ל-60.
איך אריזת אטלס משפיעה על ביצועים?
שימוש באטלסים מפחית ישירות קריאות ציור. הנה השוואה למסך מלאי טיפוסי:
| סוג אריזה | קריאות ציור | FPS |
|---|---|---|
| ללא אטלס (200 קבצי PNG נפרדים) | 400 | 40 |
| 2 אטלסים 2048×2048 | 8 | 60 |
החיסכון ברור—אריזה נכונה משחררת משאבים למשחק. העלות של אייקון פריט בודד עם מסגרת נעה בין $10 ל-$30 בהתאם למורכבות.
אלמנטי ממשק מונפשים
אפקטי חלקיקים ב-Canvas
Canvas Particle System ב-Unity—מערכת חלקיקים שעובדת במרחב Canvas. לאיסוף מטבעות, אפקטי עליית רמה, פרסים. Sort Layer צריך להיות מעל אובייקטי המשחק אבל מתחת ל-HUD הראשי.
אנימציות Tween: DOTween
DOTween (Unity) או LeanTween הוא הסטנדרט לממשק משחק. קפיצה על פרס: transform.DOPunchScale(Vector3.one * 0.3f, 0.3f). רעד על שגיאה: transform.DOShakePosition(0.3f, 5f). טקסט צף על צבירת XP: DOTween.Sequence() עם Move + Fade.
גופנים בממשק משחק
גופן המשחק הוא חלק מסגנון האמנות. TMP (TextMeshPro) ב-Unity הוא הסטנדרט—רינדור SDF קריא בכל קנה מידה. גופנים קיריליים דורשים יצירת TMP Font Asset נפרד עם סט תווים קירילי (Window → TextMeshPro → Font Asset Creator). גופני גיבוי לאמוג'י או תווים מיוחדים.
תהליך והיקף
מה כלול בפרויקט
- אייקוני פריטים/דמויות/יכולות בסגנון אחיד
- מסגרות לפי נדירות/סוג
- אלמנטי HUD: פסים, מונים, טיימרים
- כפתורים במספר מצבים (רגיל, לחוץ, מושבת)
- פאנלים, מסגרות, רקעי דיאלוג עם 9-slice
- אייקוני אפליקציה ל-iOS ואנדרואיד (כולל אדפטיביים)
- ייצוא בגדלים נכונים + אטלסים מוגדרים ל-Unity/Godot
- במידת הצורך: אלמנטים מונפשים (אייקוני פרסים, אפקטים)
לוח זמנים משוער
ערכת ממשק בסיסית למסך אחד (10–20 אלמנטים): 3–7 ימי עבודה, החל מ-$500. ערכת ממשק מלאה למשחק (HUD, מלאי, תפריטים, חנות, אייקוני פריטים): 1–3 שבועות. העלות מחושבת באופן אישי, בערך מ-$1,500 עד $4,000 בהתאם למורכבות. צרו קשר—נעריך את הפרויקט שלכם תוך יום אחד.
תהליך יצירת ממשק שלב אחר שלב
- הגדירו כיוון סגנוני ואספו הפניות.
- צרו צורות בסיסיות בוקטור או רסטר.
- בדקו על מכשיר אמיתי תוך התחשבות באזור בטוח וצפיפות.
- ארזו לאטלסים עם 9-slice נכון.
- ייצאו עם הגדרות: ASTC לטקסטורות, Point לפיקסל ארט.
אילו פורמטי ייצוא אופטימליים לסוגי אייקונים שונים?
| סוג אייקון | פורמט מומלץ | דחיסה |
|---|---|---|
| פיקסל ארט | PNG, פילטר Point | ללא דחיסה |
| סגנון וקטורי | ASTC 6x6 | ASTC 6x6 |
| קווים דקים (1-2px) | ASTC 4x4 או ללא | ASTC 4x4/ללא |
הזמינו הערכה של הפרויקט שלכם — קבלו ייעוץ על אריזת אטלס וסגנון.