Zaskakujący blask VR Paintbrush Tech PlatoBlockchain Data Intelligence w „Symulatorze wakacji”. Wyszukiwanie pionowe. AI.

Zaskakujący blask VR Paintbrush Tech „Vacation Simulator”

Zaskakujący blask VR Paintbrush Tech PlatoBlockchain Data Intelligence w „Symulatorze wakacji”. Wyszukiwanie pionowe. AI.

Po wydaniu zawsze popularnego symulator pracy jako tytuł premierowy dla HTC Vive w 2016 roku, Owlchemy Labs jest jednym z najbardziej doświadczonych studiów gier VR, jakie istnieją obecnie. Przez lata studio zbudowało solidne podstawy projektowania interakcji VR, co widać w ich najnowszym tytule, Symulator wakacji. Interakcje, które mogą wydawać się proste i użyteczne dla gracza, są często znacznie bardziej złożone, niż się wydaje. Przykład: zaskakująco genialna technologia pędzla po prostu czuje się dobrze w VR. Programiści z Owlchemy są tutaj, aby wyjaśnić, jak go zbudowali.

Zaskakujący blask VR Paintbrush Tech PlatoBlockchain Data Intelligence w „Symulatorze wakacji”. Wyszukiwanie pionowe. AI.Artykuł gościnny autorstwa Petera Galbraitha i Zi Ye

Peter (Implementer of Unityism) i Zi (Developer, Physics / Math Genius) są programistami / projektantami w Owlchemy Labs. Ich praca obejmuje tworzenie pomysłów projektowych i prototypowanie, a także iteracje, wdrażanie programowania i testowanie.

Zaskakujący blask VR Paintbrush Tech PlatoBlockchain Data Intelligence w „Symulatorze wakacji”. Wyszukiwanie pionowe. AI.Oba są ważnymi współtwórcami spuścizny absurdalnych i wysoce dopracowanych gier VR w Owlchemy Labs, w tym: wielokrotnie nagradzany tytuł symulator pracy, Nominowany do nagrody Emmy Rick and Morty: Wirtualna rick-alityi niedawno wydany Symulator wakacji, który również pojawi się w PSVR i Oculus Quest jeszcze w tym roku.

Hej wszystkim!

Tutaj Pete i Zi. Obaj jesteśmy programistami w Owlchemy Labs i cieszymy się, że możemy porozmawiać z Tobą o jednej z najbardziej zaawansowanych funkcji w całym Symulator wakacji: Obraz!

Malowanie to jedno z naszych najbardziej kolorowych zajęć na poziomie Lasu, kreatywna przestrzeń ukryta w domku na drzewie, gdzie możesz uwolnić swojego wewnętrznego artystę. Niezależnie od tego, czy używasz naszego super-lepkiego pędzla, aby stworzyć arcydzieło od zera, czy też używasz zdjęcia z kamery w grze jako punktu wyjścia, estetyczna wielkość jest zawsze w zasięgu ręki. Jednak, podobnie jak wszystkie wspaniałe funkcje, Malowanie przeszło kilka prototypów i iteracji, zanim osiągnęliśmy nasz doskonały wynik.

Na początek Zi wyjaśni technologię kryjącą się za najważniejszą częścią zestawu narzędzi artysty: pędzlem!

Symulowanie wrażenia, jakie daje [PAINTBRUSH]

Jednym z najtrudniejszych aspektów, które sprawiły, że malowanie było wspaniałe, była końcówka pędzla. Jako nasze jedyne, potężne narzędzie do wyrażania kreatywnej wizji w malarstwie, wiedzieliśmy, że konieczne jest spełnienie oczekiwań związanych z posiadaniem pędzla w rzeczywistości wirtualnej, aż do najbardziej technicznych szczegółów.

Jak wszystkie najlepsze funkcje naszych gier, miękka końcówka pędzla została stworzona przy użyciu fałszywej, wymyślonej fizyki! Zaczynamy od modelu matematycznego składającego się z prostej, którą strzelamy w płótno, a następnie ustalamy, gdzie końcówka zgina się wzdłuż powierzchni. Ta wygięta linia służy do manipulowania kształtem pędzla, na przykład:

