최신 커뮤니티

추천 커뮤니티

인기 커뮤니티

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

KBS, 슈포닉과 손잡고 오버워치 e스포츠 프로그램 선보인다!

취재기사 | 4시간 전 | 최명진 기자 | 10

KBS가 해외 IT 회사 슈포닉(SUPONIC)과 손잡고 e스포츠 프로그램을 선보일 예정이다.KBS는 15일 게임 예능 프로그램 ‘옵치의 신’을 제작, 6월 중 방송할 예정이라 밝혔다. 해당 프로그램..

페이트 그랜드 오더, 신규 캐릭터 대거 등장 예정...또 한번 순위폭등?

취재기사 | 4시간 전 | 최명진 기자 | 9

넷마블이 서비스하는 모바일 RPG '페이트 그랜드 오더'가 15일 '페이트 엑스트라 CCC' 스페셜 이벤트를 예고하며 티저페이지를 오픈했다.오는 30일 정식 개막 예정인 '페이트 그랜드 오..

‘내 돈 내놔!’ 확률형 아이템에 분노한 日게이머, 제작사에 협박편지 보내 ‘체포’

취재기사 | 4시간 전 | 최명진 기자 | 9

200만 원에 달하는 돈을 확률형 아이템에 투자했음에도 원하는 결과를 얻지 못한 한 게이머가 게임사에 협박 메일를 보냈다가 체포된 사건이 화제가 되고 있다.일본 매체 라이브도어 뉴..

정액제 아웃! 엔씨소프트 ‘리니지’ 부분유료화로 전환

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

엔씨소프트(이하 엔씨)가 18일 자사의 MMORPG '리니지'의 공식 홈페이지를 통해 리니지의 월정액제를 폐지한다고 밝혔다.'리니지'는 1998년 서비스 오픈 이후 29,700 원의 월정액 이용제..

추억소환 ‘성공적’...재믹스 미니 오픈 2분 만에 완판 성공

취재기사 | 4시간 전 | 최명진 기자 | 9

한국의 오리지널 게임기 '재믹스'가 출시 34년 만에 인디 게임 개발사 네오팀과 롯데마트 토이저러스에 의해 ‘재믹스 미니’로 다시 돌아왔다.450대 한정으로 제작된 '재믹스 미니'는 18..


이거 하나면 내 집이 오락실이 된다! 캡콤, 레트로 게임 머신 '캡콤 홈 아케이드' 발표

취재기사 | 4시간 전 | 최명진 기자 | 7

고전게임기의 복각 소식이 이어지는 가운데 일본의 게임회사 캠콤도 고전게임기 출시 대열에 합류했다.캡콤은16일 자사 공식 유튜브 채널을 통해레트로 게임 머신 '캡콤 홈 아케이드'를..

굿바이 기프트 카드! PS 스토어, 신용·체크카드 결제 서비스 지원

취재기사 | 4시간 전 | 최명진 기자 | 8

소니인터랙티브엔터테인먼트코리아가 12일 자사의 공식 채널을 통해 오는 5월 9일부터 플레이스테이션 스토어(이하 PS 스토어)에서 신용카드 및 체크카드를 이용한 결제를 지원한다고 밝..

배그 모바일, 인도에 이어 네팔도 금지...어린이~청년층 악영향 우려

취재기사 | 4시간 전 | 최명진 기자 | 9

펍지의 '플레이어언노운스 배틀그라운드 모바일'(이하 배그 모바일)이 인도에 이어 네팔에서도 금지당했다.네팔 매체인 카트만두 포스트는 현지 시간으로 12일 배그 모바일이 네팔 당국..

베일에 가려진 ‘페리아연대기’ 드디어 공개?! ‘곧 소식 전하겠다’

취재기사 | 4시간 전 | 최명진 기자 | 6

네오플의 자회사 띵소프트에서 개발 중인 PC MMORPG '페리아연대기'가 약 2년 만에 페이스북을 업데이트해 유저들의 기다림에 응답했다.띵소프트는 15일 '페리아연대기' 공식 홈페이지와..

