O Surpreendente Brilho do 'Vacation Simulator's VR Paintbrush Tech PlatoBlockchain Data Intelligence. Pesquisa Vertical. Ai.

O brilho surpreendente da tecnologia de pincel VR de 'Vacation Simulator'

O Surpreendente Brilho do 'Vacation Simulator's VR Paintbrush Tech PlatoBlockchain Data Intelligence. Pesquisa Vertical. Ai.

Tendo lançado o sempre popular simulador de trabalho como um título de lançamento para o HTC Vive em 2016, Owlchemy Labs é um dos estúdios de jogos de RV mais veteranos que existem hoje. Ao longo dos anos, o estúdio construiu uma base sólida de design de interação de RV, que pode ser vista em seu mais novo título, Simulador de férias. As interações que podem parecer simples e utilizáveis ​​para o jogador são frequentemente muito mais complexas do que parecem. Caso em questão: alguma tecnologia de pincel surpreendentemente brilhante que apenas parece certo em VR. Os desenvolvedores da Owlchemy estão aqui para explicar como o construíram.

O Surpreendente Brilho do 'Vacation Simulator's VR Paintbrush Tech PlatoBlockchain Data Intelligence. Pesquisa Vertical. Ai.Artigo convidado por Peter Galbraith e Zi Ye

Peter (Implementador de Unityisms) e Zi (Developer, Physics / Math Genius) são ambos desenvolvedor / designer dual-wielders em Owlchemy Labs. Seu trabalho abrange a concepção de design e prototipagem para iteração, implementação de programação e teste.

O Surpreendente Brilho do 'Vacation Simulator's VR Paintbrush Tech PlatoBlockchain Data Intelligence. Pesquisa Vertical. Ai.Ambos são contribuidores importantes para o legado de jogos absurdos e altamente polidos de RV no Owlchemy Labs, incluindo: título premiado simulador de trabalho, Indicado ao Emmy Rick e Morty: Rick-alidade virtuale o recém lançado Simulador de férias, que também está chegando ao PSVR e Oculus Quest ainda este ano.

Olá a todos!

Pete e Zi aqui. Somos ambos desenvolvedores do Owlchemy Labs e estamos ansiosos para falar com você sobre um dos recursos mais iterativos de todo o Simulador de férias: Pintura!

Pintar é uma de nossas atividades mais coloridas no nível da Floresta, um espaço criativo escondido em uma casa na árvore onde você pode liberar sua arte interior. Quer você use nosso pincel super pegajoso para fazer uma obra-prima do zero ou use uma foto da câmera do jogo como ponto de partida, a grandeza estética está sempre ao seu alcance. No entanto, como todos os grandes recursos, a Pintura passou por vários protótipos e iterações antes de chegarmos ao nosso resultado de imagem perfeita.

Para começar, Zi explicará a tecnologia por trás da parte mais importante do kit de ferramentas de um artista: o pincel!

Simulando a sensação de [PAINTBRUSH]

Um dos aspectos mais desafiadores de fazer a pintura parecer ótima foi a ponta do pincel. Como nossa ferramenta única e poderosa para expressar sua visão criativa em Pintura, sabíamos que era necessário atender às expectativas de ter um pincel em RV, até o seu âmago técnico.

Como todos os melhores recursos em nossos jogos, a ponta do pincel flexível foi criada usando física falsa e inventada! Começamos com um modelo matemático que consiste em uma linha reta que disparamos na tela e, em seguida, descobrimos onde a ponta se dobraria ao longo da superfície. Essa linha dobrada é usada para manipular a forma do pincel, assim:

Isso nos ajudou a resolver um dos maiores problemas que tínhamos com a pintura em RV: falta de feedback. Com o hardware VR atual, não podemos simular com precisão o feedback de uma escova flexível pressionando contra a tela. Sem esse feedback, descobrimos que era difícil para os jogadores saber se o pincel estava fazendo contato, fazendo com que colocassem o pincel muito longe na tela e criando movimentos trêmulos ou soluços quando o pincel colidiu com o cavalete de pintura. Esse comportamento levou a muitas 'linhas onduladas' e muitas vezes fez com que o pincel saísse das mãos dos jogadores inteiramente devido a colisões excessivas - não exatamente algo que fizesse nossos jogadores se sentirem profissionais da arte!

