SlideShare a Scribd company logo
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
HTML5 Canvas
canvas(이하 캔버스)는 자바스크립트를 이용해서
그래픽을 그릴 수 있는 쉽고 강력한 여러 옵션을 제
공한다.
Web Graphics Library
웹상에서 2D 및 3D 그래픽을 렌더링하기 위한 로우
레벨 Javascript API
OpenGL ES 2.0을 기반으로 브라우저 엔진에 내장된
HTML5 Canvas 요소 위에 그려진다.
- 로열티 없이 누구나 사용 가능
- 렌더링 가속화를 지원하는 그래픽 하드웨어(그래픽 카드 등) 활용
- 별도의 플로그인이 필요 없으며, 웹 브라우저에 내장되어 실행
- OpenGL ES 2.0을 기반으로하므로, 이미 OpenGL API에 대한 경험이 있다면 다루기가 쉬움
- 자바스크립트 프로그래밍이 가능
자바스크립트는 자동 메모리 관리를 지원하기 때문에 메모리를 수동으로 할당할 필요도 없고
WebGL이 자바스크립트의 기능을 상속 받음
- 모바일 브라우저에서도 사용 가능
JS Game Engines
https://threejs.org/examples/#webgl_ani
mation_keyframes
Three.js는 웹 브라우저에서 3차원 컴퓨터 그래픽스 애니메이션 응용을 만들고 표현하기 위해 사용되는 자바스크립트
라이브러리이자 API
 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
https://game-previews.gdevelop-app.com/1646207294955-295492/index.html
JS Game Engines
JS Game Engines
JS Game Engines
무료, 오픈소스(MIT License). 로얄티가 없다.
‘사람들이 직접 플레이 가능한’ 게임을
쉽게 만들어 볼 수 있다.
게임 ‘개발’ 프로그래밍과는 거리가 있다.
학습용 도구? RPG Maker?
 GDevelop
 melonJS
 ImpactJS
 BabylonJS
 PhaserJS
 PixieJS
 PlayCanvas
 A-Frame
 PhysicsJS
INDEX
1. 2D 포커스된 게임엔진
2. 2D 물리엔진 통합
3. 사운드 API 제공
4. 입문자 친화적
5. 가볍다
6. 레벨에디터 + JS 코딩
JavaScript Game Engines
JS Game Engines
JS Game Engines
무료, 오픈소스(MIT License). 로얄티가 없다.
‘개발다운’ 게임개발 입문으로 적당하다.
허접해보이지만 실제로 만들어진 게임이 많다.
허접한 2D게임이 나올 것 같은 첫 인상
 GDevelop
 melonJS
 ImpactJS
 BabylonJS
 PhaserJS
 PixieJS
 PlayCanvas
 A-Frame
 PhysicsJS
INDEX
1. 다른 엔진과 비슷
2. 3D 환경을 시뮬레이션 해볼
수 있는 플러그인 등이 존재
JavaScript Game Engines
책이 있다. 체계적으로 시작해 볼 수 있음 2014년 이후로 유지보수가 안되고 있음;;
 GDevelop
 melonJS
 ImpactJS
 BabylonJS
 PhaserJS
 PixieJS
 PlayCanvas
 A-Frame
 PhysicsJS
INDEX
1. 강력한 웹 렌더링 엔진
JavaScript Game Engines
https://www.babylonjs-playground.com/#I6V1ST
Web에서 믿을 수 없는 3D 효과
Github에서 매일 활발하게 개선 되고 있다
게임 엔진이 아니다. (?)
 GDevelop
 melonJS
 ImpactJS
 BabylonJS
 PhaserJS
 PixieJS
 PlayCanvas
 A-Frame
 PhysicsJS
INDEX
1. WebGL과 Canvas 모두
지원 (#WebGL 지원 안하는
기기)
2. 활성화된 커뮤니티
3. 프레임워크는 무료
하지만 플러그인들은 유료
JavaScript Game Engines
JS Game Engines
JS Game Engines
성공사례가 자극적이다ㅎㅎ
포럼이 매우 크다
모바일 브라우저 친화적
호환되지 않는 버전업이 자주 된다
 GDevelop
 melonJS
 ImpactJS
 BabylonJS
 PhaserJS
 PixieJS
 PlayCanvas
 A-Frame
 PhysicsJS
INDEX
1. BabylonJS처럼 강력한
3D/2D 시각화 라이브러리
2. 게임이 아닌 디지털 콘텐츠
특화
3. 복잡한 게임 메카닉 보다
비쥬얼 위주의 게임에 적합
JavaScript Game Engines
JS Game Engines
https://art4globalgoals.com/en
매우 화려하다
WebGL계의 최강자 같은
렌더러만 제공
게임 엔진이 아니다
‘액션 스크립트’스럽다
 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
