실시간 멀티플레이어 가상 현실 게임을 구축하는 방법(1부)
게시 됨: 2022-03-10이 튜토리얼 시리즈에서는 플레이어가 퍼즐을 풀기 위해 협력해야 하는 웹 기반 멀티플레이어 가상 현실 게임을 구축할 것입니다. VR 모델링에는 A-Frame, 교차 장치 실시간 동기화에는 MirrorVR, 저폴리 미학에는 A-Frame Low Poly를 사용합니다. 이 튜토리얼이 끝나면 누구나 플레이할 수 있는 완전한 기능의 온라인 데모를 갖게 됩니다.
각 플레이어 쌍에는 오브 링이 제공됩니다. 목표는 모든 구를 "켜는" 것인데, 구가 높고 밝으면 "켜져 있는" 것입니다. 구체가 더 낮고 희미하면 "꺼져" 있습니다. 그러나 특정 "지배적인" 구는 이웃에 영향을 미칩니다. 상태를 전환하면 이웃도 상태를 전환합니다. 플레이어 2만이 지배적 구체를 제어할 수 있고 플레이어 1만이 비 지배적 구체를 제어할 수 있습니다. 이를 통해 두 플레이어는 퍼즐을 풀기 위해 협력해야 합니다. 튜토리얼의 첫 번째 부분에서는 환경을 구축하고 VR 게임을 위한 디자인 요소를 추가합니다.
이 자습서의 7단계는 세 섹션으로 그룹화되어 있습니다.
- 장면 설정(1-2단계)
- 오브 생성(3–5단계)
- 오브 인터랙티브 만들기(6–7단계)
이 첫 번째 부분은 켜고 끄는 클릭 가능한 구로 마무리됩니다(아래 그림 참조). A-Frame VR 및 여러 A-Frame 확장을 사용합니다.
장면 설정
1. 기본 장면으로 가자
시작하기 위해 그라운드가 있는 간단한 장면을 설정하는 방법을 살펴보겠습니다.
아래의 처음 세 가지 지침은 이전 기사에서 발췌한 것입니다. 단일 정적 HTML 페이지로 웹사이트를 설정하는 것으로 시작합니다. 이를 통해 데스크탑에서 코딩하고 웹에 자동으로 배포할 수 있습니다. 그런 다음 배포된 웹 사이트를 휴대폰에 로드하고 VR 헤드셋 안에 배치할 수 있습니다. 또는 배포된 웹 사이트를 독립 실행형 VR 헤드셋으로 로드할 수 있습니다.
glitch.com으로 이동하여 시작하십시오. 그런 다음 다음을 수행합니다.
- 오른쪽 상단의 "새 프로젝트"를 클릭하고,
- 드롭다운에서 "hello-webpage"를 클릭하고,
- 그런 다음 왼쪽 사이드바에서 index.html 을 클릭합니다. 우리는 이것을 귀하의 "편집자"라고 부를 것입니다.
이제 기본 HTML 파일이 있는 다음 Glitch 화면이 표시되어야 합니다.
위의 링크된 자습서와 마찬가지로 현재 index.html 파일에서 기존 코드를 모두 삭제하여 시작합니다. 그런 다음 A-Frame VR을 사용하여 기본 webVR 프로젝트에 대해 다음을 입력합니다. 이것은 A-Frame의 기본 조명과 카메라를 사용하여 빈 장면을 만듭니다.
<!DOCTYPE html> <html> <head> <title>Lightful</title> <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script> </head> <body> <a-scene> </a-scene> </body> </html> 서 있는 높이로 카메라를 올립니다. A-Frame VR 권장 사항(Github 문제)에 따라 카메라를 새 개체로 래핑하고 카메라 대신 상위 개체를 직접 이동합니다. 8행과 9행의 a-scene 태그 사이에 다음을 추가합니다.
<!-- Camera! --> <a-entity position="0 3 0"> <a-camera wasd-controls look-controls></a-camera> </a-entity> 다음으로 a-box 를 사용하여 땅을 나타내는 큰 상자를 추가합니다. 이전 지침에서 카메라 바로 아래에 배치합니다.
<!-- Action! --> <a-box shadow width="75" height="0.1" depth="75" position="0 -1 0" color="#222"></a-box>이제 index.html 파일이 다음과 정확히 일치해야 합니다. Github에서 전체 소스 코드를 찾을 수 있습니다.
<html> <head> <title>Lightful</title> <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script> </head> <body> <a-scene> <!-- Camera! --> <a-entity position="0 3 0"> <a-camera wasd-controls look-controls></a-camera> </a-entity> <!-- Action! --> <a-box shadow width="75" height="0.1" depth="75" position="0 -1 0" color="#222"></a-box> </a-scene> </body> </html>이것으로 설정을 마칩니다. 다음으로 조명을 커스터마이징하여 더욱 신비로운 분위기를 연출해 보겠습니다.
2. 분위기 추가
이 단계에서는 안개와 사용자 정의 조명을 설정합니다.
안개를 추가하면 멀리 있는 물체를 가릴 수 있습니다. 8행에서 a-scene 태그를 수정합니다. 여기에서 지면의 가장자리를 빠르게 가리는 어두운 안개를 추가하여 먼 수평선의 효과를 줍니다.
<a-scene fog="type: linear; color: #111; near:10; far:15"></a-scene> 짙은 회색 #111 은 10의 거리에서 15의 거리까지 선형으로 페이드 인됩니다. 15단위 이상 떨어진 모든 물체는 완전히 가려지고 10단위 미만의 모든 물체는 완전히 보입니다. 그 사이에 있는 모든 물체는 부분적으로 가려져 있습니다.
하나의 주변 조명을 추가하여 게임 내 개체를 밝게 하고 단방향 조명을 추가하여 나중에 추가할 반사 표면을 강조합니다. 이전 지침에서 수정한 a-scene 태그 바로 뒤에 배치합니다.
<!-- Lights! --> <a-light type="directional" castshadow="true" intensity="0.5" color="#FFF" position="2 5 0"></a-light> <a-light intensity="0.1" type="ambient" position="1 1 1" color="#FFF"></a-light> 이전 지침의 조명 바로 아래에 어두운 하늘을 추가합니다. 짙은 회색 #111 이 먼 안개와 일치함을 알 수 있습니다.
<a-sky color="#111"></a-sky>이것으로 분위기에 대한 기본적인 수정과 보다 광범위하게는 장면 설정이 완료되었습니다. 코드가 Github의 2단계 소스 코드와 정확히 일치하는지 확인합니다. 다음으로 로우 폴리 구를 추가하고 구의 미학을 사용자 정의하기 시작합니다.
오브 생성
3. 로우 폴리 오브 생성
이 단계에서는 아래 그림과 같이 회전하는 반사 구를 만듭니다. 구는 반사 재료를 제안하는 몇 가지 트릭과 함께 두 개의 양식화된 로우 폴리 구체로 구성됩니다.
먼저 head 태그에서 low-poly 라이브러리를 가져옵니다. 4행과 5행 사이에 다음을 삽입하십시오.
<script src="https://cdn.jsdelivr.net/gh/alvinwan/[email protected]/dist/aframe-low-poly.min.js"></script> 캐러셀, 래퍼 및 구 컨테이너를 만듭니다. carousel 는 여러 개의 구를 포함하고 wrapper 를 사용하면 각 구를 개별적으로 회전하지 않고 중심 축을 중심으로 모든 구를 회전할 수 있으며 container 에는 이름에서 알 수 있듯이 모든 구 구성 요소가 포함됩니다.
<a-entity> <a-entity rotation="0 90 0" class="wrapper" position="0 0 0"> <a-entity class="container" position="8 3 0" scale="1 1 1"> <!-- place orb here --> </a-entity> </a-entity> </a-entity>구체 컨테이너 안에 구체 자체를 추가합니다. 하나의 구체는 약간 반투명하고 오프셋되어 있고 다른 구체는 완전히 솔리드입니다. 두 개의 결합된 모방 반사 표면.
<a-entity class="orb" data-> <lp-sphere seed="0" shadow max-amplitude="1 1 1" position="-0.5 0 -0.5"></lp-sphere> <lp-sphere seed="0" shadow max-amplitude="1 1 1" rotation="0 45 45" opacity="0.5" position="-0.5 0 -0.5"></lp-sphere> </a-entity> 마지막으로, 마지막 명령에서 .orb 엔티티 내부의 lp-sphere 바로 뒤에 다음 a-animation 태그를 추가하여 구체를 무기한 회전합니다.
<a-animation attribute="rotation" repeat="indefinite" from="0 0 0" to="0 360 0" dur="5000"></a-animation>orb 래퍼에 대한 소스 코드와 orb 자체는 다음과 정확히 일치해야 합니다.
<a-entity> <a-entity rotation="0 90 0" class="wrapper" position="0 0 0"> <a-entity class="container" position="8 3 0" scale="1 1 1"> <a-entity class="orb" data-> <lp-sphere seed="0" shadow max-amplitude="1 1 1" position="-0.5 0 -0.5"></lp-sphere> <lp-sphere seed="0" shadow max-amplitude="1 1 1" rotation="0 45 45" opacity="0.5" position="-0.5 0 -0.5"></lp-sphere> <a-animation attribute="rotation" repeat="indefinite" from="0 0 0" to="0 360 0" dur="5000"></a-animation> </a-entity> </a-entity> </a-entity> </a-entity>소스 코드가 Github의 3단계에 대한 전체 소스 코드와 일치하는지 확인합니다. 이제 미리보기가 다음과 일치해야 합니다.
다음으로, 우리는 황금빛 색조를 위해 구체에 더 많은 조명을 추가할 것입니다.
4. 오브 더 라이트 업
이 단계에서는 두 개의 조명(하나는 유색, 하나는 흰색)을 추가합니다. 이렇게 하면 다음과 같은 효과가 나타납니다.
아래에서 물체를 비추기 위해 백색광을 추가하여 시작합니다. 포인트 라이트를 사용하겠습니다. #orb0 바로 앞이지만 #container-orb0 내에 다음 오프셋 포인트 라이트를 추가합니다.
<a-entity position="-2 -1 0"> <a-light distance="8" type="point" color="#FFF" intensity="0.8"></a-light> </a-entity>미리보기에 다음이 표시됩니다.
기본적으로 라이트는 거리에 따라 감쇠하지 않습니다. distance="8" 을 추가하여 포인트 라이트가 전체 장면을 비추는 것을 방지하기 위해 8 단위 거리에서 라이트가 완전히 소멸되도록 합니다. 다음으로 황금빛을 추가합니다. 마지막 조명 바로 위에 다음을 추가합니다.
<a-light class="light-orb" distance="8" type="point" color="#f90" intensity="1"></a-light>코드가 4단계의 소스 코드와 정확히 일치하는지 확인합니다. 이제 미리보기가 다음과 일치합니다.
다음으로 구에 최종 미적 수정을 가하고 회전 링을 추가합니다.
5. 링 추가
이 단계에서는 아래 그림과 같이 최종 구를 생성합니다.
#orb0 바로 앞에 #orb0 #container-orb0 에 링을 추가합니다.
<a-ring color="#fff" material="side:double" position="0 0.5 0" radius-inner="1.9" radius-outer="2" opacity="0.25"></a-ring> 색상은 이전 단계의 포인트 라이트에 의해 스며들기 때문에 링 자체에는 색상이 포함되어 있지 않습니다. 또한 material="side:double" 은 이것이 없으면 링의 뒷면이 렌더링되지 않기 때문에 중요합니다. 이것은 링이 회전의 절반 동안 사라짐을 의미합니다.
그러나 위의 코드만 있는 미리보기는 별반 다르지 않습니다. 이것은 링이 현재 화면에 수직이기 때문입니다. 따라서 링의 "측면"(두께가 0임)만 표시됩니다. 이전 지침에서 a-ring 태그 사이에 다음 애니메이션을 삽입합니다.
<a-animation attribute="rotation" easing="linear" repeat="indefinite" from="0 0 0" to="0 360 0" dur="8000"></a-animation>이제 미리보기가 다음과 일치해야 합니다.
회전 축, 속도 및 크기가 다른 다양한 수의 링을 생성합니다. 다음 예제 링을 사용할 수 있습니다. 모든 새 링은 마지막 a-ring 아래에 배치해야 합니다.
<a-ring color="#fff" material="side:double" position="0 0.5 0" radius-inner="2.4" radius-outer="2.5" opacity="0.25"> <a-animation attribute="rotation" easing="linear" repeat="indefinite" from="0 45 0" to="360 45 0" dur="8000"></a-animation> </a-ring> <a-ring color="#fff" material="side:double" position="0 0.5 0" radius-inner="1.4" radius-outer="1.5" opacity="0.25"> <a-animation attribute="rotation" easing="linear" repeat="indefinite" from="0 -60 0" to="-360 -60 0" dur="3000"></a-animation> </a-ring>이제 미리보기가 다음과 일치합니다.
코드가 Github의 5단계 소스 코드와 일치하는지 확인하세요. 이것으로 오브의 장식을 마칩니다. 오브가 완성되면, 우리는 다음으로 오브에 상호작용성을 추가할 것입니다. 다음 단계에서는 클릭 가능한 개체를 가리킬 때 클릭 애니메이션과 함께 보이는 커서를 구체적으로 추가합니다.
오브 인터랙티브 만들기
6. 커서 추가
이 단계에서는 클릭 가능한 개체를 트리거할 수 있는 흰색 커서를 추가합니다. 커서는 아래 그림과 같습니다.
a-camera 태그에 다음 엔터티를 추가합니다. fuse 속성을 사용하면 이 엔터티가 클릭 이벤트를 트리거할 수 있습니다. raycaster 속성은 클릭 가능한 객체를 확인하는 빈도와 범위를 결정합니다. objects 속성은 클릭할 수 있는 엔터티를 결정하기 위해 선택기를 허용합니다. 이 경우 clickable 클래스의 모든 객체는 클릭 가능합니다.
<a-entity cursor="fuse: true; fuseTimeout: 250" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.03; radiusOuter: 0.04" material="color: white; shader: flat; opacity: 0.5" scale="0.5 0.5 0.5" raycaster="far: 20; interval: 1000; objects: .clickable"> <!-- Place cursor animation here --> </a-entity>다음으로 커서 애니메이션과 미학을 위한 추가 링을 추가합니다. 위의 엔터티 커서 개체 안에 다음을 배치합니다. 클릭이 보이도록 커서 개체에 애니메이션을 추가합니다.
<a-circle radius="0.01" color="#FFF" opacity="0.5" material="shader: flat"></a-circle> <a-animation begin="fusing" easing="ease-in" attribute="scale" fill="backwards" from="1 1 1" to="0.2 0.2 0.2" dur="250"></a-animation> 다음으로 clickable 클래스를 #orb0 에 추가하여 다음과 일치하도록 합니다.
<a-entity class="orb clickable" data->코드가 Github의 6단계 소스 코드와 일치하는지 확인하세요. 미리보기에서 커서를 구 위로 끌어 클릭 애니메이션이 작동하는지 확인합니다. 이것은 아래 그림입니다.
clickable 속성은 구 컨테이너가 아니라 구 자체에 추가되었음을 유의하십시오. 이는 링이 클릭 가능한 개체가 되는 것을 방지하기 위한 것입니다. 이런 식으로 사용자는 구 자체를 구성하는 구체를 클릭해야 합니다.
이 부분의 마지막 단계에서는 구의 켜기 및 끄기 상태를 제어하는 애니메이션을 추가합니다.
7. 오브 상태 추가
이 단계에서는 클릭 시 구를 꺼짐 상태로 또는 꺼짐으로 애니메이션합니다. 이것은 아래 그림입니다.
시작하려면 구를 축소하고 땅으로 내립니다. #orb0 바로 뒤에 #orb0 #container-orb0 에 a-animation 태그를 추가합니다. 두 애니메이션 모두 클릭에 의해 트리거되며 약간의 바운스를 ease-elastic 동일한 여유 기능을 공유합니다.
<a-animation class="animation-scale" easing="ease-elastic" begin="click" attribute="scale" from="0.5 0.5 0.5" to="1 1 1" direction="alternate" dur="2000"></a-animation> <a-animation class="animation-position" easing="ease-elastic" begin="click" attribute="position" from="8 0.5 0" to="8 3 0" direction="alternate" dur="2000"></a-animation> 오프 상태를 더욱 강조하기 위해 오브가 꺼져 있을 때 황금빛 포인트 라이트를 제거합니다. 그러나 오브의 조명은 오브 오브젝트 외부에 배치됩니다. 따라서 구를 클릭할 때 클릭 이벤트가 조명에 전달되지 않습니다. 이 문제를 피하기 위해 약간의 가벼운 자바스크립트를 사용하여 클릭 이벤트를 빛에 전달할 것입니다. #light-orb0 에 다음 애니메이션 태그를 배치합니다. 조명은 사용자 지정 switch 이벤트에 의해 트리거됩니다.
<a-animation class="animation-intensity" begin="switch" attribute="intensity" from="0" to="1" direction="alternate"></a-animation> 다음으로 #container-orb0 에 다음 클릭 이벤트 리스너를 추가합니다. 이것은 클릭을 오브 라이트로 중계합니다.
<a-entity ...>코드가 Github의 7단계 소스 코드와 일치하는지 확인합니다. 마지막으로 미리보기를 열고 커서를 오브의 온/오프로 이동하여 꺼짐과 켜짐 상태 사이를 전환합니다. 이것은 아래 그림입니다.
이것으로 오브의 상호작용을 마칩니다. 플레이어는 이제 자명한 켜짐 및 꺼짐 상태로 오브를 마음대로 켜고 끌 수 있습니다.
결론
이 튜토리얼에서는 VR 헤드셋 친화적인 커서 클릭으로 토글할 수 있는 켜짐 및 꺼짐 상태가 있는 간단한 구를 만들었습니다. 다양한 조명 기술과 애니메이션을 사용하여 두 상태를 구별할 수 있었습니다. 이것으로 오브에 대한 가상 현실 디자인 요소를 마칩니다. 튜토리얼의 다음 부분에서는 오브를 동적으로 채우고, 게임 메커니즘을 추가하고, 한 쌍의 플레이어 간에 통신 프로토콜을 설정합니다.