최신 커뮤니티

추천 커뮤니티

인기 커뮤니티

핫뉴스 취재기사 기대작 인기신작 업계소식 집중분석 커뮤니티
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  
  이재덕 기자
  40307P
총 덧글수 ( 0개 )

21일 폐업 발표한 ‘텔테일 게임즈’, 대규모 해고에 유비·블리자드 나섰다

취재기사 | 3일 전 | 김효진 기자 | 44

‘텔테일 게임즈(Telltale Games)’가 21일 자사 트위터를 통해 폐업 소식을 알린 가운데, 갑작스런 해고로 논란을 빚었다. ‘텔테일 게임즈’는 ‘마인크래프트: 스토리 모드’, ‘더 워킹 데..

PS1 축소시킨 ‘PS 클래식’, 오는 12월 3일 출시

취재기사 | 4일 전 | 김효진 기자 | 68

지난 19일, ‘소니인터랙티브엔터테인먼트코리아(이하 SIEK)’가 ‘도쿄게임쇼 2018’에서 ‘​PS 클래식’을 공개했다. ‘PS 클래식’은 PS1을 축소시켜 만든 미니 콘솔 게임기다. 지난 1994년 ..

펄어비스 '검은사막M' 조용민PD가 말하는 '월드경영'이란....?

취재기사 | 5일 전 | 이재덕 기자 | 68

월드경영, 전직시스템, 사막지역 등 업데이트 방향성 제시​10일 펄어비스 '검은사막 모바일' 조용민 총괄 PD가 공식 카페에서 향후 업데이트 계획을 내놓았다. 월드와 경영·전직 시스템..

에이핑크' 신스타임즈 '해전M' 홍보모델 발탁... 주가 영향 받나?

취재기사 | 5일 전 | 이재덕 기자 | 73

신스타임즈(대표 왕빈)가 모바일 해상 밀리터리 전략 시뮬레이션 ‘해전M’의 홍보모델로 인기 걸그룹 ‘에이핑크’를 선정했다.‘에이핑크’는 최근 ‘1도 없어’로 그룹 활동을 마치고 아시아 ..

‘섀도우 오브 더 툼 레이더’에 국내 유저는 “아쉽다” 평가, 왜?

취재기사 | 6일 전 | 김효진 기자 | 67

지난 15일 출시된 ‘섀도우 오브 더 툼 레이더(Shadow of the Tomb Raider)’가 국내 유저들로부터 ‘아쉽다’는 평가를 받고 있다. ‘섀도우 오브 더 툼 레이더’는 주인공인 ‘라라 크로프트’..


게임 방송에 특화된 ‘유튜브 게이밍’, 유튜브로 통합된다

취재기사 | 6일 전 | 김효진 기자 | 117

구글이 운영하는 ‘유튜브 게이밍’ 서비스가 ‘유튜브’로 통합된다. 지난 18일, 유튜브는 자사의 공식 블로그를 통해 ‘유튜브 게이밍’이 제공했던 기능을 ‘유튜브’로 이전하겠다고 밝혔다...

‘어쌔신 크리드 오디세이’ 클라우드 버전, 일반 버전과 차이점은?

취재기사 | 7일 전 | 김효진 기자 | 70

‘어쌔신 크리드 오디세이’가 닌텐도 스위치서 ‘클라우드’ 버전으로 출시된다. ‘클라우드’는 최근 닌텐도 스위치로 출시되는 게임들에서 자주 볼 수 있다. 기본 용량이 적은 닌텐도 스..

닌텐도 스위치 독점작 ‘슈퍼 마리오 파티’, 신규 플레이 영상 공개

취재기사 | 7일 전 | 김효진 기자 | 64

지난 E3 2018 이후 또 다른 ‘슈퍼 마리오 파티’ 플레이 영상이 공개됐다. 지난 17일, 게임 유튜버 ‘GameXPlain’이 공개한 해당 영상은 ‘슈퍼 마리오 파티’에 포함된 ‘클래식 보드 모드’..

‘테일즈 오브 베스페리아 리마스터’ 한국어판, 한정판 안내 PV 공개

취재기사 | 8일 전 | 김효진 기자 | 51