https://playcanvas.com/#!
사용이 매우 쉽다
물리엔진 통합, Asset 강력, 온라인 실시간 협업...
유료
인터넷 기반 (느릴듯...)
프로그래밍이라기보다는 편집기?
Thank you
게임... 만들까...?
Ad

More Related Content

What's hot (20)

[야생의 땅: 듀랑고] 서버 아키텍처 - SPOF 없는 분산 MMORPG 서버
[야생의 땅: 듀랑고] 서버 아키텍처 - SPOF 없는 분산 MMORPG 서버[야생의 땅: 듀랑고] 서버 아키텍처 - SPOF 없는 분산 MMORPG 서버
[야생의 땅: 듀랑고] 서버 아키텍처 - SPOF 없는 분산 MMORPG 서버
Heungsub Lee
 
Logcat과 함께 하는 모바일 웹 디버깅
Logcat과 함께 하는 모바일 웹 디버깅Logcat과 함께 하는 모바일 웹 디버깅
Logcat과 함께 하는 모바일 웹 디버깅
JinKwon Lee
 
KGC 2016: HTTPS 로 모바일 게임 서버 구축한다는 것 - Korea Games Conference
KGC 2016: HTTPS 로 모바일 게임 서버 구축한다는 것 - Korea Games ConferenceKGC 2016: HTTPS 로 모바일 게임 서버 구축한다는 것 - Korea Games Conference
KGC 2016: HTTPS 로 모바일 게임 서버 구축한다는 것 - Korea Games Conference
Xionglong Jin
 
FullStack 개발자 만들기 과정 소개 (Android + MEAN Stack + Redis 다루기)
FullStack 개발자 만들기 과정 소개  (Android + MEAN Stack + Redis 다루기) FullStack 개발자 만들기 과정 소개  (Android + MEAN Stack + Redis 다루기)
FullStack 개발자 만들기 과정 소개 (Android + MEAN Stack + Redis 다루기)
YoungSu Son
 
[IGC 2017] 오토데스크 박준석 - 3ds Max 2018과 Shotgun을 이용한 게임 제작 Pipeline 소개
[IGC 2017] 오토데스크 박준석 - 3ds Max 2018과 Shotgun을 이용한 게임 제작 Pipeline 소개[IGC 2017] 오토데스크 박준석 - 3ds Max 2018과 Shotgun을 이용한 게임 제작 Pipeline 소개
[IGC 2017] 오토데스크 박준석 - 3ds Max 2018과 Shotgun을 이용한 게임 제작 Pipeline 소개
강 민우
 
[D2 오픈세미나]5.html5 api 테트리스게임_이진권
[D2 오픈세미나]5.html5 api 테트리스게임_이진권[D2 오픈세미나]5.html5 api 테트리스게임_이진권
[D2 오픈세미나]5.html5 api 테트리스게임_이진권
NAVER D2
 
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
Miyu Park
 
이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018
이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018
이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018
devCAT Studio, NEXON
 
NDC 2015 삼시세끼 빌드만들기
NDC 2015 삼시세끼 빌드만들기NDC 2015 삼시세끼 빌드만들기
NDC 2015 삼시세끼 빌드만들기
Hyunsuk Ahn
 
실시간으로 안드로이드 프론트엔드 작업하기
실시간으로 안드로이드 프론트엔드 작업하기실시간으로 안드로이드 프론트엔드 작업하기
실시간으로 안드로이드 프론트엔드 작업하기
Haze Lee
 
이승재, 박경재, NDC Replay 제작기: static website, static backoffice, NDC2017
이승재, 박경재, NDC Replay 제작기: static website, static backoffice, NDC2017이승재, 박경재, NDC Replay 제작기: static website, static backoffice, NDC2017
이승재, 박경재, NDC Replay 제작기: static website, static backoffice, NDC2017
devCAT Studio, NEXON
 
[145]5년간의네이버웹엔진개발삽질기그리고 김효
[145]5년간의네이버웹엔진개발삽질기그리고 김효[145]5년간의네이버웹엔진개발삽질기그리고 김효
[145]5년간의네이버웹엔진개발삽질기그리고 김효
NAVER D2
 
[네이버오픈소스세미나] egjs-view360 개발기 - 김희재
[네이버오픈소스세미나] egjs-view360 개발기 - 김희재[네이버오픈소스세미나] egjs-view360 개발기 - 김희재
[네이버오픈소스세미나] egjs-view360 개발기 - 김희재
NAVER D2
 
