Дивовижний блиск VR Paintbrush Tech «Симулятора відпустки» PlatoBlockchain Data Intelligence. Вертикальний пошук. Ai.

Дивовижний блиск технології VR Paintbrush Tech «Симулятор відпустки»

Дивовижний блиск VR Paintbrush Tech «Симулятора відпустки» PlatoBlockchain Data Intelligence. Вертикальний пошук. Ai.

Випустивши незмінно популярний робота імітатора як назва для запуску HTC Vive ще в 2016 році, Owlchemy Labs є однією з найбільш ветеранських студій VR-ігор, які існують сьогодні. Протягом багатьох років студія створила міцну основу для дизайну взаємодії VR, який можна побачити в їхній новітній назві, Симулятор відпустки. Взаємодії, які можуть здатися гравцеві простими та зручними, часто набагато складніші, ніж здаються. Приклад: якась напрочуд блискуча технологія пензля просто відчуває себе добре у VR. Розробники з Owlchemy тут, щоб пояснити, як вони це створили.

Дивовижний блиск VR Paintbrush Tech «Симулятора відпустки» PlatoBlockchain Data Intelligence. Вертикальний пошук. Ai.Гостьова стаття Пітера Гелбрейта та Зі Є

Пітер (реалізатор унітіізмів) і Зі (розробник, геній фізики/математики) обидва є розробниками/дизайнерами в Лабораторії Совхімії. Їхня робота охоплює ідею дизайну та прототипування до ітерації, реалізації програмування та тестування.

Дивовижний блиск VR Paintbrush Tech «Симулятора відпустки» PlatoBlockchain Data Intelligence. Вертикальний пошук. Ai.Обидва внесли важливий внесок у спадщину абсурдних і надзвичайно відшліфованих ігор VR в Owlchemy Labs, зокрема: титул, відзначений нагородами робота імітатора, номінація на "Еммі". Рік і Морті: Віртуальний Рік-аліти, та нещодавно випущений Симулятор відпустки, який також надійде в PSVR і Oculus Quest пізніше цього року.

Всім привіт!

Піт і Зі тут. Ми обоє є розробниками в Owlchemy Labs, і ми раді поговорити з вами про одну з найбільш ітерованих функцій у всьому Симулятор відпустки: Живопис!

Малювання — одне з наших найяскравіших занять на рівні Ліс, творчий простір, захований у будиночку на дереві, де ви можете розкрити свій внутрішній художник. Незалежно від того, чи використовуєте ви нашу суперлипку кисть, щоб створити шедевр з нуля, чи використовуєте фотографію з камери в грі як відправну точку, естетична велич завжди доступна. Однак, як і всі чудові функції, Painting пройшов кілька прототипів і ітерацій, перш ніж ми прийшли до ідеального результату.

Для початку Зі пояснить технологію найважливішої частини інструментарію художника: пензля!

Імітація відчуття [PAINTBRUSH]

Одним із найскладніших аспектів створення чудового відчуття від малювання був кінчик пензля. Будучи нашим єдиним потужним інструментом для вираження вашого творчого бачення в живописі, ми знали, що необхідно відповідати очікуванням, пов’язаним із використанням пензля у VR, аж до його найтехнічніших тонкощів.

Як і всі найкращі функції в наших іграх, м’який кінчик пензля створено за допомогою фальшивої вигаданої фізики! Ми починаємо з математичної моделі, що складається з прямої лінії, якою ми стріляємо по полотну, а потім з’ясовуємо, де кінчик буде згинатися вздовж поверхні. Ця зігнута лінія використовується для зміни форми пензля, наприклад:

Це допомогло нам вирішити одну з найбільших проблем, які ми мали під час малювання у VR: відсутність зворотного зв’язку. Завдяки поточному апаратному забезпеченню віртуальної реальності ми не можемо точно змоделювати зворотний зв’язок гнучкого пензля, що натискає на полотно. Без цього зворотного зв’язку ми виявили, що гравцям важко визначити, чи кисть торкається, що змушує їх вкладати пензель занадто далеко в полотно та створювати тремтливі або гикавкі рухи, коли пензель стикається з мольбертом. Така поведінка призводила до появи багатьох «звивистих ліній» і часто призводила до того, що кисть виривалася з рук гравців повністю через надмірні зіткнення — це не те, що змушувало наших гравців відчувати себе професіоналами мистецтва!

