최근 들어, 차세대의 웹 표준으로 자리매김하고 있으며, 별도의 프로그램을 설치하지 않고 인터넷 브라우저 상에서 다양한 그래픽과 멀티미디어의 구현이 가능한 웹 앱 저작 기술인 HTML5에 많은 사람들의 관심이 집중되고 있다. 본 논문에서는 HTML5에서 제공하는 캔버스를 활용하여 애플의 iOS, 구글의 안드로이드 등의 플랫폼에 의존적이지 않은 게임을 구현한다. 본 논문에서 구현하는 게임은 캐릭터가 주변의 적들과 충돌하지 않기 위해서 상하좌우로 이동한다. 그리고 캐릭터가 적과 충돌하면 생존 게이지가 줄어들고, 하트 아이템을 먹으면 생존 기간이 연장되는 게임이다. 향후에는 본 논문에서 개발된 게임에 보다 다양한 아이템을 추가할 예정이며, 제스처 인식과 같은 컴퓨터 비전기술을 적용하여 게임을 수행하는 사용자와의 인터페이스를 보다 다양화할 계획이다.
최근 들어, 차세대의 웹 표준으로 자리매김하고 있으며, 별도의 프로그램을 설치하지 않고 인터넷 브라우저 상에서 다양한 그래픽과 멀티미디어의 구현이 가능한 웹 앱 저작 기술인 HTML5에 많은 사람들의 관심이 집중되고 있다. 본 논문에서는 HTML5에서 제공하는 캔버스를 활용하여 애플의 iOS, 구글의 안드로이드 등의 플랫폼에 의존적이지 않은 게임을 구현한다. 본 논문에서 구현하는 게임은 캐릭터가 주변의 적들과 충돌하지 않기 위해서 상하좌우로 이동한다. 그리고 캐릭터가 적과 충돌하면 생존 게이지가 줄어들고, 하트 아이템을 먹으면 생존 기간이 연장되는 게임이다. 향후에는 본 논문에서 개발된 게임에 보다 다양한 아이템을 추가할 예정이며, 제스처 인식과 같은 컴퓨터 비전기술을 적용하여 게임을 수행하는 사용자와의 인터페이스를 보다 다양화할 계획이다.
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 ...
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.
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.
* AI 자동 식별 결과로 적합하지 않은 문장이 있을 수 있으니, 이용에 유의하시기 바랍니다.
문제 정의
따라서 본 논문에서는 이러한 시대적인 추세를 따라가면서, 세계적인 차세대 웹 표준으로 각광을 받고 있는 HTML5가 제공하는 가장 중용한 특징 중의 하나인 캔버스(canvas)를 최대한 활용하여 플랫폼에 독립적으로 동작하는 새로운 게임을 구현하고자 한다.
그리고 자바스크립트를 통해 다양한 API를 제공하며, 모바일 웹 환경을 최대한 고려하였다. 따라서, 본 논문에서는 시대적인 흐름에 맞추고, HTML5가 새롭게 제공하는 기능들 중의 하나인 캔버스를 활용하여 여러 가지 플랫폼들에서 독립적으로 동작할 수 있는 게임을 개발하였다.
제안 방법
93Ghz의 CPU와 4GB의 메모리를 사용하였고, 운영체제로는 마이크로소프트사의 윈도우 7을 사용하였다. 그리고 게임을 개발하기 위한 프로그래밍 언어로는 HTML5, 자바스크립트, CSS3를 이용하였고, HTML5 기반의 소스코드를 편집하기 위한 편집기로는 에디트 플러스3(EditPlus3)를 사용하였으며, 개발된 프로그램을 디스플레이 하기위한 웹 브라우저로는 구글의 크롬(chrome)을 사용하였다. 또한, 게임 화면을 설계하고 디자인하는 데에는 포토샵(Photoshop)과 일러스트레이터(Illustrator)를 이용하였다.
그림에서 보이는 것과 같이 게임의 엔딩 화면은 영화의 엔딩 크레딧(credits)처럼 자막이 좌표를 따라 흐르듯이 위로 움직이는 효과를 가미하여 스토리의 전개를 기승전결에 맞게 구현하려고 시도하였다. 그리고 구현된 게임에서는 각 장면을 대표할 수 있는 서로 다른 배경 음악을 삽입하여 사용자의 게임에 대한 몰입도를 한층 더 증가시킬 수 있도록 시도하였다.
그림 9는 개발된 게임의 엔딩(Ending) 화면을 보여준다. 그림에서 보이는 것과 같이 게임의 엔딩 화면은 영화의 엔딩 크레딧(credits)처럼 자막이 좌표를 따라 흐르듯이 위로 움직이는 효과를 가미하여 스토리의 전개를 기승전결에 맞게 구현하려고 시도하였다. 그리고 구현된 게임에서는 각 장면을 대표할 수 있는 서로 다른 배경 음악을 삽입하여 사용자의 게임에 대한 몰입도를 한층 더 증가시킬 수 있도록 시도하였다.
그림 7은 개발된 게임의 인트로(Intro) 화면을 보여준다. 본 논문에서는 그림에서 보이는 것과 같이 스크린의 랜덤(random)한 좌표 값으로부터 마치 폭죽이 터지듯이 풍선이 터지는 효과를 삽입하여 게임의 오프닝 화면을 표현하였다.
첫째, 강화된 마크업 요소이다. 이를 위해, 의미 부여가 가능한 구조화 마크업 요소를 추가하여 다양한 형태의 페이지를 설계할 수 있게 하였다. 그리고 개발자의 수고를 덜어주기 위해서 폼 입력 기능을 대폭 개선하였다.
대상 데이터
그리고 게임을 개발하기 위한 프로그래밍 언어로는 HTML5, 자바스크립트, CSS3를 이용하였고, HTML5 기반의 소스코드를 편집하기 위한 편집기로는 에디트 플러스3(EditPlus3)를 사용하였으며, 개발된 프로그램을 디스플레이 하기위한 웹 브라우저로는 구글의 크롬(chrome)을 사용하였다. 또한, 게임 화면을 설계하고 디자인하는 데에는 포토샵(Photoshop)과 일러스트레이터(Illustrator)를 이용하였다.
본 논문에서 제안된 게임을 개발하기 위해서 사용한 컴퓨터는 인텔 펜티엄 Core(TM) i7 2.93Ghz의 CPU와 4GB의 메모리를 사용하였고, 운영체제로는 마이크로소프트사의 윈도우 7을 사용하였다. 그리고 게임을 개발하기 위한 프로그래밍 언어로는 HTML5, 자바스크립트, CSS3를 이용하였고, HTML5 기반의 소스코드를 편집하기 위한 편집기로는 에디트 플러스3(EditPlus3)를 사용하였으며, 개발된 프로그램을 디스플레이 하기위한 웹 브라우저로는 구글의 크롬(chrome)을 사용하였다.
데이터처리
Preuveneers는 모바일 e-헬스 응용 프로그램을 HTML5로 개발하는 것의 장·단점을 비교 분석하였다[4].
성능/효과
넷째, 웹 브라우저마다 구현 상황이 서로 다른 데스크탑 환경보다는 모바일 환경이 HTML5 애플리케이션을 개발하기에는 보다 좋은 입장이다. 왜냐하면, 모바일 환경에서는 일찍부터 HTML5를 지원하는 웹 브라우저를 탑재하고 있었기 때문이다.
셋째, HTML5는 자바스크립트 기반의 다양한 API(application programming interface)를 활용하여 여러 가지 기능을 수행하는 웹 사이트와 웹 애플리케이션을 개발할 수 있다. 이런 API에는 다양한 요소를 드래깅(dragging) 할 때 필요한 API, 인터넷에 접속할 수 없는 경우에도 웹 문서를 사용할 수 있도록 해 주는 오프라인 웹 애플리케이션 API, 데이터를 로컬스토리지에 저장하기 위한 API, 클라이언트 측의 DB를 사용하기 위해 필요한 인덱스드 DB API, 로컬 파일에 접근하기 위한 파일 API, 서버와 브라우저 사이에 양방향 통신 채널을 제공해 주는 웹 소켓 API, 애플리케이션 사이에 메시지를 주고 받을 수 있는 기능을 제공하는 웹 메세징 API, 위치정보를 제공할 수 있는 위치정보 API 등이 있다.
후속연구
향후에는 현재 개발된 기능보다 다양한 기능을 갖고있는 게임을 개발할 계획이다. 그리고 기존에 개발된 인터페이스 외에 컴퓨터 비전 기술을 활용하여 사용자의 제스처 인식 기술을 기존의 인터페이스와 효과적으로 결합하기 위한 연구를 수행할 예정이다.
향후에는 현재 개발된 기능보다 다양한 기능을 갖고있는 게임을 개발할 계획이다. 그리고 기존에 개발된 인터페이스 외에 컴퓨터 비전 기술을 활용하여 사용자의 제스처 인식 기술을 기존의 인터페이스와 효과적으로 결합하기 위한 연구를 수행할 예정이다.
질의응답
핵심어
질문
논문에서 추출한 답변
HTML(Hyper-Text Markup Language)가 가지는 한계점은 무엇인가?
그동안 웹 브라우저 상에서 기본적인 문서를 표현하는데 사용자들에게 널리 사용되어왔던 HTML(Hyper-Text Markup Language)은 사용자와의 상호작용이나 멀티미디어와 관련된 다양한 기능을 수행하기에는 많이 부족하였다. 그럼에도 불구하고 HTML은 웹 사이트를 구축하는데 사용하기 매우 용이하였으며 간단하다는 장점들 때문에 널리 이용되어 왔다.
HTML5가 등장하게 된 배경에는 무엇이 있는가?
그럼에도 불구하고 HTML은 웹 사이트를 구축하는데 사용하기 매우 용이하였으며 간단하다는 장점들 때문에 널리 이용되어 왔다. 그러나 최근 들어 모바일과 스마트 디바이스 시대를 맞이하면서 HTML의 문서에도 고급 기능이 많이 요구되고 있는 것이 현실이다. 따라서 이러한 요구에 효과적으로 부응하기 위해서 새로운 기능으로 한층 더 개선된 HTML5가 등장하게 되었다[1,2].
HTML5란 무엇인가?
HTML5는 웹 사이트에서 필요한 대부분의 기능을 구현할 수 있는 개발 언어로 관심을 많이 끌고 있다. 일반적으로, HTML5는 웹 문서 제작용 프로그래밍 언어로 별도의 프로그램을 설치하지 않아도 되며, 인터넷 브라우저 상에서 다양한 그래픽과 멀티미디어의 구현이 가능한 웹 앱 저작 기술이다[3]. 그리고 애플의 iOS나 구글의 안드로이드와 같은 특정한 운영체제에 영향을 받지 않는 플랫폼(platform) 독립적인 프로그램의 개발이 가능하다.
참고문헌 (12)
G. Zhu, F. Zhang, W. Zhu, and Y. Zheng, "HTML5-based media player for real-time video surveillance," in Proceedings of the 5th International Congress on Image and Signal Processing, Chongqing, China, pp. 245-248, 2012.
S.-B. Lim, H.-M. Park, and C.-W. Lee, Introduction to HTML5 Web Programming, Life and Power Press, 2013.
C.-H. Nam and C.-G. Seo, "A study on the implementation of mobile web site using HTML5," Journal of Korean Digital Convergence, vol. 11, no. 1, pp. 165-172, Jan. 2013.
D. Preuveneers, Y. Berbers, and W. Joosen, "The future of mobile e-health application development: exploring HTML5 for context-aware diabetes monitoring," Procedia Computer Science, vol. 21, pp. 351-359, 2013.
S.-U. Choi and M.-S. Choi, "Design and implementation of effective e-learning education contents considering multiplatform environment," The Journal of the Korea Contents Association, vol.12, no. 4, pp. 1-9, April 2012.
J.-T. Park, H.-S. Hwang, and I.-Y. Moon, "Implementation of smart TV application using HTML5 and health bicycle," The Journal of Korea Navigation Institute, vol. 18. no. 1, pp. 101-106, Feb. 2014.
T. Engelke, M. Becker, H. Wuesta, J. Keila, and A. Kuijper "MobileAR browser - a generic architecture for rapid ARmulti-level development," Expert Systems with Applications, vol. 40, no. 7, pp. 2704-2714, 2013.
Y.-K. Kim and J.-H. Choi, "Design and implementation of mobile teleconference system based on hybrid web," KIPS Transactions on Computer and Communication Systems, vol. 2, no. 10, pp.437-444, 2013.
H. Prima Dewi Purnamasari and N. Syifana, "Clickable and interactive video system using HTML5," in Proceedings of the International Conference on Information Networking, pp. 232-237, Feb. 2014.
M.-J. Kang, "A Framework Design for Developing Game Based on HTML5," in Proceedings of the Korean Society of Computer Information Conference, pp. 219-220, vol. 21, no. 1, Jan. 2013.
S.-H. Park, Y.-D. Kim, and I.-Y. Moon, "Development of Coupon System for Youth's Experiential Learning Using QR Code," Journal of Korean Institute for Practical Engineering Education, vol. 5, no. 1, pp.52-57, 2013.
X. Yan, L. Yang, S. Lan, and X. Tong, "Application of HTML5 multimedia," in Proceedings of International Conference on Computer Science and Information Processing, pp. 871-874, Aug. 2012.
AI-Helper
※ AI-Helper는 부적절한 답변을 할 수 있습니다.