Grunt
GruntGrunt
Grunt
Dohoon Kim
 
백승엽, M2프로젝트의 오류보고시스템, NDC2010
백승엽, M2프로젝트의 오류보고시스템, NDC2010백승엽, M2프로젝트의 오류보고시스템, NDC2010
백승엽, M2프로젝트의 오류보고시스템, NDC2010
devCAT Studio, NEXON
 
[Naver d2]html5 canvas overview
[Naver d2]html5 canvas overview[Naver d2]html5 canvas overview
[Naver d2]html5 canvas overview
NAVER D2
 
젠킨스 설치 및 설정
젠킨스 설치 및 설정젠킨스 설치 및 설정
젠킨스 설치 및 설정
중선 곽
 
윤석주, 인하우스 웹 프레임워크 Jul8 제작기, NDC2018
윤석주, 인하우스 웹 프레임워크 Jul8 제작기, NDC2018윤석주, 인하우스 웹 프레임워크 Jul8 제작기, NDC2018
윤석주, 인하우스 웹 프레임워크 Jul8 제작기, NDC2018
devCAT Studio, NEXON
 
에코노베이션 3차 세미나 교안
에코노베이션 3차 세미나 교안에코노베이션 3차 세미나 교안
에코노베이션 3차 세미나 교안
Lee Jungpyo
 
프론트엔드 개발자
프론트엔드 개발자프론트엔드 개발자
프론트엔드 개발자
jung kyunghwan
 
[야생의 땅: 듀랑고] 서버 아키텍처 - SPOF 없는 분산 MMORPG 서버
[야생의 땅: 듀랑고] 서버 아키텍처 - SPOF 없는 분산 MMORPG 서버[야생의 땅: 듀랑고] 서버 아키텍처 - SPOF 없는 분산 MMORPG 서버
[야생의 땅: 듀랑고] 서버 아키텍처 - SPOF 없는 분산 MMORPG 서버
Heungsub Lee
 
Logcat과 함께 하는 모바일 웹 디버깅
Logcat과 함께 하는 모바일 웹 디버깅Logcat과 함께 하는 모바일 웹 디버깅
Logcat과 함께 하는 모바일 웹 디버깅
JinKwon Lee
 
KGC 2016: HTTPS 로 모바일 게임 서버 구축한다는 것 - Korea Games Conference
KGC 2016: HTTPS 로 모바일 게임 서버 구축한다는 것 - Korea Games ConferenceKGC 2016: HTTPS 로 모바일 게임 서버 구축한다는 것 - Korea Games Conference
KGC 2016: HTTPS 로 모바일 게임 서버 구축한다는 것 - Korea Games Conference
Xionglong Jin
 
FullStack 개발자 만들기 과정 소개 (Android + MEAN Stack + Redis 다루기)
FullStack 개발자 만들기 과정 소개  (Android + MEAN Stack + Redis 다루기) FullStack 개발자 만들기 과정 소개  (Android + MEAN Stack + Redis 다루기)
FullStack 개발자 만들기 과정 소개 (Android + MEAN Stack + Redis 다루기)
YoungSu Son
 
[IGC 2017] 오토데스크 박준석 - 3ds Max 2018과 Shotgun을 이용한 게임 제작 Pipeline 소개
[IGC 2017] 오토데스크 박준석 - 3ds Max 2018과 Shotgun을 이용한 게임 제작 Pipeline 소개[IGC 2017] 오토데스크 박준석 - 3ds Max 2018과 Shotgun을 이용한 게임 제작 Pipeline 소개
[IGC 2017] 오토데스크 박준석 - 3ds Max 2018과 Shotgun을 이용한 게임 제작 Pipeline 소개
강 민우
 
[D2 오픈세미나]5.html5 api 테트리스게임_이진권
[D2 오픈세미나]5.html5 api 테트리스게임_이진권[D2 오픈세미나]5.html5 api 테트리스게임_이진권
[D2 오픈세미나]5.html5 api 테트리스게임_이진권
NAVER D2
 
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
Miyu Park
 
이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018
이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018
이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018
devCAT Studio, NEXON
 
NDC 2015 삼시세끼 빌드만들기
NDC 2015 삼시세끼 빌드만들기NDC 2015 삼시세끼 빌드만들기
NDC 2015 삼시세끼 빌드만들기
Hyunsuk Ahn
 
실시간으로 안드로이드 프론트엔드 작업하기
실시간으로 안드로이드 프론트엔드 작업하기실시간으로 안드로이드 프론트엔드 작업하기
실시간으로 안드로이드 프론트엔드 작업하기
Haze Lee
 
