EP01. Pixi.js란? (픽셀게임 만들기)

1. 첫 시작

2D 게임을 만들어볼까?

저는 회사에서 캔버스 화면에 40종 이상의 수학 교구를 꺼내 사용할 수 있도록 하는 서비스를 제작하고 있습니다.

해당 서비스는 SVG 기반의 캔버스 화면에 각각의 SVG 교구를 꺼내 사용하고, 조작하는 방식으로 제작했습니다.

SVG를 다루다보니, Canvas 태그를 사용해 개발하는 방식도 경험해보고 싶었고, 단순한 구현이 아닌, 재미있는 것을 해보고 싶었습니다.

Canvas 태그를 사용해 어떤 걸 만들 수 있는지 찾아보던 중, Pixi.js라는 라이브러리를 알게 되었습니다.

pixijs 공식문서

Pixi.js를 사용해 간단한 게임을 만들 수 있겠다는 생각을 했고, Pixi.js에 대해

2. pixi.js의 장단점

Pixi.js는 WebGL을 기반으로 하여 고성능의 2D 그래픽을 표현할 수 있도록 도와주는 JavaScript 라이브러리입니다. 그 장점과 단점을 간단히 정리하면 다음과 같습니다.

장점

• 고성능 렌더링: WebGL 기반으로 작동해 수천 개의 오브젝트도 빠르게 렌더링할 수 있습니다.
• 간단한 API: 캔버스 API보다 직관적인 방식으로 객체를 생성하고 조작할 수 있습니다.
• 다양한 효과 지원: 필터, 마스크, 블렌딩 등 시각적 효과가 풍부하게 제공됩니다.
• 활발한 커뮤니티: 오픈소스이며 다양한 예제와 문서가 존재합니다.

단점

• 3D 미지원: 이름과 달리 Pixi.js는 2D 전용이며, 3D 지원은 Three.js와 같은 라이브러리를 사용해야 합니다.
• 러닝커브: 캔버스나 SVG에 익숙한 개발자에게는 씬 구조나 텍스처 관리 개념이 다소 생소할 수 있습니다.
• 전체 프레임워크 아님: 충돌 처리, 게임 루프 관리 등은 직접 구현하거나 다른 라이브러리와 조합해야 합니다.

3. svg, canvas, pixi.js 구현의 차이점

구분	SVG	Canvas	Pixi.js
렌더링 방식	DOM 기반 (벡터)	Immediate 모드 (픽셀)	WebGL + Canvas fallback
성능	복잡한 도형에 약함	빠르지만 직접 제어 필요	고성능 + API 제공
상호작용	DOM 이벤트 활용	좌표 계산 직접 필요	이벤트 지원 + 객체 관리
사용 용도	도형, 아이콘 등 정적 UI	자유로운 그리기	고성능 2D 게임/시뮬레이션
스타일	CSS로 제어	코드로 직접 스타일링	스타일 및 필터 제공

즉, SVG는 명확하고 접근성 좋은 벡터 방식이라 학습 교구나 UI 구현에 적합하고, Canvas는 더 낮은 수준의 제어가 필요한 경우 유용합니다. Pixi.js는 Canvas의 퍼포먼스를 극대화하고 객체 관리 구조를 제공해 게임 구현에 매우 적합합니다.

4. 게임 구현 난이도 및 간략한 구현 과정 설명

Pixi.js로 게임을 구현하는 과정은 생각보다 복잡하지만, 동시에 명확한 구조를 따르고 있어 배우기에 좋은 편입니다.

또한 공식문서에 튜토리얼이 준비되어 있어 쉽게 경험해볼 수 있습니다.

공식문서 튜토리얼 바로가기

4.1 구현 난이도

• 초기 진입: Sprite, Texture, Stage 등 Pixi 구조에 익숙해지는 데 시간이 필요합니다.
• 구현 복잡도: 직접 애니메이션을 제어하고 이벤트를 처리해야 하므로 단순한 UI보다는 난이도가 높습니다.

4.2 간략한 구현 과정

1. Pixi 애플리케이션 생성 (new PIXI.Application)
2. 캔버스에 렌더링할 Sprite 객체 추가
3. Texture를 이미지로 불러오기
4. 키보드 이벤트나 Ticker를 통해 오브젝트 움직이기
5. 충돌 처리, 점수 계산 등 추가 로직 구성

5. 어떤 게임을 만들고 어떤 경험을 쌓고싶은가

저는 첫 번째로는 간단한 픽셀 런 게임(Pixel Runner) 을 구현하는 것을 목표로 하고 있습니다. 사용자는 방향키와 점프를 이용해 장애물을 피하고, 일정 시간 동안 살아남는 것을 목표로 합니다.

이 게임을 통해 쌓고 싶은 경험은 다음과 같습니다.

• 2D 게임 루프 구현: requestAnimationFrame을 통한 게임 루프 구성, Sprite 애니메이션 제어 경험
• Pixi.js 활용 능력 향상: 텍스처 처리, 객체 생성/제거, 인터랙션 이벤트 활용
• 게임 설계 사고력: UI/UX 흐름, 난이도 설계, 리소스 최적화 등의 게임 기획적 사고
• 코드 재사용성: 구조화된 컴포넌트 개발 및 유지보수 가능한 설계

게임 기획 및 pixi.js사용이 숙달될 수 있도록 다양한 게임을 제작하는 것을 목표로 하고 있습니다.