La sorprendente genialità della tecnologia VR Paintbrush di "Vacation Simulator" PlatoBlockchain Data Intelligence. Ricerca verticale. Ai.

La sorprendente sorpresa di VR Paintbrush Tech di "Vacation Simulator"

La sorprendente genialità della tecnologia VR Paintbrush di "Vacation Simulator" PlatoBlockchain Data Intelligence. Ricerca verticale. Ai.

Dopo aver rilasciato il sempre popolare simulatore di lavoro come titolo di lancio per HTC Vive nel 2016, Owlchemy Labs è uno degli studi di giochi VR più veterani che esista oggi. Nel corso degli anni lo studio ha costruito una solida base per il design dell'interazione VR che si vede in tutto il loro nuovo titolo, Simulatore di vacanza. Le interazioni che potrebbero sembrare semplici e utilizzabili al giocatore sono spesso molto più complesse di quanto sembri. Caso in questione: una tecnologia sorprendentemente brillante per i pennelli sembra giusto in VR. Gli sviluppatori di Owlchemy sono qui per spiegare come l'hanno costruito.

La sorprendente genialità della tecnologia VR Paintbrush di "Vacation Simulator" PlatoBlockchain Data Intelligence. Ricerca verticale. Ai.Ospite Articolo di Peter Galbraith e Zi Ye

Peter (Implementer of Unityisms) e Zi (Developer, Physics / Math Genius) sono entrambi sviluppatori / designer dual-wielders presso Owlchemy Labs. Il loro lavoro spazia dall'ideazione del design e dalla prototipazione all'iterazione, all'implementazione della programmazione e al test.

La sorprendente genialità della tecnologia VR Paintbrush di "Vacation Simulator" PlatoBlockchain Data Intelligence. Ricerca verticale. Ai.Entrambi sono importanti contributori all'eredità di giochi assurdi e altamente rifiniti in VR presso Owlchemy Labs, tra cui: titolo pluripremiato simulatore di lavoro, Nominato agli Emmy Rick and Morty: Rick-ality virtualee il recentemente rilasciato Simulatore di vacanza, che arriverà anche su PSVR e Oculus Quest entro la fine dell'anno.

Ciao a tutti!

Pete e Zi qui. Siamo entrambi sviluppatori di Owlchemy Labs e siamo entusiasti di parlarvi di una delle funzionalità più iterate dell'intero Simulatore di vacanza: Pittura!

La pittura è una delle nostre attività più colorate nel livello Foresta, uno spazio creativo nascosto in una casa sull'albero dove puoi liberare il tuo artista interiore. Sia che utilizzi il nostro pennello super appiccicoso per creare un capolavoro da zero o usi una foto dalla fotocamera del gioco come punto di partenza, la grandezza estetica è sempre a portata di mano. Tuttavia, come tutte le grandi funzionalità, Painting ha attraversato diversi prototipi e iterazioni prima di arrivare al nostro risultato perfetto per le immagini.

Per dare il via alle cose, Zi spiegherà la tecnologia dietro la parte più importante del kit di strumenti di un artista: il pennello!

Simulazione della sensazione di [PAINTBRUSH]

Uno degli aspetti più impegnativi per far sentire alla grande la pittura è stata la punta del pennello. Essendo il nostro unico e potente strumento per esprimere la tua visione creativa nella pittura, sapevamo che era necessario soddisfare le aspettative che derivano dall'avere un pennello in VR, fino al suo punto più tecnico.

Come tutte le migliori caratteristiche dei nostri giochi, la punta del pennello squishy è stata creata usando una fisica finta e inventata! Iniziamo con un modello matematico costituito da una linea retta che spariamo alla tela, quindi scopriamo dove si piegherebbe la punta lungo la superficie. Quella linea piegata viene utilizzata per manipolare la forma del pennello, in questo modo:

Questo ci ha aiutato a risolvere uno dei maggiori problemi che abbiamo avuto con la pittura in VR: la mancanza di feedback. Con l'attuale hardware VR, non possiamo simulare accuratamente il feedback di un pennello flessibile che preme contro la tela. Senza questo feedback, abbiamo riscontrato che era difficile per i giocatori dire se il pennello stava entrando in contatto, inducendoli a mettere il pennello troppo lontano nella tela e creare movimenti tremolanti o singhiozzi quando il pennello entrava in collisione con il cavalletto da pittura. Questo comportamento portava a molte "linee ondulate" e spesso faceva sì che il pennello sfuggisse completamente dalle mani dei giocatori a causa di collisioni eccessive, non esattamente qualcosa che faceva sentire i nostri giocatori professionisti dell'arte!

