'Vacation Simulator' VR Paintbrush Tech PlatoBlockchain 데이터 인텔리전스의 놀라운 광채. 수직 검색. 일체 포함.

"휴가 시뮬레이터"의 VR 페인트 브러쉬 기술의 놀라운 광채

'Vacation Simulator' VR Paintbrush Tech PlatoBlockchain 데이터 인텔리전스의 놀라운 광채. 수직 검색. 일체 포함.

꾸준히 인기를 끌었던 작업 시뮬레이터 2016년 HTC Vive의 출시 타이틀인 Owlchemy Labs는 오늘날 존재하는 가장 베테랑 VR 게임 스튜디오 중 하나입니다. 수년에 걸쳐 스튜디오는 최신 타이틀에서 볼 수 있는 VR 인터랙션 디자인의 강력한 기반을 구축했습니다. 휴가 시뮬레이터. 플레이어가 보기에 간단하고 사용 가능한 것처럼 보이는 상호 작용은 종종 보이는 것보다 훨씬 더 복잡합니다. 적절한 사례: 놀라울 정도로 뛰어난 붓 기술 그냥 기분이 좋다 VR에서. Owlchemy의 개발자들이 여기에서 어떻게 빌드했는지 설명합니다.

'Vacation Simulator' VR Paintbrush Tech PlatoBlockchain 데이터 인텔리전스의 놀라운 광채. 수직 검색. 일체 포함.Peter Galbraith 및 Zi Ye의 게스트 기사

Peter(Unityisms의 구현자)와 Zi(개발자, 물리학/수학 천재)는 모두 다음에서 개발자/디자이너입니다. Owlchemy Labs. 그들의 작업은 반복, 프로그래밍 구현 및 테스트에 이르기까지 디자인 아이디어와 프로토타이핑에 걸쳐 있습니다.

'Vacation Simulator' VR Paintbrush Tech PlatoBlockchain 데이터 인텔리전스의 놀라운 광채. 수직 검색. 일체 포함.둘 다 다음을 포함하여 Owlchemy Labs에서 터무니없고 고도로 VR로 다듬어진 게임의 유산에 중요한 기여자입니다. 수상 경력에 빛나는 타이틀 작업 시뮬레이터, 에미상 후보 릭과 모티 : 가상 릭최근에 출시 된 휴가 시뮬레이터, 올해 말 PSVR 및 Oculus Quest에도 제공될 예정입니다.

안녕 모두들!

여기 피트와 지. 우리는 둘 다 Owlchemy Labs의 개발자이며 전체에서 가장 많이 반복되는 기능 중 하나에 대해 이야기하게 되어 기쁩니다. 휴가 시뮬레이터: 페인트 등!

그림 그리기는 내면의 예술가를 마음껏 펼칠 수 있는 Treehouse에 숨어 있는 창의적인 공간인 Forest 수준에서 가장 다채로운 활동 중 하나입니다. 우리의 끈적끈적한 페인트 브러시를 사용하여 처음부터 걸작을 만들거나 게임 내 카메라의 사진을 시작점으로 사용하든 상관없이 미적 위대함은 항상 손에 닿을 수 있습니다. 그러나 모든 훌륭한 기능과 마찬가지로 Painting도 그림과 같은 완벽한 결과에 도달하기 전에 여러 프로토타입과 반복 작업을 거쳤습니다.

일을 시작하기 위해 Zi는 아티스트 툴킷의 가장 중요한 부분인 페인트 브러시 이면의 기술에 대해 설명합니다!

[PAINTBRUSH]의 느낌 시뮬레이션

페인팅을 멋지게 만드는 가장 어려운 측면 중 하나는 붓 끝이었습니다. 페인팅에서 창의적인 비전을 표현할 수 있는 강력한 단일 도구로서 우리는 VR에서 페인트 브러시를 사용하는 것과 함께 가장 기술적인 핵심에 이르기까지 모든 기대치를 충족해야 한다는 것을 알고 있었습니다.

