L'éclat surprenant de la technologie VR Paintbrush PlatoBlockchain Data Intelligence de 'Vacation Simulator'. Recherche verticale. Aï.

L'éclat surprenant de la technologie VR Paintbrush de «Simulateur de vacances»

L'éclat surprenant de la technologie VR Paintbrush PlatoBlockchain Data Intelligence de 'Vacation Simulator'. Recherche verticale. Aï.

Après avoir sorti le toujours populaire simulateur d'emploi en tant que titre de lancement du HTC Vive en 2016, Owlchemy Labs est l'un des studios de jeux VR les plus expérimentés qui existent aujourd'hui. Au fil des années, le studio a construit une base solide en matière de conception d'interaction VR, ce qui se voit dans son dernier titre, Simulateur de vacances. Les interactions qui peuvent paraître simples et utilisables pour le joueur sont souvent bien plus complexes qu'il n'y paraît. Exemple concret : une technologie de pinceau étonnamment brillante qui je me sens juste bien en VR. Les développeurs d'Owlchemy sont là pour expliquer comment ils l'ont construit.

L'éclat surprenant de la technologie VR Paintbrush PlatoBlockchain Data Intelligence de 'Vacation Simulator'. Recherche verticale. Aï.Article invité de Peter Galbraith et Zi Ye

