최신 커뮤니티

추천 커뮤니티

인기 커뮤니티

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

에픽게임즈, 언리얼 엔진표 'AAA급 게임' 공개

취재기사 | 13시간 전 | 이재덕 기자 | 30

언리얼엔진 사용자 500만 명... 무료화로 폭발적 성장​​에픽게임즈가 자사의 언리얼엔진으로 개발중인 AAA급 기대작들을 18일 논현동 글래드라이브에서 진행된 간담회를 통해 공개했다...

차세대 융복합 콘텐츠를 한 눈에! ‘SEOUL VR·AR EXPO’ 개막… 볼거리는?

취재기사 | 16시간 전 | 이다윗 기자 | 44

차세대 먹거리로 주목 받고 있는 AR, VR 산업관련 올해 첫 전시회인 ‘SEOUL VR·AR EXPO’가 19일부터 22일까지 코엑스에서 열린다. ‘드래곤플라이’, ‘서울VR스타트업(Seoul VR Startups..

2018년 영국 아카데미 비디오 게임상 'BEST GAME'은?

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

영국 BAFTA(British Academy of Film and Television Arts)가 2018년 영국 아카데미 비디오 게임상(British Academy Games Awards 2018) 수상작을 발표했다.영광의 베스트게임(BEST GAME..

킹존 드래곤X, 아프리카의 도전 물리치고 롤 2018 LCK 스프링 왕좌 올라

취재기사 | 5일 전 | 김형석 기자 | 88

‘무적’이라 불리며 자타공인 최유력 우승후보 킹존 드래곤X(이하 킹존)와 신예의 패기로 맞선 아프리카 프릭스(이하 아프리카)의 격돌은, 킹존의 승리로 끝을 맺었다. 14일 부산 사직 실..

[인터뷰] 리그오브레전드 LCK 스프링 결승전 - ‘파파스미시’ 크리스토퍼 스미스가 예상한 우승팀은?

취재기사 | 6일 전 | 김형석 기자 | 81

14일 부산 사직 실내체육관에서 열리는 리그 오브 레전드 LCK 스프링 결승전에 전세계 e스포츠팬의 관심이 집중되고 있다. 스프링 시즌 14승 2패로 ‘차원이 다른’ 실력을 보여준 킹존 ..


[탑10] 과도한 기대를 받고 출시했다 망한 게임 2/2

취재기사 | 6일 전 | 김형석 기자 | 2766

화려한 데​모영상과 퍼블리셔의 언플로 게이머들의 가슴을 두근두근하게 했던, 그러나 막상 뚜껑을 열어보니 막장이었던 추억의 게임 10개를 소개한다. 이번 편은 나머지 5개를 공개한다..

"여자여자해" EGLS, 패션스타일링게임 '옷의나라' 출시

취재기사 | 7일 전 | 이재덕 기자 | 95

EGLS KOREA가 13일 패션스타일링게임 '옷의나라'를 구글플레이스토어와 원스토어에 출시했다. 이 작품은 이미 글로벌 서비스를 통해 게임성을 인정받은 패션 스타일링 게임으로, 패션에 ..

게임 제목이 '게임이 망했다'...."흥할까 망할까?"

취재기사 | 7일 전 | 이재덕 기자 | 371

방치형 ‘중년기사 김봉식’에 이은 색다른 인디게임 '중년기사 김봉식'으로 인디게임사에 한 획을 그은 마프게임즈가 이번에는 '게임이 망했다'는 독특한 타이틀로 도전에 나선다. 마프게..

"5년 사귄 애인 떠나보내는 기분" 넥슨 '피파온라인3' 서비스 종료

취재기사 | 8일 전 | 이재덕 기자 | 112

피파온라인3' 데이터를 역사관엔 안치​'피파온라인4'의 내달 17일 출시가 확정된 가운데, 8월 초 전작인 '피파온라인3'의 서비스가 종료된다. '피파온라인3'를 떠나보내는 유저들의 아쉬..

닌텐도 스위치 독점작 ‘암즈’, 오는 12일 국내 출시

취재기사 | 2018-04-11 | 김효진 기자 | 96

닌텐도 스위치 독점작 ‘암즈(ARMS)’의 한국어판이 오는 4월 12일 출시된다. 닌텐도는 ‘암즈’의 출시에 앞서, 국내 공식 유튜브 채널을 통해 ‘소개 영상’과 ‘TVCM’, 테마 송 등의 영상을..


[인터뷰] ‘하스스톤’ 개발자에게 듣는다. 확장팩 ‘마녀숲’의 의미

취재기사 | 2018-04-11 | 신상화 기자 | 67

블리자드엔터테인먼트가 13일 인기 게임 ‘하스스톤’의 8번째 신규 확장팩인 ‘마녀숲’을 출시한다.‘마녀숲’에는 길니아스의 영웅들과 함께 유령의 숲을 탐험하며 괴물들을 쓰러트리고 마..

‘플스4 프로’ 중고도 50만원? 품귀 현상에 유저들 ‘울상’

취재기사 | 2018-04-11 | 김효진 기자 | 157

PS4의 인기 타이틀 '몬스터헌터 월드'의 출시 이후, PS4 프로의 품귀 현상이 장기화되고 있다. 현재 선풍적인 인기를 끌고 있는 ‘몬스터헌터 월드’는 PC 버전으로도 출시될 예정이지만, ..

일본 오사카의 '게임바' 일제 폐쇄 발표

취재기사 | 2018-04-10 | 김형석 기자 | 1284

원인은 저작권협회의 클레임 일본 오사카를 중심으로 게임바를 운영하는 '크로노스'사가 계열점 '1up게임바', '우메다 바카티나', '게임바 클랜' 등 3곳을 일제히 폐쇄한다고 4..

MMORPG의 원점, 울티마 온라인 무료화!

취재기사 | 2018-04-09 | 김형석 기자 | 142

폐인 양산 게임, 21년만에 무료화 선언 PC MMORPG ‘울티마온라인’의 운영사 브로드소드 온라인게임즈(이하, 브로드소드)가, 지난 4월5일 신확장팩 ‘엔드리스 저니(Endless Journey)’출시..

LOL LCK 2018 스프링 결승전 프리뷰

취재기사 | 2018-04-09 | 김형석 기자 | 80

올해 초 1월 16일 킹존 드래곤X(이하, 킹존)과 KSV의 대결로 개막한 2018 리그 오브 레전드(이하, LOL)의 챔피언스 코리아(이하, LCK) 스프링 정규 리그는, 3월 25일 아프리카 프릭..


펍지의 ‘황야행동’ 저작권 소송, 해외(일본) 반응 정리

취재기사 | 2018-04-09 | 김형석 기자 | 960

플레이어언노운즈 배틀그라운드(이하, 배틀그라운드) 개발사, 펍지 주식회사(이하, 펍지)가 2일 중국 넷이즈를 상대로 미국에서 저작권 침해 소송을 제기했다. 대상이 되는 게임..

'히어로즈 오브 더 스톰' 신규 영웅 '피닉스' 출시

취재기사 | 2018-04-09 | 신상화 기자 | 93

블리자드가 29일, 자사가 서비스중인 PC온라인게임 '히어로즈 오브 더 스톰'에서 히어로즈 31.0패치를 통해 신규 원거리 암살자 영웅 '피닉스'를 시공의 폭풍에 합류시켰다.'피닉스'는 ..

배틀그라운드 신규 전장 ‘새비지’, 더 빠르고 더 치열해

취재기사 | 2018-04-07 | 유정현기자 | 105

펍지주식회사는 지난 3일부터 5일까지 배틀그라운드의 신규 전장 ‘새비지’를 체험할 수 있는 테스트 서버를 오픈했다. 이번 신규 전장 ‘새비지’는 기존 전장 ‘에란겔’, ..

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

[ 게임 집중 분석 ]