SpriteKit מתקדם - כיצד ליצור משחק 2.5D (חלק א ')

הקדמה

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

תחילת אתגר הרפסודה

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

אחרי סוף השבוע היה לנו אב טיפוס שנראה כך:

Raft Challenge זכה בהאקתון. החברה הודיעה כי תספק את המשאבים לשיפור המשחק.

בוא נעשה את זה 2.5D!

עם תחילת הפרויקט, היה ל- Raft הגרפיקה הפשוטה ביותר האפשרית. הנוף עבר ישירות על מרקם קרקע שטוח, עם עיגולים צבעוניים שהצביעו על השחקן ועל האויבים. זה היה יפה ופשוט כמו הקוד שלמטה. ואז בא הגרפיקאי שלנו ופישל הכל. הוא אמר, "בוא נעשה את זה 2.5D!" האתגר התקבל והאנימציה שלמעלה הייתה התוצאה.

הוא הופיע שוב לאחר ההאקתון. הפעם זה היה קצת יותר ממשפט.

זה היה חיוך מרושע והסרטון הזה:

פרספקטיבה מוסברת

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

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

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

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

ישנם שני כללים:

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

הערה: רצועת החוף אינה מגיעה לנקודת ההיעלמות. זה נעצר איפשהו באמצע ומשאיר את האזור השקוף מאחור.

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

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

מונטאז 'של הסצנה

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

בואו נראה איך זה נראה ב- Raft Challenge.

התחל מלמטה:

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

2. נקודת המבט מפלסת עצים עם השתקפויות מכשולי חוף

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

3. אופי

  • אם יש מכשול במיקום הקרוב ביותר האפשרי, מיקום Z עשוי להיות גבוה יותר מזה של הדמות, ובמקרה כזה המכשול יכסה את הדמות, רצוי

4. ממשק משתמש

  • גרפיקה טובה צריכה להיות תלויה באשליות וטריקים במקום חומרה

סיכום

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

תוכלו לקרוא את חלק 2 בסדרה זו כאן.

על המחבר: Kamil Ziętek הוא מפתח iOS באתר www.allinmobile.co