언리얼 엔진 5 문서가 에픽 디벨로퍼 커뮤니티로 이전되었습니다

HTML5 SDK 셋업

언리얼 엔진 4 (UE4) HTML5 구현은 Mozilla 의 Emscripten 툴체인을 활용하여 UE4 의 C++ 코드를 Javascript 로 크로스 컴파일합니다. 에픽게임즈 런처 또는 에픽의 GitHub 저장소에서 UE4 를 다운로드하면 HTML5 개발에 필요한 모든 Emscripten 및 Python 파일이 포함되어 있습니다. 즉 별도의 셋업 단계나 소프트웨어를 추가 설치할 필요 없이 HTML5 프로젝트 제작을 시작할 수 있다는 뜻입니다.

HTML5 지원 웹 브라우저

UE4 HTML5 프로젝트를 32 비트 웹 브라우저로 실행할 수도 있지만, 64 비트 버전 웹 브라우저를 사용할 것을 강력 추천합니다. Google Chrome 및 Firefox 웹 브라우저 64 비트 버전을 찾을 수 있는 링크입니다.

• Google Chrome 64 비트

• Firefox 64 비트

멀티스레드 지원

소스에서 빌드한 UE4 빌드의 경우 멀티스레드가 실험단계로 지원됩니다.

일부 브라우저는 특수 플래그를 붙여야 멀티스레드 모드로 실행 가능합니다.

• Chrome 의 경우 다음 플래그를 붙여야 합니다: --js-flags=--experimental-wasm-threads --enable-features=WebAssembly,SharedArrayBuffer . 또는 chrome://flags/#enable-webassembly-threads 에서 "WebAssembly threads support" 옵션으로 켜고 끌 수도 있습니다.

• Firefox nightly 에서는 about:config 에서 javascript.options.shared_memory preference to true 로 설정하여 SharedArrayBuffer 를 활성화할 수 있습니다.

HTML5 필수 프로젝트 셋업

UE4 탑재 HTML5 프로젝트의 정상 작동을 위해서는

HTML5 빌드 유형

HTML5 프로젝트 빌드를 만들 때, Development Build (개발 빌드) 또는 Shipping Build (출시 빌드)를 만드는 옵션이 있습니다. 프로젝트에 대해 만드는 빌드 유형은 수행하려는 작업에 따라 다릅니다.

HTML5 개발 빌드:

• 개발 빌드는 프로젝트를 출시하기 전 테스트 또는 디버깅할 때 사용합니다.

• 개발 빌드는 미압축 파일만 빌드합니다.

• 개발 빌드는 로컬 테스트 용이며 웹사이트 디플로이 용이 아닙니다.

  프로젝트를 빌드하면 생성되는 Readme.txt 에서 프로젝트 개발 빌드 관련 자세한 정보를 찾을 수 있습니다.

HTML5 출시 빌드:

• 출시 빌드는 프로젝트를 최종 사용자에게 출시할 준비가 되었을 때 사용합니다.

• 출시 빌드는 파일을 압축할 수도 안할 수도 있습니다.

• 출시 빌드는 다운로드 크기를 줄이기 위해 압축할 수 있습니다.

HTML5 빌드 출시를 위한 파일 압축 활성화 또는 비활성화 방법은 다음과 같습니다.

1. 프로젝트 세팅 > 플랫폼 > HTML5 > Packaging 에서 Compress files during shipping packaging (출시 패키징 도중 파일 압축) 옵션이 활성화되었는지 확인합니다.
   

   클릭하면 원본 이미지를 확인합니다.

2. 또 프로젝트 세팅 > 패키징 > Packaging 아래 Use Pak File 옵션 이름 옆 박스를 클릭해서 비활성화하는 것이 좋습니다.
   

   클릭하면 이미지 원본을 확인합니다.

   프로젝트를 빌드할 때 생성되는 Readme.txt 파일에서 프로젝트 출시 빌드 관련 자세한 정보를 확인할 수 있습니다.

HTML5 프로젝트 실행

호환 웹 브라우저 중 하나를 설치했으면 HTML5 프로젝트 중 하나를 테스트할 수 있습니다. 그 방법은 메인 툴 바 의 실행 버튼 옆 고급 옵션 드롭다운을 선택합니다. 표시되는 메뉴에서 사용하려는 브라우저를 클릭하여 선택하면 됩니다.

HTML5 프로젝트 패키징

웹에 디플로이할 수 있는 HTML5 프로젝트 패키지를 만드는 방법은 다음과 같습니다.

1. 파일 > 프로젝트 패키지 목록에서 HTML5 를 선택합니다.
   

2. 프로젝트를 저장할 폴더를 선택하고 폴더 선택 을 클릭해서 패키징 프로세스를 시작합니다.

3. 프로젝트 패키징이 완료되면, 패키지가 저장된 폴더를 열고 HTML5LaunchHelper.exe 프로그램을 실행합니다.
   

4. HTML5LaunchHelper.exe 프로그램은 로컬 호스트에서 압축된 파일을 제공하도록 구성된 웹 서버를 실행합니다. HTML5LaunchHelper.exe 프로그램이 실행되면 표시되는 명령줄 창에서 이 서버 진행률을 확인할 수 있습니다.
   

5. 선택한 64 비트 웹 브라우저를 열고 다음 URL 을 입력합니다: [ Localhost Address ]/[**ProjectName**].html. 그러면 아래 이미지처럼 웹 브라우저에서 UE4 HTML5 프로젝트가 로드됩니다.
   

   입력한 URL 은 프로젝트 이름을 땁니다. 위 프로젝트가 ThirdPerson 이므로 입력되는 주소는 http://localhost:8000/ ThirdPerson .html 일 것입니다.

HTML5 Read Me 파일

새 HTML5 프로젝트를 생성하면 UE4 가 생성하는 Readme.txt 라는 텍스트 파일이 있을 것입니다. 이 파일 안에는 HTML5 프로젝트를 로컬과 웹 양쪽에서 실행하는 데 필요한 추가 정보가 들어 있습니다.

HTML5 파일 유형

UE4 프로젝트를 개발용 또는 HTML5 디플로이 용으로 빌드할 때 파일을 압축하거나 하지 않는 옵션이 있습니다. 다음 표는 미압축 빌드에 어떤 파일이 필요한지와 이 파일에 어떤 정보가 포함되는지에 대한 분석입니다.

Files Required for Non-Compressed Files Deployment 미압축 파일 디플로이에 필요한 파일 - 미압축 빌드를 만들 때 생성되는 파일은 다음과 같습니다.

Files Required for Compressed Files Deployment 압축 파일 대포에 필요한 파일 - 압축 빌드를 만들 때 생성되는 파일은 다음과 같습니다.

Files not needed for Deployment 디플로이에 필요치 않은 파일 - 프로젝트 압축 또는 미압축 버전을 만들 때 생성되는 파일은 다음과 같습니다. 그러나 이 파일은 프로젝트 개발 또는 테스트 중일 때만 필요합니다.