뉴스센터 iOS Android 사전등록 게임공략 게임기네스 갤러리 사랑방
 

클래시오브클랜

케로로퍼렁별

뫼비우스FF

크로노블레이드

레이븐

임플로전

아이어(Ire)

삼국지조조전

캔디소다사가

쿠킹마마

회원가입   
HTML5로 '퐁'게임 만들기... 어떻게 만들었나?
닉네임 : 이재덕 기자   [등록일시 : 2018-03-28 16:15:39]  조회 : 1513 . 추천 : 0   첨부파일 :
http://ver.kr/P3mGSv


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

웹소켓 이용, '페이저(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 게임을 만들어낼지 지켜볼 일이다. 

0
   
총 덧글수 ( 0개 )
번호 제목 닉네임 날짜 조회 추천
1735     신작 '갓 오브 워'가 '갓겜' 된 이유 3가지 김효진 기자 2018-04-24 769 0
1734     에픽게임즈 ‘포트나이트’, 이번 주 중국 출시설... 김형석 기자 2018-04-22 776 1
1733     ‘메탈기어 서바이브’ 첫주 매출 10만장... “예고된 김형석 기자 2018-04-22 2525 1
1732     “빅데이터와 인공지능(AI)” 넥슨 NDC 2018, 24일 개막 김형석 기자 2018-04-22 619 0
1731     에픽게임즈, 언리얼 엔진표 'AAA급 게임' 공개 이재덕 기자 2018-04-19 1366 0
1730     차세대 융복합 콘텐츠를 한 눈에! ‘SEOUL VR·AR EXPO’ 이다윗 기자 2018-04-19 725 0
1729     2018년 영국 아카데미 비디오 게임상 'BEST GAME'은? 이재덕 기자 2018-04-17 1237 0
1728     킹존 드래곤X, 아프리카의 도전 물리치고 롤 2018 LCK 김형석 기자 2018-04-15 1049 0
1727     [인터뷰] 리그오브레전드 LCK 스프링 결승전 - ‘파파 김형석 기자 2018-04-14 794 0
1726     [탑10] 과도한 기대를 받고 출시했다 망한 게임 2/2 김형석 기자 2018-04-13 4833 0
1725     "여자여자해" EGLS, 패션스타일링게임 '옷의나라' 출시 이재덕 기자 2018-04-13 728 0
1724     게임 제목이 '게임이 망했다'...."흥할까 망할까?" 이재덕 기자 2018-04-13 2485 0
1723     "5년 사귄 애인 떠나보내는 기분" 넥슨 '피파온라인3' 이재덕 기자 2018-04-12 965 0
1722     닌텐도 스위치 독점작 ‘암즈’, 오는 12일 국내 출시 김효진 기자 2018-04-11 826 0
1721     [인터뷰] ‘하스스톤’ 개발자에게 듣는다. 확장팩 신상화 기자 2018-04-11 758 0
1720     ‘플스4 프로’ 중고도 50만원? 품귀 현상에 유저들 김효진 기자 2018-04-11 1583 0
1719     일본 오사카의 '게임바' 일제 폐쇄 발표 김형석 기자 2018-04-10 2781 0
1718     MMORPG의 원점, 울티마 온라인 무료화! 김형석 기자 2018-04-09 1154 0
1717     LOL LCK 2018 스프링 결승전 프리뷰 김형석 기자 2018-04-09 738 0
1716     펍지의 ‘황야행동’ 저작권 소송, 해외(일본) 반응 김형석 기자 2018-04-09 2437 0
1715     '히어로즈 오브 더 스톰' 신규 영웅 '피닉스' 출시 신상화 기자 2018-04-09 628 0
1714     배틀그라운드 신규 전장 ‘새비지’, 더 빠르고 더 유정현기자 2018-04-07 841 0
1713     [탑10] 과도한 기대를 받고 출시했다 망한 게임 1/2 김형석 기자 2018-04-06 4715 0
1712     배틀그라운드가 포트나이트를 이길 수 없는 이유 김형석 기자 2018-04-06 1913 0
1711     SBA, 인디게임 '진맥' 나섰다... '체크업'으로 우수게임 이재덕 기자 2018-04-05 841 0
1   |2   |3   |4   |5   |6   |7   |8   |9   |10   |
베스트 게시물
베스트 댓글
 전국적인 아파트물건 소개해드릴
 덕분에 좋은 미연시 많이 알았습니
 잼남, 근데 물건들 활용하는 거 너
 1등했는데도, 이 집은 주가 팍팍 내
 분식집 치고는 너무 커....ㅋㅋ 
 던파 대단함...크로스파이어도 
 어떻게 나올지 궁금하긴 함. &nb
 1월 12일 출시, 테라m급이 될라나??&n
 결론은 이동안했다는 거... 
 둘이 대결이 안될 거 같은데???
게임와이 소개   | 개인정보취급방침  |  이용약관  |  제휴안내  |  보도자료

게임와이 페이스북 | 트위터 | 유튜브
(137-873) 서울시 강남구 역삼로 7길 10, 3층(역삼동, 융전빌딩) / TEL : 070-4658-9418 / FAX : 02-8233-9383
Copyright@GAMEY. All Rights Reserved