Peter (implémenteur d'Unityisms) et Zi (développeur, Physics/Math Genius) sont tous deux développeurs/concepteurs à double usage chez Owlchemy Labs. Leur travail s'étend de l'idéation de conception et du prototypage à l'itération, à la mise en œuvre de la programmation et aux tests.

L'éclat surprenant de la technologie VR Paintbrush PlatoBlockchain Data Intelligence de 'Vacation Simulator'. Recherche verticale. Aï.Tous deux sont des contributeurs importants à l'héritage des jeux absurdes et hautement VR d'Owlchemy Labs, notamment : titre primé simulateur d'emploi, nominé aux Emmy Rick et Morty: Rick-ality virtuel, et récemment publié Simulateur de vacances, qui arrivera également sur PSVR et Oculus Quest plus tard cette année.

Salut tout le monde!

Pete et Zi ici. Nous sommes tous deux développeurs chez Owlchemy Labs et nous sommes ravis de vous parler de l'une des fonctionnalités les plus itérées de tout le monde. Simulateur de vacances: Peinture!

La peinture est l'une de nos activités les plus colorées au niveau Forêt, un espace créatif niché dans une cabane dans les arbres où vous pouvez libérer l'artiste qui sommeille en vous. Que vous utilisiez notre pinceau super gluant pour créer un chef-d'œuvre à partir de zéro ou que vous utilisiez une photo de l'appareil photo du jeu comme point de départ, la grandeur esthétique est toujours à portée de main. Cependant, comme toutes les fonctionnalités intéressantes, Painting a fait l’objet de plusieurs prototypes et itérations avant d’arriver à notre résultat parfait.

Pour commencer, Zi expliquera la technologie derrière la partie la plus importante de la boîte à outils d'un artiste : le pinceau !

Simulation de la sensation de [PINCEAU]

L’un des aspects les plus difficiles pour que la peinture se sente bien était la pointe du pinceau. En tant qu'outil unique et puissant pour exprimer votre vision créative en peinture, nous savions qu'il était nécessaire de répondre aux attentes liées au fait d'avoir un pinceau en VR, jusqu'aux détails les plus techniques.

Comme toutes les meilleures fonctionnalités de nos jeux, la pointe du pinceau spongieuse a été créée en utilisant une physique fausse et inventée ! Nous commençons par un modèle mathématique constitué d'une ligne droite que nous tirons sur la toile, puis nous déterminons où la pointe se plierait le long de la surface. Cette ligne courbée est utilisée pour manipuler la forme du pinceau, comme ceci :

Cela nous a aidé à résoudre l’un des plus gros problèmes que nous avons rencontrés avec la peinture en VR : le manque de retour. Avec le matériel VR actuel, nous ne pouvons pas simuler avec précision le retour d’un pinceau flexible appuyant contre la toile. Sans ce retour, nous avons constaté qu'il était difficile pour les joueurs de savoir si le pinceau entre en contact, ce qui les obligeait à enfoncer le pinceau trop loin dans la toile et à créer des mouvements saccadés ou hoquetés lorsque le pinceau entrait en collision avec le chevalet de peinture. Ce comportement entraînait de nombreuses « lignes ondulées » et faisait souvent échapper la brosse des mains des joueurs à cause de collisions excessives – ce qui n'est pas exactement quelque chose qui donnait à nos joueurs l'impression d'être des pros de l'art !

En fournissant un retour visuel sous la forme d'une pointe molle, moins de joueurs ont poussé le pinceau aussi loin dans la toile, ce qui a permis d'obtenir moins de poussées et des lignes plus jolies. Nous avons également associé cela à une réapparition automatique si le pinceau fait sortir de la main d'un joueur, ce qui rend à la fois plus probable que le joueur garde sa brosse et plus facile à saisir à nouveau s'il ne le fait pas.

.IRPP_kangoo , .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl , .IRPP_kangoo .centered-text-area { min-height: 100px; position : relative ; } .IRPP_kangoo , .IRPP_kangoo:hover , .IRPP_kangoo:visited , .IRPP_kangoo:active { border:0!important; } .IRPP_kangoo { afficher : bloquer ; transition : couleur d'arrière-plan 250 ms ; transition webkit : couleur d'arrière-plan 250 ms ; largeur : 100 % ; opacité : 1 ; transition : opacité 250 ms ; transition webkit : opacité 250 ms ; couleur de fond : #e6e6e6 ; boîte-ombre : 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 { opacité : 1 ; transition : opacité 250 ms ; transition webkit : opacité 250 ms ; couleur de fond : #FFFFFF ; } .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl { background-position: center; taille de fond : couverture ; flotteur : gauche ; marge : 0 ; rembourrage : 0 ; } .IRPP_kangoo .postImageUrl { largeur : 30 % ; } .IRPP_kangoo .imgUrl { largeur : 100 % ; } .IRPP_kangoo .centered-text-area { float: right; largeur : 70 % ; rembourrage : 0 ; marge : 0 ; } .IRPP_kangoo .centered-text { display: table; hauteur : 100px ; gauche : 0 ; haut : 0 ; rembourrage : 0 ; marge : 0 ; } .IRPP_kangoo .IRPP_kangoo-content { display: table-cell; marge : 0 ; rembourrage : 0 10px 0 10px ; position : relative ; alignement vertical : milieu ; largeur : 100 % ; } .IRPP_kangoo .ctaText { border-bottom : 0 solide #fff ; couleur : #000000 ; taille de police : 13 px ; font-weight : gras ; espacement des lettres : .125em ; marge : 0 ; rembourrage : 0 ; décoration de texte : souligné ; } .IRPP_kangoo .postTitle { couleur : #2C3E50; taille de police : 16 px ; poids de la police : 600 ; marge : 0 ; rembourrage : 0 ; } .IRPP_kangoo .ctaButton { background-color: #FFFFFF; marge gauche : 10 px ; position : absolue ; droite : 0 ; haut : 0 ; } .IRPP_kangoo:hover .imgUrl { -webkit-transform : scale(1.2); -moz-transform : échelle (1.2) ; -o-transform : échelle(1.2); -transformation ms : échelle (1.2) ; transformer : échelle(1.2); } .IRPP_kangoo .imgUrl { -webkit-transition : -webkit-transform 0.4s easy-in-out ; -moz-transition : -moz-transform 0.4s easy-in-out ; -o-transition : -o-transform 0.4s easy-in-out ; -ms-transition : -ms-transform 0.4s easy-in-out ; transition : transformer 0.4 s d'entrée en sortie ; } .IRPP_kangoo:after { contenu : "" ; bloc de visualisation; clarifier les deux; }

VOIR ÉGALEMENT
Exclusif: conception des interfaces à écran tactile virtuel 'Lone Echo' et 'Echo Arena'

Mais: tout est faux ! Les poils de la brosse n'entrent pas réellement en collision dans le système physique, sauf à la base même. L'action d'écrasement crée l'illusion de résistance et fait croire au joueur que la brosse est repoussée.

Nous utilisons également le même modèle mathématique pour déterminer la taille de la zone de contact du pinceau et contrôler la taille de la couche de peinture appliquée sur la toile. Cette caractéristique spécifique nous a permis de livrer avec une seule taille de pinceau, juste avec une largeur de trait variable : touchez légèrement pour un trait fin et précis ou tamponnez les couleurs avec un passage plus ferme.

Le pinceau prend également en compte la « rigidité des cheveux », qui détermine la façon dont les cheveux du pinceau changent de direction lorsqu'ils sont déplacés sur la toile ou lorsque la poignée du pinceau est tournée. La rigidité est également utilisée pour ajouter un peu de mouvement aux poils du pinceau lorsqu'ils ne sont pas en contact avec la toile. Ces petits détails nous ont permis d'obtenir une sensation super « gluante » pour le pinceau, et dès notre tout premier test de jeu, il était clair que les gens réagissaient vraiment à cette sensation perçue.

Le pinceau spongieux a résolu de nombreux problèmes techniques et UX, et a également joué dans ce désir initial de permettre aux joueurs de créer de belles œuvres d'art. Plusieurs développeurs étaient convaincus qu'ils « n'étaient pas des artistes », mais lorsqu'ils ont été placés devant le nouveau chevalet de peinture, ils ont fait des choses comme ceci :

L'éclat surprenant de la technologie VR Paintbrush PlatoBlockchain Data Intelligence de 'Vacation Simulator'. Recherche verticale. Aï.

Les changements de taille calligraphique de la pointe du pinceau, combinés à la palette triée sur le volet par notre artiste, permettent à chacun de créer des images picturales et amusantes. Voila!

Maintenant, en tant que premier développeur à écrire du code sur Painting, Pete va partager notre processus de conception derrière cette fonctionnalité (y compris ses nombreuses itérations !) :

Défis de conception : retour à la planche à dessin !

Chaque fonctionnalité de Simulateur de vacances est parti de la même série de questions :

  • À quoi s’attendent les gens lorsqu’ils passent des vacances dans une destination donnée ?
  • Comment les robots pourraient-ils interpréter de manière hilarante cette activité ?

Nous savions que le dessin, la peinture et le talent artistique étaient des aspects amusants des sorties dans la nature, et lorsque nous avons réfléchi à la façon dont les robots interpréteraient mal la peinture, la manipulation de photos nous est immédiatement venue à l'esprit. Nous avons adoré l'idée de retoucher les photos que vous avez prises autour de l'île et de les personnaliser pour vous exprimer en tant que joueur. Cette idée simple a été à l’origine d’une fonctionnalité qui a pris plus d’un an à concevoir et à concrétiser.

L'éclat surprenant de la technologie VR Paintbrush PlatoBlockchain Data Intelligence de 'Vacation Simulator'. Recherche verticale. Aï.
Simulateur d'emploi (2016)

Une partie de nos premières idées de conception ont été influencées par ce pour quoi nous avions précédemment créé simulateur d'emploi (par exemple, peindre le panneau dans Auto Mechanic ; le logiciel de peinture sur l'ordinateur de bureau). Les deux étaient simples et amusants, mais pas très profonds. Peindre dans Simulateur de vacances devait se sentir différent – ​​et plus grand – pour correspondre au reste du jeu. Nous voulions offrir aux joueurs plus qu'une simple densité de pixels accrue : vous devriez pouvoir ressentir comme si tu peignais réellement. Comme dans la vraie vie, mais en mieux.

.IRPP_kangoo , .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl , .IRPP_kangoo .centered-text-area { min-height: 100px; position : relative ; } .IRPP_kangoo , .IRPP_kangoo:hover , .IRPP_kangoo:visited , .IRPP_kangoo:active { border:0!important; } .IRPP_kangoo { afficher : bloquer ; transition : couleur d'arrière-plan 250 ms ; transition webkit : couleur d'arrière-plan 250 ms ; largeur : 100 % ; opacité : 1 ; transition : opacité 250 ms ; transition webkit : opacité 250 ms ; couleur de fond : #e6e6e6 ; boîte-ombre : 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 { opacité : 1 ; transition : opacité 250 ms ; transition webkit : opacité 250 ms ; couleur de fond : #FFFFFF ; } .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl { background-position: center; taille de fond : couverture ; flotteur : gauche ; marge : 0 ; rembourrage : 0 ; } .IRPP_kangoo .postImageUrl { largeur : 30 % ; } .IRPP_kangoo .imgUrl { largeur : 100 % ; } .IRPP_kangoo .centered-text-area { float: right; largeur : 70 % ; rembourrage : 0 ; marge : 0 ; } .IRPP_kangoo .centered-text { display: table; hauteur : 100px ; gauche : 0 ; haut : 0 ; rembourrage : 0 ; marge : 0 ; } .IRPP_kangoo .IRPP_kangoo-content { display: table-cell; marge : 0 ; rembourrage : 0 10px 0 10px ; position : relative ; alignement vertical : milieu ; largeur : 100 % ; } .IRPP_kangoo .ctaText { border-bottom : 0 solide #fff ; couleur : #000000 ; taille de police : 13 px ; font-weight : gras ; espacement des lettres : .125em ; marge : 0 ; rembourrage : 0 ; décoration de texte : souligné ; } .IRPP_kangoo .postTitle { couleur : #2C3E50; taille de police : 16 px ; poids de la police : 600 ; marge : 0 ; rembourrage : 0 ; } .IRPP_kangoo .ctaButton { background-color: #FFFFFF; marge gauche : 10 px ; position : absolue ; droite : 0 ; haut : 0 ; } .IRPP_kangoo:hover .imgUrl { -webkit-transform : scale(1.2); -moz-transform : échelle (1.2) ; -o-transform : échelle(1.2); -transformation ms : échelle (1.2) ; transformer : échelle(1.2); } .IRPP_kangoo .imgUrl { -webkit-transition : -webkit-transform 0.4s easy-in-out ; -moz-transition : -moz-transform 0.4s easy-in-out ; -o-transition : -o-transform 0.4s easy-in-out ; -ms-transition : -ms-transform 0.4s easy-in-out ; transition : transformer 0.4 s d'entrée en sortie ; } .IRPP_kangoo:after { contenu : "" ; bloc de visualisation; clarifier les deux; }

VOIR ÉGALEMENT
Exclusif: conception de raccourcis à une main pour la réalité virtuelle et la réalité augmentée

De nombreuses œuvres d'art nécessitent des révisions pour transformer « meh » en un chef-d'œuvre, et la peinture ne fait pas exception. C'est l'une des premières fonctionnalités que nous avons développées pour Forest. ainsi que celui sur lequel nous avons continué à travailler jusqu'au lancement ! Voici quelques exemples d’expériences et d’itérations de peinture sur la fonctionnalité :

« Photoshopping » uniquement

Au tout début, la peinture ne concernait que des photos. Les joueurs placeraient une photo sur le chevalet, puis utiliseraient le pinceau pour « peindre » la photo sur la toile. Les joueurs pouvaient mélanger et assortir, en combinant des robots ou des paysages à partir de plusieurs photos, et même (s'ils étaient intelligents) prendre des photos en gros plan de couleurs spécifiques avec lesquelles peindre. Plus les gens jouaient, plus nous réalisions que la peinture réelle, complétée par des échantillons de peintures colorées, augmentait considérablement la capacité créative des joueurs.

Filtres

Les filtres sont un élément courant dans les logiciels de retouche photo. bien sûr nous pensions que les Bots les incluraient dans leur interprétation erronée. Nous avons expérimenté des boutons pour appliquer des filtres : pixellisation, inversion des couleurs, noir et blanc et sépia. Appuyer sur l’un de ces boutons de filtre empilerait les effets et le prochain coup de pinceau appliquerait l’image filtrée au canevas. Bien qu’intéressants, les filtres génèrent souvent de la frustration car les joueurs ont du mal à anticiper ce qui apparaîtrait réellement sur la toile au fur et à mesure qu’ils peignaient. Par exemple, avec l’inversion, si vous trempiez votre pinceau dans l’échantillon orange, votre pinceau peindrait en bleu ! Nous avons fini par supprimer complètement les filtres du chevalet, pour les intégrer plutôt dans votre appareil photo en tant qu'objectifs. Tous les effets sympas sans aucune confusion !

Seau de peinture'

Notre plus grand retour lors des premiers tests de jeu était la possibilité de commencer avec des couleurs d'arrière-plan qui n'étaient pas blanches et la possibilité d'effacer entièrement les peintures. En ajoutant un curseur de pot de peinture qui effaçait une couleur unie sur la toile, ainsi qu'une option de peinture blanche, nous avons résolu ces deux besoins avec une seule fonctionnalité. Comme avantage surprise, cela a également permis la création de plus… Peintures ressemblant à des robots.

Mélange et transparence

Le pot de peinture utilisait des bords durs, mais en regardant ces mêmes bords durs sur le pinceau, cela ne semblait tout simplement pas réaliste ni aussi beau. Les pixels irréguliers ne font certainement pas partie de la plupart des peintures réelles. Pour un effet plus réaliste, nous avons créé un dégradé de transparence représentant la quantité de peinture à appliquer sur la toile. En conjonction avec la taille et la position de la zone de contact, nous pourrions déterminer dans quelle mesure la couleur de la peinture se mélange avec ce qui se trouve en dessous. Plus le pinceau reste longtemps en contact avec la toile, plus la couleur est appliquée, ce qui nous permet de simuler la façon dont de vrais pinceaux transfèrent les pigments sur le tissu.

Plusieurs pinceaux

Nous avons parcouru plusieurs itérations de pinceaux et de tailles de pinceaux. Avant le curseur du pot de peinture, les joueurs voulaient un géant pinceau pour faciliter le remplissage. Ensuite, après avoir implémenté le curseur, les joueurs voulaient un faibles pinceau pour le travail de détail. Nous avons longtemps eu un pinceau plus petit, mais nous l'avons finalement coupé en raison de l'une des caractéristiques de jeu les plus importantes de Painting : la pointe molle !

- - - - -

Nous espérons que vous [EMOTION] Peinture !

Parfois, il n'y a tout simplement aucun moyen de contourner le nombre d'itérations nécessaires pour que quelque chose ait l'apparence, la sensation et le jeu comme vous le souhaitez. La peinture était un exercice capital dans les possibilités de conception VR, les attentes des joueurs et l'utilisation des contraintes pour un maximum de créativité.

Merci d'avoir découvert cet aperçu des coulisses de la peinture ! Nous espérons que vous serez inspiré pour canaliser le Leonardo BotVinci qui sommeille en vous dans Simulateur de vacances.


Lisez d’autres articles invités rédigés par des experts et des initiés en AR et VR.

Le poste L'éclat surprenant de la technologie VR Paintbrush de «Simulateur de vacances» apparaît en premier sur Route vers VR.

Horodatage:

Plus de Route vers VR