Platform Independent Game Development Using HTML5 Canvas

HTML5 캔버스를 이용한 플랫폼 독립적인 게임의 구현

Abstract

Recently, HTML5 have drawn many people's attention since it is considered as a next-generation web standard and can implement a lot of graphic and multimedia-related techniques on a web browser without installing programs separately. In this paper, we implement a game independent of platforms, such as iOS and Android, using the HTML5 canvas. In the game, the main character can move up, down, left, and right not to collide with neighboring enemies. If the character collides with an enemy, the HP (hit point) gauge bar reduces. On the other hand, if the character obtains heart items, the gauge bar increases. In the future, we will add various items to the game and will diversify its user interfaces by applying computer vision techniques such as various gesture recognition.

최근 들어, 차세대의 웹 표준으로 자리매김하고 있으며, 별도의 프로그램을 설치하지 않고 인터넷 브라우저 상에서 다양한 그래픽과 멀티미디어의 구현이 가능한 웹 앱 저작 기술인 HTML5에 많은 사람들의 관심이 집중되고 있다. 본 논문에서는 HTML5에서 제공하는 캔버스를 활용하여 애플의 iOS, 구글의 안드로이드 등의 플랫폼에 의존적이지 않은 게임을 구현한다. 본 논문에서 구현하는 게임은 캐릭터가 주변의 적들과 충돌하지 않기 위해서 상하좌우로 이동한다. 그리고 캐릭터가 적과 충돌하면 생존 게이지가 줄어들고, 하트 아이템을 먹으면 생존 기간이 연장되는 게임이다. 향후에는 본 논문에서 개발된 게임에 보다 다양한 아이템을 추가할 예정이며, 제스처 인식과 같은 컴퓨터 비전기술을 적용하여 게임을 수행하는 사용자와의 인터페이스를 보다 다양화할 계획이다.

Ⅰ. 서 론

언제 어디서나 편리하게 사용할 수 있는 유무선의 통신 기능, 초고속의 중앙처리장치, 스마트 폰이나 태블릿 PC와 같은 스마트 디바이스의 급속한 보급 등으로 인해 인터넷을 사용하는 사람들의 수는 기하급수적으로 증가하고 있다. 그리고 사용자들은 웹 브라우저를 이용하여 인터넷으로부터 텍스트, 동영상, 그림, 광고, 음악 파일 등과 같은 다양한 종류의 유용한 콘텐츠를 매우 쉽게 획득할 수 있게 되었다.

그동안 웹 브라우저 상에서 기본적인 문서를 표현하는데 사용자들에게 널리 사용되어왔던 HTML(Hyper-Text Markup Language)은 사용자와의 상호작용이나 멀티미디어와 관련된 다양한 기능을 수행하기에는 많이 부족하였다. 그럼에도 불구하고 HTML은 웹 사이트를 구축하는데 사용하기 매우 용이하였으며 간단하다는 장점들 때문에 널리 이용되어 왔다. 그러나 최근 들어 모바일과 스마트 디바이스 시대를 맞이하면서 HTML의 문서에도 고급 기능이 많이 요구되고 있는 것이 현실이다. 따라서 이러한 요구에 효과적으로 부응하기 위해서 새로운 기능으로 한층 더 개선된 HTML5가 등장하게 되었다[1,2].

HTML5는 웹 사이트에서 필요한 대부분의 기능을 구현할 수 있는 개발 언어로 관심을 많이 끌고 있다. 일반적으로, HTML5는 웹 문서 제작용 프로그래밍 언어로 별도의 프로그램을 설치하지 않아도 되며, 인터넷 브라우저 상에서 다양한 그래픽과 멀티미디어의 구현이 가능한 웹 앱 저작 기술이다[3]. 그리고 애플의 iOS나 구글의 안드로이드와 같은 특정한 운영체제에 영향을 받지 않는 플랫폼(platform) 독립적인 프로그램의 개발이 가능하다.

기존에 HTML5를 이용하여 진행된 여러 가지 연구들을 살펴보면 다음과 같다. Preuveneers는 모바일 e-헬스 응용 프로그램을 HTML5로 개발하는 것의 장․단점을 비교 분석하였다[4]. Choi는 다중 플랫폼 환경을 고려하기 위해 HTML5를 이용하여 효율적인 이러닝 교육 콘텐츠를 설계하고 구현하는 연구를 수행하였다[5]. Park는 HTML5와 스마트 폰, 그리고 헬스 자전거를 이용하여 사용자 체감형으로 스마트TV 응용 프로그램을 개발하였다[6]. Engelke는 증강현실(AR: augmented reality) 응용 프로그램을 빠르게 개발하기 위하여 HTML5를 이용하여 모바일 디바이스 상에서 웹 구성요소를 인터페이스 하는 방식을 연구하였다[7]. Kim는 HTML5를 이용하여 하이브리드(hybrid) 웹 기반의 모바일 회의(teleconference) 시스템을 설계 및 개발하였다[8]. 이외에도 HTML5와 관련된 많은 연구가 진행되었으며, 향후에도 계속해서 진행될 것이다[9-11].

