유니티 WebGL 로드 화면 바꾸기

WebGL로 빌드를 하면 유니티에서 제공하는 기본적인 로딩바(콘텐츠 다운로드 바)가 보여집니다. 이것을 간단하고 쉽게 설정할 수 있습니다.

 

유니티 안에서 설정하는것이 아닌, 빌드 후 CSS를 이용하여 설정하는데, 관련지식 없이도 간단한 설정이 가능합니다.

기본적인 유니티의 WebGL 로드 화면 간단한 방법으로 수정해보자.

 

 

빌드 후 열리는 폴더. TemplateData에 로딩화면 관련 데이터들이 있다.

 

 

TemplateData 폴더에 기본적인 아이콘들과 로딩바(png) 파일과 style.css가 있다.

위 폴더의 이미지들을 같은 이름의 다른 이미지로 대체하고, style.css에서 간단히 수정하면 끝난다.

 

 

기본으로 제공되는 style.css

위 스크립트에서 수정할것은 width와 height들이다. 주석처리로 되어있는 코드의 다음 줄에서 변경한 이미지들의 크기를 적어주면 된다. 이미지가 너무크면 적절하지 못하고 최대 1000px정도가 적당해보인다.

 

 

변경한 style.css

이미지들을 같은 이름으로 덮어쓰기하고, 해당 이미지의 크기(width, height)를 style.css에서 크기값만 변경해주었다.

로딩바는 가로로 늘려 width와 height를 늘려준것을 볼 수 있다(141 -> 1000px)

 

 

적용된 새로운 로딩화면

아주 간단하게 로딩화면을 바꾸는 방법을 알아보았다. 로딩화면을 보기위해서는 서버에서 배포해야 해당 웹을 열 수 있는데, 로컬에서 확인하기위해 직접 실행하면 오류가 나니 아래의 방법을 이용하여보는것도 좋을 것 같다.

유니티 WebGL 빌드 로컬에서 실행하기 / Apache 구축