Pomogło nam to rozwiązać jeden z największych problemów, jakie mieliśmy podczas malowania w VR: brak informacji zwrotnej. Przy obecnym sprzęcie VR nie możemy dokładnie zasymulować sprzężenia zwrotnego elastycznego pędzla dociskającego płótno. Bez tej opinii stwierdziliśmy, że trudno było graczom stwierdzić, czy pędzel się stykał, co powodowało, że wsuwali pędzel zbyt głęboko w płótno i powodowali drżenie lub czkawkę, gdy pędzel zderzał się ze sztalugą do malowania. Takie zachowanie prowadziło do powstawania wielu „falistych linii” i często powodowało, że pędzel wyrywał się całkowicie z rąk graczy w wyniku nadmiernych kolizji - nie było to coś, co sprawiało, że nasi gracze czuli się profesjonalistami!

Zapewniając wizualną informację zwrotną w postaci miękkiej końcówki, mniej graczy wepchnęło pędzel tak daleko w płótno, co zmniejsza liczbę wyprysków i ładniejsze linie. Połączyliśmy to również z automatycznym odradzaniem się w przypadku zarośli zrobił wyrwać gracza z ręki, co sprawia, że ​​jest bardziej prawdopodobne, że gracz przytrzyma pędzel, a jeśli tego nie zrobi, będzie łatwiej go chwycić.

