웹 템플릿 구조 및 인스턴스화

템플릿의 index.html 파일에서 커스텀 사용자 변수를 사용하고 createUnityInstance()로 콘텐츠의 새 인스턴스를 생성합니다.

템플릿 변수, JavaScript 매크로, 조건부 지시문에 대한 자세한 내용은 웹 템플릿 변수를 참조하십시오.

커스텀 웹 템플릿을 추가하려면 커스텀 웹 템플릿 추가를 참조하십시오.

커스텀 사용자 변수

웹 템플릿을 선택하면 Unity가 템플릿을 파싱하여 JavaScript 매크로 및 조건부 지시문을 찾습니다.

Unity는 다음과 같은 경우 JavaScript 변수를 커스텀 사용자 변수로 취급합니다.

• JavaScript 매크로와 조건부 지시문 안에서 사용됨.
• 템플릿 코드에서 선언되지 않음.
• 내부 프리 프로세서 변수가 아님.

Unity는 이러한 커스텀 사용자 변수를 Player Settings 창의 Resolution and Presentation 섹션에 자동으로 추가합니다.

예를 들어 생성된 index.html 페이지의 제목을 Player Settings 창에서 직접 제어하려면 먼저 커스텀 템플릿의 index.html에 있는 <title> 줄을 다음과 같이 수정해야 합니다. <title>{{{ PAGE_TITLE }}}</title> 이렇게 한 후 커스텀 템플릿을 다시 선택합니다. 그러면 템플릿이 다시 파싱되고 Player Settings 창의 Resolution and Presentation > Web Template 섹션에 Page Title 필드가 표시됩니다.

이 필드에 텍스트를 입력하고 프로젝트를 빌드하면 템플릿 매크로에 사용된 PAGE_TITLE 커스텀 변수가 Page Title 필드에서 텍스트로 자동으로 바뀝니다.

매크로에서 커스텀 정수 또는 플로트 변수를 사용하려면 매크로에서 parseInt() 또는 parseFloat() JavaScript 함수를 사용하여 Unity 에디터에서 제공하는 문자열 값을 사전 처리하십시오. 커스텀 사용자 변수에는 항상 문자열 값이 할당되기 때문입니다.

참고: 변수 이름의 밑줄 문자는 가독성을 높이기 위해 필드 내부에서 공백으로 표시됩니다.

index.html 파일의 구조

index.html에는 빌드를 로드하는 데 필요한 코드가 들어 있으며, 다음을 포함해야 합니다.

• <canvas> 요소. Unity 런타임은 <canvas> 요소를 사용하여 애플리케이션을 렌더링합니다.
• 빌드 로더를 다운로드하기 위한 JavaScript 코드. 예시:

var buildUrl = "Build";
var loaderUrl = buildUrl + "/{{{ LOADER_FILENAME }}}";
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
  // code for instantiating the build
};
document.body.appendChild(script);`

이 예시에서 {{{ LOADER_FILENAME }}}은 빌드 생성 시 템플릿 프리 프로세서에서 자동으로 확인됩니다.

또는 다음과 같이 스크립트 태그를 사용하여 빌드 로더를 다운로드할 수 있습니다. lang-js <script src="Build/{{{ LOADER_FILENAME }}}"></script>

• 빌드를 인스턴스화하기 위한 JavaScript 코드. Unity 빌드는 빌드 로더 스크립트에 정의된 createUnityInstance() 함수를 사용하여 인스턴스화됩니다.

인스턴스화 함수: createUnityInstance()

createUnityInstance() 함수는 콘텐츠의 새 인스턴스를 생성합니다. 다음과 같이 사용할 수 있습니다. createUnityInstance(canvas, config, onProgress).then(onSuccess).catch(onError);

이 함수는 Promise 오브젝트를 반환합니다.

createUnityInstance() 함수는 빌드 로더 스크립트에서 정의되며 인스턴스화된 빌드 전용입니다. 따라서 동일한 HTML 문서에 두 개 이상의 빌드를 내장하는 경우 해당 빌드 로더 스크립트의 onload 콜백에서 createUnityInstance() 함수가 호출되었는지 확인합니다. Unity 웹 로더에 대한 자세한 내용은 웹 빌드 폴더 및 웹 템플릿 구조 및 인스턴스화를 참조하십시오.

추가 리소스

• 웹 템플릿 사용
• 커스텀 웹 템플릿 추가
• 웹 템플릿 변수
• 웹 템플릿 빌드 설정 및 상호 작용