이승재, 박경재, NDC Replay 제작기: static website, static backoffice, NDC2017
이승재, 박경재, NDC Replay 제작기: static website, static backoffice, NDC2017이승재, 박경재, NDC Replay 제작기: static website, static backoffice, NDC2017
이승재, 박경재, NDC Replay 제작기: static website, static backoffice, NDC2017
devCAT Studio, NEXON
 
[145]5년간의네이버웹엔진개발삽질기그리고 김효
[145]5년간의네이버웹엔진개발삽질기그리고 김효[145]5년간의네이버웹엔진개발삽질기그리고 김효
[145]5년간의네이버웹엔진개발삽질기그리고 김효
NAVER D2
 
[네이버오픈소스세미나] egjs-view360 개발기 - 김희재
[네이버오픈소스세미나] egjs-view360 개발기 - 김희재[네이버오픈소스세미나] egjs-view360 개발기 - 김희재
[네이버오픈소스세미나] egjs-view360 개발기 - 김희재
NAVER D2
 
백승엽, M2프로젝트의 오류보고시스템, NDC2010
백승엽, M2프로젝트의 오류보고시스템, NDC2010백승엽, M2프로젝트의 오류보고시스템, NDC2010
백승엽, M2프로젝트의 오류보고시스템, NDC2010
devCAT Studio, NEXON
 
[Naver d2]html5 canvas overview
[Naver d2]html5 canvas overview[Naver d2]html5 canvas overview
[Naver d2]html5 canvas overview
NAVER D2
 
젠킨스 설치 및 설정
젠킨스 설치 및 설정젠킨스 설치 및 설정
젠킨스 설치 및 설정
중선 곽
 
윤석주, 인하우스 웹 프레임워크 Jul8 제작기, NDC2018
윤석주, 인하우스 웹 프레임워크 Jul8 제작기, NDC2018윤석주, 인하우스 웹 프레임워크 Jul8 제작기, NDC2018
윤석주, 인하우스 웹 프레임워크 Jul8 제작기, NDC2018
devCAT Studio, NEXON
 
에코노베이션 3차 세미나 교안
에코노베이션 3차 세미나 교안에코노베이션 3차 세미나 교안
에코노베이션 3차 세미나 교안
Lee Jungpyo
 
프론트엔드 개발자
프론트엔드 개발자프론트엔드 개발자
프론트엔드 개발자
jung kyunghwan
 

Similar to JS Game Engines (20)

[111217 아꿈사연말모임] 웹소켓과온라인게임
[111217 아꿈사연말모임] 웹소켓과온라인게임[111217 아꿈사연말모임] 웹소켓과온라인게임
[111217 아꿈사연말모임] 웹소켓과온라인게임
sung ki choi
 
프론트엔드 개발자의 자바스크립트
프론트엔드 개발자의 자바스크립트 프론트엔드 개발자의 자바스크립트
프론트엔드 개발자의 자바스크립트
jeong seok yang
 
Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012
Daum DNA
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond
Jae Sung Park
 
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
종훈 박
 
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER Engineering
 
제 5회 DGMIT R&D 컨퍼런스: HTML Graphics AP
 제 5회 DGMIT R&D 컨퍼런스: HTML Graphics AP 제 5회 DGMIT R&D 컨퍼런스: HTML Graphics AP
제 5회 DGMIT R&D 컨퍼런스: HTML Graphics AP
dgmit2009
 
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
Rhio Kim
 
웹 프로그래밍 팀프로젝트 최종발표
웹 프로그래밍 팀프로젝트 최종발표웹 프로그래밍 팀프로젝트 최종발표
웹 프로그래밍 팀프로젝트 최종발표
Seong Heum Park
 
Ndc2013 정리(upload버전)
Ndc2013 정리(upload버전)Ndc2013 정리(upload버전)
Ndc2013 정리(upload버전)
Minsu Park
 
(알도개) GraalVM – 자바를 넘어선 새로운 시작의 서막
(알도개) GraalVM – 자바를 넘어선 새로운 시작의 서막(알도개) GraalVM – 자바를 넘어선 새로운 시작의 서막
(알도개) GraalVM – 자바를 넘어선 새로운 시작의 서막
Jay Park
 
Unionweb프로젝트
Unionweb프로젝트Unionweb프로젝트
Unionweb프로젝트
Dong-Jin Park
 
GDG DevFest Busan 16" Android Nougat Developer's Note
GDG DevFest Busan 16" Android Nougat Developer's NoteGDG DevFest Busan 16" Android Nougat Developer's Note
GDG DevFest Busan 16" Android Nougat Developer's Note
Seok-yong Kim
 
