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

클래시오브클랜

케로로퍼렁별

뫼비우스FF

크로노블레이드

레이븐

임플로전

아이어(Ire)

삼국지조조전

캔디소다사가

쿠킹마마

회원가입   
HTML5로 '퐁'게임 만들기... 어떻게 만들었나?
닉네임 : 이재덕 기자   [등록일시 : 2018-03-28 16:15:39]  조회 : 2199 . 추천 : 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개 )
번호 제목 닉네임 날짜 조회 추천
1984     크리처스, 신사 참배사진 공개에 비난 폭주…포켓몬 최명진 기자 2019-01-08 258 0
1983     멋짐이 폭발하는 형들의 11년 만의 귀환! 데빌메이크 최명진 기자 2019-01-08 219 0
1982     솔저가 동성애자? ‘오버워치’ 두 번째 성소수자 설 최명진 기자 2019-01-08 243 0
1981     한국콘텐츠진흥원 게임산업에 480억 지원...주요 사업 최명진 기자 2019-01-08 210 0
1980     대세는 버추얼 유튜버! 블루오션 뛰어든 한국 게임기 최명진 기자 2019-01-08 400 0
1979     삼각김밥에 게임 캐릭터가? 게임X편의점 컬래버레이 최명진 기자 2019-01-08 201 0
1978     이제 ‘험블 번들’에서도 ‘닌텐도 스위치’ 게임 김효진 기자 2019-01-08 225 0
1977      카카오게임즈 ‘그랜드체이스’, 출시 1주년 기념 김민희 기자 2019-01-08 172 0
1976     "이런 다큐가 있었어?" 한콘진의 55억 '건전 게임문화' 게임와이 2019-01-08 193 0
1975     ‘디볼버 디지털’, “게임 할인 해달라” 요구에 흔 김효진 기자 2019-01-07 257 0
1974     “플레이어, 우주의 중심 아니다”, 자유도 높은 생 김효진 기자 2019-01-07 351 0
1973     스팀에 의문의 사진 게시한 세가, ‘캐서린’ PC 출시 김효진 기자 2019-01-04 654 0
1972     "매각 공시는 없었다" NXC, 김정주 대표 첫 '공식입장' 이재덕 기자 2019-01-04 414 0
1971     '하스스톤' 개발진, 넷이즈와 손잡고 마블 모바일 게 최명진 기자 2019-01-04 402 0
1970     “악질 유저 때문에 공황장애까지” 다에리소프트, 최명진 기자 2019-01-04 293 0
1969     펍지, 핵 사용 프로게이머 4명 적발...영구 출전금지 최명진 기자 2019-01-04 272 0
1968     포트나이트 스토어, 가상화폐 모네로 결제 지원 최명진 기자 2019-01-04 286 0
1967     넷게임즈, 넥슨지티 30% 폭등... 하위권 게임주의 '반 이재덕 기자 2019-01-04 352 0
1966     게임 거래 사이트 'G2A', 휴면 유저에게 매달 1유로 청 김효진 기자 2019-01-03 467 0
1965     레고로 만드는 오버워치, ‘레고 오버워치 시리즈’ 김효진 기자 2019-01-03 469 0
1964     넥슨 신작 MMORPG ‘아스텔리아’, 유료 아이템 판매 김효진 기자 2019-01-03 478 0
1963     겨울이 가기 전에 즐겨야 할 ‘추운’ 게임 3선 김효진 기자 2019-01-02 548 0
1962     언더테일 개발자 ‘토비폭스’, ‘프로레슬링’ 영 김효진 기자 2019-01-02 473 0
1961     중국, 80개 게임 판호 발급 목록 공개...‘대륙진출 미 최명진 기자 2019-01-02 529 0
1960     블리자드, 재무이사 해고...주가폭락 책임 떠안나? 최명진 기자 2019-01-02 304 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