Unity 5 및 JavaScript로 WebGL 게임을 만듭니다

Unity 5 및 JavaScript를 사용하여 WebGL 게임을 만드는 쉬운 가이드

코어 포인트 :

Unity 5의 WebGL Expler는 WebGL 및 ASM.JS를 사용하여 게임을 웹에 게시하는 프로세스를 단순화하여 브라우저에서 직접 대화식 3D 그래픽을 렌더링합니다. 이 튜토리얼은 프로젝트 설정, 플랫폼에서 반사하는 영웅 캐릭터 작성 및 몰입 형 게임 경험을위한 1 인칭 관점을 추가하는 JavaScript (UnityScript)를 사용하여 Unity로 간단한 게임을 만드는 방법을 안내합니다. Unity의 스크립팅은 프로그램 플랫폼 생성 및 마우스 입력에서 사용하는 응답 컨트롤과 같은 역동적 인 게임 동작을 허용하여 게임의 영웅 캐릭터에 영향을 미칩니다.

게임을 완료하기위한 주요 단계에는 게임 메뉴에서 시작 버튼이있는 사용자 인터페이스 추가 및 WebGL 지원 브라우저에서 재생할 수 있도록 프로젝트를 WebGL 애플리케이션으로 내보내기위한 빌드 설정 구성이 포함됩니다.

이 튜토리얼은 점수 추가, 더 많은 플랫폼 유형 및 추가 입력 방법과 같은 추가 개선 제안으로 끝납니다.
• 이 기사는 Nilson Jacques Collins, Marc Towler 및 Matt Burnett가 동료 검토했습니다. Sitepoint 콘텐츠를 최대한 활용 한 Sitepoint의 모든 동료 검토 자에게 감사합니다! Unity는 PC, 게임 콘솔, 모바일 장치 및 웹 사이트 용 비디오 게임을 개발하는 데 사용되는 크로스 플랫폼 게임 엔진입니다. 최신 버전 (Unity 5)에는 WebGL Expler가 제공되므로 개발자는 게임을 웹에 쉽게 게시 할 수 있습니다. 이름에서 알 수 있듯이 WebGL Expler는 WebGL (대화식 3D 컴퓨터 그래픽을 렌더링하기위한 JavaScript API)과 ASM.JS (Mozilla가 개발 한 JavaScript의 하위 집합, "웹의 어셈블리 언어")를 사용합니다. Unity 및 Unreal Engine 용 ASM.JS 및 WebGL에 대한 자세한 내용은 여기를 참조하십시오.
이 튜토리얼에서는 Unity로 시작하는 방법을 보여 드리겠습니다. 또한 JavaScript를 사용하여 Unity에서 간단한 게임을 만드는 방법과 웹에 게임을 내보내는 방법을 보여 드리겠습니다.
• 여기에서 완성 된 게임을 볼 수 있습니다 (WebGL을 지원하는 데스크탑 브라우저가 필요합니다).
시작하자 ... Unity의 JavaScript에 대한 지침 우리는 Unity의 JavaScript에 대해 이야기 할 때 실제로 JS 방언 유형 인 UnityScript에 대해 이야기하고 있습니다. Unity 자체는 종종이 JavaScript를 언급하지만, 더 많은 냉소적 관찰자들은 "Unity 사용 JavaScript"는 마케팅 전략이라고 생각합니다. 어쨌든, 우리는 UnityScript가 ECMAScript 사양을 준수하지 않는다는 것을 분명히해야합니다. 차이점에 대한 좋은 개요를 여기에서 찾을 수 있습니다.
• Unity 설치
이 튜토리얼을 시작하려면 여기에서 다운로드 할 수있는 Unity 버전을 실행해야합니다. Unity에는 Windows 및 Mac OS X 용 설치 프로그램이 있습니다. Linux 사용자는 와인을 통해 Unity를 실행할 수 있지만 결과는 다를 수 있습니다.

