최신 커뮤니티

추천 커뮤니티

인기 커뮤니티

핫뉴스 취재기사 기대작 인기신작 업계소식 집중분석 커뮤니티
VR게임 | 웹게임 | 인디게임 | 포켓몬 | 탑10기사 | 시장분석
로그인 | 회원가입

홈 > 뉴스센터 > 취재기사

HTML5로 '퐁'게임 만들기... 어떻게 만들었나?

[ 등록일시 : 2018-03-28 16:15:39 ]


아이펀팩토리 민영기 테크니컬 디렉터

웹소켓 이용, '페이저(Phaser)' 엔진으로 개발​​​

게임업계가 새로운 모바일과 PC등 플랫폼을 초월한 새로운 기술에 눈을 돌리고 있다.

많은 게임사가 비트코인 여파로 블록체인 기술을 활용한 게임 개발에 관심을 보이고 있지만 블록체인과 함께 가장 주목받고 있는 또 하나의 새로운 트렌드가 바로 'HTML5 게임'이다.

HTML5게임은 곳곳에서 주목받고 있다. 웹젠은 작년 중국에서 출시하여 화제를 불러 모았던 HTML5 게임 '대천사지검'을 국내에서 3분기 출시할 예정이고, 위메이드 역시 중국에서 선보인 '미르의 전설' IP의 MMORPG 2종 중 1종을 상반기 국내에서 선보이기 위해 준비에 들어간 단계다.

스타트업 잔디소프트 역시 세기말 악마와 인간과의 싸움을 그린 모바일 다중역할수행게임(MMORPG) '매드월드'를 GDC2018에 선보이는 등 중소규모의 게임사까지 HTML5 게임 개발에 나서고 있다. 또 카카오게임즈 역시 카카오프렌즈 IP의 게임을 모바일과 HTML5 게임을 개발한다는 방침이어서 HTML5 게임이 향후 업계의 주도권의 향방을 결정지을 변수로 떠오르고 있다.

 

아이펀팩토리 문대경 대표

이런 가운데 게임서버 전문 회사인 아이펀팩토리가 28일 경기도 성남시 판교 엔씨소프트 R&D센터에서 일반인들을 대상으로 '아이펀팩토리 데브데이' 행사를 갖고, HTML5로 ‘퐁’ 게임을 만드는 과정 등을 선보였다.

아이펀팩토리 민영기 테크니컬 디렉터는 HTML5 와 웹소켓(Websocket) 을 이용하여 실시간 게임 개발시 고려할 점에 대해 이야기했다. 민영기 TD가 퐁게임을 만들기 위해 고려했던 조건은 브라우저에서 플레이가 가능하고, 순수 웹기술만 사용하며, 유저간 실시간 동기화를 지원하는 간단한 게임을 만들자는 것이었다.

‘퐁’ 게임은 1972년 아타리에서 개발, 최초의 상업적인 성공을 한 게임으로 평가받는다. 탁구와 비슷한 게임이고, 공이 자신의 뒤로 나가면 상대가 점수를 획득하고, 블록을 조작하여 공을 상대에게 보내야 하며, 지정된 점수를 내는 쪽이 승리하는 심플한 규칙을 가진 게임이다.

 

 



게임 개발에는 동기화가 필수다. HTML5 게임 '퐁'에서 동기화가 필요한 부분은 게임의 상태와 블록의 위치, 공의 위치의 3개다. 블록 위치는 일정 주기마다 상대에게 전송하고, 공의 위치는 기본적으로 동기화를 하지 않았다. 방향변경 이벤트만 동기화하고 나머지는 물리엔진을 이용했다. 마지막 블록과 공의 충돌은 충돌 정보를 상대에게 알리는 동기화가 필요했다.

이후 개발에 필요했던 내용은 퐁 게임을 위한 네트워크 기술이었다. P2P와 클라이언트서버의 선택에서는 '클라이언트서버'가 선택됐고, 서버 푸시 기능을 위해서 고려된 웹소켓과 소켓.IO 중에서는 '웹소켓'이 선택됐다.

웹소켓은 웹상에서 풀듀플렉스(Full Duplex) 통신을 지원하는 규약으로, TCP를 이용한다. 웹소켓의 구동 방식은 브라우저가 HTTP를 웹소켓 업그레이드를 요청하면 서버는 HTTP통신으로 웹소켓 사용/사용 불가를 알린다. 다음은 웹소켓 프로토콜 통신으로 상호 작용이 이루어지는 방식이다.


다음으로 개발 과정에서 고려해야할 사항은 HTML5 게임엔진의 선택이다. 이미 게임엔진의 양대 산맥인 유니티와 언리얼엔진도 HTML5 게임엔진이 나와 있지만 민영기 TD는 둘 다 게임을 만들기에는 적합하지 않다고 판단했다. "유니티는 모바일 지원이 미비하고, 언리얼은 아직 실험중인 기능이 있기 때문"이라는 이유에서다.