우리 게임의 모든 최고의 기능과 마찬가지로 뽀송뽀송한 브러시 끝은 가짜 물리를 사용하여 만들어졌습니다! 캔버스에서 쏘는 직선으로 구성된 수학적 모델로 시작한 다음 끝이 표면을 따라 구부러지는 위치를 파악합니다. 그 구부러진 선은 다음과 같이 브러시의 모양을 조작하는 데 사용됩니다.

이것은 우리가 VR로 페인팅할 때 겪었던 가장 큰 문제 중 하나인 피드백 부족을 해결하는 데 도움이 되었습니다. 현재 VR 하드웨어로는 캔버스를 누르는 유연한 브러시의 피드백을 정확하게 시뮬레이션할 수 없습니다. 이 피드백이 없으면 플레이어가 브러시가 접촉하고 있는지 확인하기가 어려워 브러시를 캔버스에 너무 많이 넣거나 브러시가 페인팅 이젤과 충돌할 때 떨리거나 딸꾹질하는 동작이 발생합니다. 이 동작으로 인해 '구불구불한 선'이 많이 발생했고 과도한 충돌로 인해 브러시가 플레이어의 손에서 완전히 빠져나가는 경우가 종종 있었습니다.

뭉툭한 팁 형태로 시각적 피드백을 제공함으로써 더 적은 수의 플레이어가 브러시를 캔버스에 밀어 넣어 더 적은 수의 이탈과 더 예쁜 선을 만들었습니다. 브러시가 플레이어의 손에서 벗어나면 플레이어가 브러시를 계속 잡고 있을 가능성이 높아지고 그렇지 않은 경우 다시 잡기가 더 쉬워집니다.