따라서 본 논문에서는 이러한 시대적인 추세를 따라가면서, 세계적인 차세대 웹 표준으로 각광을 받고 있는 HTML5가 제공하는 가장 중용한 특징 중의 하나인 캔버스(canvas)를 최대한 활용하여 플랫폼에 독립적으로 동작하는 새로운 게임을 구현하고자 한다.

1장에서는 본 연구를 수행하게 된 전체적인 개요에 대해 설명하였다. 2장에서는 HTML5의 기본 개념과 특징, 그리고 HTML5와 관련하여 기존에 진행되었던 여러 가지 연구에 대해 기술한다. 3장에서는 본 논문에서 구현하는 게임의 기획 및 설계에 대해 설명한다. 4장에서는 제안된 게임을 HTML5를 이용하여 구현하는 방법에 대해 설명한다. 마지막으로, 5장에서는 본 논문의 결론 및 향후 연구방향을 제시한다.

 

Ⅱ. 관련 연구

HTML5는 HTML의 차기 제안버전으로 WWW의 핵심 마크업(Markup) 언어이다. 2004년 6월 WHATWG(Web Hypertext Application Technology Working Group)에서 웹 애플리케이션 1.0이라는 이름으로 세부 명세 작업을 시작하였는데, 발전과정, 주요특징[2], 캔버스, 그리고 응용분야를 살펴보면 다음과 같다.

2.1. HTML5의 발전과정

팀 버너스 리는 1991년 하이퍼텍스트를 구현하기 위한 형식으로 HTML 언어를 제시하였다. HTML은 간단하여 학습하기 용이하였으며, 인터넷의 대중화에 큰 기여를 하였다. 웹컨소시엄이 결성되어 1994년 HTML 버전 2.0이 제정되었으며, 1997년 HTML 4.0 버전이 제정되었다. HTML 4.0에는 동적인 문서를 표현하기 위해 스타일시트를 지정하는 CSS(cascading style sheet) 기능과 상호작용을 위한 자바스크립트(Javascript)가 포함되었다. 2000년 XML에 기반한 XHTML이 등장하였으며, WHATWG가 웹컨소시엄과는 별도로 HTML의 후속 모델을 논의하게 되었는데, 이렇게 해서 탄생된 것이 바로 HTML5이다. 그림 1은 HTML5의 발전과정을 그림으로 간단히 요약하여 보여준다.

그림 1.HTML5의 발전과정 Fig. 1 Development process of HTML5

2.2. HTML5의 특징

HTML5는 여러 가지 특징들을 가지고 있지만, 표 1과 같이 주요한 네 가지 특징으로 요약할 수 있다.

표 1.HTML5의 주요 특징 Table. 1 Main features of HTML5

첫째, 강화된 마크업 요소이다. 이를 위해, 의미 부여가 가능한 구조화 마크업 요소를 추가하여 다양한 형태의 페이지를 설계할 수 있게 하였다. 그리고 개발자의 수고를 덜어주기 위해서 폼 입력 기능을 대폭 개선하였다. 또한, 웹 미디어 기능을 강화하기 위해서 멀티미디어 및 그래픽스 관련된 기능이 추가되었다. 예를 들어,

둘째, HTML5에서는 기존의 CSS1, CSS2, 그리고 CSS3를 완전히 지원하는 것을 기본으로 하고 있다. 일반적으로, 스타일시트는 웹에서 작성된 문서의 외적인 형태를 보다 쉽고 빠르게 설정하는 언어로 일반적인 HTML 태그로는 외형을 효과적으로 지정할 수 없었던 부분에 스타일을 적용하기 위해서 사용된다. HTML5에서는 이런 스타일시트의 도움으로 둥근 모서리 처리, 그림자 효과, 다단 지정, 장면전환, 애니메이션, 사용자 인터페이스와 관련된 속성을 설정하여 보다 다양한 웹 문서의 작성이 가능하다.

