기억저장고

Unity WebGL 반응형레이아웃 만들기 본문

Unity

Unity WebGL 반응형레이아웃 만들기

기억해조 2022. 2. 18. 11:37

 

(방법 1). html 코드 변경 
  1. Unity프로젝트에서 WebGL 프로젝트 빌드
  2. 빌드 파일 중 index.html 코드 수정

(body 부분만 수정함,

코드를 그대로 쓰려면 "Build/myProject.json" 부분을 자기가 만든 프로젝트명으로 교체하면됨)

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | WebGL Title</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <script src="TemplateData/UnityProgress.js"></script>
    <script src="Build/UnityLoader.js"></script>
    <script>
      var unityInstance = UnityLoader.instantiate("unityContainer", "Build/MyProject.json", {onProgress: UnityProgress});
    </script>
  </head>
  <body>
    <div class="webgl-content" style="width: 100%; height: 100%;">
      <div id="unityContainer" style="width: 100%; height: 100%;"></div>
    </div>
  </body>
</html>

 

(방법1-2021버전)

21버전은 Defatul Html이 다르게 나오고, 위의 방법이 적용되지 않음

그래서 Resize이벤트 추가를 해야한다. 

<script>
 //ReSize
      window.addEventListener( 'resize', onWindowResize );
      function onWindowResize() {

        canvas.style.width = window.innerWidth + 'px';
        canvas.style.height =  window.innerHeight + 'px';
      }
</script>

 

 



(방법 2). Responsive WebGL Template 사용 (비추천)
https://assetstore.unity.com/packages/tools/gui/responsive-webgl-template-117308
 
.
처음에 (방법 2)번 방식으로 시도했었는데 오류가 많이 나서 (방법 1)번 방식으로 바꿨다.
(방법 1)번 방식이 훨씬 간단하고 알기쉬워서 좋다.

 

---------

WebGL파일을 반응형레이아웃으로 변경할때주의할점은 
Unity에서 UI를 배치할때 "Anchors"를 적절히 사용해서 제작해야한다.



끝.

'Unity' 카테고리의 다른 글

유니티 안드로이드 Gradle 오류 발생 시  (0) 2022.08.01
C# Unity Json 역직렬화 오류  (0) 2022.07.25
[Unity TextMeshPro] 폰트 교체 스크립트 없이 현지화(한국어,일본어,영어)  (0) 2022.02.17
Unity "Rewired"에셋으로 컨트롤러 2개이상 연결하기  (0) 2022.02.09
UnityHub에서 프로젝트가 안 열릴때... 해결방법  (0) 2022.01.07
'Unity' Related Articles more
Comments