Den overraskende glansen til 'Vacation Simulator's' VR Paintbrush Tech PlatoBlockchain Data Intelligence. Vertikalt søk. Ai.

The Surprising Brilliance of 'Vacation Simulator's' VR Paintbrush Tech

Den overraskende glansen til 'Vacation Simulator's' VR Paintbrush Tech PlatoBlockchain Data Intelligence. Vertikalt søk. Ai.

Etter å ha gitt ut det stadig populære jobb simulator som lanseringstittel for HTC Vive tilbake i 2016, er Owlchemy Labs et av de mest veteran VR-spillstudioene som eksisterer i dag. Gjennom årene har studioet bygget et sterkt fundament av VR-interaksjonsdesign som ses gjennom deres nyeste tittel, Feriesimulator. Interaksjoner som kan virke enkle og brukbare for spilleren er ofte mye mer komplekse enn de ser ut til. Eksempel: noen overraskende strålende penselteknologier det føles bare riktig i VR. Utviklere fra Owlchemy er her for å forklare hvordan de bygde den.

Den overraskende glansen til 'Vacation Simulator's' VR Paintbrush Tech PlatoBlockchain Data Intelligence. Vertikalt søk. Ai.Gjesteartikkel av Peter Galbraith & Zi Ye

Peter (Implementer of Unityisms) og Zi (Developer, Physics / Math Genius) er begge utviklere / designer dual-wielders på Owlchemy labs. Arbeidet deres spenner over design ideer og prototyper til iterasjon, programmering implementering og testing.

Den overraskende glansen til 'Vacation Simulator's' VR Paintbrush Tech PlatoBlockchain Data Intelligence. Vertikalt søk. Ai.Begge er viktige bidragsytere til arven fra absurde og svært VR-polerte spill på Owlchemy Labs, inkludert: prisvinnende tittel jobb simulator, Emmy-nominert Rick og Morty: Virtuell Rick-ality, og den nylig utgitte Feriesimulator, som også kommer til PSVR og Oculus Quest senere i år.

Hei alle sammen!

Pete og Zi her. Vi er begge utviklere hos Owlchemy Labs, og vi er glade for å snakke med deg om en av de mest itererte funksjonene i hele Feriesimulator: Maleri!

Maleri er en av våre mest fargerike aktiviteter på skognivå, et kreativt rom gjemt i et trehus hvor du kan slippe løs din indre kunstner. Enten du bruker vår supertøffete pensel for å lage et mesterverk fra bunnen av eller bruker et bilde fra kameraet i spillet som utgangspunkt, er estetisk storhet alltid innen rekkevidde. Imidlertid, som alle flotte funksjoner, gikk Painting gjennom flere prototyper og iterasjoner før vi ankom vårt perfekte bilde.

For å sette i gang ting, vil Zi forklare teknologien bak den viktigste delen av en kunstners verktøysett: malebørsten!

Simulere følelsen av [PAINTBRUSH]

En av de mest utfordrende aspektene ved å få Maling til å føle seg bra var penselen. Som vårt eneste, kraftige verktøy for å uttrykke din kreative visjon i Painting, visste vi at det var nødvendig å imøtekomme forventningene som følger med å ha en pensel i VR, helt ned til det mest tekniske.

Som alle de beste funksjonene i spillene våre, ble den squishy børstespissen laget med falske, sminke fysikk! Vi starter med en matematisk modell som består av en rett linje som vi skyter mot lerretet, og deretter finner vi ut hvor spissen vil bøye seg langs overflaten. Den bøyde linjen brukes til å manipulere formen på børsten, slik:

Dette hjalp oss med å løse en av de største problemene vi hadde med maling i VR: mangel på tilbakemelding. Med dagens VR-maskinvare kan vi ikke simulere tilbakemeldinger fra en fleksibel børste som presser mot lerret nøyaktig. Uten denne tilbakemeldingen fant vi at det var vanskelig for spillerne å fortelle om børsten var i kontakt, noe som fikk dem til å sette børsten for langt inn i lerretet og skape skakende eller hikke bevegelser da penselen kolliderte med maleriet. Denne oppførselen førte til mange "squiggly linjer" og førte ofte til at børsten brøt ut av spillernes hender helt fra overdreven kollisjon - ikke akkurat noe som fikk spillerne til å føle seg som kunstproffer!