“청년 대신 경력단절 여성?” 전문성 없는 게임위 모니터링단의 앞날은?

취재기사 | 2019-04-12 | 최명진 기자 | 178

게임물관리위원회(이하 게임위)가 9일 서울시 대우재단빌딩에서 2019 자체등급분류 게임물 모니터링단 발대식을 진행했다.게임위 이재홍 위원장, 김범수 팀장, 굿모니터링 박유경 대표 ..


오스트리아에 잠자던 척암선생문집 책판, 라이엇게임즈가 되찾았다!

취재기사 | 2019-04-12 | 최명진 기자 | 157

임시정부 수립 100주년을 맞아 라이엇게임즈가 11일, 서울시 논현동에 위치한 자사 오디토리움에서 문화재청, 국외소재문화재재단, 한국국학진흥원과 함께 '척암선생문집 책판 언론공개..

‘아듀! 뱅드림 카페’ 뱅드림X홍대던전 카페 마지막 날 현장 스케치

취재기사 | 2019-04-12 | 최명진 기자 | 166

카카오게임즈가 지난 달 8일 서울 마포구에 위치한 서브컬처 매장 ‘홍대던전’에서 자사가 서비스하는 미소녀 리듬게임 ‘뱅드림! 걸즈 밴드 파티!’의 컬래버레이션 카페를 개장했다.뱅드..

‘메이플 스토리 2’ 운영자 부정행위, 유저에게 적발...넥슨 ‘엄중처벌, 재발방지’ 약속

취재기사 | 2019-04-12 | 최명진 기자 | 111

넥슨이 서비스 중인 PC MMORPG ‘메이플 스토리 2’ 운영자의 부정행위가 유저들의 수사망에 걸려들었다.지난 4월 4일 메이플 스토리 2 커뮤니티에는 한 유저가 운영자로 의심된다는 제보..

[핸즈온] 웹툰 극악상성 방치형 선택한 '덴신마'의 미래는?

취재기사 | 2019-04-12 | 최명진 기자 | 104

이전까지 이렇다 할만한 성적을 보여주지 못한 웹툰 IP 게임들이 새로운 돌파구를 찾아냈다. 바로 작품 간 세계관을 한데 아우르는 ‘크로스오버’를 선택한 것이다.이미 엔젤게임즈의 ‘히..

넷마블, '칠대죄', '킹오파' 사전예약 개시… 나머지 신작은 언제쯤?

취재기사 | 2019-04-12 | 최명진 기자 | 97

넷마블은 2017년 지스타부터 다양한 신작을 예고한 바 있다. 한국 게임업계 TOP 3를 다투는 넷마블의 신작답게 무수한 유저들의 기대를 모았지만, 정작 17년 지스타 이후 서비스를 시작..


중국 정부, 프로게이머 공식 직업 인정...대규모 e스포츠 대회 가능성 열려

취재기사 | 2019-04-05 | 최명진 기자 | 253

중국에서 프로게이머가 공식 직업으로 인정돼 화제가 되고 있다.중국 인력사회보장부는 1일 e스포츠 포함 13개 분야에서 15개의 직업군을 공식 직업으로 인정했다고 밝혔다. e스포츠 직..

“음식물 쓰레기는 얼른 치워야” 답없는 여가부의 ‘셧다운제’

취재기사 | 2019-04-05 | 최명진 기자 | 285

‘you do not know the way?(너는 길을 아는가?)’ 스팀에서 서비스 되고 있는 아바타 채팅 게임 VRChat에서 한때 밈이 됐던 캐릭터 ‘우간다 너클즈’의 말버릇이다.이 대사는 여가부의 이..

이 정도면 합격! 재미있는 마이크로 삼국지 ‘삼국지 인사이드’ 체험기

취재기사 | 2019-04-05 | 최명진 기자 | 246

와이제이엠게임즈가 3일 모바일 삼국지 게임 ‘삼국지 인사이드’의 서비스를 시작했다. 코에이 삼국지부터 시작된 삼국지 게임의 정석 같은 군주제를 과감히 버리고 최초의 장수제를 표방..

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

[ 게임 집중 분석 ]