지난 16일, ‘테일즈 오브 베스페리아 리마스터’ 한정판 안내 PV가 공개됐다. ‘테일즈 오브 베스페리아 리마스터’는 지난 2009년 발매된 ‘테일즈 오브 베스페리아’를 리마스터한 게임이고..

김수민 의원, 게임 내 음성 채팅 성희롱 처벌법 발의

취재기사 | 2018-09-17 | 김효진 기자 | 75

바른미래당 김수민 의원 / 사진=김수민 의원실게임 내 음성 채팅에서 일어난 성희롱을 성범죄로 처벌할 수 있는 법안이 발의됐다. 바른미래당 김수민 의원은 지난 14일 ‘성폭력범죄 처벌..


‘동물의 숲’ 신작, ‘닌텐도 스위치’로 2019년 출시

취재기사 | 2018-09-16 | 김효진 기자 | 81

‘닌텐도’ 대표 인기 타이틀 중 하나인 ‘동물의 숲’이 2019년 ‘닌텐도 스위치’로 돌아온다. 지난 14일 진행된 ‘닌텐도 다이렉트’에서는 ‘파이널 판타지’와 ‘괴혼’ 등 과거 인기작들이 닌..

피카츄・이브이 그려진 ‘닌텐도 스위치’ 나온다

취재기사 | 2018-09-13 | 김효진 기자 | 143

‘포켓몬스터 레츠고! 피카츄・레츠고! 이브이 본체 세트(이하 포켓몬스터 본체 세트)’와 ‘포켓몬스터 피카츄・레츠고! 이브이 몬스터볼 플러스 세트(이하 몬스터볼 플러스 세트)’가 오는..

‘콜 오브 듀티 블랙 옵스 4’, PS Plus 없어도 베타 테스트 참여 가능

취재기사 | 2018-09-13 | 김효진 기자 | 162

13일 오늘, ‘콜 오브 듀티 블랙 옵스 4 블랙아웃(이하 블랙아웃)’ 베타 테스트가 시작됐다. ‘블랙아웃’은 오는 10월 12일 PC와 PS4, XBOX ONE로 출시되는 ‘콜 오브 듀티’ 시리즈 최신작..

게임에서 진 15세 소년, 전기톱으로 '자살'... '모모챌린지' 의심

취재기사 | 2018-09-10 | 이재덕 기자 | 259

일본, 미국, 유럽권에서 확산중... 구글에 관련 게임도 등장​온라인게임에서 진 러시아 15세 소년이 전기톱이라는 잔인한 방법으로 자살을 선택한 것으로 알려졌다. 경찰은 ‘모모챌린지’..

"데브캣이 만들면 다르다" 데브캣 명작 분석

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

데브캣 최신작 '어센던트원'의 ‘마비노기’ 성공신화 재현?​라이엇게임즈의 MOBA게임 '리그오브레전드'가 전세계적인 흥행을 떨치고 있는 가운데, 넥슨에서도 MOBA 장르의 게임을 꾸준히 ..


세계 최초, 블록체인 기반 게임아이템 지갑 출시

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

ERC-1155 표준 공개 이후 7개 게임사가 프로젝트 참여​​게임 아이템을 보관할 수 있는 블록체인 기반의 지갑이 세계 최초로 출시됐다. 블록체인 게임 개발 플랫폼 '엔진코인'을 개발한 ..

게임주, 中 게임 총량규제에도 체결강도 500%까지... 무슨 이슈길래?

취재기사 | 2018-09-05 | 이재덕 기자 | 308

액토즈소프트, 한빛소프트 200% 이상... 신스타임즈 장중 500% 까지 올라​​중국의 게임총량규제에도 불구하고 가파르게 상승중인 게임주가 있다. 5일 10시 현재 액토즈소프트의 체결강도..

닌텐도 스위치 ‘리틀 드래곤즈 카페’, 국내 정식 출시에도 ‘중국어 패키지’

취재기사 | 2018-09-02 | 김효진 기자 | 466

지난 8월 30일 출시된 ‘리틀 드래곤즈 카페’의 스위치 버전이 ‘중국어 패키지’로 논란이 되고 있다. 시뮬레이션 어드벤처 게임 ‘리틀 드래곤즈 카페’는 ‘목장 이야기’를 만든 개발진의 ..

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

[ 게임 집중 분석 ]