Fornendo un feedback visivo sotto forma di punta morbida, un minor numero di giocatori ha spinto il pennello fino in fondo nella tela, creando meno sbavature e linee più belle. Abbiamo anche abbinato questo con un respawn automatico se il pennello ha fatto sfuggire alla mano di un giocatore, rendendo più probabile che il giocatore tenga in mano il pennello e sia più facile afferrarlo di nuovo se non lo fa.

.IRPP_kangoo , .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl , .IRPP_kangoo .centered-text-area { min-height: 100px; posizione: relativa; } .IRPP_kangoo , .IRPP_kangoo:hover , .IRPP_kangoo:visited , .IRPP_kangoo:active { bordo:0!importante; } .IRPP_kangoo { display: blocco; transizione: colore di sfondo 250 ms; transizione webkit: colore di sfondo 250ms; larghezza: 100%; opacità: 1; transizione: opacità 250ms; transizione webkit: opacità 250ms; colore di sfondo: #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:attivo , .IRPP_kangoo:hover { opacità: 1; transizione: opacità 250ms; transizione webkit: opacità 250ms; colore di sfondo: #FFFFFF; } .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl { posizione di sfondo: centro; dimensione dello sfondo: copertina; galleggiante: sinistra; margine: 0; imbottitura: 0; } .IRPP_kangoo .postImageUrl { larghezza: 30%; } .IRPP_kangoo .imgUrl { larghezza: 100%; } .IRPP_kangoo .centered-text-area { float: destra; larghezza: 70%; imbottitura:0; margine:0; } .IRPP_kangoo .centered-text { display: tabella; altezza: 100px; a sinistra: 0; superiore: 0; imbottitura:0; margine:0; } .IRPP_kangoo .IRPP_kangoo-content { display: tabella-cella; margine: 0; riempimento: 0 10px 0 10px; posizione: relativa; vertical-align: medio; larghezza: 100%; } .IRPP_kangoo .ctaText { bordo inferiore: 0 solido #fff; colore: #000000; dimensione del carattere: 13px; font-weight: grassetto; spaziatura delle lettere: .125em; margine: 0; imbottitura: 0; decorazione del testo: sottolineatura; } .IRPP_kangoo .postTitle { colore: #2C3E50; dimensione del carattere: 16px; peso del carattere: 600; margine: 0; imbottitura: 0; } .IRPP_kangoo .ctaButton { colore di sfondo: #FFFFFF; margine sinistro: 10px; posizione: assoluta; a destra: 0; superiore: 0; } .IRPP_kangoo:hover .imgUrl { -webkit-transform: scale(1.2); -moz-trasformata: scala(1.2); -o-trasforma: scala(1.2); -ms-transform: scale(1.2); trasformare: scala(1.2); } .IRPP_kangoo .imgUrl { -webkit-transition: -webkit-transform 0.4s di facile entrata; -moz-transizione: -moz-transform 0.4 s facilità-in-uscita; -o-transizione: -o-trasforma 0.4s di allentamento in entrata; -ms-transizione: -ms-transform 0.4s di facile entrata e uscita; transizione: trasforma 0.4 s di facilità in entrata; } .IRPP_kangoo:dopo { contenuto: “”; blocco di visualizzazione; chiaro: entrambi; }

GUARDA ANCHE
Esclusivo: progettazione di interfacce touchscreen virtuali "Lone Echo" ed "Echo Arena"

Ma ancora: è tutto falso! I peli della spazzola non entrano in collisione nel sistema fisico tranne che alla base. L'azione di schiacciamento crea l'illusione della resistenza e inganna il giocatore facendogli credere che il pennello viene respinto.

Usiamo anche lo stesso modello matematico per determinare la dimensione dell'area di contatto del pennello e controllare la dimensione della vernice dob applicata alla tela. Questa caratteristica specifica ci ha permesso di spedire con una sola dimensione del pennello, solo con larghezza del tratto variabile: sfiorare leggermente per una linea sottile e precisa o tamponare sui colori con una passata più ferma.

Il pennello tiene conto anche della "rigidità dei peli", che determina il modo in cui i peli del pennello cambiano direzione quando vengono trascinati sulla tela o quando viene ruotata la maniglia del pennello. La rigidità viene anche utilizzata per aggiungere un po 'di jiggle ai capelli della spazzola quando non è a contatto con la tela. Questi piccoli dettagli ci hanno permesso di ottenere una sensazione super 'appiccicosa' per il pennello, e dal nostro primo test di gioco è stato chiaro che le persone hanno davvero risposto a quella sensazione percepita.

Il pennello morbido ha risolto molti problemi tecnici e UX, e ha anche giocato su quel desiderio iniziale di consentire ai giocatori di creare bellissime opere d'arte. Avevamo diversi sviluppatori che erano convinti di "non essere artisti", ma quando sono stati messi di fronte al nuovo cavalletto da pittura hanno realizzato cose come questa:

La sorprendente genialità della tecnologia VR Paintbrush di "Vacation Simulator" PlatoBlockchain Data Intelligence. Ricerca verticale. Ai.

I cambi di dimensione calligrafici della punta del pennello combinati con la tavolozza selezionata manualmente dal nostro artista consentono a tutti di creare immagini dall'aspetto pittorico e divertente. Voila!

Ora, come il primo sviluppatore a mettere giù il codice su Painting, Pete condividerà il nostro processo di progettazione dietro la funzionalità (comprese le sue numerose iterazioni!):

Sfide progettuali: ritorno al tavolo da disegno!

Ogni funzionalità in Simulatore di vacanza è partito dalla stessa serie di domande:

  • Cosa si aspettano le persone quando vanno in vacanza in una determinata destinazione?
  • In che modo i robot interpreterebbero in modo esilarante questa attività?

Sapevamo che il disegno, la pittura e l'arte erano aspetti divertenti dell'entrare nella natura, e quando abbiamo pensato a come i Bot avrebbero interpretato male la pittura, ci è venuto subito in mente la manipolazione delle foto. Ci è piaciuta molto l'idea di modificare le foto che hai scattato sull'isola e personalizzarle per esprimere te stesso come giocatore. Quella semplice idea è stata il seme per una funzionalità che ha richiesto più di un anno per essere progettata e realizzata.

La sorprendente genialità della tecnologia VR Paintbrush di "Vacation Simulator" PlatoBlockchain Data Intelligence. Ricerca verticale. Ai.
Simulatore di lavoro (2016)

Parte delle nostre prime idee di design sono state influenzate da ciò per cui avevamo realizzato in precedenza simulatore di lavoro (es. dipingere il cartello nel meccanico dell'auto; il software di pittura sul computer dell'ufficio). Entrambi erano semplici e divertenti, ma non molto profondi. Pittura in Simulatore di vacanza doveva sentirsi diverso - e più grande - per adattarsi al resto del gioco. Volevamo offrire ai giocatori qualcosa di più del semplice aumento della densità di pixel: dovresti essere in grado di farlo sentire come se stessi davvero dipingendo. Come la vita reale, solo meglio.

.IRPP_kangoo , .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl , .IRPP_kangoo .centered-text-area { min-height: 100px; posizione: relativa; } .IRPP_kangoo , .IRPP_kangoo:hover , .IRPP_kangoo:visited , .IRPP_kangoo:active { bordo:0!importante; } .IRPP_kangoo { display: blocco; transizione: colore di sfondo 250 ms; transizione webkit: colore di sfondo 250ms; larghezza: 100%; opacità: 1; transizione: opacità 250ms; transizione webkit: opacità 250ms; colore di sfondo: #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:attivo , .IRPP_kangoo:hover { opacità: 1; transizione: opacità 250ms; transizione webkit: opacità 250ms; colore di sfondo: #FFFFFF; } .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl { posizione di sfondo: centro; dimensione dello sfondo: copertina; galleggiante: sinistra; margine: 0; imbottitura: 0; } .IRPP_kangoo .postImageUrl { larghezza: 30%; } .IRPP_kangoo .imgUrl { larghezza: 100%; } .IRPP_kangoo .centered-text-area { float: destra; larghezza: 70%; imbottitura:0; margine:0; } .IRPP_kangoo .centered-text { display: tabella; altezza: 100px; a sinistra: 0; superiore: 0; imbottitura:0; margine:0; } .IRPP_kangoo .IRPP_kangoo-content { display: tabella-cella; margine: 0; riempimento: 0 10px 0 10px; posizione: relativa; vertical-align: medio; larghezza: 100%; } .IRPP_kangoo .ctaText { bordo inferiore: 0 solido #fff; colore: #000000; dimensione del carattere: 13px; font-weight: grassetto; spaziatura delle lettere: .125em; margine: 0; imbottitura: 0; decorazione del testo: sottolineatura; } .IRPP_kangoo .postTitle { colore: #2C3E50; dimensione del carattere: 16px; peso del carattere: 600; margine: 0; imbottitura: 0; } .IRPP_kangoo .ctaButton { colore di sfondo: #FFFFFF; margine sinistro: 10px; posizione: assoluta; a destra: 0; superiore: 0; } .IRPP_kangoo:hover .imgUrl { -webkit-transform: scale(1.2); -moz-trasformata: scala(1.2); -o-trasforma: scala(1.2); -ms-transform: scale(1.2); trasformare: scala(1.2); } .IRPP_kangoo .imgUrl { -webkit-transition: -webkit-transform 0.4s di facile entrata; -moz-transizione: -moz-transform 0.4 s facilità-in-uscita; -o-transizione: -o-trasforma 0.4s di allentamento in entrata; -ms-transizione: -ms-transform 0.4s di facile entrata e uscita; transizione: trasforma 0.4 s di facilità in entrata; } .IRPP_kangoo:dopo { contenuto: “”; blocco di visualizzazione; chiaro: entrambi; }

GUARDA ANCHE
Esclusivo: progettazione di scorciatoie a una mano per VR e AR

Molte opere d'arte richiedono revisioni per trasformare "meh" in un capolavoro e la pittura non ha fatto eccezione. È stata una delle prime funzionalità che abbiamo sviluppato per la foresta ed uno su cui abbiamo continuato a lavorare fino al lancio! Di seguito sono riportati alcuni esempi di esperimenti e iterazioni di pittura sulla funzionalità:

Solo "Photoshopping"

All'inizio, la pittura riguardava solo le foto. I giocatori posizionavano una foto sul cavalletto e poi usavano il pennello per "dipingere" la foto sulla tela. I giocatori potevano mescolare e abbinare, combinando robot o scenari da più foto e persino (se diventavano intelligenti) scattare foto in primo piano di colori specifici con cui dipingere. Più persone giocavano, più ci rendevamo conto che la pittura reale, completa di campioni di colori colorati, aumentava drasticamente la capacità dei giocatori di essere creativi.

Filtri

I filtri sono un elemento comune nel software di manipolazione delle foto, quindi naturalmente abbiamo pensato che i Bot li avrebbero inclusi nella loro interpretazione errata. Abbiamo sperimentato i pulsanti per applicare i filtri: pixelazione, colori invertiti, bianco e nero e seppia. Premendo uno di questi pulsanti di filtro si impilano gli effetti e il tratto successivo del pennello applica l'immagine filtrata alla tela. Sebbene interessanti, i filtri spesso portano alla frustrazione poiché i giocatori hanno lottato per anticipare ciò che sarebbe effettivamente apparso sulla tela mentre dipingevano. Ad esempio, con l'inversione, se immergi il pennello nel campione arancione, il tuo pennello dipingerebbe di blu! Abbiamo finito per rimuovere completamente i filtri dal cavalletto, invece di integrarli nella fotocamera come obiettivi. Tutti i fantastici effetti senza confusione!

Secchio di vernice'

Il nostro più grande feedback dai primi test di gioco è stato la possibilità di iniziare con colori di sfondo che non erano bianchi e l'opzione di cancellare completamente i dipinti. Aggiungendo un cursore del secchio di vernice che puliva un colore a tinta unita sulla tela, insieme a un'opzione di vernice bianca, abbiamo risolto entrambe le esigenze con una singola funzionalità. Come vantaggio a sorpresa, ha anche consentito la creazione di più ... Quadri simili a bot.

Fusione e trasparenza

Il secchio di vernice utilizzava bordi duri, ma quando si guardavano gli stessi bordi duri sul pennello, non sembrava realistico o sembrava fantastico. I pixel frastagliati non fanno sicuramente parte della maggior parte dei dipinti della vita reale. Per un effetto più realistico, abbiamo creato un gradiente di trasparenza che rappresenta la quantità di vernice da applicare alla tela. Utilizzato insieme alle dimensioni e alla posizione dell'area di contatto, potremmo determinare quanto il colore della vernice si fonde con ciò che si trova sotto. Più a lungo il pennello è a contatto con la tela, più colore viene applicato, permettendoci di simulare come i veri pennelli trasferiscono il pigmento sul tessuto.

Pennelli multipli

Abbiamo eseguito diverse iterazioni di pennelli e dimensioni dei pennelli. Prima del cursore del secchio di vernice, i giocatori volevano un file gigante pennello per rendere le cose più facili da riempire. Quindi, dopo aver implementato lo slider, i giocatori volevano un file inferiore pennello per lavori di dettaglio. Abbiamo avuto un pennello più piccolo per molto tempo, ma alla fine lo abbiamo tagliato a causa di una delle caratteristiche di gioco più importanti di Painting: la punta squishy!

- - - - -

Ci auguriamo che [EMOZIONE] dipinga!

A volte non c'è proprio modo di aggirare la quantità di iterazione necessaria per far apparire, sentire e suonare qualcosa nel modo desiderato. La pittura è stata un esercizio fondamentale per quanto riguarda le possibilità di progettazione VR, le aspettative dei giocatori e l'utilizzo dei vincoli per la massima creatività.

Grazie per aver dato un'occhiata dietro le quinte di Pittura! Ci auguriamo che tu sia ispirato a canalizzare il tuo Leonardo BotVinci interiore in Simulatore di vacanza.


Leggi altri articoli degli ospiti forniti da esperti e addetti ai lavori in AR e VR.

Il post La sorprendente sorpresa di VR Paintbrush Tech di "Vacation Simulator" apparve prima Strada per VR.

Timestamp:

Di più da Strada per VR