חווית משתמש

GGWP: בואו נדבר על הרידיזיין של League of Legends

רותי זסלבסקי | 5 בפברואר 2017

רובכם ודאי שמעתם על ענף הeSports, או הספורט הדיגיטלי בעברית. קבוצות מאוגדות, מתחרות בשידור חי בקרבות וטורנירים במשחקי רשת. ואחרי שהצגתי את התיאור היבשושי שאולי יותר מתאים לאמא שלי לנסח – מדובר בגיימינג מקצועי, טירוף שלא יבייש את ה- NBA בכמות הצופים, בכסף שהתעשייה גורפת ובהתלהבות והחגיגות של האוהדים.

מהבולטים בתחום הוא League of Legends (ר"ת: LoL) שלRiot Games – משחק MOBA ("זירת קרב מרובת משתתפים") עם יותר מ100 מיליון שחקנים פעילים מרחבי העולם, אצטדיונים שמתמלאים עד אפס מקום במשחקי האליפות, ועשרות מיליוני צפיות במשחק גמר האליפות השנתית – פיזית ואונליין.

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

LoL בקליפת אגוז

קצת לפני שאצלול לסקירה של השינוי האמיץ, אסביר בקצרה מהו המשחק: שתי קבוצות של 5 שחקנים מתחרות זו מול זו על מפה של שלושה נתיבים. המטרה – לכבוש את בסיס האויב ולהוריד את הצריח הראשי, כאשר בדרך יש להוריד כמה שיותר צריחים משניים ואת שחקני האויב. קצב המשחק מאוד מהיר (מדובר בסשנים של בין 20-60 דקות למשחק) והוא משלב אלמנטים של אסטרטגיה, דורש מהירות תגובה וקבלת החלטות בפרקי זמן של מאית השניה.
בואו נגיד שהוא נמצא על הטווח בין "כדורסל פנטזיה" לבין שח-מט.

עושים סדר: מאיפה הגיע הצורך ברידיזיין?

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

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

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

Riot Games התייחסו לנושא ברגישות, ושיתפו את קהילת השחקנים בכל השינויים: יצאו פוסטים רבים באתר בנושא ונאסף פידבק בזמן אמת משרת הבטא (PBE) הקבוע שיש למשחק.

העיצוב עצמו

חלוקה לנקודות

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

  1. פרפורמנס – תיעדוף האלמנטים והכובד שלהם, כלומר כיצד לייצר את סביבת המשחק היפה והמרשימה אך הקלה ביותר, שתרוץ בצורה חלקה גם על המחשבים החלשים יותר (אלא אם כן המחשב שלך הוא טוסטר). אם אלמנט גרפי יחסית כבד לאחרים – עליו להיות חשוב ולהצדיק את היותו מכביד.
  2. מהימנות חזותית (Visual Fidelity)– יצירת סביבה מהימנה לקונספט ועלילת המשחק, שתוכל להכיל בטבעיות את כל 130+ הדמויות שניתן לשחק איתן. אין אחידות קונספטואלית בין הדמויות, כהחלטה. הטווח נע בין רובוטים ומפלצות ולדמויות פנטזיה קלאסיות כגון קשתים ואבירים, ועל הסביבה להיות טבעית לכל אלו.
  3. משחקיות – על אף שהשינוי החזותי יהיה ניכר, המטרה הייתה להשאיר את פריסת המפה כמעט ללא שינוי. השינויים שהוכנסו היו עדינים ביותר .Don't fix it if it ain't broken.
  4. אחידות נושאית – כאמור, בעוד שהנפשות הפועלות על-גבי המפה שונות קונספטואלית וחזותית – על הסביבה להיות קוהרנטית לעצמה ולכל האלמנטים הקבועים להיות טבעיים לה. עולם שלם ומשכנע.
  5. קריאות ושקיפות (Clarity and Readability) – יצירת היררכיה חזותית. למעשה, זה היה מושג המפתח שהנחה את צוות העיצוב והאיפיון במשימתם.

יצירת היררכיה

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

  1. הראשון בחשיבותו הוא ה-UI (נתונים על המשחק, כמה HP ו- Mana יש  למשתמש ברגע נתון, מה מתרחש על המיני-מפה, ה- Inventory וכדומה). הוא גם היחיד ברשימה שנמצא מחוץ ל"עולם המשחק", לכן עליו להיות מובדל מספיק.
  2. אנימציות הסקילים וההתקפות.
  3. הנפשות הפועלות – הדמויות של שתי הקבוצות ומפלצות ה- NPC. היררכית הדמויות עצמן נמוכה מזו של הסקילים, שכן כאשר ישנו סקיל פעיל, הוא דורש קבלת החלטה מיידית (להתקדם, לסגת, להבליג וכו').
  4. הסביבה (Enviroment). האלמנט היחיד הלא אינטראקטיבי, הקנבס עליו מתרחש המשחק.

את ההבחנה ההיררכית יצרו Riot על-ידי קונטרסט, רוויה ובהירות של צבעים (lightness and saturation), ורמת ירידה לפרטים באיור. פשוט מאוד – מה שפחות חשוב, פחות בוהק. החלטה זו איפשרה להם להקל על המיקוד והריכוז, מבלי לגרוע מעושר הסביבה והפרטים באיור (שחשובים לא פחות ליצירת עולם שלם ואמין, שיהיה מהנה לבלות בו שעות על גבי שעות במשך שנים).

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

גם בהשוואה למפה הקודמת – הקונטרסט בצמחיה בולט ומסיח פחות. העושר ואמינות הסביבה נותרו כפי שהיו, אך בזכות הורדת רמת הפירוט והקונטרסט הם הפכו ממכלול של יחידות רבות המעמיסות על המסך, לרקע עשיר ("עץ+עץ+עץ+עץ" לעומת "יער").

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

נותנים קצת ערך מוסף

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

ועוד לא הגענו לכל הEaster Eggs!

וקצת על עיצוב טוב

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

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

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

הייתי יכולה לכתוב לנצח, אבל לא הכל בפעם אחת.

אז TTYL

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

כתיבת תגובה

האימייל לא יוצג באתר.

הוספת תגובה בפייסבוק