HOME
home
일하는 방식
home
🕶️

[HTML5] Unity WebGL build / Unity Tiny

2020년 12월 31일, 어도비 플래시가 공식적으로 지원 종료되었습니다.
어도비는 2017년 하반기즈음에 플래시 지원 종료 의사를 밝혔는데요, 국내 시장에서는 이미 플래시 게임의 인기가 한 풀 꺾인 후였지만, 북미나 러시아 등 해외에서는 페이스북등의 플랫폼을 통해 여전히 수많은 플래시 게임들이 라이브 서비스 중이였습니다. 당시 라이브로 플래시 게임을 운영중이던 게임사들은 부랴부랴 플래시→HTML5 포팅 작업을 시작합니다.
이식(移植) 또는 포팅(porting)은 컴퓨터 과학에서 실행 가능한 프로그램이 원래 설계된 바와 다른 컴퓨팅 환경(이를테면 CPU, 운영 체제, 서드 파티 라이브러리 등)에서 동작할 수 있도록 하는 과정을 가리킨다 - 위키피디아
플래시→HTML5 포팅에 주로 선택된 프레임워크/엔진들에는 CoCos2d-html5, PixiJS, Phaser, Unity tiny 등이 있었고, 각 개발사는 여러가지 기술 검토 후에 이들 중 하나의 엔진을 골라 포팅을 시작했습니다.
저희 회사는 그 중에서도 가장 점유율 낮고 마이너했던 Egret Engine을 사용했는데요, 지금부터 연작으로 각 프레임워크/엔진들의 특징과 장단점에 대해 간단히 써 보려 합니다. 여러분께서 각 엔진을 고르시는 대에 좀 더 도움이 되었으면 합니다.
이번 글에서는 게임 엔진 중 가장 유명한 Unity에 대해서 소개합니다.

역시 유니티는 게임에 관련된 건 모든지 다 돼! 하지만 모바일 네이티브용으로 개발된 게임을 WebGL 포팅하는 데에는 제약조건이 많다.

Unity는 대략 5.X 버전부터 WebGL 빌드를 지원했어요. (공식문서 링크)
Unity는 emscripten 컴파일러 툴체인을 사용하여 Unity 런타임 코드(C 및 C++로 작성)를 WebAssembly로 교차 컴파일하는 방식을 통해 WebGL 빌드가 가능하다고 해요.
단, Unity WebGL 빌드에는 다음과 같은 제약조건이 있어요. (본문발췌)
주로 플랫폼의 한계 때문에 Unity의 일부 기능은 WebGL 빌드에 사용할 수 없습니다. 구체적으로 설명하면 다음과 같습니다. ※ 스레드는 지원되지 않습니다. JavaScript에서 스레딩이 지원되지 않기 때문입니다. Unity에서 성능을 높이기 위해 스레드를 내부적으로 사용하는 경우와 스크립트 코드 및 관리 dll에서 스레드를 사용하는 경우 모두 스레딩이 지원되지 않습니다. 기본적으로 System.Threading 네임스페이스 안에 있는 것은 모두 지원되지 않습니다. ※ WebGL 빌드는 Visual Studio에서 디버그할 수 없습니다. ※ 보안 문제로 인해, 브라우저에서는 네트워킹을 위한 IP 소켓의 직접 액세스를 허용하지 않습니다. ※ WebGL 그래픽스 API는 몇 가지 제한이 있는 OpenGL ES 2.0 및 3.0과 동일합니다. ※ WebGL 빌드에서는 Web Audio API 기반 커스텀 백엔드를 오디오에 사용합니다. 기본 오디오 기능만 지원됩니다. ※ WebGL은 AOT 플랫폼이므로 System.Reflection.Emit를 사용하여 코드를 동적으로 생성할 수 없습니다. 다른 모든 IL2CPP 플랫폼, iOS, 그리고 대부분의 콘솔도 마찬가지입니다.
사실 JS 환경이나 WebAssembly에서 스레드 비슷한 것을 아예 지원하지 않는 것은 아닙니다, 그러나 Unity의 WebGL빌드에서는 모종의 문제(?)로 아직까지는 완성형의 지원이 되지 않고 있는 듯 합니다. (WebGL 멀티쓰레딩에 관한 포럼 글)
또한 당연한 이야기이지만, Unity WebGL 빌드로 게임을 제작할 경우 몇가지 성능 최적화에 대해 신경 써 주는 것이 게임 플레이 환경에 이롭다고 하네요. 이 내용에 대해서는 유니티 공식 문서에 다음과 같이 친절히 설명되어 있어요.
Search
Developing for WebGL
내용
설명
다만, 위의 WebGL 빌드 지원은 말 그대로 유니티로 제작된 프로젝트를 웹지엘로 빌드하는 것에 관한 내용이에요.
보다 편리하게 유니티로 HTML 5 개발을 하기 위해서는 아래서 언급하는 Unity Tiny 런타임을 별도로 설치하는 것이 좋아요. Unity Tiny는 Unity 2018.3 버전부터 사용이 가능해요.