Забезпечуючи візуальний зворотний зв’язок у вигляді м’якого кінчика, менше гравців штовхають пензель якнайглибше в полотно, створюючи менше проривів і красивіші лінії. Ми також поєднали це з автоматичним відродженням, якщо кисть зробив вирватися з руки гравця, що підвищує ймовірність того, що гравець утримав кисть, і легше схопити його знову, якщо він цього не зробив.

.IRPP_kangoo , .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl , .IRPP_kangoo .centered-text-area { min-height: 100px; положення: відносне; } .IRPP_kangoo , .IRPP_kangoo:наведення , .IRPP_kangoo:відвідано , .IRPP_kangoo:активний { border:0!важливо; } .IRPP_kangoo { дисплей: блок; перехід: фоновий колір 250 мс; webkit-transition: фоновий колір 250 мс; ширина: 100%; непрозорість: 1; перехід: непрозорість 250 мс; webkit-transition: непрозорість 250 мс; колір фону: #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; перехід: непрозорість 250 мс; webkit-transition: непрозорість 250 мс; колір фону: #FFFFFF; } .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl { background-position: center; розмір фону: обкладинка; float: ліворуч; запас: 0; відступ: 0; } .IRPP_kangoo .postImageUrl { ширина: 30%; } .IRPP_kangoo .imgUrl { ширина: 100%; } .IRPP_kangoo .centered-text-area { float: right; ширина: 70%; відступ:0; запас:0; } .IRPP_kangoo .centered-text { дисплей: таблиця; висота: 100 пікселів; ліворуч: 0; зверху: 0; відступ:0; запас:0; } .IRPP_kangoo .IRPP_kangoo-content { дисплей: клітинка таблиці; запас: 0; відступ: 0 10px 0 10px; положення: відносне; вертикальне вирівнювання: посередині; ширина: 100%; } .IRPP_kangoo .ctaText { border-bottom: 0 solid #fff; колір: #000000; розмір шрифту: 13px; font-weight: жирний; міжлітерний інтервал: .125em; запас: 0; відступ: 0; текст-оздоблення: підкреслити; } .IRPP_kangoo .postTitle { колір: #2C3E50; розмір шрифту: 16px; товщина шрифту: 600; запас: 0; відступ: 0; } .IRPP_kangoo .ctaButton { колір фону: #FFFFFF; поле зліва: 10 пікселів; позиція: абсолютна; справа: 0; зверху: 0; } .IRPP_kangoo:hover .imgUrl { -webkit-transform: scale(1.2); -moz-перетворення: scale(1.2); -o-перетворення: масштаб (1.2); -ms-transform: scale(1.2); перетворення: scale(1.2); } .IRPP_kangoo .imgUrl { -webkit-transition: -webkit-transform 0.4s ease-in-out; -moz-transition: -moz-transform 0.4s легкий вихід; -o-transition: -o-transform 0.4s легкість у вихід; -ms-transition: -ms-transform 0.4s легкий вихід; перехід: трансформація 0.4 с легкість у вихід; } .IRPP_kangoo:after { вміст: “”; дисплей: блок; ясно: обидва; }

ДИВИСЬ ТАКОЖ
Ексклюзив: розробка віртуальних сенсорних інтерфейсів Lone Echo та Echo Arena

Але знову: це все фейк! Волосся щітки насправді не стикаються у фізичній системі, за винятком самої основи. Хлюпання створює ілюзію опору та спонукає гравця подумати, що кисть відсувається назад.

Ми також використовуємо ту саму математичну модель для визначення розміру контактної площі пензля та контролю розміру фарби, нанесеної на полотно. Ця спеціальна функція дозволила нам постачати пензель одного розміру зі змінною шириною штриха: злегка торкніться, щоб отримати тонку точну лінію, або нанесіть кольори щільніше.

Пензель також враховує «жорсткість волоса», яка визначає, як волосок пензля змінює напрямок, коли його перетягують по полотну або коли ручку пензля обертають. Жорсткість також використовується, щоб трохи похитувати волосся щітки, коли воно не контактує з полотном. Ці дрібні деталі дозволяють нам відчути неймовірну «липкість» пензля, і з першого тесту стало зрозуміло, що люди справді реагують на це сприймане відчуття.

М’який пензлик вирішив багато технічних проблем і проблем з UX, а також сприяв початковому бажанню надати гравцям можливість створювати прекрасне мистецтво. У нас було кілька розробників, які були впевнені, що вони «не художники», але коли їх поставили перед мольбертом нового живопису, вони зробили такі речі:

Дивовижний блиск VR Paintbrush Tech «Симулятора відпустки» PlatoBlockchain Data Intelligence. Вертикальний пошук. Ai.

Каліграфічні зміни розміру кінчика пензля в поєднанні з підібраною вручну палітрою нашого художника дозволяють кожному створювати зображення, які виглядають мальовничими та веселими. Вуаля!

Тепер, як перший розробник, який опублікував код для Painting, Піт збирається поділитися нашим процесом проектування, що лежить в основі цієї функції (включно з його численними ітераціями!):

Виклики дизайну: назад до креслярської дошки!

Кожна функція в Симулятор відпустки почав з тієї ж серії запитань:

  • Чого очікують люди, коли вони відпочивають у певному місці?
  • Як боти можуть кумедно неправильно витлумачити цю діяльність?

Ми знали, що креслення, малювання та артистизм — це цікаві аспекти виходу на природу, і коли ми подумали про те, як боти неправильно витлумачать малювання, маніпулювання фотографіями миттєво спало на думку. Нам сподобалася ідея редагувати фотографії, які ви зробили навколо острова, і налаштувати їх, щоб виразити себе як гравця. Ця проста ідея стала початком функції, на розробку та реалізацію якої знадобилося більше року.

Дивовижний блиск VR Paintbrush Tech «Симулятора відпустки» PlatoBlockchain Data Intelligence. Вертикальний пошук. Ai.
Симулятор роботи (2016)

Частина наших ранніх дизайнерських ідей була під впливом того, для чого ми створювалися раніше робота імітатора (наприклад, фарбування знака в Auto Mechanic; програмне забезпечення для фарбування на офісному комп’ютері). Обидва були простими і веселими, але не дуже глибокими. Малювання в Симулятор відпустки мав відчувати себе іншим — і більшим — щоб відповідати решті гри. Ми хотіли дати гравцям більше, ніж просто збільшити щільність пікселів — ви повинні це зробити почувати ніби ви насправді малюєте. Як у реальному житті, тільки краще.

.IRPP_kangoo , .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl , .IRPP_kangoo .centered-text-area { min-height: 100px; положення: відносне; } .IRPP_kangoo , .IRPP_kangoo:наведення , .IRPP_kangoo:відвідано , .IRPP_kangoo:активний { border:0!важливо; } .IRPP_kangoo { дисплей: блок; перехід: фоновий колір 250 мс; webkit-transition: фоновий колір 250 мс; ширина: 100%; непрозорість: 1; перехід: непрозорість 250 мс; webkit-transition: непрозорість 250 мс; колір фону: #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; перехід: непрозорість 250 мс; webkit-transition: непрозорість 250 мс; колір фону: #FFFFFF; } .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl { background-position: center; розмір фону: обкладинка; float: ліворуч; запас: 0; відступ: 0; } .IRPP_kangoo .postImageUrl { ширина: 30%; } .IRPP_kangoo .imgUrl { ширина: 100%; } .IRPP_kangoo .centered-text-area { float: right; ширина: 70%; відступ:0; запас:0; } .IRPP_kangoo .centered-text { дисплей: таблиця; висота: 100 пікселів; ліворуч: 0; зверху: 0; відступ:0; запас:0; } .IRPP_kangoo .IRPP_kangoo-content { дисплей: клітинка таблиці; запас: 0; відступ: 0 10px 0 10px; положення: відносне; вертикальне вирівнювання: посередині; ширина: 100%; } .IRPP_kangoo .ctaText { border-bottom: 0 solid #fff; колір: #000000; розмір шрифту: 13px; font-weight: жирний; міжлітерний інтервал: .125em; запас: 0; відступ: 0; текст-оздоблення: підкреслити; } .IRPP_kangoo .postTitle { колір: #2C3E50; розмір шрифту: 16px; товщина шрифту: 600; запас: 0; відступ: 0; } .IRPP_kangoo .ctaButton { колір фону: #FFFFFF; поле зліва: 10 пікселів; позиція: абсолютна; справа: 0; зверху: 0; } .IRPP_kangoo:hover .imgUrl { -webkit-transform: scale(1.2); -moz-перетворення: scale(1.2); -o-перетворення: масштаб (1.2); -ms-transform: scale(1.2); перетворення: scale(1.2); } .IRPP_kangoo .imgUrl { -webkit-transition: -webkit-transform 0.4s ease-in-out; -moz-transition: -moz-transform 0.4s легкий вихід; -o-transition: -o-transform 0.4s легкість у вихід; -ms-transition: -ms-transform 0.4s легкий вихід; перехід: трансформація 0.4 с легкість у вихід; } .IRPP_kangoo:after { вміст: “”; дисплей: блок; ясно: обидва; }

ДИВИСЬ ТАКОЖ
Ексклюзив: розробка ярликів однією рукою для VR та AR

Багато творів мистецтва потребують перегляду, щоб перетворити «мех» на шедевр, і живопис не став винятком. Це була одна з найперших функцій, які ми розробили для Forest та над яким ми продовжували працювати аж до запуску! Нижче наведено кілька прикладів експериментів із малюванням та ітерацій щодо функції:

Лише «фотошоп».

На самому початку живопис включав лише фотографії. Гравці розміщували фотографію на мольберті, а потім використовували пензлик, щоб «намалювати» фотографію на полотні. Гравці могли змішувати та поєднувати, поєднуючи ботів або пейзажі з кількох фотографій, і навіть (якщо вони були кмітливі) робити фотографії крупним планом певних кольорів, щоб ними малювати. Чим більше людей грало, тим більше ми усвідомлювали, що справжнє малювання разом зі зразками кольорових фарб різко збільшує здатність гравців бути творчими.

фільтри

Фільтри є звичайним елементом програмного забезпечення для обробки фотографій, тому звичайно ми думали, що боти включать їх у свою неправильну інтерпретацію. Ми експериментували з кнопками для застосування фільтрів: пікселізація, інвертування кольорів, чорно-білий і сепія. Натискання будь-якої з цих кнопок фільтра призводило б до накопичення ефектів, а наступний рух пензля застосовував би відфільтроване зображення до полотна. Незважаючи на цікавість, фільтри часто призводять до розчарування, оскільки гравці намагаються передбачити, що насправді з’явиться на полотні під час малювання. Наприклад, за допомогою інверсії, якщо ви занурили свій пензель у помаранчевий зразок, ваш пензель пофарбував би синій колір! Ми повністю видалили фільтри з мольберта, а замість цього інтегрували їх у вашу камеру як об’єктиви. Усі круті ефекти без жодної плутанини!

Відро фарби'

Наші найбільші відгуки під час ранніх ігрових тестів полягали в можливості починати з фонових кольорів, які не були білими, і можливість повністю стерти малюнки. Додавши повзунок відра для фарби, який витирав суцільний колір по полотну, разом із опцією білого фарби, ми вирішили обидві ці потреби за допомогою однієї функції. Як несподівана перевага, це також дозволило створити більше… Ботоподібні картини.

Змішування та прозорість

Відро з фарбою використовувало жорсткі краї, але, дивлячись на ті самі жорсткі краї на пензлі, це просто не здавалося реалістичним або виглядало не так чудово. Зубчасті пікселі точно не є частиною більшості реальних картин. Для більш реалістичного ефекту ми створили градієнт прозорості, що відображає кількість фарби, яку потрібно нанести на полотно. У поєднанні з розміром і положенням контактної зони ми могли визначити, наскільки колір фарби зливається з тим, що знаходиться під нею. Чим довше пензлик контактує з полотном, тим більше кольору наноситься, що дозволяє нам імітувати, як справжні пензлі переносять пігмент на тканину.

Кілька пензлів

Ми пройшли кілька ітерацій пензлів і розмірів пензлів. До повзунка відра з фарбою гравці хотіли a гігант пензлик, щоб полегшити заповнення. Потім, після того, як ми запровадили повзунок, гравці хотіли a менше кисть для детальної роботи. Довгий час ми мали менший пензель, але зрештою відмовилися від нього через одну з найважливіших ігрових особливостей Painting: м’який кінчик!

- - - - -

Ми сподіваємося, що ви [ЕМОЦІЯ] малюєте!

Іноді просто неможливо обійти кількість ітерацій, необхідних для того, щоб щось виглядало, відчувалося та відтворювалося так, як ви хочете. Малювання було важливою вправою для вивчення можливостей дизайну VR, очікувань гравців і використання обмежень для найбільшої творчості.

Дякуємо, що зазирнули за лаштунки живопису! Сподіваємося, ви отримали натхнення, щоб спрямувати свій внутрішній Леонардо БотВінчі Симулятор відпустки.


Читайте більше гостьових статей, наданих експертами та інсайдерами з AR і VR.

Повідомлення Дивовижний блиск технології VR Paintbrush Tech «Симулятор відпустки» вперше з'явився на Дорога до ВР.

Часова мітка:

Більше від Дорога до ВР