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

클래시오브클랜

케로로퍼렁별

뫼비우스FF

크로노블레이드

레이븐

임플로전

아이어(Ire)

삼국지조조전

캔디소다사가

쿠킹마마

회원가입   
HTML5로 '퐁'게임 만들기... 어떻게 만들었나?
닉네임 : 이재덕 기자   [등록일시 : 2018-03-28 16:15:39]  조회 : 2832 . 추천 : 0   첨부파일 :
Notice: Undefined index: HTTP_USER_AGENT in /home/tion/_______ini/ini_secret_code.php on line 24 Notice: Undefined index: HTTP_USER_AGENT in /home/ver/public_html/_______TION_STATS/STATS_TION_SET.php on line 18 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개 )
번호 제목 닉네임 날짜 조회 추천
2220     킹오파올스타, 프린세스커넥트, 시노앨리스 리세마 최명진 기자 2019-05-22 517 0
2219     화제의 ‘오토체스’ 모바일게임, 한국 출시 초읽기. 최명진 기자 2019-05-21 575 0
2218     하위호환과 유저의 계정 싸움이 중요해질 차세대게 이준혁 기자 2019-05-20 317 0
2217     베트남 게임TV, 스튜디오 오픈...피크, 베트남 프로모 이재덕 기자 2019-05-20 363 0
2216     17년차 코스플레이어 기자의 네코제 아티스트 체험기 최명진 기자 2019-05-17 650 0
2215     '검은사막M' 매화, PVP 스킬 효율 분석 최명진 기자 2019-05-17 608 0
2214     [리뷰] ‘예쁘다’ 역대급 비주얼 ‘검은사막M’ 매 최명진 기자 2019-05-16 593 0
2213     [리뷰] “액션 수집 둘 다 잡았다” 킹오파 올스타 최명진 기자 2019-05-16 623 0
2212     [공략] '킹오파 올스타' 오로치 공략법이 궁금해? 최명진 기자 2019-05-16 404 0
2211     엔씨 '리니지2M', 언리얼엔진 선택 이유는 '이것' 이재덕 기자 2019-05-14 1066 0
2210     사진으로 보는 플레이엑스포...콘솔기업 대거 참여한 이재덕 기자 2019-05-09 789 0
2209     여가부 셧다운제 보고서 조작의혹에 ‘억지변명’... 최명진 기자 2019-05-08 858 0
2208     트라하 ‘인피니티 클래스’ 공략...포지션 별 무기 최명진 기자 2019-05-08 611 0
2207     넥슨 ‘엘소드’ 첫번째 아이돌 그룹 '트리니티 에이 최명진 기자 2019-05-08 1170 0
2206     PC게임 ‘리니지’ 전면 무료화...’아인하사드의 가 최명진 기자 2019-05-08 581 0
2205     매칭도 잘 안 되던 넥슨 PC게임 ‘배틀라이트’...결 최명진 기자 2019-05-08 334 0
2204     소닉 실사판 비난 일색...감독 “모델링 전면 수정하 최명진 기자 2019-05-08 886 0
2203     2600명의 밀레시안이 웃고 울었다! '게임 속의 오케스 최명진 기자 2019-05-08 374 0
2202     게임은 같이 해도 돈 쓰는 건 '여성'보다 '남성'? 이재덕 기자 2019-05-03 513 0
2201     '게임' 질병코드 등재 결정 임박...문화연대 3일 토론 이재덕 기자 2019-05-02 808 0
2200     [리뷰] 하이엔드 MMORPG 트라하...인기비결 4가지 최명진 기자 2019-04-30 733 0
2199     [취재] 인기셀럽 총출동...’킹 오브 파이터 올스타 최명진 기자 2019-04-30 618 0
2198     무한 육성 액션, ‘패스 오브 엑자일’ 카카오게임즈 최명진 기자 2019-04-30 799 0
2197     [NDC] “클로저스+엘소드” 서브컬처 게임 ‘카운트사 최명진 기자 2019-04-30 345 0
2196     [NDC] 슈퍼셀 브롤스타즈팀의 실패가 떳떳한 이유 최명진 기자 2019-04-30 515 0
1   |2   |3   |4   |5   |6   |7   |8   |9   |10   |
베스트 게시물
베스트 댓글
 평점 4.4점 좋네요 
 전국적인 아파트물건 소개해드릴
 덕분에 좋은 미연시 많이 알았습니
 잼남, 근데 물건들 활용하는 거 너
 1등했는데도, 이 집은 주가 팍팍 내
 분식집 치고는 너무 커....ㅋㅋ 
 던파 대단함...크로스파이어도 
 어떻게 나올지 궁금하긴 함. &nb
 1월 12일 출시, 테라m급이 될라나??&n
 결론은 이동안했다는 거... 
게임와이 소개   | 개인정보취급방침  |  이용약관  |  제휴안내  |  보도자료

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