수많은 HTML5엔진이 있었고, 그중 ‘백로엔진’과 ‘컨스터럭트 엔진’이 인상적이었지만 민 TD가 선택한 것은 '페이저(Phaser)' 엔진이었다. 2D게임엔진이고, 물리엔진과 카메라, 신(Scene)관리 등 코코스2D와 유사한 기능을 제공하는 HTML5 게임엔진이다.




그래서 최종적으로 퐁게임 개발을 위해 채택된 기술 스택은 페이저 HTML5 게임엔진이 적용된 브라우저와 Python, flask의 서버 사이에 웹소켓이 상호작용을 하는 방식이 적용됐다. 로비와 브라우저와의 사이에는 http가, 룸(게임)에는 웹소켓을 활용한 상호작용이 이루어지는 구조다.

실제 게임시연은 짧게 이루어졌다. 두 개의 크롬 브라우저를 띄우고 대기화면에서 게임 룸으로 들어가 대전을 하는 내용의 게임 시연이 이루어졌다. 해당 게임은 개발자들의 공유 플랫폼 '깃허브'(GitHub)'에 공개되어 있다.

현장에는 대학생 등 게임 개발에 관심 있는 예비 개발자들뿐만 아니라 200여명이 일반인들이 참가, HTML5에 대한 뜨거운 관심을 나타냈다. 이들이 게임 개발자가 되어 어떤 창의적인 기획으로 HTML5 게임을 만들어낼지 지켜볼 일이다. 

   이재덕 기자 | game@gamey.kr
0

   29  
  이재덕 기자
  39917P
총 덧글수 ( 0개 )

[인터뷰] '이카루스M' 석훈PD "최고의 아이템은 주신펠로우"

취재기사 | 2일 전 | 이재덕 기자 | 56

'비행+PvE+PvP’가 혼합된 콘텐츠 '펠로우레이싱'도 볼만​하반기 최초의 기대작인 '이카루스M'이 출시를 앞둔 가운데, '이카루스M'개발 총괄 석훈PD가 유저가 궁금해하는 게임 내 시스템..

코리아 블록체인 서밋, 7Chain, Ark 등 신개념 플랫폼 소개

취재기사 | 4일 전 | 김형석 기자 | 75

뜨거운 관심 속 1천명 가까운 관람객 방문 12일, 13일 양일간에 걸쳐 서울 강남구 그랜드인터콘티넨탈호텔에서는 GBF(국제 블록체인 재단 Global Blockchain Foundation, 이하 GBF)가 주..

기대작 '아크모바일', 일본은 7월 출시... “한국은 뒷전?”

취재기사 | 4일 전 | 이재덕 기자 | 93

스네일게임즈의 기대작 '아크모바일'이 미국 등 글로벌 출시가 완료된 가운데, 이웃나라 일본에서 7월 출시가 확정됐다. 한국 출시는 여전히 감감 무소식이다.스네일게임즈 재팬은 iOS/..

[인터뷰] 페이스북 인스턴트게임 타고 글로벌! 투워드 신보식 대표

취재기사 | 5일 전 | 이다윗 기자 | 696

모바일만 바라보는 인디게임사에 ‘경종’…페이스북 HTML5 게임 플랫폼​인디게임 개발사로서 발 빠르게 페이스북 인스턴트 게임 플랫폼에 도전한 개발사가 있다. 이 개발사의 대표는 처..

블리자드, ‘하스스톤’ 신규 확장팩 ‘박사 붐의 폭심만만 프로젝트’ 예약 구매 시작

취재기사 | 6일 전 | 신상화 기자 | 70

하스스톤 까마귀의 해의 두 번째 확장팩인 ‘박사 붐의 폭심만만 프로젝트’가 공개됐다. 특히 확장팩 예약구매는 지난 예약구매와는 다른 파격적인 묶음 상품을 내놓았다.5만 배틀코인의 ..


'클로즈드나이트메어' 한글판 프리뷰, “밀실 호러의 음산함이 온몸으로”

취재기사 | 2018-07-11 | 김형석 기자 | 110

인트라게임즈, '클로즈드나이트메어' 한글판 공개 인트라게임즈(대표 배상찬)가 7월 10일 서울 강남역에서 PS4와 닌텐도 스위치용 타이틀 '클로즈드나이트메어'의 미디어 프리뷰 행사를..

블루스택 대표, "중소게임사 해외진출 돕겠다"... 4대 앱플레이어 MAU는?

취재기사 | 2018-07-11 | 이재덕 기자 | 112

블루스택 로젠 샤르마 대표모바일 앱플레이어 블루스택 로젠 샤르마(Rosen Sharma) 대표가 한국을 방문, '글로벌'이라는 화두를 던졌다. 몇년 째 같은 게임만 상위권을 차지하고 있는 ..

"스팀에 미소녀가 쏟아진다", 프론트윙 미소녀게임 3종 발표

