최신 커뮤니티

추천 커뮤니티

인기 커뮤니티

핫뉴스 취재기사 기대작 인기신작 업계소식 집중분석 커뮤니티
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

   30  
  이재덕 기자
  41687P
총 덧글수 ( 0개 )

일인지하 만인지상 '블소레볼루션', '세력전'으로 '쐐기'

취재기사 | 9시간 전 | 이재덕 기자 | 67

넷마블의 블레이드&소울 레볼루션(이하 블소레볼루션)이 일인지하만인지상(一人之下萬人之上)의 자리에 올랐다. 그 일인의 자리는 '리니지M'이다. 리니지M이 넘사벽의 자리라고 본..

포트나이트에 셀럽 대거 등장...환상케미 듀오 매치

취재기사 | 14시간 전 | 최명진 기자 | 74

고려대학교 화정체욱관에서 진행한 포트나이트 코리아오픈 2018 2번째 빅 이벤트인 듀오매치에 유명 셀럽과 방송인, 선수들이 총출동했다.이번 듀오 매치에는 국민타자 이승엽 선수를 비..

컴투스 '댄스빌' 쇼케이스 현장 스케치...조세호부터 위너까지 '열광의 도가니'

취재기사 | 14시간 전 | 최명진 기자 | 73

샌드박스 장르에 춤과 음악을 융합한 새로운 느낌의 게임이 찾아올 예정이다. 컴투스가 14일 서울 성동구에 위치한 에스팩토리에서 신작 모바일 샌드박스 플랫폼 '댄스빌'의 쇼케이스를 ..

2018년 연말을 빛낸 신작 게임들... 기종통합 탑5

취재기사 | 2일 전 | 김효진 기자 | 86

다사다난했던 2018년도 어느덧 막을 내리고 있다. 올 연말에는 어떤 신작 게임이 출시돼 인기를 얻었는지, 12월에 출시 된 기종 통합 인기 신작 게임 5개를 소개한다. 먼저, PC에서는 ‘..

포트나이트 코리아오픈 2018…. 살아남는 자는 누구?

취재기사 | 2일 전 | 최명진 기자 | 209

에픽게임즈가 15일 고려대학교 화정체육관에서 포트나이트 코리아오픈 2018을 개최했다. 현장에는 수많은 포트나이트 유저들이 관중석을 가득 채웠다이번 대회 상금은 총 10억원 규모로 ..


“일어나니 직장이 사라졌다” 블리자드, ‘히오스’ e스포츠 중단 결정

취재기사 | 3일 전 | 최명진 기자 | 101

블리자드엔터테인먼트(이하 블리자드)가 자사의 MOBA게임 ‘히어로즈 오브 더 스톰(이하 히오스)’의 e스포츠 중단 및 개발팀을 축소한다고 발표했다.블리자드의 제이 알렌 브렉 대표와 히..

"뚝배기처럼 끓어오를 것" 포나코리아오픈 셀럽 인터뷰

취재기사 | 3일 전 | 게임와이 | 109

전세계 1위 배틀로얄게임 '포트나이트'의 PC방 서비스가 시작된 데 이어 포트나이트 e스포츠의 국내 상륙을 알리는 포트나이트코리아오픈 이 15일 고려대 화정체육관에서 열렸다. 해외 ..

“탐난다” 배그 비켄디 예약 경품 커스텀 PC 가격은 400만원대!

취재기사 | 3일 전 | 이준혁 기자 | 113

카카오 게임즈가 풍성한 경품이 걸린 배틀그라운드 신규 맵 ‘비켄디’의 예약을 진행 중이다. 경품 중 하나인 ‘배틀그라운드 커스텀 PC’가 특히 주목을 끈다. 400만원을 호가하는 최고급 ..

요동치는 구글 게임매출 순위...별들의 전쟁, 승자는?

취재기사 | 3일 전 | 이재덕 기자 | 100