Project anarchy로 3 d 게임 만들기 part_1
Project anarchy로 3 d 게임 만들기 part_1Project anarchy로 3 d 게임 만들기 part_1
Project anarchy로 3 d 게임 만들기 part_1
Dong Chan Shin
 
퓨즈[Fusetools] 소개 :: blog.Wonhada.com :: 최신 자료 (2016년)
퓨즈[Fusetools] 소개 :: blog.Wonhada.com :: 최신 자료 (2016년)퓨즈[Fusetools] 소개 :: blog.Wonhada.com :: 최신 자료 (2016년)
퓨즈[Fusetools] 소개 :: blog.Wonhada.com :: 최신 자료 (2016년)
강민 원
 
TensorFlow.js & Applied AI at the Coca-Cola Company
TensorFlow.js & Applied AI at the Coca-Cola CompanyTensorFlow.js & Applied AI at the Coca-Cola Company
TensorFlow.js & Applied AI at the Coca-Cola Company
Modulabs
 
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
현철 조
 
[IGC 2016] 아마존 구승모 - 게임 제작을 위한 Amazon의 편리한 도구들 (게임리프트와 럼버야드)
[IGC 2016] 아마존 구승모 - 게임 제작을 위한 Amazon의 편리한 도구들 (게임리프트와 럼버야드)[IGC 2016] 아마존 구승모 - 게임 제작을 위한 Amazon의 편리한 도구들 (게임리프트와 럼버야드)
[IGC 2016] 아마존 구승모 - 게임 제작을 위한 Amazon의 편리한 도구들 (게임리프트와 럼버야드)
강 민우
 
Html5 게임 기술의 개요
Html5 게임 기술의 개요Html5 게임 기술의 개요
Html5 게임 기술의 개요
Changhwan Yi
 
[111217 아꿈사연말모임] 웹소켓과온라인게임
[111217 아꿈사연말모임] 웹소켓과온라인게임[111217 아꿈사연말모임] 웹소켓과온라인게임
[111217 아꿈사연말모임] 웹소켓과온라인게임
sung ki choi
 
프론트엔드 개발자의 자바스크립트
프론트엔드 개발자의 자바스크립트 프론트엔드 개발자의 자바스크립트
프론트엔드 개발자의 자바스크립트
jeong seok yang
 
Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012
Daum DNA
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond
Jae Sung Park
 
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
종훈 박
 
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER Engineering
 
제 5회 DGMIT R&D 컨퍼런스: HTML Graphics AP
 제 5회 DGMIT R&D 컨퍼런스: HTML Graphics AP 제 5회 DGMIT R&D 컨퍼런스: HTML Graphics AP
제 5회 DGMIT R&D 컨퍼런스: HTML Graphics AP
dgmit2009
 
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
Rhio Kim
 
웹 프로그래밍 팀프로젝트 최종발표
웹 프로그래밍 팀프로젝트 최종발표웹 프로그래밍 팀프로젝트 최종발표
웹 프로그래밍 팀프로젝트 최종발표
Seong Heum Park
 
Ndc2013 정리(upload버전)
Ndc2013 정리(upload버전)Ndc2013 정리(upload버전)
Ndc2013 정리(upload버전)
Minsu Park
 
(알도개) GraalVM – 자바를 넘어선 새로운 시작의 서막
(알도개) GraalVM – 자바를 넘어선 새로운 시작의 서막(알도개) GraalVM – 자바를 넘어선 새로운 시작의 서막
(알도개) GraalVM – 자바를 넘어선 새로운 시작의 서막
Jay Park
 
Unionweb프로젝트
Unionweb프로젝트Unionweb프로젝트
Unionweb프로젝트
Dong-Jin Park
 
GDG DevFest Busan 16" Android Nougat Developer's Note
GDG DevFest Busan 16" Android Nougat Developer's NoteGDG DevFest Busan 16" Android Nougat Developer's Note
GDG DevFest Busan 16" Android Nougat Developer's Note
Seok-yong Kim
 
Project anarchy로 3 d 게임 만들기 part_1
Project anarchy로 3 d 게임 만들기 part_1Project anarchy로 3 d 게임 만들기 part_1
Project anarchy로 3 d 게임 만들기 part_1
Dong Chan Shin
 
퓨즈[Fusetools] 소개 :: blog.Wonhada.com :: 최신 자료 (2016년)
퓨즈[Fusetools] 소개 :: blog.Wonhada.com :: 최신 자료 (2016년)퓨즈[Fusetools] 소개 :: blog.Wonhada.com :: 최신 자료 (2016년)
퓨즈[Fusetools] 소개 :: blog.Wonhada.com :: 최신 자료 (2016년)
강민 원
 