취재기사 | 2018-07-09 | 이재덕 기자 | 140

다양한 미소녀 게임으로 유명한 일 게임사 프론트윙이 미국에서 개최된 아니메엑스포(Anime Expo 2018)에서 비주얼노벨 '아일랜드(ISLAND)' 등 스팀타이틀 3종을 발표했다. 아일랜드는 2..

번지, '데스티니 가디언즈' 한국어 버전 출시 예고

취재기사 | 2018-07-03 | 김형석 기자 | 312

블리자드, ‘신작 아닌 신작’ 공개하면서 한국서 매출 기대800명의 직원을 거느린 세계 최대 게임개발사 중의 하나인 번지소프트가 '데스티니 가디언즈' 출시를 앞두고, 2일 삼성동 그랜..

카카오게임즈 점심은 '1시간 30분'... “시간이 남네”

취재기사 | 2018-07-03 | 이재덕 기자 | 253

월요병 날리고, 불금 앞당기는 튀는 정책으로 '워라벨' 실천​​지난 1일, 300인 이상 사업장의 주 52시간 근무제가 본격적인 시행을 맞은 가운데, 코스닥 등록을 앞둔 카카오게임즈의 52..


NCPI, 게임 인플루언서 마케팅 상품 중 1위

취재기사 | 2018-06-27 | 이재덕 기자 | 438

NCPI, 일명 비보상형 광고(non-incentive Cost Per Install, NCPI)라 불리는 광고 상품이 스마트포스팅이 집계한 5월 상품별 커뮤니케이션 레코드에서 71%를 차지, 인플루언스 마케팅 상..

콴타 이시다 CMO, 블록체인 사업성공률은 단 5%...”이미 레드오션”

취재기사 | 2018-06-26 | 김형석 기자 | 364

토큰뉴스 컨퍼런스, 서울 선릉에서 열려 23일 서울 선릉에서는 일본-홍콩 언론인 토큰뉴스홍콩(Token News HK Ltd.)이 주최하는 '토큰뉴스 컨퍼런스'가 열렸다. '와우 프로젝트', '플레..

"유튜버에 힘 실린다!" 구글, '유튜브 프리미어스' 출시

취재기사 | 2018-06-26 | 이재덕 기자 | 371

구글이 유튜브에서 라이브채팅 등 제작자를 위한 새로운 기능 '유튜브프리미어스(YouTube Premieres)를 출시한다고 21일 유튜브 공식블로그를 통해 발표했다. 유튜브 프리미어스는 공개..

심즈 4 신규 확장팩 ‘사계절 이야기’, ‘나눠 팔기’ 오명 딛고 ‘호평’

취재기사 | 2018-06-25 | 김효진 기자 | 379

‘심즈 4’ 신규 확장팩 ‘사계절 이야기’가 지난 22일 출시돼 인기를 얻고 있다. ‘사계절 이야기’는 지난 심즈 시리즈에서 꾸준히 발매된 계절 확장팩으로, ‘심즈 3’에서도 ‘사계절 이야기..

'포트나이트' PS4 번들 발매 결정...신규 맵 정보도 발표

취재기사 | 2018-06-25 | 이재덕 기자 | 342

파이널파니트: 20인조' 오픈 이어, '세이브더월드' 정보 공개​소니인터랙티브 엔터테인먼트 이탈리아(Sony Interactive Entertainment Italia)가 공식 SNS를 통해 플레이스테이션4와 ‘포..


윤계상의 '야망', 핵심 콘텐츠 '떼쟁'은 한국 DNA?

취재기사 | 2018-06-21 | 이재덕 기자 | 468

스카이라인게임즈 박세진 지사장​ '국가전'만 8년 연구했다는 회사의 게임이 국내에 출시된다. 그 '국가전'에는 한국DNA가 흐르고 있다. 스카이라인게임즈, 26일 '야망' 출시 앞두고 기..

잇츠게임 2018의 젊은 개발사 “희망이 있어 즐거워”

취재기사 | 2018-06-20 | 김형석 기자 | 572

한국콘텐츠진흥원 주최 해외수출 지원행사 현장 취재 서울 코엑스 그랜드볼룸에서는 19일, 20일 양일에 걸쳐 해외 퍼블리셔와 국내 개발사의 비즈니스 매칭을 돕는 '잇츠게임(ITS GAME) ..

[인터뷰] 액션에 액션, 오로지 '액션'... 블레이드2 for Kakao 개발진

취재기사 | 2018-06-20 | 이재덕 기자 | 523

카오게임즈 이시우 본부장​ 카카오게임즈 지승헌 사업실장, 액션스퀘어 신현승 PD 등 공동 인터뷰​​​​ 액션에 액션, 오로지 '액션'에 목숨을 건 액션RPG '블레이드2'의 출시가 임박했다..

1  |   2|   3|   4|   5|   6|   7|   8|   9|   10

[ 게임 집중 분석 ]