הברק המפתיע של 'Vacation Simulator's' VR Paintbrush Tech PlatoBlockchain Data Intelligence. חיפוש אנכי. איי.

הברק המפתיע של "סימולטור וואקציה" - VR צבעי מברשת צבע

חותמת זמן: 16 באפריל 2019 3:06
הברק המפתיע של 'Vacation Simulator's' VR Paintbrush Tech PlatoBlockchain Data Intelligence. חיפוש אנכי. איי.

לאחר שהוציא את הפופולרי מתמיד עבודה סימולטור ככותרת השקה ל-HTC Vive עוד ב-2016, Owlchemy Labs הוא אחד מאולפני משחקי ה-VR הוותיקים ביותר שקיימים כיום. במהלך השנים הסטודיו בנה בסיס חזק של עיצוב אינטראקציה VR אשר נראה בכל הכותרת החדשה ביותר שלהם, סימולטור נופש. אינטראקציות שעשויות להיראות פשוטות ושמישות לשחקן הן לרוב הרבה יותר מורכבות ממה שהן נראות. מקרה לגופו: איזו טכניקת מכחול מבריקה מפתיעה פשוט מרגיש נכון ב-VR. מפתחים מ- Owlchemy כאן כדי להסביר איך הם בנו אותו.

הברק המפתיע של 'Vacation Simulator's' VR Paintbrush Tech PlatoBlockchain Data Intelligence. חיפוש אנכי. איי.מאמר אורח מאת פיטר גלבריית' וזי יה

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

הברק המפתיע של 'Vacation Simulator's' VR Paintbrush Tech PlatoBlockchain Data Intelligence. חיפוש אנכי. איי.שניהם תורמים חשובים למורשת המשחקים האבסורדיים והמלוטשים ביותר ב- VR ב- Owlchemy Labs, כולל: כותרת עטורת פרסים עבודה סימולטור, מועמד לאמי ריק ומורטי: ריק אליטי וירטואלי, והאחרונה שוחררה סימולטור נופש, שמגיע גם ל-PSVR ו-Oculus Quest בהמשך השנה.

היי לכולם!

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

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

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

הדמיית התחושה של [PAINTBRUSH]

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

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

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

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