TensorFlow.js & Applied AI at the Coca-Cola Company
TensorFlow.js & Applied AI at the Coca-Cola CompanyTensorFlow.js & Applied AI at the Coca-Cola Company
TensorFlow.js & Applied AI at the Coca-Cola Company
Modulabs
 
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
현철 조
 
[IGC 2016] 아마존 구승모 - 게임 제작을 위한 Amazon의 편리한 도구들 (게임리프트와 럼버야드)
[IGC 2016] 아마존 구승모 - 게임 제작을 위한 Amazon의 편리한 도구들 (게임리프트와 럼버야드)[IGC 2016] 아마존 구승모 - 게임 제작을 위한 Amazon의 편리한 도구들 (게임리프트와 럼버야드)
[IGC 2016] 아마존 구승모 - 게임 제작을 위한 Amazon의 편리한 도구들 (게임리프트와 럼버야드)
강 민우
 
Html5 게임 기술의 개요
Html5 게임 기술의 개요Html5 게임 기술의 개요
Html5 게임 기술의 개요
Changhwan Yi
 
Ad

More from Wonjun Hwang (20)

Kit-Works Team Study_20250502_Code_Formatting_유현주.pptx
Kit-Works Team Study_20250502_Code_Formatting_유현주.pptxKit-Works Team Study_20250502_Code_Formatting_유현주.pptx
Kit-Works Team Study_20250502_Code_Formatting_유현주.pptx
Wonjun Hwang
 
20250425_ Kit-Works Team Study_Java의 문자열 클래스.pdf
20250425_ Kit-Works Team Study_Java의 문자열 클래스.pdf20250425_ Kit-Works Team Study_Java의 문자열 클래스.pdf
20250425_ Kit-Works Team Study_Java의 문자열 클래스.pdf
Wonjun Hwang
 
20250425_Kit-Works Team Study_선언형&명령형 패러다임.pdf
20250425_Kit-Works Team Study_선언형&명령형 패러다임.pdf20250425_Kit-Works Team Study_선언형&명령형 패러다임.pdf
20250425_Kit-Works Team Study_선언형&명령형 패러다임.pdf
Wonjun Hwang
 
20240411_Kit-Works Team Study_PLEOS-25.pdf
20240411_Kit-Works Team Study_PLEOS-25.pdf20240411_Kit-Works Team Study_PLEOS-25.pdf
20240411_Kit-Works Team Study_PLEOS-25.pdf
Wonjun Hwang
 
20250418_팀스터디_주식을 사고 팔아 보자(Part1)_염겨레.pptx
20250418_팀스터디_주식을 사고 팔아 보자(Part1)_염겨레.pptx20250418_팀스터디_주식을 사고 팔아 보자(Part1)_염겨레.pptx
20250418_팀스터디_주식을 사고 팔아 보자(Part1)_염겨레.pptx
Wonjun Hwang
 
20250411_양다영_MCPModel-Context-Protocol.pdf
20250411_양다영_MCPModel-Context-Protocol.pdf20250411_양다영_MCPModel-Context-Protocol.pdf
20250411_양다영_MCPModel-Context-Protocol.pdf
Wonjun Hwang
 
Kit-Works Team Study_20250404_바이브 코딩.pdf
Kit-Works Team Study_20250404_바이브 코딩.pdfKit-Works Team Study_20250404_바이브 코딩.pdf
Kit-Works Team Study_20250404_바이브 코딩.pdf
Wonjun Hwang
 
Kit-Works Team Study_UML 다이어그램_20250404_손문수.pptx
Kit-Works Team Study_UML 다이어그램_20250404_손문수.pptxKit-Works Team Study_UML 다이어그램_20250404_손문수.pptx
Kit-Works Team Study_UML 다이어그램_20250404_손문수.pptx
Wonjun Hwang
 
20250328_Kit-Works Team Study_equals().pdf
20250328_Kit-Works Team Study_equals().pdf20250328_Kit-Works Team Study_equals().pdf
20250328_Kit-Works Team Study_equals().pdf
Wonjun Hwang
 
20250328_Kit-Works Team Study_Zod-TypeScript.pptx
20250328_Kit-Works Team Study_Zod-TypeScript.pptx20250328_Kit-Works Team Study_Zod-TypeScript.pptx
20250328_Kit-Works Team Study_Zod-TypeScript.pptx
Wonjun Hwang
 
20250321_Kit-Works Team Study_docker_for_FE.pdf
20250321_Kit-Works Team Study_docker_for_FE.pdf20250321_Kit-Works Team Study_docker_for_FE.pdf
20250321_Kit-Works Team Study_docker_for_FE.pdf
Wonjun Hwang
 