Ao fornecer feedback visual na forma de uma ponta mole, menos jogadores empurraram o pincel até o fundo da tela, resultando em menos fugas e linhas mais bonitas. Também combinamos isso com um respawn automático se o pincel fez escapar da mão de um jogador, tornando mais provável que o jogador tenha segurado o pincel e mais fácil de agarrar novamente se não o fizer.

.IRPP_kangoo , .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl , .IRPP_kangoo .centered-text-area { min-height: 100px; posição: relativa; } .IRPP_kangoo , .IRPP_kangoo:hover , .IRPP_kangoo:visitado , .IRPP_kangoo:ativo { border:0!important; } .IRPP_kangoo { display: bloco; transição: cor de fundo 250ms; transição do webkit: cor de fundo 250ms; largura: 100%; opacidade: 1; transição: opacidade 250ms; webkit-transição: opacidade 250ms; cor de fundo: #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:ativo , .IRPP_kangoo:hover { opacidade: 1; transição: opacidade 250ms; webkit-transição: opacidade 250ms; cor de fundo: #FFFFFF; } .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl { background-position: center; tamanho do fundo: capa; flutuar: esquerda; margem: 0; preenchimento: 0; } .IRPP_kangoo .postImageUrl { largura: 30%; } .IRPP_kangoo .imgUrl { largura: 100%; } .IRPP_kangoo .centered-text-area { float: right; largura: 70%; preenchimento: 0; margem:0; } .IRPP_kangoo .centered-text { display: table; altura: 100px; esquerda: 0; topo: 0; preenchimento: 0; margem:0; } .IRPP_kangoo .IRPP_kangoo-content { display: table-cell; margem: 0; preenchimento: 0 10px 0 10px; posição: relativa; alinhamento vertical: meio; largura: 100%; } .IRPP_kangoo .ctaText { borda inferior: 0 sólido #fff; cor: #000000; tamanho da fonte: 13px; intensidade da fonte: Negrito; espaçamento entre letras: .125em; margem: 0; preenchimento: 0; decoração de texto: sublinhado; } .IRPP_kangoo .postTitle { color: #2C3E50; tamanho da fonte: 16px; peso da fonte: 600; margem: 0; preenchimento: 0; } .IRPP_kangoo .ctaButton { cor de fundo: #FFFFFF; margem esquerda: 10px; posição: absoluta; direita: 0; topo: 0; } .IRPP_kangoo:hover .imgUrl { -webkit-transform: scale(1.2); -moz-transform: escala(1.2); -o-transform: escala(1.2); -ms-transform: escala(1.2); transformar: escala(1.2); } .IRPP_kangoo .imgUrl { -webkit-transition: -webkit-transform 0.4s facilita a entrada; -moz-transição: -moz-transform 0.4s facilita a entrada e saída; -o-transição: -o-transform 0.4s facilidade de entrada e saída; -ms-transição: -ms-transform 0.4s facilita a entrada e saída; transição: transforme 0.4s facilidade de entrada e saída; } .IRPP_kangoo:after { content: “”; exibição: bloco; limpar ambos; }

VEJA TAMBÉM
Exclusivo: Criação de interfaces virtuais touchscreen 'Lone Echo' e 'Echo Arena'

Mas novamente: é tudo falso! O cabelo da escova na verdade não colide no sistema físico, exceto na base. A ação de esmagamento cria a ilusão de resistência e leva o jogador a pensar que o pincel está sendo empurrado para trás.

Também usamos o mesmo modelo matemático para determinar o tamanho da área de contato do pincel e controlar o tamanho da dob de tinta aplicada à tela. Esse recurso específico nos permitiu enviar com um único tamanho de pincel, apenas com largura de traço variável: toque levemente para uma linha fina e precisa ou cotonete nas cores com uma passagem mais firme.

O pincel também leva em consideração a 'rigidez do cabelo', que determina como o cabelo do pincel muda de direção quando é arrastado na tela ou quando a alça do pincel é girada. A rigidez também é usada para adicionar um pouco de sacudidela ao cabelo da escova quando não está em contato com a tela. Esses pequenos detalhes nos permitem ter uma sensação super 'pegajosa' do pincel, e desde nosso primeiro teste ficou claro que as pessoas realmente reagiram a essa sensação percebida.

O pincel mole resolveu muitos problemas técnicos e de experiência do usuário, e também contribuiu para o desejo inicial de capacitar os jogadores a criar uma bela arte. Tínhamos vários desenvolvedores que estavam convencidos de que "não eram artistas", mas quando colocados na frente do novo cavalete de pintura fizeram coisas assim:

O Surpreendente Brilho do 'Vacation Simulator's VR Paintbrush Tech PlatoBlockchain Data Intelligence. Pesquisa Vertical. Ai.

As mudanças caligráficas de tamanho da ponta do pincel, combinadas com a paleta escolhida a dedo por nosso artista, permitem que todos criem imagens com uma aparência pictórica e divertida. Voila!

Agora, como o primeiro desenvolvedor a colocar código no Painting, Pete vai compartilhar nosso processo de design por trás do recurso (incluindo suas muitas iterações!):

Desafios de design: de volta à prancheta!

Cada recurso em Simulador de férias começou com a mesma série de perguntas:

  • O que as pessoas esperam quando passam férias em um determinado destino?
  • Como os Bots interpretariam erroneamente essa atividade?

Nós sabíamos que esboçar, pintar e arte eram aspectos divertidos de entrar na natureza, e quando pensamos sobre como os Bots interpretariam mal a pintura, manipular fotos instantaneamente veio à mente. Adoramos a ideia de editar as fotos que você tirou pela ilha e personalizá-las para se expressar como jogador. Essa ideia simples foi a semente de um recurso que levou mais de um ano para ser projetado e trazido à vida.

O Surpreendente Brilho do 'Vacation Simulator's VR Paintbrush Tech PlatoBlockchain Data Intelligence. Pesquisa Vertical. Ai.
Simulador de Trabalho (2016)

Parte de nossas primeiras ideias de design foram influenciadas pelo que havíamos feito anteriormente para simulador de trabalho (por exemplo, pintar a placa no Mecânico de Automóveis; o software de pintura no computador do Office). Ambos eram simples e divertidos, mas não muito profundos. Pintando em Simulador de férias tinha que parecer diferente - e maior - para combinar com o resto do jogo. Queríamos dar aos jogadores mais do que apenas maior densidade de pixels - você deve ser capaz de sentir como se estivesse realmente pintando. Como na vida real, só que melhor.

.IRPP_kangoo , .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl , .IRPP_kangoo .centered-text-area { min-height: 100px; posição: relativa; } .IRPP_kangoo , .IRPP_kangoo:hover , .IRPP_kangoo:visitado , .IRPP_kangoo:ativo { border:0!important; } .IRPP_kangoo { display: bloco; transição: cor de fundo 250ms; transição do webkit: cor de fundo 250ms; largura: 100%; opacidade: 1; transição: opacidade 250ms; webkit-transição: opacidade 250ms; cor de fundo: #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:ativo , .IRPP_kangoo:hover { opacidade: 1; transição: opacidade 250ms; webkit-transição: opacidade 250ms; cor de fundo: #FFFFFF; } .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl { background-position: center; tamanho do fundo: capa; flutuar: esquerda; margem: 0; preenchimento: 0; } .IRPP_kangoo .postImageUrl { largura: 30%; } .IRPP_kangoo .imgUrl { largura: 100%; } .IRPP_kangoo .centered-text-area { float: right; largura: 70%; preenchimento: 0; margem:0; } .IRPP_kangoo .centered-text { display: table; altura: 100px; esquerda: 0; topo: 0; preenchimento: 0; margem:0; } .IRPP_kangoo .IRPP_kangoo-content { display: table-cell; margem: 0; preenchimento: 0 10px 0 10px; posição: relativa; alinhamento vertical: meio; largura: 100%; } .IRPP_kangoo .ctaText { borda inferior: 0 sólido #fff; cor: #000000; tamanho da fonte: 13px; intensidade da fonte: Negrito; espaçamento entre letras: .125em; margem: 0; preenchimento: 0; decoração de texto: sublinhado; } .IRPP_kangoo .postTitle { color: #2C3E50; tamanho da fonte: 16px; peso da fonte: 600; margem: 0; preenchimento: 0; } .IRPP_kangoo .ctaButton { cor de fundo: #FFFFFF; margem esquerda: 10px; posição: absoluta; direita: 0; topo: 0; } .IRPP_kangoo:hover .imgUrl { -webkit-transform: scale(1.2); -moz-transform: escala(1.2); -o-transform: escala(1.2); -ms-transform: escala(1.2); transformar: escala(1.2); } .IRPP_kangoo .imgUrl { -webkit-transition: -webkit-transform 0.4s facilita a entrada; -moz-transição: -moz-transform 0.4s facilita a entrada e saída; -o-transição: -o-transform 0.4s facilidade de entrada e saída; -ms-transição: -ms-transform 0.4s facilita a entrada e saída; transição: transforme 0.4s facilidade de entrada e saída; } .IRPP_kangoo:after { content: “”; exibição: bloco; limpar ambos; }

VEJA TAMBÉM
Exclusivo: Criação de atalhos com uma só mão para RV e AR

Muitas obras de arte requerem revisões para transformar 'meh' em uma obra-prima, e a Pintura não foi exceção. Foi um dos primeiros recursos que desenvolvemos para a Floresta e um em que continuamos trabalhando até o lançamento! Aqui estão alguns exemplos de experimentos de pintura e iterações no recurso:

'Photoshopping' apenas

No início, a pintura envolvia apenas fotos. Os jogadores colocariam uma foto no cavalete e, em seguida, usariam o pincel para 'pintar' a foto na tela. Os jogadores podiam misturar e combinar, combinando bots ou cenários de várias fotos e até mesmo (se fossem espertos) tirar fotos em close de cores específicas para pintar. Quanto mais pessoas jogavam, mais percebíamos que a pintura real - completa com amostras de tintas coloridas - aumentava drasticamente a capacidade de criatividade dos jogadores.

Filtros

Filtros são um elemento comum em software de manipulação de fotos, então claro pensamos que os bots os incluiriam em sua interpretação errônea. Experimentamos botões para aplicar filtros: pixelização, inverter cores, preto e branco e sépia. Pressionar qualquer um desses botões de filtro empilharia efeitos e o próximo traço do pincel aplicaria a imagem filtrada à tela. Embora interessantes, os filtros geralmente levam à frustração, pois os jogadores se esforçam para antecipar o que realmente apareceria na tela enquanto pintavam. Por exemplo, com a inversão, se você mergulhasse seu pincel na amostra laranja, seu pincel pintaria de azul! Acabamos removendo os filtros do cavalete inteiramente, em vez de integrá-los à sua câmera como lentes. Todos os efeitos legais sem nenhuma confusão!

Balde de tinta'

Nosso maior feedback dos primeiros testes foi a capacidade de começar com cores de fundo que não eram brancas e a opção de apagar totalmente as pinturas. Adicionando um controle deslizante de balde de tinta que passou uma cor sólida pela tela, junto com uma opção de tinta branca, resolvemos ambas as necessidades com um único recurso. Como um benefício surpresa, também permitiu a criação de mais… Pinturas semelhantes a bots.

Mistura e transparência

O balde de tinta usava bordas duras, mas ao olhar para essas mesmas bordas duras no pincel, simplesmente não parecia realista - ou parecia tão bom. Pixels irregulares definitivamente não fazem parte da maioria das pinturas da vida real. Para um efeito mais realista, criamos um gradiente de transparência que representa a quantidade de tinta a ser aplicada à tela. Usado em conjunto com o tamanho e a posição da área de contato, podemos determinar o quanto a cor da tinta se mistura com o que está abaixo dela. Quanto mais tempo o pincel fica em contato com a tela, mais cor é aplicada, permitindo simular como os pincéis reais transferem o pigmento para o tecido.

Pincéis múltiplos

Passamos por várias iterações de pincéis e tamanhos de pincel. Antes do controle deslizante do balde de tinta, os jogadores queriam um gigante escova para tornar as coisas mais fáceis de preencher. Então, depois que implementamos o controle deslizante, os jogadores queriam um menor pincel para trabalhos detalhados. Tínhamos um pincel menor por muito tempo, mas acabamos cortando-o devido a uma das características mais importantes da sensação de jogo da Pintura: a ponta mole!

- - - - -

Esperamos que você [EMOÇÃO] Pintura!

Às vezes, simplesmente não há como evitar a quantidade de iteração necessária para fazer algo parecer, sentir e tocar da maneira que você deseja. A pintura foi um exercício importante em termos de recursos de design de RV, expectativas do jogador e utilização de restrições para obter o máximo de criatividade.

Obrigado por dar uma olhada nos bastidores da Pintura! Esperamos que você se inspire para canalizar seu Leonardo BotVinci interno em Simulador de férias.


Leia mais artigos de convidados com contribuições de especialistas e especialistas em RA e VR.

O posto O brilho surpreendente da tecnologia de pincel VR de 'Vacation Simulator' apareceu pela primeira vez em Estrada para VR.

Carimbo de hora:

Mais de Estrada para VR