.IRPP_kangoo , .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl , .IRPP_kangoo .centered-text-area { 최소 높이: 100px; 위치: 상대적; } .IRPP_kangoo , .IRPP_kangoo:hover , .IRPP_kangoo:방문됨 , .IRPP_kangoo:활성 { 테두리:0!중요; } .IRPP_kangoo { 디스플레이: 블록; 전환: 배경색 250ms; 웹킷 전환: 배경색 250ms; 폭: 100%; 불투명도: 1; 전환: 불투명도 250ms; 웹킷 전환: 불투명도 250ms; 배경색: #e6e6e6; 상자 그림자: 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:활성 , .IRPP_kangoo:hover { 불투명도: 1; 전환: 불투명도 250ms; 웹킷 전환: 불투명도 250ms; 배경색: #FFFFFF; } .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl { 배경 위치: 중앙; 배경 크기: 표지; 왼쪽으로 뜨다; 여백: 0; 패딩: 0; } .IRPP_kangoo .postImageUrl { 너비: 30%; } .IRPP_kangoo .imgUrl { 너비: 100%; } .IRPP_kangoo .centered-text-area { float: 오른쪽; 폭: 70%; 패딩:0; 여백:0; } .IRPP_kangoo .centered-text { 디스플레이: 테이블; 높이: 100px; 왼쪽: 0; 상단: 0; 패딩:0; 여백:0; } .IRPP_kangoo .IRPP_kangoo-content { 디스플레이: 테이블 셀; 여백: 0; 패딩: 0 10px 0 10px; 위치: 상대적; 수직 정렬: 중간; 폭: 100%; } .IRPP_kangoo .ctaText { 테두리 바닥: 0 솔리드 #fff; 색상: #000000; 글꼴 크기: 13px; 글꼴 두께: 굵게; 문자 간격: .125em; 여백: 0; 패딩: 0; 텍스트 장식: 밑줄; } .IRPP_kangoo .postTitle { 색상: #2C3E50; 글꼴 크기: 16px; 글꼴 두께: 600; 여백: 0; 패딩: 0; } .IRPP_kangoo .ctaButton { 배경색: #FFFFFF; 여백-왼쪽: 10px; 위치: 절대; 오른쪽: 0; 상단: 0; } .IRPP_kangoo:hover .imgUrl { -webkit-transform: scale(1.2); -moz-변환: 스케일(1.2); -o-변환: 스케일(1.2); -ms-변환: 스케일(1.2); 변환: scale(1.2); } .IRPP_kangoo .imgUrl { -webkit-transition: -webkit-transform 0.4s ease-in-out; -moz-transition: -moz-transform 0.4s ease-in-out; -o-transition: -o-transform 0.4s ease-in-out; -ms-transition: -ms-transform 0.4s ease-in-out; 전환: 변환 0.4초 ease-in-out; } .IRPP_kangoo:후 { 내용: ""; 디스플레이: 블록; 명확한: 둘 다; }

관련 항목
독점 : '론 에코'및 '에코 아레나'의 가상 터치 스크린 인터페이스 설계

그러나 다시: 다 가짜야! 브러시 머리카락은 바로 기본을 제외하고는 물리 시스템에서 실제로 충돌하지 않습니다. 스퀴싱 동작은 저항의 환상을 만들고 플레이어가 브러시가 뒤로 밀리고 있다고 생각하도록 속입니다.

또한 동일한 수학적 모델을 사용하여 브러시 접촉 영역의 크기를 결정하고 캔버스에 적용된 페인트 도브의 크기를 제어합니다. 이 특정 기능을 통해 획 너비가 가변적인 단일 브러시 크기를 제공할 수 있었습니다. 얇고 정밀한 선을 위해 가볍게 터치하거나 더 단단한 패스로 색상을 면봉으로 바를 수 있습니다.

브러시는 또한 브러시 머리카락을 캔버스에서 끌거나 브러시 핸들이 회전할 때 브러시 머리카락의 방향을 변경하는 방법을 결정하는 '머리카락 강성'도 고려합니다. 강성은 또한 브러시 머리카락이 캔버스와 접촉하지 않을 때 약간의 흔들림을 추가하는 데 사용됩니다. 이러한 작은 세부 사항을 통해 브러시에 대한 매우 '끈적끈적한' 느낌을 얻을 수 있으며, 첫 번째 플레이 테스트에서 사람들이 감지된 감각에 실제로 반응한다는 것이 분명했습니다.

푹신한 브러시는 많은 기술 및 UX 문제를 해결했으며 플레이어가 아름다운 예술을 만들 수 있도록 권한을 부여하려는 초기 욕구에도 영향을 미쳤습니다. 우리에게는 "아티스트가 아니다"라고 확신하는 여러 개발자가 있었지만, 새로운 페인팅 이젤 앞에 놓였을 때 다음과 같이 만들었습니다.

'Vacation Simulator' VR Paintbrush Tech PlatoBlockchain 데이터 인텔리전스의 놀라운 광채. 수직 검색. 일체 포함.

붓 끝의 붓글씨 크기 변화와 아티스트의 손으로 고른 팔레트를 사용하면 누구나 그림처럼 재미있고 재미있는 이미지를 만들 수 있습니다. 짜잔!

이제 페인팅에 코드를 작성한 최초의 개발자로서 Pete는 기능(많은 반복을 포함하여) 뒤에 있는 우리의 디자인 프로세스를 공유할 것입니다.

디자인 과제: 드로잉 보드로 돌아가기!

모든 기능 휴가 시뮬레이터 동일한 일련의 질문에서 시작되었습니다.

  • 사람들은 주어진 목적지에서 휴가를 보낼 때 무엇을 기대합니까?
  • 봇이 이 활동을 어떻게 웃기게 잘못 해석할까요?

우리는 스케치, 페인팅, 예술성이 자연으로 나가는 재미있는 측면이라는 것을 알고 있었고 봇이 페인팅을 어떻게 잘못 해석할지 생각했을 때 사진 조작이 즉시 떠올랐습니다. 우리는 섬 주변에서 찍은 사진을 편집하고 플레이어로서 자신을 표현할 수 있도록 사용자 정의하는 아이디어를 좋아했습니다. 그 단순한 아이디어는 디자인하고 구현하는 데 XNUMX년이 넘게 걸린 기능의 씨앗이었습니다.

'Vacation Simulator' VR Paintbrush Tech PlatoBlockchain 데이터 인텔리전스의 놀라운 광채. 수직 검색. 일체 포함.
직업 시뮬레이터 (2016)

초기 디자인 아이디어의 일부는 우리가 이전에 만든 것의 영향을 받았습니다. 작업 시뮬레이터 (예: Auto Mechanic에서 사인 페인팅, 사무실 컴퓨터에서 페인팅 소프트웨어). 둘 다 간단하고 재미있었지만 그다지 깊지 않았습니다. 페인팅 휴가 시뮬레이터 게임의 나머지 부분과 일치하려면 다르게 느껴지고 더 커야 했습니다. 우리는 플레이어에게 단순히 픽셀 밀도를 높이는 것 이상을 제공하고 싶었습니다. 세 연령의 아시안이 실제로 그림을 그리는 것처럼. 실제 생활처럼, 더 나은.

.IRPP_kangoo , .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl , .IRPP_kangoo .centered-text-area { 최소 높이: 100px; 위치: 상대적; } .IRPP_kangoo , .IRPP_kangoo:hover , .IRPP_kangoo:방문됨 , .IRPP_kangoo:활성 { 테두리:0!중요; } .IRPP_kangoo { 디스플레이: 블록; 전환: 배경색 250ms; 웹킷 전환: 배경색 250ms; 폭: 100%; 불투명도: 1; 전환: 불투명도 250ms; 웹킷 전환: 불투명도 250ms; 배경색: #e6e6e6; 상자 그림자: 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:활성 , .IRPP_kangoo:hover { 불투명도: 1; 전환: 불투명도 250ms; 웹킷 전환: 불투명도 250ms; 배경색: #FFFFFF; } .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl { 배경 위치: 중앙; 배경 크기: 표지; 왼쪽으로 뜨다; 여백: 0; 패딩: 0; } .IRPP_kangoo .postImageUrl { 너비: 30%; } .IRPP_kangoo .imgUrl { 너비: 100%; } .IRPP_kangoo .centered-text-area { float: 오른쪽; 폭: 70%; 패딩:0; 여백:0; } .IRPP_kangoo .centered-text { 디스플레이: 테이블; 높이: 100px; 왼쪽: 0; 상단: 0; 패딩:0; 여백:0; } .IRPP_kangoo .IRPP_kangoo-content { 디스플레이: 테이블 셀; 여백: 0; 패딩: 0 10px 0 10px; 위치: 상대적; 수직 정렬: 중간; 폭: 100%; } .IRPP_kangoo .ctaText { 테두리 바닥: 0 솔리드 #fff; 색상: #000000; 글꼴 크기: 13px; 글꼴 두께: 굵게; 문자 간격: .125em; 여백: 0; 패딩: 0; 텍스트 장식: 밑줄; } .IRPP_kangoo .postTitle { 색상: #2C3E50; 글꼴 크기: 16px; 글꼴 두께: 600; 여백: 0; 패딩: 0; } .IRPP_kangoo .ctaButton { 배경색: #FFFFFF; 여백-왼쪽: 10px; 위치: 절대; 오른쪽: 0; 상단: 0; } .IRPP_kangoo:hover .imgUrl { -webkit-transform: scale(1.2); -moz-변환: 스케일(1.2); -o-변환: 스케일(1.2); -ms-변환: 스케일(1.2); 변환: scale(1.2); } .IRPP_kangoo .imgUrl { -webkit-transition: -webkit-transform 0.4s ease-in-out; -moz-transition: -moz-transform 0.4s ease-in-out; -o-transition: -o-transform 0.4s ease-in-out; -ms-transition: -ms-transform 0.4s ease-in-out; 전환: 변환 0.4초 ease-in-out; } .IRPP_kangoo:후 { 내용: ""; 디스플레이: 블록; 명확한: 둘 다; }

관련 항목
독점 : VR 및 AR을위한 한손 단축키 디자인

많은 예술 작품은 '메'를 걸작으로 만들기 위해 수정이 필요하며 회화도 예외는 아닙니다. 그것은 우리가 Forest를 위해 개발한 초기 기능 중 하나였습니다. 출시 때까지 계속 작업한 것 중 하나입니다! 다음은 기능에 대한 페인팅 실험 및 반복의 몇 가지 예입니다.

'포토샵'만

처음에는 회화에만 사진이 포함되었습니다. 플레이어는 이젤에 사진을 놓고 페인트 브러시를 사용하여 캔버스에 사진을 '페인트'합니다. 플레이어는 여러 사진의 봇 또는 풍경을 결합하여 믹스 앤 매치할 수 있으며 (영리한 경우) 특정 색상의 클로즈업 사진을 찍어서 칠할 수도 있습니다. 더 많은 사람들이 게임을 하면 할수록 우리는 실제 그림(색상 견본으로 완성)이 플레이어의 창의력을 극적으로 향상시킨다는 것을 깨달았습니다.

필터

필터는 사진 조작 소프트웨어의 공통 요소이므로 물론 우리는 봇이 잘못된 해석에 포함시킬 것이라고 생각했습니다. 픽셀화, 색상 반전, 흑백 및 세피아와 같은 필터를 적용하는 버튼을 실험했습니다. 이 필터 버튼 중 하나를 누르면 효과가 누적되고 브러시의 다음 스트로크는 필터링된 이미지를 캔버스에 적용합니다. 흥미롭긴 하지만 필터는 플레이어가 페인팅할 때 실제로 캔버스에 표시될 내용을 예상하기 위해 고군분투하기 때문에 종종 좌절감을 줍니다. 예를 들어 반전을 사용하여 브러시를 주황색 견본에 담그면 브러시가 파란색으로 칠해질 것입니다! 우리는 이젤에서 필터를 완전히 제거하는 대신 카메라에 렌즈로 통합했습니다. 혼란 없이 모든 멋진 효과!

페인트 통'

초기 플레이 테스트에서 가장 큰 피드백은 흰색이 아닌 배경색으로 시작할 수 있는 기능과 그림을 완전히 지울 수 있는 옵션이었습니다. 흰색 페인트 옵션과 함께 캔버스 전체에 단색을 닦는 페인트 통 슬라이더를 추가하여 단일 기능으로 이러한 요구 사항을 모두 해결했습니다. 놀라운 혜택으로 더 많은 콘텐츠를 생성할 수 있었습니다. 봇 같은 그림.

블렌딩 및 투명도

페인트 통은 단단한 가장자리를 사용했지만 브러시에서 동일한 단단한 가장자리를 볼 때 현실감이 느껴지지 않거나 그렇게 멋지게 보이지 않습니다. 들쭉날쭉한 픽셀은 확실히 대부분의 실제 그림의 일부가 아닙니다. 보다 사실적인 효과를 위해 캔버스에 적용할 페인트의 양을 나타내는 투명도 그라디언트를 만들었습니다. 접촉 영역의 크기 및 위치와 함께 사용하면 페인트 색상이 그 아래에 있는 것과 얼마나 혼합되는지 결정할 수 있습니다. 브러시가 캔버스와 접촉하는 시간이 길수록 더 많은 색상이 적용되어 실제 브러시가 안료를 천으로 옮기는 방식을 시뮬레이션할 수 있습니다.

여러 브러쉬

브러시와 브러시 크기를 여러 번 반복했습니다. 페인트 통 슬라이더 이전에 플레이어는 거대한 브러시로 물건을 더 쉽게 채울 수 있습니다. 그런 다음 슬라이더를 구현한 후 플레이어는 작은 세부 작업을 위한 붓. 우리는 오랫동안 더 작은 붓을 가지고 있었지만, 페인팅의 가장 중요한 게임 느낌 기능 중 하나인 뽀송뽀송한 끝으로 인해 결국 잘라냈습니다!

– – – – –

[EMOTION] 그림을 그리시기 바랍니다!

때로는 원하는 대로 모양, 느낌 및 재생을 만드는 데 필요한 반복 작업의 양을 해결할 수 있는 방법이 없습니다. 페인팅은 VR 디자인 어포던스, 플레이어 기대치, 가장 창의성을 위한 제약 활용에 있어 중요한 연습이었습니다.

페인팅의 비하인드 스토리를 확인해 주셔서 감사합니다! 내면의 Leonardo BotVinci를 휴가 시뮬레이터.


AR 및 VR 분야의 전문가와 내부자가 기고한 게스트 기사 더 읽어보기.

포스트 "휴가 시뮬레이터"의 VR 페인트 브러쉬 기술의 놀라운 광채 첫 번째 등장 VR로가는 길.

타임 스탬프 :

더보기 VR로가는 길