20250321_Kit-Works Team Study_sealed-클래스.pptx
20250321_Kit-Works Team Study_sealed-클래스.pptx20250321_Kit-Works Team Study_sealed-클래스.pptx
20250321_Kit-Works Team Study_sealed-클래스.pptx
Wonjun Hwang
 
20250221_Kit-Works Team Study_CQS_김성호.pdf
20250221_Kit-Works Team Study_CQS_김성호.pdf20250221_Kit-Works Team Study_CQS_김성호.pdf
20250221_Kit-Works Team Study_CQS_김성호.pdf
Wonjun Hwang
 
20250314_Kit-Works Team Study_JAVA Record.pdf
20250314_Kit-Works Team Study_JAVA Record.pdf20250314_Kit-Works Team Study_JAVA Record.pdf
20250314_Kit-Works Team Study_JAVA Record.pdf
Wonjun Hwang
 
20250314_Kit-Works Team Study_WebHook.pptx
20250314_Kit-Works Team Study_WebHook.pptx20250314_Kit-Works Team Study_WebHook.pptx
20250314_Kit-Works Team Study_WebHook.pptx
Wonjun Hwang
 
20250307_Kit-Works Tram Study_DeekSeek.pptx
20250307_Kit-Works Tram Study_DeekSeek.pptx20250307_Kit-Works Tram Study_DeekSeek.pptx
20250307_Kit-Works Tram Study_DeekSeek.pptx
Wonjun Hwang
 
20250307_Kit-Woks Team Study_gRPC_김현진.pptx
20250307_Kit-Woks Team Study_gRPC_김현진.pptx20250307_Kit-Woks Team Study_gRPC_김현진.pptx
20250307_Kit-Woks Team Study_gRPC_김현진.pptx
Wonjun Hwang
 
20250228_Kit-Works Team Study_Spring Rest Docs.pptx
20250228_Kit-Works Team Study_Spring Rest Docs.pptx20250228_Kit-Works Team Study_Spring Rest Docs.pptx
20250228_Kit-Works Team Study_Spring Rest Docs.pptx
Wonjun Hwang
 
20250228_Kit-Works Team Study_트랜잭션 격리 수준 최종 part1.pdf
20250228_Kit-Works Team Study_트랜잭션 격리 수준 최종 part1.pdf20250228_Kit-Works Team Study_트랜잭션 격리 수준 최종 part1.pdf
20250228_Kit-Works Team Study_트랜잭션 격리 수준 최종 part1.pdf
Wonjun Hwang
 
20240214_Kit-Works Team Study_tailwind 4.0.pdf
20240214_Kit-Works Team Study_tailwind 4.0.pdf20240214_Kit-Works Team Study_tailwind 4.0.pdf
20240214_Kit-Works Team Study_tailwind 4.0.pdf
Wonjun Hwang
 
Kit-Works Team Study_20250502_Code_Formatting_유현주.pptx
Kit-Works Team Study_20250502_Code_Formatting_유현주.pptxKit-Works Team Study_20250502_Code_Formatting_유현주.pptx
Kit-Works Team Study_20250502_Code_Formatting_유현주.pptx
Wonjun Hwang
 
20250425_ Kit-Works Team Study_Java의 문자열 클래스.pdf
20250425_ Kit-Works Team Study_Java의 문자열 클래스.pdf20250425_ Kit-Works Team Study_Java의 문자열 클래스.pdf
20250425_ Kit-Works Team Study_Java의 문자열 클래스.pdf
Wonjun Hwang
 
20250425_Kit-Works Team Study_선언형&명령형 패러다임.pdf
20250425_Kit-Works Team Study_선언형&명령형 패러다임.pdf20250425_Kit-Works Team Study_선언형&명령형 패러다임.pdf
20250425_Kit-Works Team Study_선언형&명령형 패러다임.pdf
Wonjun Hwang
 
20240411_Kit-Works Team Study_PLEOS-25.pdf
20240411_Kit-Works Team Study_PLEOS-25.pdf20240411_Kit-Works Team Study_PLEOS-25.pdf
20240411_Kit-Works Team Study_PLEOS-25.pdf
Wonjun Hwang
 
20250418_팀스터디_주식을 사고 팔아 보자(Part1)_염겨레.pptx
20250418_팀스터디_주식을 사고 팔아 보자(Part1)_염겨레.pptx20250418_팀스터디_주식을 사고 팔아 보자(Part1)_염겨레.pptx
20250418_팀스터디_주식을 사고 팔아 보자(Part1)_염겨레.pptx
Wonjun Hwang
 