Ved å gi visuell tilbakemelding i form av det squishy tip, presset færre spillere børsten så langt inn i lerretet, noe som gir færre breakouts og penere linjer. Vi parret dette også med en auto-respawn hvis børsten gjorde bryte ut av spillerens hånd, noe som gjør det både mer sannsynlig at spilleren holder tak i børsten og er lettere å gripe igjen hvis de ikke gjorde det.

.IRPP_kangoo , .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl , .IRPP_kangoo .centered-text-area { min-height: 100px; stilling: pårørende; } .IRPP_kangoo , .IRPP_kangoo:hover , .IRPP_kangoo:besøkt , .IRPP_kangoo:active { border:0!viktig; } .IRPP_kangoo { display: blokk; overgang: bakgrunnsfarge 250ms; webkit-transition: bakgrunnsfarge 250ms; bredde: 100 %; opasitet: 1; overgang: opasitet 250ms; webkit-overgang: opasitet 250ms; bakgrunnsfarge: #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 { opasitet: 1; overgang: opasitet 250ms; webkit-overgang: opasitet 250ms; bakgrunnsfarge: #FFFFFF; } .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl { background-position: center; bakgrunnsstørrelse: cover; flyte: venstre; margin: 0; polstring: 0; } .IRPP_kangoo .postImageUrl { width: 30%; } .IRPP_kangoo .imgUrl { width: 100%; } .IRPP_kangoo .centered-text-area { flyte: høyre; bredde: 70 %; polstring:0; margin:0; } .IRPP_kangoo .centered-text { display: table; høyde: 100px; venstre: 0; topp: 0; polstring:0; margin:0; } .IRPP_kangoo .IRPP_kangoo-content { display: table-cell; margin: 0; polstring: 0 10px 0 10px; stilling: pårørende; vertikal-juster: midt; bredde: 100 %; } .IRPP_kangoo .ctaText { border-bottom: 0 solid #fff; farge: #000000; skriftstørrelse: 13px; font-weight: fet; bokstavavstand: .125em; margin: 0; polstring: 0; tekst-dekorasjon: understreking; } .IRPP_kangoo .postTitle { farge: #2C3E50; skriftstørrelse: 16px; font-vekt: 600; margin: 0; polstring: 0; } .IRPP_kangoo .ctaButton { bakgrunnsfarge: #FFFFFF; marg-venstre: 10px; posisjon: absolutt; høyre: 0; topp: 0; } .IRPP_kangoo:hover .imgUrl { -webkit-transform: scale(1.2); -moz-transform: skala(1.2); -o-transform: skala(1.2); -ms-transform: skala(1.2); transform: skala(1.2); } .IRPP_kangoo .imgUrl { -webkit-transition: -webkit-transform 0.4s ease-in-out; -moz-overgang: -moz-transform 0.4s letthet-inn-ut; -o-overgang: -o-transform 0.4s letthet-inn-ut; -ms-overgang: -ms-transform 0.4s lett-inn-ut; overgang: transformer 0.4 s lett inn-ut; } .IRPP_kangoo:etter { innhold: “”; display: blokk; klar: begge; }

SE OGSÅ
Eksklusivt: Designe 'Lone Echo' og 'Echo Arenas' virtuelle berøringsskjermgrensesnitt

Men igjen: det hele er falskt! Børstehåret kolliderer faktisk ikke i fysikksystemet, bortsett fra helt i bunnen. Den squishing-handlingen skaper en illusjon av motstand og lurer spilleren til å tro at børsten skyves tilbake.

Vi bruker også den samme matematiske modellen for å bestemme størrelsen på børstens kontaktareal og kontrollere størrelsen på malingen som påføres lerretet. Denne spesifikke funksjonen tillot oss å sende med en enkelt penselstørrelse, bare med variabel slagbredde: berør lett for en tynn, presis linje eller vattpinne på fargene med et fastere pass.

Børsten påvirker også 'hårstivhet', som bestemmer hvordan børstehåret endrer retning når det dras på lerretet eller når børstehåndtaket roteres. Stivheten brukes også til å tilpasse børstehåret litt når det ikke er i kontakt med lerretet. Disse små detaljene lar oss få en super 'klissete' følelse av børsten, og fra vår aller første lektest var det klart at folk virkelig svarte på den opplevde følelsen.

Den squishy børsten løste mange tekniske og UX problemer, og det spilte også inn i det første ønsket om å gi spillerne mulighet til å skape vakker kunst. Vi hadde flere utviklere som var overbevist om at de ikke var "kunstnere", men når de ble satt foran det nye maleriet, skapte vi ting som dette:

Den overraskende glansen til 'Vacation Simulator's' VR Paintbrush Tech PlatoBlockchain Data Intelligence. Vertikalt søk. Ai.

De kalligrafiske størrelsesendringene av børstespissen kombinert med kunstnerens håndplukkede palett lar alle lage bilder som så malende og morsomme ut. Voila!

Nå, som den første utvikleren som setter ned koden på Painting, kommer Pete til å dele designprosessen vår bak funksjonen (inkludert dens mange iterasjoner!):

Designutfordringer: Tilbake til tegnebrettet!

Hver funksjon i Feriesimulator startet fra samme serie spørsmål:

  • Hva forventer folk når de ferierer på et bestemt reisemål?
  • Hvordan ville Bots på en morsom måte feiltolke denne aktiviteten?

Vi visste at skisser, maling og kunstneri var morsomme aspekter ved å gå ut i naturen, og da vi tenkte på hvordan Bots ville feiltolke maleri, kom det umiddelbart til å manipulere bilder. Vi elsket ideen om å redigere bildene du tok rundt øya og tilpasse dem til å uttrykke deg som spiller. Den enkle ideen var frøet til en funksjon som tok over et år å designe og gi liv.

Den overraskende glansen til 'Vacation Simulator's' VR Paintbrush Tech PlatoBlockchain Data Intelligence. Vertikalt søk. Ai.
Jobbsimulator (2016)

En del av våre tidlige designideer ble påvirket av det vi tidligere hadde laget for jobb simulator (f.eks. male tegnet i Auto Mechanic; malingsprogramvaren på Office-datamaskinen). Begge var enkle og morsomme, men ikke veldig dype. Maleri i Feriesimulator måtte føle seg annerledes - og større - for å matche resten av spillet. Vi ønsket å gi spillerne mer enn bare økt pikseltetthet - du burde være i stand til det føler som om du faktisk maler. Som det virkelige livet, bare bedre.

.IRPP_kangoo , .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl , .IRPP_kangoo .centered-text-area { min-height: 100px; stilling: pårørende; } .IRPP_kangoo , .IRPP_kangoo:hover , .IRPP_kangoo:besøkt , .IRPP_kangoo:active { border:0!viktig; } .IRPP_kangoo { display: blokk; overgang: bakgrunnsfarge 250ms; webkit-transition: bakgrunnsfarge 250ms; bredde: 100 %; opasitet: 1; overgang: opasitet 250ms; webkit-overgang: opasitet 250ms; bakgrunnsfarge: #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 { opasitet: 1; overgang: opasitet 250ms; webkit-overgang: opasitet 250ms; bakgrunnsfarge: #FFFFFF; } .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl { background-position: center; bakgrunnsstørrelse: cover; flyte: venstre; margin: 0; polstring: 0; } .IRPP_kangoo .postImageUrl { width: 30%; } .IRPP_kangoo .imgUrl { width: 100%; } .IRPP_kangoo .centered-text-area { flyte: høyre; bredde: 70 %; polstring:0; margin:0; } .IRPP_kangoo .centered-text { display: table; høyde: 100px; venstre: 0; topp: 0; polstring:0; margin:0; } .IRPP_kangoo .IRPP_kangoo-content { display: table-cell; margin: 0; polstring: 0 10px 0 10px; stilling: pårørende; vertikal-juster: midt; bredde: 100 %; } .IRPP_kangoo .ctaText { border-bottom: 0 solid #fff; farge: #000000; skriftstørrelse: 13px; font-weight: fet; bokstavavstand: .125em; margin: 0; polstring: 0; tekst-dekorasjon: understreking; } .IRPP_kangoo .postTitle { farge: #2C3E50; skriftstørrelse: 16px; font-vekt: 600; margin: 0; polstring: 0; } .IRPP_kangoo .ctaButton { bakgrunnsfarge: #FFFFFF; marg-venstre: 10px; posisjon: absolutt; høyre: 0; topp: 0; } .IRPP_kangoo:hover .imgUrl { -webkit-transform: scale(1.2); -moz-transform: skala(1.2); -o-transform: skala(1.2); -ms-transform: skala(1.2); transform: skala(1.2); } .IRPP_kangoo .imgUrl { -webkit-transition: -webkit-transform 0.4s ease-in-out; -moz-overgang: -moz-transform 0.4s letthet-inn-ut; -o-overgang: -o-transform 0.4s letthet-inn-ut; -ms-overgang: -ms-transform 0.4s lett-inn-ut; overgang: transformer 0.4 s lett inn-ut; } .IRPP_kangoo:etter { innhold: “”; display: blokk; klar: begge; }

SE OGSÅ
Eksklusivt: Designe enhåndsgenveier for VR og AR

Mange kunstverk krever revisjon for å gjøre 'meh' til et mesterverk, og maling var ikke noe unntak. Det var en av de tidligste funksjonene vi utviklet for skogen og en vi fortsatte å jobbe med helt frem til lansering! Her er noen eksempler på malingeksperimenter og gjentakelser av funksjonen:

Bare "Photoshopping"

Helt i begynnelsen involverte maling bare bilder. Spillere plasserte et bilde på staffeli og bruk deretter penselen til å 'male' bildet på lerretet. Spillere kan blande og matche, kombinere roboter eller kulisser fra flere bilder, og til og med (hvis de blir smarte) ta nærbilder av spesifikke farger å male med. Jo flere folk spilte, jo mer innså vi at faktisk maleri - komplett med fargeprøver av fargede malinger - økte spillernes evne til å være kreativ drastisk.

Filter

Filtre er et vanlig element i programvare for fotomanipulering, så selvfølgelig vi trodde roboter ville inkludere dem i deres feiltolkning. Vi eksperimenterte med knapper for å bruke filtre: pixelering, invertere farger, svart og hvitt og sepia. Hvis du trykker på en av disse filterknappene, vil effekten bli stablet, og neste penselstrøk vil bruke det filtrerte bildet på lerretet. Selv om det er interessant, fører filtre ofte til frustrasjon da spillerne slet med å forutse hva som faktisk ville vises på lerretet mens de malte. For eksempel, med inversjon, hvis du dyppet børsten i den oransje fargeprøven, ville børsten din malt blått! Vi avviklet å fjerne filtre helt fra staffeli, i stedet integrerte dem i kameraet ditt som linser. Alle de kule effektene uten forvirring!

Mal 'Bucket'

Vår største tilbakemelding fra tidlige leketester var muligheten til å starte med bakgrunnsfarger som ikke var hvite, og muligheten til å slette malerier helt. Ved å legge til en skyveknapp for malingskuff som tørket en solid farge over lerretet, sammen med et hvitt malingsalternativ, løste vi begge disse behovene med en enkelt funksjon. Som en overraskelsesfordel muliggjorde det også opprettelsen av mer ... Botlignende malerier.

Blanding og gjennomsiktighet

Malingsbøtta brukte harde kanter, men når vi så på de samme harde kantene på børsten, føltes den bare ikke realistisk - eller så flott ut. Hakkede piksler er definitivt ikke en del av de fleste virkelige malerier. For en mer realistisk effekt opprettet vi en gjennomsiktighetsgradient som representerer mengden maling som skal påføres lerretet. Brukt sammen med størrelsen og plasseringen av kontaktområdet, kunne vi bestemme hvor mye malingsfargen blandes med det som er under den. Jo lenger penselen er i kontakt med lerretet, jo mer farge påføres, slik at vi kan simulere hvordan ekte børster overfører pigment til stoff.

Flere børster

Vi gikk gjennom flere iterasjoner av børster og penselstørrelser. Før skyveknappen for malingsbøtte ønsket spillerne en giganten børste for å gjøre ting lettere å fylle. Så, etter at vi hadde implementert glidebryteren, ønsket spillerne a mindre pensel for detaljarbeid. Vi hadde en mindre pensel i lang tid, men til slutt kuttet den på grunn av en av de viktigste spillfølelsesfunksjonene i Painting: det squishy tipset!

- - - - -

Vi håper du [EMOTION] maler!

Noen ganger er det bare ingen vei rundt mengden iterasjon det tar å få noe til å se, føle og spille slik du vil. Maling var en viktig øvelse i VR-designoverkommelser, spillerforventninger og bruk av begrensninger for mest kreativitet.

Takk for at du sjekket ut dette bak kulissene til Painting! Vi håper du er inspirert til å kanalisere din indre Leonardo BotVinci inn Feriesimulator.


Les flere gjesteartikler bidratt av eksperter og innsidere i AR og VR.

Innlegget The Surprising Brilliance of 'Vacation Simulator's' VR Paintbrush Tech dukket først på Vei til VR.

Tidstempel:

Mer fra Vei til VR