• 설치가 완료되면 시작할 수 있습니다! Unity를 개방하고 새로운 3D 프로젝트를 만들어 봅시다.

  프로젝트 설정 Unity가 처음 열린 후, 우리는 메인 창을 이해하기 위해 잠시 시간을 내야합니다.

  

  가장 왼쪽 패널은

  고용 이며 현재 장면의 모든 요소를 ​​간략하게 설명합니다. 장면은 레벨이나 메뉴와 같은 게임의 시야와 같습니다. 현재 메인 카메라 요소와

  방향 조명

  요소가 있어야합니다.

  중간은 장면 view로, 3D 공간의 카메라와 조명을 아이콘 형태로 보여줍니다.

  옆에
  장면
  1. 탭은 플레이어가 보는 것처럼 게임 자체를 표시하는 게임 탭입니다. 이것은 편집기에서 게임을 테스트하도록 설계되었습니다. 오른쪽에는 요소 설정을 수정할 수있는 Inspector 패널이 있습니다. 시도해 보겠습니다. 계층 의 방향 조명을 클릭하십시오. 이제 우리는이 조명에 대한 많은 정보를보고 섀도우 유형 : No Shadow
  를 사용하여 그림자를 끄질 수 있어야합니다.
  2. 맨 아래에는 project 창이 있으며, 게임을 개발하는 데 필요한 파일보기가 표시됩니다.
  이제 우리는 Unity의 인터페이스에 익숙해 졌으므로 개발을 시작하기 전에해야 할 일이 더 있습니다. 현재 장면을 저장하십시오. 파일 & gt; 장면 저장 장면
  3. 자산이라는 폴더를 가리키는 대화 상자를 엽니 다. Unity에서 파일을 구성하는 일반적인 방법 중 하나는 서브 폴더를 사용하는 것입니다. 따라서 장면이라는 새 폴더를 자산 폴더에 추가 하고이 폴더에서 level.unity라는 장면을 저장하십시오. 영웅을 만듭니다 우리의 게임은 한 영웅으로 구성되어 한 플랫폼에서 다른 플랫폼으로 점프하여 점프 더 높아집니다. 하나를 놓치고 아무것도 없으면 게임이 실패합니다. 그래서 영웅을 만드는 것부터 시작하겠습니다. 플레이어는 1 인칭 관점에서 게임을 볼 것이기 때문에 영웅의 외관은 중요하지 않으며 표준 구하기 구조를 사용할 수 있습니다. 구의 장점은 여러 단계로 만들 수 있으며 점프해야 할 물리적 특성에 맞는 것입니다. 계층에서 를 작성하고 검사관을 사용하여 다음 속성을 편집하십시오.
  4. 재생 버튼을 눌러 우리가하는 일을 테스트합시다. 스카이 라인 앞에 위치한 3D 공간의 구가 있어야합니다. 영웅이 떨어지려면 무게를 더해야합니다. 따라서

     검사관 에서 해당 버튼을 클릭하고 RIGID BODY 를 선택하여 구에 구성 요소를 추가해야합니다. 그리고 우리는 영웅이 회전하는 것을 원하지 않기 때문에 제약 조건 를 켜고 행에서 모든 축을 선택하여 강성 신체 구성 요소의 영웅을 얼립니다. 장면이 다시 재생되면 영웅의 가을을 볼 수 있어야합니다. Endless Falls에서 영웅을 구하기 위해 플랫폼 역할을하는 평평한 상자를 만들 것입니다. 이렇게하려면 큐브를 추가하고 Scale.y 값을 0.1로 설정해야합니다. 장면을 재생하면 영웅이 플랫폼에 안전하게 착륙했음을 확인하지만 자연스럽게 보이지는 않습니다. 그렇다면 우리는 어떻게 영웅을 반등하게합니까? 물리적 재료를 추가하여. 영웅을 리바운드로 만드십시오 먼저, 우리는 구를 탄력적으로 만들기 위해 새로운 물리적 재료를 만들어야합니다. 이렇게하려면 자산 폴더에서 자료라는 새 폴더를 작성한 다음 여기에 새로운 물리적 자료를 만듭니다. it it bouncy_sphere를 지정합시다. 검사관 에서 조정 해야하는 값은 다음과 같습니다.

     우리 가이 재료를

     sphere collider에 추가하면 는 구의 위아래로 튀어 오르지만 항상 같은 높이에 도달하게됩니다. 각 바운스마다 구의 점프가 높아지기 위해서는 플랫폼에 물리적 자료를 추가해야합니다. 이를 위해 Bouncy_platform이라는 다른 자료를 만들고 그 값을 다음과 같이 변경합니다.

     여기서 일관성을 달성하려면

     Hierarchy 에서 두 번 클릭하여 큐브 요소의 이름을 플랫폼으로 바꿔야합니다. 우리가 지금 게임을 시작할 때, 우리는 매번 구체가 더 높아지고 더 높아진다는 것을 알 수 있습니다.

     우리는 또한 플랫폼에 특정 색상을 제공하기 위해 플랫폼이라는 새로운 표준 자료를 만들 것입니다. 이 자료를 만든 후 #c8ff00을 색상으로 사용하고 (알베도는 Unity UI의 레이블입니다),이 재료를 플랫폼 요소로 끌어다 놓으십시오. 지금은 노란색이어야합니다.

     1 인칭 관점을 추가하십시오 1 인칭 관점을 추가하기 위해 카메라 (

     계층 )를 구에 드래그하고 떨어 뜨립니다. 이렇게하면 카메라를 영웅의 어린이로 만들고 카메라가 움직일 때 구체를 따라 가게됩니다. 카메라 속성도 다음과 같이 조정해야합니다

     우리는 또한 구의 두 번째 자식 요소로서 스포트라이트를 만들 것입니다. 이것은 플레이어에게 영웅의 현재 점프 높이에 대한 아이디어를 줄 것입니다. 스포트라이트의 값을 다음과 같이 조정하십시오 (후속 단계는 공간 제한으로 인해 간단히 설명되며 핵심 논리 및 키 코드 스 니펫이 유지됩니다) 스킬 프로그래밍 컨트롤러, 프로그래밍 방식 제작 플랫폼, 게임 메뉴 추가, 시작 버튼 추가, 프로젝트 게시 WebGL 브라우저 게임 등을 게시하십시오. 원본 문서를 참조하십시오. 공간 제한으로 인해 여기에서 반복하지 않을 것입니다. 핵심은 Unity 스크립팅 시스템, 게임 객체 관리, 물리 엔진 및 UI 시스템의 핵심 개념을 이해하고 자습서의 코드 예제와 함께 연습하는 것입니다.

     faq (faq) (FAQ 섹션은 공간 제한, 핵심 질문 유지 및 간단한 답변으로 인해 단순화됩니다) 더 나은 성능을 위해 WebGL 게임을 최적화하는 방법은 무엇입니까?

     드로우 호출 수를 줄이고, 더 적은 재료 및 조합 메쉬를 사용하고, 세부 사항 (LOD) 사용, 텍스처 및 오디오 파일을 압축하며 Unity의 프로파일 러를 사용하여 성능 병목 현상을 식별하고 수정합니다.

     모바일 게임 개발에 WebGL을 사용할 수 있습니까?

     예, WebGL 게임은 기본 응용 프로그램보다 더 많은 리소스를 소비 할 수 있으며 신중한 최적화가 필요합니다.

     내 WebGL 게임을 디버그하는 방법은 무엇입니까?

     Chrome의 개발자 도구 또는 Firefox의 웹 콘솔과 같은 브라우저 도구를 사용하여 디버깅 할 수 있습니다.

     WebGL 게임에 멀티 플레이어 기능을 추가하는 방법은 무엇입니까?

     백엔드 서버는 플레이어 간의 통신을 관리해야하며 Unity의 내장 네트워크 시스템 UNET 또는 타사 솔루션 (예 : 광자)을 사용할 수 있습니다.

     내 WebGL 게임에서 돈을 버는 방법?

     게임 내 광고, 인앱 구매 또는 프리미엄 모델을 사용할 수 있습니다.

     내 WebGL 게임의 그래픽을 개선하는 방법은 무엇입니까?

     고품질 텍스처, 고급 조명 기술 및 셰이더를 사용할 수 있습니다.

     내 WebGL 게임을 다른 화면 크기에 응답하는 방법은 무엇입니까?

     Unity의 UI 시스템을 사용하여 유연하고 확장 가능한 사용자 인터페이스를 작성하고 화면 클래스를 사용하여 플레이어 화면 크기 정보를 얻고 그에 따라 게임을 조정하십시오.

     WebGL 게임에 음향 효과와 음악을 추가하는 방법은 무엇입니까?

     오디오 소스 및 오디오 클립 클래스를 사용하여 Unity의 오디오 시스템을 사용하고 오디오 파일 가져 오기 및 제어 재생을 사용하면 오디오 믹서를 사용하여 복잡한 사운드 스케이프를 만들 수도 있습니다.

     내 WebGL 게임을 속임수로부터 보호하는 방법은 무엇입니까?

     우리는 게임 데이터의 서버 측 확인, JavaScript 코드를 난독 화하고 안전한 통신 프로토콜을 사용하여 구현할 수 있습니다.

     게시 후 WebGL 게임을 업데이트하는 방법은 무엇입니까?

     게임을 다시 컴파일하고 유니티를 변경하고 새 빌드를 서버에 업로드하십시오.

     이 단순화 된 버전이 도움이되기를 바랍니다! Unity 엔진의 핵심 개념과 실제 경험을 이해하는 것은 WebGL 게임의 성공적인 개발에 필수적이라는 것을 기억하십시오.

위 내용은 Unity 5 및 JavaScript로 WebGL 게임을 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!