.IRPP_kangoo , .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl , .IRPP_kangoo .centered-text-area { min-height: 100px; pozycja: względna; } .IRPP_kangoo , .IRPP_kangoo:hover , .IRPP_kangoo:odwiedzone , .IRPP_kangoo:aktywne { border:0!important; } .IRPP_kangoo {wyświetl: blok; przejście: kolor tła 250ms; przejście do webkita: kolor tła 250 ms; szerokość: 100%; nieprzezroczystość: 1; przejście: nieprzezroczystość 250ms; przejście do webkita: krycie 250 ms; kolor tła: #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:aktywny, .IRPP_kangoo:hover { nieprzezroczystość: 1; przejście: nieprzezroczystość 250ms; przejście do webkita: krycie 250 ms; kolor tła: #FFFFFF; } .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl { pozycja-tła: środek; rozmiar tła: okładka; pływak: w lewo; margines: 0; dopełnienie: 0; } .IRPP_kangoo .postImageUrl { szerokość: 30%; } .IRPP_kangoo .imgUrl { szerokość: 100%; } .IRPP_kangoo .centered-text-area { float:right; szerokość: 70%; dopełnienie:0; margines:0; } .IRPP_kangoo .centered-text { display: table; wysokość: 100px; po lewej: 0; góra: 0; dopełnienie:0; margines:0; } .IRPP_kangoo .IRPP_kangoo-content { display: komórka-tabeli; margines: 0; dopełnienie: 0 10px 0 10px; pozycja: względna; wyrównanie w pionie: środek; szerokość: 100%; } .IRPP_kangoo .ctaText { border-bottom: 0 solid #fff; kolor: #000000; rozmiar czcionki: 13px; grubość czcionki: pogrubiona; odstępy między literami: .125em; margines: 0; dopełnienie: 0; dekoracja tekstu: podkreślenie; } .IRPP_kangoo .postTitle { kolor: #2C3E50; rozmiar czcionki: 16 pikseli; grubość czcionki: 600; margines: 0; dopełnienie: 0; } .IRPP_kangoo .ctaButton { kolor tła: #FFFFFF; margines po lewej stronie: 10px; pozycja: absolutna; po prawej: 0; góra: 0; } .IRPP_kangoo:hover .imgUrl { -webkit-transform: skala(1.2); -moz-transform: skala (1.2); -o-transformacja: skala(1.2); -ms-transform: skala (1.2); przekształcenie: skala (1.2); } .IRPP_kangoo .imgUrl { -webkit-przejście: -webkit-transform 0.4 s łatwość wejścia; -moz-przejście: -moz-transform 0.4 s łatwość wejścia; -o-przejście: -o-transformacja 0.4 s łatwość wejścia; -ms-przejście: -ms-transform 0.4 s łatwość wejścia; przejście: transformacja łatwości wejścia 0.4 s; } .IRPP_kangoo:after {treść: „”; Blok wyświetlacza; oba czyste; }

ZOBACZ TEŻ
Ekskluzywne: projektowanie wirtualnych interfejsów dotykowych „Lone Echo” i „Echo Arena”

Ale znowu: to wszystko jest fałszywe! Włosy szczotki tak naprawdę nie kolidują w systemie fizycznym, z wyjątkiem samej podstawy. Zgniatanie tworzy iluzję oporu i sprawia, że ​​gracz myśli, że szczotka jest odsuwana.

Korzystamy również z tego samego modelu matematycznego, aby określić rozmiar powierzchni styku pędzla i kontrolować wielkość naniesionej farby na płótno. Ta specyficzna cecha pozwoliła nam na wysyłanie z jednym rozmiarem pędzla, tylko ze zmienną szerokością kresek: delikatnie dotknij, aby uzyskać cienką precyzyjną linię lub wymazuj kolory mocniejszym przejściem.

Szczotka bierze również pod uwagę „sztywność włosa”, która określa, jak włos zmienia kierunek, gdy jest przeciągany po płótnie lub gdy rączka szczotki jest obracana. Sztywność jest również używana, aby dodać odrobinę drgania włosom szczotki, gdy nie stykają się z płótnem. Te drobne szczegóły pozwalają nam uzyskać super `` lepki '' dotyk pędzla, a od naszego pierwszego testu gry było jasne, że ludzie naprawdę zareagowali na to odczucie.

Gąbczasty pędzel rozwiązał wiele problemów technicznych i związanych z UX, a także wpłynął na to początkowe pragnienie, aby umożliwić graczom tworzenie pięknej grafiki. Mieliśmy kilku deweloperów, którzy byli przekonani, że „nie są artystami”, ale kiedy postawiono je przed nową sztalugą malarską, powstały takie rzeczy:

Zaskakujący blask VR Paintbrush Tech PlatoBlockchain Data Intelligence w „Symulatorze wakacji”. Wyszukiwanie pionowe. AI.

Kaligraficzne zmiany rozmiaru końcówki pędzla w połączeniu z ręcznie dobraną paletą naszego artysty pozwalają każdemu tworzyć obrazy, które wyglądają malarsko i zabawnie. Voila!

Teraz, jako pierwszy programista, który umieścił kod w programie Painting, Pete podzieli się z nami procesem projektowania tej funkcji (w tym jej wieloma iteracjami!):

Wyzwania projektowe: powrót do deski kreślarskiej!

Każda funkcja w Symulator wakacji zaczął od tej samej serii pytań:

  • Czego spodziewają się ludzie, którzy spędzają wakacje w danym miejscu?
  • W jaki sposób boty przezabawnie źle zinterpretowałyby tę aktywność?

Wiedzieliśmy, że szkicowanie, malowanie i artyzm to zabawne aspekty wychodzenia na łono natury, a kiedy pomyśleliśmy o tym, jak boty błędnie zinterpretowałyby malowanie, natychmiast przyszło nam do głowy manipulowanie zdjęciami. Spodobał nam się pomysł edycji zdjęć, które zrobiłeś na wyspie i dostosowania ich do wyrażania siebie jako gracza. Ten prosty pomysł stał się zalążkiem funkcji, której zaprojektowanie i wdrożenie zajęło ponad rok.

Zaskakujący blask VR Paintbrush Tech PlatoBlockchain Data Intelligence w „Symulatorze wakacji”. Wyszukiwanie pionowe. AI.
Symulator pracy (2016)

Na część naszych wczesnych pomysłów projektowych miało wpływ to, do czego wcześniej stworzyliśmy symulator pracy (np. malowanie szyldu w Auto Mechaniku; program malarski na komputerze w biurze). Obie były proste i zabawne, ale niezbyt głębokie. Malowanie w Symulator wakacji musiał czuć się inny - i większy - aby dopasować się do reszty gry. Chcieliśmy dać graczom coś więcej niż tylko zwiększoną gęstość pikseli - powinieneś być w stanie to zrobić czuć jakbyś faktycznie malował. Jak w prawdziwym życiu, tylko lepiej.

.IRPP_kangoo , .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl , .IRPP_kangoo .centered-text-area { min-height: 100px; pozycja: względna; } .IRPP_kangoo , .IRPP_kangoo:hover , .IRPP_kangoo:odwiedzone , .IRPP_kangoo:aktywne { border:0!important; } .IRPP_kangoo {wyświetl: blok; przejście: kolor tła 250ms; przejście do webkita: kolor tła 250 ms; szerokość: 100%; nieprzezroczystość: 1; przejście: nieprzezroczystość 250ms; przejście do webkita: krycie 250 ms; kolor tła: #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:aktywny, .IRPP_kangoo:hover { nieprzezroczystość: 1; przejście: nieprzezroczystość 250ms; przejście do webkita: krycie 250 ms; kolor tła: #FFFFFF; } .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl { pozycja-tła: środek; rozmiar tła: okładka; pływak: w lewo; margines: 0; dopełnienie: 0; } .IRPP_kangoo .postImageUrl { szerokość: 30%; } .IRPP_kangoo .imgUrl { szerokość: 100%; } .IRPP_kangoo .centered-text-area { float:right; szerokość: 70%; dopełnienie:0; margines:0; } .IRPP_kangoo .centered-text { display: table; wysokość: 100px; po lewej: 0; góra: 0; dopełnienie:0; margines:0; } .IRPP_kangoo .IRPP_kangoo-content { display: komórka-tabeli; margines: 0; dopełnienie: 0 10px 0 10px; pozycja: względna; wyrównanie w pionie: środek; szerokość: 100%; } .IRPP_kangoo .ctaText { border-bottom: 0 solid #fff; kolor: #000000; rozmiar czcionki: 13px; grubość czcionki: pogrubiona; odstępy między literami: .125em; margines: 0; dopełnienie: 0; dekoracja tekstu: podkreślenie; } .IRPP_kangoo .postTitle { kolor: #2C3E50; rozmiar czcionki: 16 pikseli; grubość czcionki: 600; margines: 0; dopełnienie: 0; } .IRPP_kangoo .ctaButton { kolor tła: #FFFFFF; margines po lewej stronie: 10px; pozycja: absolutna; po prawej: 0; góra: 0; } .IRPP_kangoo:hover .imgUrl { -webkit-transform: skala(1.2); -moz-transform: skala (1.2); -o-transformacja: skala(1.2); -ms-transform: skala (1.2); przekształcenie: skala (1.2); } .IRPP_kangoo .imgUrl { -webkit-przejście: -webkit-transform 0.4 s łatwość wejścia; -moz-przejście: -moz-transform 0.4 s łatwość wejścia; -o-przejście: -o-transformacja 0.4 s łatwość wejścia; -ms-przejście: -ms-transform 0.4 s łatwość wejścia; przejście: transformacja łatwości wejścia 0.4 s; } .IRPP_kangoo:after {treść: „”; Blok wyświetlacza; oba czyste; }

ZOBACZ TEŻ
Ekskluzywne: projektowanie skrótów jednoręcznych dla VR i AR

Wiele dzieł sztuki wymaga poprawek, aby zmienić „meh” w arcydzieło, a malarstwo nie było wyjątkiem. Była to jedna z najwcześniejszych funkcji, jakie opracowaliśmy dla lasu i jeden, nad którym pracowaliśmy aż do premiery! Oto kilka przykładów eksperymentów malarskich i iteracji tej funkcji:

Tylko „Photoshopping”

Malowanie na samym początku obejmowało tylko zdjęcia. Gracze umieszczali zdjęcie na sztalugach, a następnie za pomocą pędzla „namalowali” je na płótnie. Gracze mogli mieszać i dopasowywać, łączyć boty lub scenerie z wielu zdjęć, a nawet (jeśli sprytnie) robić zbliżenia w określonych kolorach do malowania. Im więcej ludzi grało, tym bardziej zdawaliśmy sobie sprawę, że rzeczywiste malowanie - wraz z próbkami kolorowych farb - drastycznie zwiększa zdolność graczy do kreatywności.

filtry

Filtry są częstym elementem oprogramowania do obróbki zdjęć, więc oczywiście myśleliśmy, że Boty uwzględnią je w błędnej interpretacji. Eksperymentowaliśmy z przyciskami do zastosowania filtrów: pikselacja, odwrócenie kolorów, czerń i biel oraz sepia. Naciśnięcie dowolnego z tych przycisków filtru spowoduje nałożenie na siebie efektów, a następne pociągnięcie pędzla spowoduje nałożenie przefiltrowanego obrazu na płótno. Chociaż filtry są interesujące, często prowadzą do frustracji, ponieważ gracze starali się przewidzieć, co faktycznie pojawi się na płótnie podczas malowania. Na przykład przy odwróceniu, jeśli zanurzysz pędzel w pomarańczowej próbce, Twój pędzel będzie malował na niebiesko! Skończyło się na całkowitym usunięciu filtrów ze sztalugi, zamiast tego zintegrowaliśmy je z aparatem jako soczewki. Wszystkie fajne efekty bez zamieszania!

Wiadro farby'

Naszym największym odzewem z wczesnych testów była możliwość rozpoczęcia od kolorów tła, które nie były białe, oraz możliwość całkowitego wymazania obrazów. Dodając suwak wiadra z farbą, który przetarł jednolity kolor na płótnie, wraz z opcją białej farby, rozwiązaliśmy obie te potrzeby za pomocą jednej funkcji. Niespodziewana korzyść umożliwiła również stworzenie większej liczby… Obrazy podobne do botów.

Mieszanie i przejrzystość

Wiaderko z farbą miało twarde krawędzie, ale patrząc na te same twarde krawędzie pędzla, po prostu nie wydawało się to realistyczne - ani nie wyglądało tak wspaniale. Postrzępione piksele zdecydowanie nie są częścią większości obrazów z prawdziwego życia. Aby uzyskać bardziej realistyczny efekt, stworzyliśmy gradient przezroczystości reprezentujący ilość farby do nałożenia na płótno. W połączeniu z rozmiarem i położeniem powierzchni styku możemy określić, jak bardzo kolor lakieru łączy się z tym, co znajduje się pod nią. Im dłużej pędzel styka się z płótnem, tym więcej koloru nakłada się, co pozwala nam symulować, jak prawdziwe pędzle przenoszą pigment na tkaninę.

Wiele pędzli

Przeszliśmy przez kilka iteracji pędzli i rozmiarów pędzli. Przed suwakiem wiadra z farbą gracze chcieli gigant pędzel, aby ułatwić wypełnianie. Następnie, po wdrożeniu suwaka, gracze chcieli mniejszy pędzel do wykonywania detali. Przez długi czas mieliśmy mniejszy pędzel, ale ostatecznie go wycięliśmy ze względu na jedną z najważniejszych cech malowania: gąbczastą końcówkę!

- - - - -

Mamy nadzieję, że [EMOCJA] Malujesz!

Czasami po prostu nie da się obejść liczby iteracji potrzebnej do tego, aby coś wyglądało, czuło i grało tak, jak chcesz. Malowanie było doniosłym ćwiczeniem w projektowaniu VR, oczekiwaniach graczy i wykorzystywaniu ograniczeń w celu uzyskania największej kreatywności.

Dziękujemy za obejrzenie tego spojrzenia za kulisy malowania! Mamy nadzieję, że zainspirowałeś się do skierowania swojego wewnętrznego Leonardo BotVinci Symulator wakacji.


Przeczytaj więcej artykułów gościnnych nadesłanych przez ekspertów i znawców AR i VR.

Post Zaskakujący blask VR Paintbrush Tech „Vacation Simulator” pojawiła się najpierw na Droga do rzeczywistości wirtualnej.

Znak czasu:

Więcej z Droga do rzeczywistości wirtualnej