GUI Development for multiple platforms

Width Height Aspect Ratio X Aspect Ratio Y Max Height

דגשים למצגת:
מספר שיטות שונות לפיתוח לרזולוציות שונות(יש עוד, ואפשר לשלב בהתאם לצורך):
מריחה - לקווצ'ץ' או למעוך את המסך. נראה יותר ויותר רע ככל שההבדלים בתצוגה ברורים יותר.
Pan and Scan - להשאר עם רזולוציה קבועה, אבל להתמקד רק בחלקים הרלוונטים בסצנה.
Liquid UI - תצוגה נשפכת. אובייקטים בתפריט משנים מיקום ביחס לאובייקטים אחרים, בהתאם למקום על המסך

Pixel Perfect:

*דוגמה של פיקסל פרפקט - רמבו!!!1
Set Pixel Perfect
Rambo Panel On
Change Size
Change Size 2
Set Fixed Size

Resolution Independent:
מה זה?
צורות עבודה שונות לפיתוח ממשק, שלא מסתמכות על רזולוציה ספציפית. למשל, עבודה עם עוגנים במיקומים שונים במסך(לרוב בקצוות המסך).
אפשר לתאר עוגן גם כמו מדף שמונחים עליו חפצים.

מה זה נותן?

* דוגמאות:
רקע, לחצני חצים, ביטלי, סוכריות
Rambo Panel Off
Background Panel On
Objects Panel On

לרוחב
Change Size 2
לגובה
Change Size 2

חושף יותר מהרוחב.
Background Horisontal
חושף יותר מהגובה.
Background Vertical

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

*דוגמאות:
כמו קודם,
הפעם עם פסים שמציגים מה בתמונה ומה לא.
Safe Area Panel On

אז איך מתכננים פרוייקט עם התייחסות לנקודות האלה:
לאיזה מכשירים המשחק מיועד?

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

יחס רזולוציה מינימלי: ברזולוציות הנפוצות היום, 16:9 הכי צר בPortrait, 4:3 הכי צר בLandscape.
5:4 יותר צר, אבל פחות נפוץ.
אם רוצים להיות בטוחים, אפשר ללכת על 1:1, לא מומלץ.(אבל זה יחס רזולוציה של אחד ממכשירי הבלקברי, אם מעניין מישהו)

חשוב שכל מה שהשחקן צריך לראות יהיה גלוי.
איך חשיפה של כיוונים שונים תשפיע על המשחק? האם כיוון מסוים משפיע על השחקן? לחשוף עוד מהכיוון שפחות משפיע.
Jetpack-Joyride-iPhone-aspect-ratio
Jetpack-Joyride-iPad-aspect-ratio

קו ארט שמתאים לשיטת עבודה עם עוגנים והסתמכות על נקודות ביחס למסך:
דוגמאות עם קוים תוחמים:
Run Cow Run
Noogra Nuts

מקורות נוספים:
Dealing with multiple resolutions in mobile games
Safe area guide
Screen Sizes

כדי להמשיך לשחק עם זה:
http://de-panther.com/TestGUI/

אייקונים ורקעים מתוך המשחק Eatly Beatly ועוצבו ע"י יאיר מור

אשמח לשמוע תגובות והערות,
אורן