.IRPP_kangoo, .IRPP_kangoo .postImageUrl, .IRPP_kangoo .imgUrl, .IRPP_kangoo .centered-text-area { min-height: 100px; עמדה: קרוב משפחה; } .IRPP_kangoo, .IRPP_kangoo:hover, .IRPP_kangoo:visited, .IRPP_kangoo:active { border:0!important; } .IRPP_kangoo { display: block; מעבר: צבע רקע 250ms; webkit-transition: צבע רקע 250ms; רוחב: 100%; אטימות: 1; מעבר: אטימות 250ms; webkit-transition: אטימות 250ms; רקע-צבע: #e6e6e6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); } .IRPP_kangoo:active , .IRPP_kangoo:hover { אטימות: 1; מעבר: אטימות 250ms; webkit-transition: אטימות 250ms; צבע רקע: #FFFFFF; } .IRPP_kangoo .postImageUrl , IRPP_kangoo .imgUrl { מיקום רקע: מרכז; רקע-גודל: כריכה; לצוף: שמאל; שוליים: 0; ריפוד: 0; } .IRPP_kangoo .postImageUrl { רוחב: 30%; } .IRPP_kangoo .imgUrl { רוחב: 100%; } .IRPP_kangoo .centered-text-area { float: right; רוחב: 70%; ריפוד:0; margin:0; } .IRPP_kangoo .centered-text { display: table; גובה: 100 פיקסלים; שמאל: 0; למעלה: 0; ריפוד:0; margin:0; } .IRPP_kangoo .IRPP_kangoo-content { display: table-cell; שוליים: 0; ריפוד: 0 10px 0 10px; עמדה: קרוב משפחה; אנכי-יישר: אמצע; רוחב: 100%; } .IRPP_kangoo .ctaText { border-bottom: 0 מוצק #fff; צבע: #000000; גודל גופן: 13px; מודגש; מרווח אותיות: .125em; שוליים: 0; ריפוד: 0; טקסט-קישוט: קו תחתון; } .IRPP_kangoo .postTitle { color: #2C3E50; גודל גופן: 16px; משקל גופן: 600; שוליים: 0; ריפוד: 0; } .IRPP_kangoo .ctaButton { רקע-צבע: #FFFFFF; שוליים-שמאליים: 10px; מיקום: מוחלט; מימין: 0; למעלה: 0; } .IRPP_kangoo:hover .imgUrl { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .IRPP_kangoo .imgUrl { -webkit-transition: -webkit-transform 0.4s ease-in-out; -moz-transition: -moz-transform 0.4s קלות-in-out; -o-transition: -o-transform 0.4s קלות-in-out; -ms-transition: -ms-transform 0.4s קלות-in-out; מעבר: טרנספורמציה של 0.4 שניות קלות פנימה; } .IRPP_kangoo:after { content: ""; בלוק תצוגה; תנקה את שניהם; }

ראה גם
בלעדי: עיצוב ממשקי מסך מגע וירטואלי של 'הד בודד' ו- 'Echo Arena'

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

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

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

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

הברק המפתיע של 'Vacation Simulator's' VR Paintbrush Tech PlatoBlockchain Data Intelligence. חיפוש אנכי. איי.

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

כעת, כמפתח הראשון שהניח קוד על Painting, פיט הולך לחלוק את תהליך העיצוב שלנו מאחורי התכונה (כולל האיטרציות הרבות שלה!):

אתגרי עיצוב: חזרה ללוח השרטוטים!

כל תכונה ב סימולטור נופש התחיל מאותה סדרת שאלות:

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

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

הברק המפתיע של 'Vacation Simulator's' VR Paintbrush Tech PlatoBlockchain Data Intelligence. חיפוש אנכי. איי.
סימולטור עבודה (2016)

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

.IRPP_kangoo, .IRPP_kangoo .postImageUrl, .IRPP_kangoo .imgUrl, .IRPP_kangoo .centered-text-area { min-height: 100px; עמדה: קרוב משפחה; } .IRPP_kangoo, .IRPP_kangoo:hover, .IRPP_kangoo:visited, .IRPP_kangoo:active { border:0!important; } .IRPP_kangoo { display: block; מעבר: צבע רקע 250ms; webkit-transition: צבע רקע 250ms; רוחב: 100%; אטימות: 1; מעבר: אטימות 250ms; webkit-transition: אטימות 250ms; רקע-צבע: #e6e6e6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); } .IRPP_kangoo:active , .IRPP_kangoo:hover { אטימות: 1; מעבר: אטימות 250ms; webkit-transition: אטימות 250ms; צבע רקע: #FFFFFF; } .IRPP_kangoo .postImageUrl , IRPP_kangoo .imgUrl { מיקום רקע: מרכז; רקע-גודל: כריכה; לצוף: שמאל; שוליים: 0; ריפוד: 0; } .IRPP_kangoo .postImageUrl { רוחב: 30%; } .IRPP_kangoo .imgUrl { רוחב: 100%; } .IRPP_kangoo .centered-text-area { float: right; רוחב: 70%; ריפוד:0; margin:0; } .IRPP_kangoo .centered-text { display: table; גובה: 100 פיקסלים; שמאל: 0; למעלה: 0; ריפוד:0; margin:0; } .IRPP_kangoo .IRPP_kangoo-content { display: table-cell; שוליים: 0; ריפוד: 0 10px 0 10px; עמדה: קרוב משפחה; אנכי-יישר: אמצע; רוחב: 100%; } .IRPP_kangoo .ctaText { border-bottom: 0 מוצק #fff; צבע: #000000; גודל גופן: 13px; מודגש; מרווח אותיות: .125em; שוליים: 0; ריפוד: 0; טקסט-קישוט: קו תחתון; } .IRPP_kangoo .postTitle { color: #2C3E50; גודל גופן: 16px; משקל גופן: 600; שוליים: 0; ריפוד: 0; } .IRPP_kangoo .ctaButton { רקע-צבע: #FFFFFF; שוליים-שמאליים: 10px; מיקום: מוחלט; מימין: 0; למעלה: 0; } .IRPP_kangoo:hover .imgUrl { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .IRPP_kangoo .imgUrl { -webkit-transition: -webkit-transform 0.4s ease-in-out; -moz-transition: -moz-transform 0.4s קלות-in-out; -o-transition: -o-transform 0.4s קלות-in-out; -ms-transition: -ms-transform 0.4s קלות-in-out; מעבר: טרנספורמציה של 0.4 שניות קלות פנימה; } .IRPP_kangoo:after { content: ""; בלוק תצוגה; תנקה את שניהם; }

ראה גם
בלעדי: תכנון קיצורי דרך ביד אחת עבור VR ו- AR

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

'פוטושופ' בלבד

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

מסנן

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

דלי צבע'

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

מיזוג ושקיפות

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

מברשות מרובות

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

- - - - -

אנו מקווים שאתה [רגש] מציירת!

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

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

קרא עוד מאמרים אורחים שנתרמו על ידי מומחים ומקורבים ב-AR ו-VR.

ההודעה הברק המפתיע של "סימולטור וואקציה" - VR צבעי מברשת צבע הופיע לראשונה ב כביש VR.

בול זמן:

עוד מ כביש VR