​블레이드앤소울 레볼루션 출시와 검은사막M 각성 업데이트로 인해 구글 매출 상위권의 순위가 요동치고 있다. 또, 신작 오크와 다크에덴M의 순위 재진입도 눈 여겨 볼만하고, 오래된 타..

"게임+블록체인" 2019 대한민국 블록체인게임쇼 열린다

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

​블록체인과 게임이 만났다. 블한국블록체인콘텐츠협회(회장 대행 황성익)와 한국모바일게임협회(회장 황성익)이 1월 30일과 31일 양일간 서울 강남구 신사동 광림아트센터 장천홀에서 2..


[리뷰] 방대한 원작을 자연스럽게 녹이다, 블소 레볼루션

취재기사 | 5일 전 | 유정현기자 | 161

넷마블의 ‘블레이드&소울 레볼루션(이하 블소 레볼루션)’이 정식 출시 후 일주일이 지났다. ‘블소 레볼루션’에는 넷마블이 원작 ‘블레이드&소울’의 방대한 스케일을 작은 스크린..

네이버 손자사 라인게임즈가 추구하는 '재미'란?

취재기사 | 6일 전 | 이재덕 기자 | 172

라인게임즈 김민규 대표네이버의 손자사인 라인게임즈 김민규 대표가 신작 10종을 공개하고 '온리펀(ONLY FUN)'이라는 원칙을 강조했다. 그가 말하는 '재미'에는 '다양성'이 담겼다.12..

저지 아이즈, 용과 같이와 같은 점은? 다른 점은?

취재기사 | 6일 전 | 이준혁 기자 | 151

크리스마스 시즌은 게임업계 최고의 대목으로 손꼽힌다. 그리고 이번 12월, 최고 기대작 중 하나가 바로 세가에서 개발한 저지 아이즈다. 저지 아이즈는 최초 공개 당시 용과 같이와 비..

카스온라인 쇼케이스, 전세계가 주목… 무엇이 바뀌나?

취재기사 | 7일 전 | 김형석 기자 | 143

넥슨이 8일 인기 온라인 FPS게임 '카운터스트라이크 온라인(이하 카스온라인)'의 대규모 업데이트와 함께 '2018 카스온라인 글로벌 쇼케이스'를 개최했다. 서울 강남역 넥슨아레나..

'킹스레이드'의 베스파, 일본 시장 공략의 성공비결

취재기사 | 7일 전 | 김형석 기자 | 145

순수 개발사가 보여준 소통과 장인정신 대형 게임개발사들도 어려움을 겪고 있는 일본 시장에서, 국내 중소 게임사가 개발한 모바일 게임이 돌풍을 일으키고 있다. 12월v3일 ..


다크에덴M 매출 5위까지.... 십이지천M도 통할까?

취재기사 | 2018-12-07 | 이재덕 기자 | 215

온라인게임 '다크에덴' IP를 활용, 리니지M과 같은 스타일의 모바일 MMORPG로 출시한 엔터메이트의 다크에덴M이 구글 매출 5위까지 오르는 기염을 토안 가운데, 또 다른 온라인게임 IP '..

컴투스, ‘스카이랜더스’ 프리뷰 영상 공개... 대작 맞나?

취재기사 | 2018-12-07 | 이재덕 기자 | 192

컴투스가 7일 신작 모바일 RPG '스카이랜더스 링 오브 히어로즈(이하 스카리앤더스)'의 게임 소개 영상을 공개했다.스카이랜더스는 액티비전의 유력 콘솔 게임 IP(지식재산권)과 컴투스..

2018 베스트게임… 구글은 ‘검은사막M’, 유저는 ‘배그’ 선택

취재기사 | 2018-12-06 | 최명진 기자 | 220

구글플레이가 5일 ‘2018 올해를 빛낸 게임’을 발표했다. 구글플레이는 매해 연말 혁신성, 대중성, 인디 등 다양한 카테고리에서 많은 사랑을 받은 앱과 게임을 선정해 발표해 왔다. 올해..

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

[ 게임 집중 분석 ]