본론에 들어가기에 앞서, 이 두 엔진은 monolithic하기보다는 micro service적 면모를 많이 가지고 있어요. 전용 편집기가 없다는 점, 별도 task runner의 도움을 받는게 편리하다는 점 등등, 지금까지 보아왔던 '게임 엔진'들과는 사용의 방향성이 다르다고 생각이 듭니다.
두 엔진의 어떤 면모들이 monolithic 하다는 것인지, 그래서 이러한 엔진의 특성은 어디에 적합한지 지금부터 살펴보겠습니다.
빠르고 간단한 2D WebGL renderer PixiJS! 하지만 프레임워크는 아니다
WebGL 3D 렌더러에 three.js가 있다면 2D에서는 PixiJS가 있다고 할 수 있죠.
"어라...엔진이라면서 왜 라이브러리랑 비유를 해요...?"
그것은 PixiJS는 다음 기능을 기본으로 제공하지 않기 때문입니다.
•
사용자 설정 관리
•
오디오 라이브러리
•
개체 스크립팅
•
모바일 앱 빌드
•
UI 라이브러리 또는 플러그인
•
개발 환경과 편집기(IDE 등)
Unity나 Game Maker studio등의 게임 엔진을 주로 접해보신 분들은 '게임 엔진'임에도 불구하고 위 기능들이 없는 것이 다소 생소할 수 있어요.
저도 이전까지 '엔진'에 대해 인식할때 UI 라이브러리가 포함되어있는 형태의 엔진들을 주로 떠올렸거든요. 그래서 개발 환경을 따로 구축한 뒤 라이브러리를 import해서 사용하는 PixiJS의 존재를 접했을 때 굉장히 새로웠습니다.
Pixi.js, 장점
Pixi.js는 단일 라이브러리만 가지고는 게임을 만들기에는 다소 가벼울 수 있는 엔진이에요. 그러나 WebGL 2D 렌더링에 관련된 기능들만 들어있기 때문에 굉장히 빠르고 가벼워요. 또한 사용자가 원하는 대로 각종 라이브러리를 붙여 개발 환경을 구축할 수 있다는 점이 큰 장점이 되는 경우도 많아요.
Pixi.js는 게임만이 아닌 다양한 HTML5 웹페이지에 유연한 적용이 가능해요. 배포 방식 또한 일반 웹페이지를 배포하는 것과 동일합니다. 아래의 웹페이지들은 Pixi.js를 사용하여 만들어졌다고 해요. 미리보기 화면부터 정말 화려하죠?
Pixi.js, 단점
가볍다!는 것이 단점일 수 있는 엔진이에요. 일단 개발 환경을 엔진단에서 준비해주지 않으니, 개발자가 개발 초기에 따로 챙겨야 할 것들이 있습니다. 대표적으로 다음과 같은 것들이 있으면 좋아요.
•
3D 미지원
•
로컬 웹 서버 - 필수
•
•
오디오 라이브러리
•
React와는 호환성 문제가 있어 원활히 사용하기가 어려워요.
결국 Pixi.js 단일 환경으로는 게임을 만들기가 어렵다는 점, 게임 엔진보다는 그래픽 렌더러로 주로 이용된다는 점이 단점으로 작용합니다.
유명한 HTML5 게임 프레임워크 Phaser
Phaser는 HTML5 게임 개발에 입문했을때 가장 무난하게 접할 수 있는 프레임워크에요. 공식 홈페이지의 가이드 문서 뿐만 아니라 한국어로 된 블로그 개발 자료도 많아서, 개발 도중 어려움이 닥쳤을 때 도움을 받기가 타엔진들에 비해 상대적으로 쉽기도 해요.
Phaser는 Phaser2와 Phaser3로 나뉘어요. Phaser2는 WebGL 렌더링을 위해 Pixi.js를 사용하고 있어요. 그러나 Phaser3에서는 자체 개발한 WebGL 렌더러를 사용하고 있다고 합니다. 이외에도 디테일에서 많은 차이가 있어요. 아쉽지만 Phaser2로 만들어진 게임의 엔진을 Phaser3로 손쉽게 업그레이드 하는 것은 불가능해요.
이 파트에서는 Phaser3 위주로 설명을 드릴 건데요, Phaser3도 ‘음...? 게임엔진...?’스러운 부분이 있어요. 다음 부분들은 Phaser3를 이용하기 위해서 사용자가 직접 선택하고 구축해야 하는 것들이에요.
•
로컬 웹 서버
•
IDE 개발 환경
•
UI 라이브러리 또는 플러그인 - 엔진 자체에 붙어있지는 않습니다.
•
위 준비 과정을 얼핏 보면 Pixi.js와 비슷하다는 느낌을 받기도 해요. 그러나 Phaser는 게임 프레임워크로서 게임 제작 자체에 최적화가 되어 있어요. 다음과 같은 기능을 지원하고 제어해요.
•
애니메이션 / IO / 장면 / 사운드 관리자
•
Time step
•
게임 루프와 생명주기
Phaser3, 장점
Phaser의 최대 장점은 ‘게임 개발’자체에 치중된 UX를 제공하고, 이에 따라 수많은 참고자료를 얻을 수 있도록 생태계가 형성되어 있다는 점이에요. 제가 리서치를 하면서 본 HTML5 게임 엔진/렌더러 중 Phaser의 개발자료와 정보가 압도적으로 많았어요.
•
다양한 개발자료, 튜토리얼, 커뮤니티
•
Pixi.js 보다는 HTML5 게임 제작에 최적화된 UX를 제공
Phaser3, 단점
Phaser의 단점은 Pixi.js의 단점을 축소해 놓은 느낌이에요. 초기 구축 단계에서 사용자가 신경 쓸 부분이 일부 있답니다.
•
로컬 웹서버 미지원
•
UI Editor는 별도
•
3D 미지원
•
자체적으로 모바일 앱 빌드를 지원하지는 않습니다.
그러나 이러한 일부 귀찮음을 감수하면 Phaser는 사용자 입장에서 굉장히 파워풀한 엔진이에요. 아무리 엔진 자체가 잘 만들어졌어도, 개발 생태계가 제대로 구축되지 않아 관련 자료를 얻기가 힘들면 엔진 사용자도 자연스레 줄게 되고, 포럼이 작아지고...엔진 업데이트가 되지 않고...같은 극단적인 악순환이 생기기도 하니까요.
그래서 Pixi.js VS Phaser ??
마지막으로 레퍼런스를 서치하다 얻은 정보를 헌정하면서 글을 마칩니다. 글 서두에 남긴 두 렌더러는 다소 ‘micro’하다는 얘기에 공감이 가시는지 궁금하네요 :)
다음 시간에는 대망의 Egret Engine을 소개할테니 기대해주세요!
WRITTEN BY 지안 (Client, NSTAGE) / 2021224