20250411_양다영_MCPModel-Context-Protocol.pdf
20250411_양다영_MCPModel-Context-Protocol.pdf20250411_양다영_MCPModel-Context-Protocol.pdf
20250411_양다영_MCPModel-Context-Protocol.pdf
Wonjun Hwang
 
Kit-Works Team Study_20250404_바이브 코딩.pdf
Kit-Works Team Study_20250404_바이브 코딩.pdfKit-Works Team Study_20250404_바이브 코딩.pdf
Kit-Works Team Study_20250404_바이브 코딩.pdf
Wonjun Hwang
 
Kit-Works Team Study_UML 다이어그램_20250404_손문수.pptx
Kit-Works Team Study_UML 다이어그램_20250404_손문수.pptxKit-Works Team Study_UML 다이어그램_20250404_손문수.pptx
Kit-Works Team Study_UML 다이어그램_20250404_손문수.pptx
Wonjun Hwang
 
20250328_Kit-Works Team Study_equals().pdf
20250328_Kit-Works Team Study_equals().pdf20250328_Kit-Works Team Study_equals().pdf
20250328_Kit-Works Team Study_equals().pdf
Wonjun Hwang
 
20250328_Kit-Works Team Study_Zod-TypeScript.pptx
20250328_Kit-Works Team Study_Zod-TypeScript.pptx20250328_Kit-Works Team Study_Zod-TypeScript.pptx
20250328_Kit-Works Team Study_Zod-TypeScript.pptx
Wonjun Hwang
 
20250321_Kit-Works Team Study_docker_for_FE.pdf
20250321_Kit-Works Team Study_docker_for_FE.pdf20250321_Kit-Works Team Study_docker_for_FE.pdf
20250321_Kit-Works Team Study_docker_for_FE.pdf
Wonjun Hwang
 
20250321_Kit-Works Team Study_sealed-클래스.pptx
20250321_Kit-Works Team Study_sealed-클래스.pptx20250321_Kit-Works Team Study_sealed-클래스.pptx
20250321_Kit-Works Team Study_sealed-클래스.pptx
Wonjun Hwang
 
20250221_Kit-Works Team Study_CQS_김성호.pdf
20250221_Kit-Works Team Study_CQS_김성호.pdf20250221_Kit-Works Team Study_CQS_김성호.pdf
20250221_Kit-Works Team Study_CQS_김성호.pdf
Wonjun Hwang
 
20250314_Kit-Works Team Study_JAVA Record.pdf
20250314_Kit-Works Team Study_JAVA Record.pdf20250314_Kit-Works Team Study_JAVA Record.pdf
20250314_Kit-Works Team Study_JAVA Record.pdf
Wonjun Hwang
 
20250314_Kit-Works Team Study_WebHook.pptx
20250314_Kit-Works Team Study_WebHook.pptx20250314_Kit-Works Team Study_WebHook.pptx
20250314_Kit-Works Team Study_WebHook.pptx
Wonjun Hwang
 
20250307_Kit-Works Tram Study_DeekSeek.pptx
20250307_Kit-Works Tram Study_DeekSeek.pptx20250307_Kit-Works Tram Study_DeekSeek.pptx
20250307_Kit-Works Tram Study_DeekSeek.pptx
Wonjun Hwang
 
20250307_Kit-Woks Team Study_gRPC_김현진.pptx
20250307_Kit-Woks Team Study_gRPC_김현진.pptx20250307_Kit-Woks Team Study_gRPC_김현진.pptx
20250307_Kit-Woks Team Study_gRPC_김현진.pptx
Wonjun Hwang
 
20250228_Kit-Works Team Study_Spring Rest Docs.pptx
20250228_Kit-Works Team Study_Spring Rest Docs.pptx20250228_Kit-Works Team Study_Spring Rest Docs.pptx
20250228_Kit-Works Team Study_Spring Rest Docs.pptx
Wonjun Hwang
 
20250228_Kit-Works Team Study_트랜잭션 격리 수준 최종 part1.pdf
20250228_Kit-Works Team Study_트랜잭션 격리 수준 최종 part1.pdf20250228_Kit-Works Team Study_트랜잭션 격리 수준 최종 part1.pdf
20250228_Kit-Works Team Study_트랜잭션 격리 수준 최종 part1.pdf
Wonjun Hwang
 
20240214_Kit-Works Team Study_tailwind 4.0.pdf
20240214_Kit-Works Team Study_tailwind 4.0.pdf20240214_Kit-Works Team Study_tailwind 4.0.pdf
20240214_Kit-Works Team Study_tailwind 4.0.pdf
Wonjun Hwang
 
Ad

JS Game Engines

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