KitWorks TeamStudy

1. JavaScript Game Engines
KitWorks Team Study - Wonjun Hwang
START
INDEX
Nho
KitWorks
Jungler
Kim
KitWorks
Supporter
Ahn
KitWorks
Dealer
Woo
KitWorks
Tanker
 GDevelop
 melonJS
 ImpactJS
 BabylonJS
 PhaserJS
 PixieJS
 PlayCanvas
 A-Frame
 PhysicsJS

2. HTML5 Canvas
canvas(이하 캔버스)는 자바스크립트를 이용해서
그래픽을 그릴 수 있는 쉽고 강력한 여러 옵션을 제
공한다.

3. Web Graphics Library
웹상에서 2D 및 3D 그래픽을 렌더링하기 위한 로우
레벨 Javascript API
OpenGL ES 2.0을 기반으로 브라우저 엔진에 내장된
HTML5 Canvas 요소 위에 그려진다.
- 로열티 없이 누구나 사용 가능
- 렌더링 가속화를 지원하는 그래픽 하드웨어(그래픽 카드 등) 활용
- 별도의 플로그인이 필요 없으며, 웹 브라우저에 내장되어 실행
- OpenGL ES 2.0을 기반으로하므로, 이미 OpenGL API에 대한 경험이 있다면 다루기가 쉬움
- 자바스크립트 프로그래밍이 가능
자바스크립트는 자동 메모리 관리를 지원하기 때문에 메모리를 수동으로 할당할 필요도 없고
WebGL이 자바스크립트의 기능을 상속 받음
- 모바일 브라우저에서도 사용 가능

5. https://threejs.org/examples/#webgl_ani
mation_keyframes
Three.js는 웹 브라우저에서 3차원 컴퓨터 그래픽스 애니메이션 응용을 만들고 표현하기 위해 사용되는 자바스크립트
라이브러리이자 API

6.  GDevelop
 melonJS
 ImpactJS
 BabylonJS
 PhaserJS
 PixieJS
 PlayCanvas
 A-Frame
 PhysicsJS
INDEX
1. 입문자부터 숙련자까지
아우르는 편한 제작 툴 제공
2. ‘어느 게임 타입이나 가능’
2D 위주 (플랫포머,슛뎀업)
3. 강력한 EXPORT 지원
Web, Windows, MAC, Linux,
IOS, Android, Facebook
Instant Game
4. 디자이너, 아티스트,
프로그래머가 같은 편집기에서
작업가능
JavaScript Game Engines

7. https://game-previews.gdevelop-app.com/1646207294955-295492/index.html

11. 무료, 오픈소스(MIT License). 로얄티가 없다.
‘사람들이 직접 플레이 가능한’ 게임을
쉽게 만들어 볼 수 있다.
게임 ‘개발’ 프로그래밍과는 거리가 있다.
학습용 도구? RPG Maker?

12.  GDevelop
 melonJS
 ImpactJS
 BabylonJS
 PhaserJS
 PixieJS
 PlayCanvas
 A-Frame
 PhysicsJS
INDEX
1. 2D 포커스된 게임엔진
2. 2D 물리엔진 통합
3. 사운드 API 제공
4. 입문자 친화적
5. 가볍다
6. 레벨에디터 + JS 코딩
JavaScript Game Engines

15. 무료, 오픈소스(MIT License). 로얄티가 없다.
‘개발다운’ 게임개발 입문으로 적당하다.
허접해보이지만 실제로 만들어진 게임이 많다.
허접한 2D게임이 나올 것 같은 첫 인상

16.  GDevelop
 melonJS
 ImpactJS
 BabylonJS
 PhaserJS
 PixieJS
 PlayCanvas
 A-Frame
 PhysicsJS
INDEX
1. 다른 엔진과 비슷
2. 3D 환경을 시뮬레이션 해볼
수 있는 플러그인 등이 존재
JavaScript Game Engines

17. 책이 있다. 체계적으로 시작해 볼 수 있음 2014년 이후로 유지보수가 안되고 있음;;

18.  GDevelop
 melonJS
 ImpactJS
 BabylonJS
 PhaserJS
 PixieJS
 PlayCanvas
 A-Frame
 PhysicsJS
INDEX
1. 강력한 웹 렌더링 엔진
JavaScript Game Engines

19. https://www.babylonjs-playground.com/#I6V1ST

20. Web에서 믿을 수 없는 3D 효과
Github에서 매일 활발하게 개선 되고 있다
게임 엔진이 아니다. (?)

21.  GDevelop
 melonJS
 ImpactJS
 BabylonJS
 PhaserJS
 PixieJS
 PlayCanvas
 A-Frame
 PhysicsJS
INDEX
1. WebGL과 Canvas 모두
지원 (#WebGL 지원 안하는
기기)
2. 활성화된 커뮤니티
3. 프레임워크는 무료
하지만 플러그인들은 유료
JavaScript Game Engines

24. 성공사례가 자극적이다ㅎㅎ
포럼이 매우 크다
모바일 브라우저 친화적
호환되지 않는 버전업이 자주 된다

25.  GDevelop
 melonJS
 ImpactJS
 BabylonJS
 PhaserJS
 PixieJS
 PlayCanvas
 A-Frame
 PhysicsJS
INDEX
1. BabylonJS처럼 강력한
3D/2D 시각화 라이브러리
2. 게임이 아닌 디지털 콘텐츠
특화
3. 복잡한 게임 메카닉 보다
비쥬얼 위주의 게임에 적합
JavaScript Game Engines

27. https://art4globalgoals.com/en

28. 매우 화려하다
WebGL계의 최강자 같은
렌더러만 제공
게임 엔진이 아니다
‘액션 스크립트’스럽다

29.  GDevelop
 melonJS
 ImpactJS
 BabylonJS
 PhaserJS
 PixieJS
 PlayCanvas
 A-Frame
 PhysicsJS
INDEX
1. Figma처럼 Fully web-
based 게임개발환경 (GDE)
2. 클릭만으로 개발
- WebGL 3D GUI가 최고
3. 온라인 협업
4. VR 경험 기능 제공
5. 유료
JavaScript Game Engines

30. https://playcanvas.com/#!

31. 사용이 매우 쉽다
물리엔진 통합, Asset 강력, 온라인 실시간 협업...
유료
인터넷 기반 (느릴듯...)
프로그래밍이라기보다는 편집기?

32. Thank you
게임... 만들까...?