셋째, HTML5는 자바스크립트 기반의 다양한 API(application programming interface)를 활용하여 여러가지 기능을 수행하는 웹 사이트와 웹 애플리케이션을 개발할 수 있다. 이런 API에는 다양한 요소를 드래깅(dragging) 할 때 필요한 API, 인터넷에 접속할 수 없는 경우에도 웹 문서를 사용할 수 있도록 해 주는 오프라인 웹 애플리케이션 API, 데이터를 로컬스토리지에 저장하기 위한 API, 클라이언트 측의 DB를 사용하기 위해 필요한 인덱스드 DB API, 로컬 파일에 접근하기 위한 파일 API, 서버와 브라우저 사이에 양방향 통신 채널을 제공해 주는 웹 소켓 API, 애플리케이션 사이에 메시지를 주고 받을 수 있는 기능을 제공하는 웹 메세징 API, 위치정보를 제공할 수 있는 위치정보 API 등이 있다.

넷째, 웹 브라우저마다 구현 상황이 서로 다른 데스크탑 환경보다는 모바일 환경이 HTML5 애플리케이션을 개발하기에는 보다 좋은 입장이다. 왜냐하면, 모바일 환경에서는 일찍부터 HTML5를 지원하는 웹 브라우저를 탑재하고 있었기 때문이다.

2.3. HTML5 캔버스

HTML5의 캔버스를 사용하면 별도의 플러그인(plug-in)이나 프로그램을 설치하지 않고도 자바스크립트 만으로 웹 문서 내에 그림이나 그래프를 작성할 수 있으며, 이미지나 그림을 합성, 변형, 그리고 조작할 수 있다. 캔버스는 x와 y의 두 개 축을 가지는 사각 평면의 2차원 좌표계를 사용하며, 캔버스에 그림을 그리기 위한 여러 가지 API를 사용할 수 있다.

2.4. HTML5의 응용분야

최근 들어, HTML5는 차세대의 웹 표준으로 자리매김하고 있으며 점점 더 많은 사람들의 지속적인 관심을 받고 있다. 따라서 모바일 웹 사이트 제작, 게임 개발, 이러닝 교육 콘텐츠의 설계 및 구현, 스마트 TV 응용 프로그램, 증강현실 기반의 응용 프로그램, 하이브리드 웹 기반의 모바일 회의 시스템, 모바일 e-헬스 응용 프로그램, 그리고 전자상거래 플랫폼 등 매우 많은 응용분야를 가지고 있다[12].

 

Ⅲ. 게임 기획 및 설계

본 논문에서 구현하는 HTML5 기반의 게임은 주인공 캐릭터가 주변에서 공격하는 많은 수의 적군인 세균들을 피하기 위해서 상하좌우로 이동하는 게임이다. 만일 주인공 캐릭터가 적과 충돌할 경우에는 점점 생존 게이지가 줄어들게 되고, 반대로 목숨 아이템인 빨간색의 하트 아이템을 먹으면 생존 게이지가 늘어난다. 그리고 남아 있는 생존 게이지가 모두 줄어들면 게임은 종료하게 된다. 그림 2는 본 논문에서 HTML5를 이용하여 구현하고자 하는 게임의 전체적인 시스템 흐름도를 보여준다.

그림 2.전체 시스템 흐름도 Fig. 2 Overall flow of the proposed system

그리고 표 2는 본 논문에서 개발하는 게임에서 사용되는 모든 리소스(resources)들의 목록을 보여준다.

표 2.사용된 게임 리소스 Table. 2 Used game resources

그림 3은 게임에서 사용하는 주인공 아이템과 적군인 세균 아이템을 각각 보여준다.

그림 3.주인공과 적군 캐릭터 Fig. 3 Hero and enemy characters

그림 4는 구현되는 게임에서 목숨 아이템으로 사용되는 빨간색의 하트 아이템을 보여준다.

그림 4.목숨 하트 아이템 Fig. 4 Life heart item

일반적으로, HP(hit point)는 게임에서 적의 공격이나 화염, 추위 등의 대미지(damage)로부터 캐릭터가 버텨낼 수 있는 능력을 수치로 표현한 것이다. 주로 숫자 또는 붉은색 게이지 등으로 표현되며, 이 수치가 0이 되거나 게이지가 모두 줄어들면 해당 캐릭터는 사망하거나 진행불가 상태가 된다. 본 논문에서 사용하는 게이지 바는 그림 5와 같이 빨간색과 녹색으로 구성된다. 게임을 시작할 때는 전체 바가 녹색으로 구성되며, 적들과 충돌할 경우에는 빨간색의 바가 증가되고, 하트 아이템을 먹으면 녹색의 바가 증가된다.

그림 5.HP 게이지 바 Fig. 5 HP gauge bar

일반적으로, 주인공 캐릭터와 적들 사이의 충돌이 발생했는지의 여부를 확인하는 방법에는 여러 가지가 있는데, 본 논문에서는 가장 쉬운 방법으로 사각형 영역의 겹침 여부를 판단하는 방법을 사용한다. 다시 말해, 다음 그림과 같이 출력된 이미지들의 영역들을 사각형으로 표현하였을 때 서로 겹쳐지는 경우와 겹쳐지지 않는 경우로 나타낼 수 있다.