Unity Tiny, 장점

유니티 패키지 매니저를 통해 설치 할 수 있는 Unity Tiny의 대표적인 장점으로는, Unity 엔진 자체가 가장 메이저한 게임 엔진이라는 점이에요. 현재 Unity Tiny는 실험적인 개발 단계이나, Unity에서 지속적으로 개발을 진행 중인 만큼 발전 가능성이 크다고 할 수 있을 것 같아요.
엔진 자체의 GUI 서포팅도 잘 되어서 입문자도 tiny 공식 유튜브를 시청하며 비교적 쉽게 사용 방법을 배울 수 있어요. GUI가 Unity 베이스이기 때문에 기존에 유니티로 게임 개발을 하시던 분들이 엔진 사용에 쉽게 적응할 수 있다는 것도 큰 장점 중 하나에요.
또한, Unity Tiny 모드를 사용하여 작업하면 별도의 로컬 서버를 구축할 필요 없이 게임을 웹브라우저로 실행하여 디버그 할 수 있다는 것도 장점 중 하나에요.

Unity Tiny, 단점

모바일/PC 네이티브 타겟으로 개발된 게임을 Unity tiny로 WebGL 포팅하는 것은 굉장히 공수가 많이 들어요. Unity tiny는 기존 유니티의 MonoBehaviours를 사용하지 않기 때문이에요. (tiny 2기준)
또한 Tiny는 현재 실험적인 개발 단계를 거치고 있어 관련 개발 자료가 PixiJS나 Phaser에 비해 많지 않아요.
결국 일반적인 방법으로는 Unity를 사용해 네이티브 게임&플래시 게임을 HTML5게임으로 손쉽게 포팅할 수는 없어요. 그러나 Unity를 사용해 처음부터 HTML5 게임을 개발하여 라이브 서비스 단계까지 가는 것은 가능해요!

Unity Tiny, 이런 경우 추천합니다

1.
성능이 가벼운 HTML5 게임을 제작하고 싶으신 분
2.
별도의 GUI 서드파티 접목 없이 게임을 제작하고 싶으신 분
3.
로컬 웹서버 구축이 귀찮으신 분
4.
C#에 익숙하신 분 (단, 현재 C#은 프리뷰 모드임)
여기서 성능이 가벼운 게임이란 멀티스레딩을 핵심적으로 사용하지 않으며, 전체 생명 주기가 짧은 게임을 의미할 것 같아요. (샘플 프로젝트 보기)
이번 글에서는 Unity를 이용한 HTML5 게임 제작에 대해 간단히 알아보았어요.
다음 글에서는 PixiJS와 Phaser에 대해서 알아 볼 예정입니다. 글 정독 감사합니다.
WRITTEN BY 지안 (Client, NSTAGE) / 2021122