canvas 와 excanvas 를 이용하여 만들어보고 있는 탱크 게임 (클라이언트 부분)

요새는 탱크 게임을 만들어 보고 있다. 목표는 iPhone 에서도 동작 가능한 멀티플레이어 탱크게임이다. 현재 클라이언트 부분의 기본적인 기능을 거의 완료했다.

데모(Demo)

http://simpletankclient.azki.org/

호환성

excanvas (http://code.google.com/p/explorercanvas/) 를 사용하여 IE 브라우저에서도 동일하게 동작하도록 만들었다. 테스트는 IE6, IE7, IE8, FF2, FF3, Chrome4, iPhone Safari 등에서 했다. iPhone Safari 에서는 할만한데, iPhone Opera Mini 5.0 에서는 너무 느리더라. 아이폰용 viewport 설정(http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html)을 해서 해상도가 유지되도록 설정했다. 사이즈는 아이폰에서 가로보기로 하면 딱 맞도록 하였다.

유저 인터페이스

현재 사용자들에게 주어진 제어권은 각도와 힘의 조절, 그리고 발사다. 각도와 힘을 조절하는 방법은 3가지를 구현했다. 지도위를 마우스 클릭하여 힘과 각도를 조절 가능하며, 오른쪽에 위치한 select 박스를 통해 선택 가능하고, 키보드의 w, a, s, d 키나 화살표키를 사용하여 조절이 가능하다. select 박스를 통해 설정 가능하도록 만든 것은 iPhone 에서 다른 form 구성 요소보다 훨씬 값을 설정하기 쉽기 때문이다. 발사는 키보드의 f 키를 누르거나 오른쪽에 위치한 Shoot 버튼을 클릭하면 이루어진다.

포탄 애니메이션 프레임 문제

포탄 애니메이션은 포물선 운동에서의 x 좌표와 y 좌표의 값을 계속 변경시키는 것으로 구하는데, 일반 데스크탑 환경과 달리 iPhone 등 느린 환경에서는 같은 프레임으로 동작시켰을 경우 5배 이상의 시간이 걸리기도 한다. 그래서 한 프레임에 걸리는 시간을 체크하여, 프레임 수를 줄이는 방식의 코드를 적용하였다. 프레임간의 간격을 5ms 로 하고, 한 프레임을 뿌리는데 걸리는 시간이 현재 프레임 간의 간격의 2배 이상인 경우에는 프레임 간의 간격의 기본 값을 5ms 씩 늘리도록 하였다. 이 방식을 통해 동작이 느린 환경에서 프레임 수를 자동으로 줄이고 포탄이 날라가는 시간을 조절하였다.

한계

excanvas 는 IE 브라우저에서 vml 을 통해 canvas 를 보여주도록 하는 js library 인데, 몇가지 제한가 있다. 특히 text 를 그리는 API 가 호환되지 않는다. 그리고, iPhone Safari 에서도 글씨 위치가 정확하지 않는 등 호환성의 문제가 있었다. 그래서 턴을 나타내는 "TURN:" 이라는 글자를 line 을 이용하여 그렸다. 브라우저 호환이 되는 글자를 표현하는 방법이 따로 없기 때문에 image 나 line, html 등을 이용해야 한다.

전체적인 구조

HTML 의 element 들과 디펜던시가 있는 부분들은 SimpleTank.Ui 클래스가 담당한다. html 의 이벤트를 제어하거나, 내용을 변경하는 부분을 당담한다. 그리고 SimpleTank.Map, SimpleTank.Tanks, SimpleTank.Shot 들은 각각 canvas context 객체를 받아서 각자 맡은 부분을 그린다.

자세한 부분이 궁금한 사람은 코드를 뜯어 보시길..

소스(Source)

st_client_20100420.zip

앞으로 계획

앞으로 서버 부분을 제작하여 멀티플레이어 온라인 대전이 되도록 서비스를 해볼 생각이다. 항상 느끼는 것이지만, 게임 자체의 구현보다 서비스를 기획하는 부분이 어렵다.

1. 계정 없이 접속해서 게임을 할 수 있도록 할 것인가? 아니면 Open API 를 이용하여 인증하게 할 것인가? 혹은 회원가입을 받을 것인가?
2. 유저가 방을 생성하도록 해서 서로 대전이 되도록 할 것인가? 접속자 목록을 보여주고 초대하는 형식으로 대전하도록 할 것인가? 접속시 자동으로 대전 상대들을 찾아 줄 것인가? 여러가지 방식을 동시에 지원해줄 것인가?
3. 등등.. 여러가지 고민이 앞선다.

그리고 바람 가중치, 랭킹 서비스, 탱크의 모양과 성능의 종류 선택, 포탄, 아이템 등의 구입과 사용 개념 등을 추가할 계획이다.