테스트용 HTML5 게임 사이트 오픈

저번에 소개했던 Famobi.com 에서 테스트 삼아 publishing site 오픈.

Site 요약 – Kizplay

http://kizplay.portals.famobi.com/

  1. Famobi.com 이 보유하고 있는 게임들을 퍼블리싱 할 수 있는 사이트 오픈
  2. famobi 에서 제공하는 portal site 서비스를 이용 (비용 없음)
  3. famobi 에서 제공하는 CMS 및 셋팅 이용 – 사이트통계, 수익, 사이트디자인(제한적), SEO 적용 가능
  4. 게임을 하나하나 선택해서 노출시킬 수 있고, 표시 순서도 커스터마이징 가능 (엄청난 노가다-_-)2017-07-03 17;20;28
  • Follow up
    • 카테고리 명칭, 분류 등에 대해서 게임사업부 지인과 함께 논의하여 수정할 예정
    • SEO (검색엔진최적화) 에 대해 공부하고 적용할 예정
    • 사이트 기본 디자인 작업 진행 필요
    • 도메인 연결 (선택)
  • 그 외

— 제공되는 게임의 수가 464개로 각 게임에 대한 분류와 특성 파악이 필요해 보임 (모든 게임을 넣을 필요가 있을까)

— 퍼즐에 특화된 사이트로 구성해도 괜찮을 듯

h1 프로젝트 – HTML5 게임개발 후기

웹뷰만 띄울 수 있으면 어느 환경에서나 플레이 가능한 강점을 가진 html5 게임을 개발하게 되었다. html5 게임은 이미 많이 대중화된 상태라 제작 관련 툴이나 엔진을 찾는데는 어렵지 않았다.

   – 참고 사이트 : https://html5gameengine.com/ – html5 게임 엔진 인기 순위.

 위 사이트에서 4위에 랭크 되어있는 Phaser라는 게임개발 프레임워크를 사용하기로 했다. Phaser는 자체만으로 엔진이라고 할 수는 없지만 렌더링, 사운드, 물리 등  게임에 필요한 거의 모든 기능들을 편리하게 제공 해주는 2D 게임 프레임워크이다.  Phaser가 제공하는 많은 예제와 커뮤니티 자료도 원할한 개발을 하는데 많은 도움을 주었다.

   – 참고 사이트 : https://phaser.io/  – Phaser 공식 홈페이지

 

기획된 게임은  두명의 플레이어가 게임오버 될 때 까지 포탄을 쏴 적유닛을 물리치는 간단한 방식의 멀티플레이 슈팅 게임이었다.

1.PNG

 

멀티플레이 인것만 제외하면 간단한 게임이어서 기본게임틀 제작까지는 시간이 오래 걸리지 않았다.  그에 맞는 빠른 멀티플레이 테스트를 위해 Node.js 와 websocket 을 이용한 임시 에코서버를 제작해 테스트를 진행 하였다. 서버와 클라이언트 모두 자바스크립트로 작성 할 수 있어서 개발속도는 더 빨랐다.

   – 참고 사이트 : http://www.html5gamedevs.com/topic/6256-simple-phaser-websocket-guide/    –  phaser 와 websocket 을 이용한 서버관련 커뮤니티글

 

게임 특성상 여러 스테이지가 필요했는데, 적은 양의 리소스로 많은 양의 스테이지를 제작하기 위해 간단한 맵툴제작과 지형을 조립가능하게 화 프리팹화 시켰다.

2.png

 

지형 프리팹화 과정에서 다양한 모양의 지형에 대처하기 위해 포탄과 지형의 충돌체크는 픽셀충돌 방식을 사용하였다. 픽셀충돌은 Phaser에서 지원해주는 충돌체크 방식이 아니다보니 테스트 해보던중 한가지 중대한 버그가 발생하였다. 싱글 플레이시에는 문제 없으나 모바일기기로 멀티플레이 테스트시 가끔 포탄발사 시뮬레이션 결과가 서로 다르게 나오는 것이었다.  원인을 파악해보니 모바일 디바이스별로 구형은 지형을 화면에 그린 픽셀들의 결과가 신형 디바이스와 미세하지만 약간 차이가 있다는 것은 발견했다. 이를 해결하기 위해 프리팹화 된 지형 별로 검은색과 흰색으로 이루어진 픽셀충돌 전용 리소스를  만들어 사용하였다.

3.PNG

 

웹뷰 환경에서 게임을 실행하는 탓에 게임은 돌아가나 성능에 관한 문제도  많았다. 같은 디바이스에서도 사용한 브라우저 별로 성능과 지원가능한 html5 기능은  많은 차이가 있었다.

–  참고 사이트 : http://html5test.com/results/mobile.html  –  브라이저 별로 사용가능한 html5 기능을 알려주는 사이트

초기 개발에서는 1920 * 1080 의 고해상도 이미지 리소스를 사용했는데 구형 디바이스에서는 말할것도없고, 신형 디바이스에서도 플레이 시간이 길어지면 발열과 잔렉이 심해졌다. 게임 로직의 부하 문제이기 보다는 렌더링 성능의 문제로 보고 게임 해상도를  960 * 540 으로 바꾸면서 모든 리소스들을  절반 크기로 줄였다. 큰 모니터 화면으로 보면  약간의 디테일 차이가 있었지만 작은 모바일 화면으로 보면 고해상도 이미지를 쓸때와 큰 차이가 없었다. 그 결과 성능은 많이 개선 되었다. 구형 디바이스에서 장시간 플레이했을시 발열의 문제는 남아있었지만 잔렉과 발열도 많이  줄어 들었다.

 

브라우저가 캐시를 남기는것도 문제가 많았다. 새로 게임을 업데이트 했어도 캐시가 남아있는 문제 때문에 업데이트 된 게임이 제대로 불러와지지 않았다. 개발  단계에서는  크롬 시크릿탭을 사용하거나 저장된 캐시를 삭제해서 게임을 업데이트 했지만 임시방편이었다.  cache.manifest파일을 작성해서 캐시될 파일과 네크워크에서 매번 가져올 파일을 설정할수 있었다.