그림 6.두 사각형의 겹침 여부 Fig. 6 Overlapping of two rectangles

여기에서는 사각형의 겹침 여부를 알아내는 방법으로 두 사각형의 길이의 합의 절반을 활용한다. 다시 말해, 두 사각형이 나란히 붙어있을 때 사각형의 중점 사이의 거리인 dx 및 dy, 그리고 두 사각형의 현재 위치에서의 중점 사이의 거리인 abs(x-cx)와 abs(y-cy)를 비교하여 현재 중점 사이의 거리가 dx와 dy보다 작으면 두 사각형이 겹쳐진 것으로 간주한다. 여기에서 (x, y)와 (cx, cy)는 각각 첫 번째와 두 번째 사각형의 중점의 좌표를 나타내고, abs는 절대값을 의미한다.

 

Ⅳ. 게임 구현

본 논문에서 제안된 게임을 개발하기 위해서 사용한 컴퓨터는 인텔 펜티엄 Core(TM) i7 2.93Ghz의 CPU와 4GB의 메모리를 사용하였고, 운영체제로는 마이크로소프트사의 윈도우 7을 사용하였다. 그리고 게임을 개발하기 위한 프로그래밍 언어로는 HTML5, 자바스크립트, CSS3를 이용하였고, HTML5 기반의 소스코드를 편집하기 위한 편집기로는 에디트 플러스3(EditPlus3)를 사용하였으며, 개발된 프로그램을 디스플레이 하기 위한 웹 브라우저로는 구글의 크롬(chrome)을 사용하였다. 또한, 게임 화면을 설계하고 디자인하는 데에는 포토샵(Photoshop)과 일러스트레이터(Illustrator)를 이용하였다.

그림 7은 개발된 게임의 인트로(Intro) 화면을 보여 준다. 본 논문에서는 그림에서 보이는 것과 같이 스크린의 랜덤(random)한 좌표 값으로부터 마치 폭죽이 터지듯이 풍선이 터지는 효과를 삽입하여 게임의 오프닝 화면을 표현하였다.

그림 7.인트로 화면 Fig. 7 Intro scene

그림 8은 개발된 게임의 메인 화면 중의 하나를 보여준다. 그림에서는 주인공 캐릭터가 사방으로 움직이면서 공격하는 세균들을 피하면서 생명을 연장하고 있는 모습을 보여준다. 주인공은 세균들과 충돌하면 생명이 점점 줄어들며, 하트를 먹으면 생명이 연장된다. 생명이 얼마만큼 남아 있는지는 화면의 우측 상단에 위치하는 생명 게이지 바로 표현이 된다.

그림 8.메인 화면 Fig. 8 Main scene

그림 9는 개발된 게임의 엔딩(Ending) 화면을 보여준다. 그림에서 보이는 것과 같이 게임의 엔딩 화면은 영화의 엔딩 크레딧(credits)처럼 자막이 좌표를 따라 흐르듯이 위로 움직이는 효과를 가미하여 스토리의 전개를 기승전결에 맞게 구현하려고 시도하였다. 그리고 구현된 게임에서는 각 장면을 대표할 수 있는 서로 다른 배경 음악을 삽입하여 사용자의 게임에 대한 몰입도를 한층 더 증가시킬 수 있도록 시도하였다.

그림 9.엔딩 화면 Fig. 9 Ending scene

 

Ⅴ. 결 론

최근 들어, 차세대 웹 표준으로 자리를 잡아가고 있는 HTML5가 많은 사람들의 각광을 받고 있다. 일반적으로, HTML5는 웹 문서 제작용 프로그래밍 언어로 별도의 프로그램을 설치하지 않아도 되며, 인터넷 브라우저 상에서 다양한 그래픽과 멀티미디어의 구현이 가능한 웹 앱 저작 기술이다. HTML5는 이전 버전의 HTML에 비해 마크업 요소가 강화되었으며, CSS3를 완전하게 지원한다. 그리고 자바스크립트를 통해 다양한 API를 제공하며, 모바일 웹 환경을 최대한 고려하였다. 따라서, 본 논문에서는 시대적인 흐름에 맞추고, HTML5가 새롭게 제공하는 기능들 중의 하나인 캔버스를 활용하여 여러 가지 플랫폼들에서 독립적으로 동작할 수 있는 게임을 개발하였다.

향후에는 현재 개발된 기능보다 다양한 기능을 갖고 있는 게임을 개발할 계획이다. 그리고 기존에 개발된 인터페이스 외에 컴퓨터 비전 기술을 활용하여 사용자의 제스처 인식 기술을 기존의 인터페이스와 효과적으로 결합하기 위한 연구를 수행할 예정이다.