Google for Developers Korea Blog: HackFair 출품작 소개 2탄!~ 나만의 리듬 액션 게임 WimyLime!!

Google for Developers Korea Blog

한국의 개발자들을 위한 Google for Developers 국문 블로그입니다.

HackFair 출품작 소개 2탄!~ 나만의 리듬 액션 게임 WimyLime!!

2012년 12월 6일 목요일

나만의 리듬 액션 게임 만들기! Wimylime (게임 바로가기: http://lime.wimy.com/)
프로젝트 간략 소개, 제작 동기 Wimylime 은 YouTube 의 공식 뮤직비디오등을 이용하여 사용자가 직접 리듬을 입력하여 리듬액션게임을 만들어 즐길 수 있는 웹 프로그램입니다. 웹에서 만든 리듬을 공유하여 친구에게 보내거나 다른 서람이 만든 리듬을 즐길 수 있습니다.

평소 YouTube 관련 웹 프로그래밍도 했었고 리듬 게임도 즐겨하다가 문득 YouTube의 음악을 들으며 '이 리듬은 리듬액션게임으로 만들면 재미있을텐데...' 라는 생각이 들었고, YouTube API 와 html5 를 사용하면 되지않을까하는 생각에 시작했습니다.
사용한 구글 관련 기술
게임 화면 관련 기술 - YouTube Player 를 이용하여 동영상을 웹 페이지에서 그대로 재생하여 보여주면서, YouTube Player API 에서 현재 재생 시간을 알려주는 api 를 이용하여 리듬 노트들의 위치를 결정합니다. - YouTube Player API 에서 현재의 동영상 제목을 가져와서 배경화면 이미지 검색을 통해 배경이미지를 설정합니다. - 그리고 리듬 종료 시점에 음악이 점점 작아지는 효과를 내기 위해 YouTube 볼륨을 조절하는 api 를 사용합니다. 게임 화면을 그리기 위해서는 html5의 canvas 기능을 사용합니다. - 1초에 30번 화면을 업데이트하며, 페이지 시작할 때 미리 읽어들인 이미지 파일을 canvas 에 그려, 리듬 노트와 이펙트를 애니메이션 시킵니다. - 그리고 게임 점수 화면에서 html5 의 css 애니메이션을 통해서 약간의 애니메이션을 보여줍니다.

배경 관련 기술

Wimylime 에는 2가지 모드가 있는데, 사용자가 리듬을 입력하는 입력모드, 만들어진 리듬으로 게임을 즐기는 게임 모드가 있습니다. 사용자는 YouTube 가 재생되는 동안 특정 키를 눌러 리듬을 입력하는데, 사용자가 어떤 키를 어느 시간에 눌렀는지를 저장해서 게임모드에서 화면을 그리고 판정을 하게됩니다. 이 때 키를 누른 시간과 어느 키를 눌렀는지, 몇초까지 리듬을 입력했는지, 비디오 제목은 무엇인지 등을 Google App Engine 의 NDB 로 저장을 합니다. Google App Engine 은 python 언어를 사용하였습니다.

이렇게 저장된 정보는 게임모드에서 XMLHttpRequest 로 요청하여 json 형식으로 데이터를 가져와서 플레이하게 됩니다. 리듬 정보는 다음과 같이 어느 패드를 언제 눌렀지를 알려주는 json 형태로 저장을 합니다.

{"pad1" : [ 5.89, 6.62, 7.33, 8.08, ...],"pad2" : [ 8.77, 9.46, 10.24, 10.95, 11.74, 12.42, 13.11, … ],"pad3" : [ 14.60, 15.34, 16.06, 16.74, 17.53, 18.22],"pad4" : [ 10.09, 20.99, ...]}

개발에 힘들었던 점

YouTube player api 에서 4.68초와 같이 소수점 둘째자리까지 현재 재생 시간을 알려주는 것을 확인하고, 이 시간을 바탕으로 애니메이션을 제어할 수 있겠다는 생각에 프로젝트를 시작하였는데, 이상하게 시간을 가지고 재생되는 리듬 노트의 애니메이션이 끊어져서 내려왔습니다. 확인해보니 1초에 30번씩 YouTube player 에 현재 재생시간을 물어보는데 , 4.68초라고 20번 대답하고, 5.48초라고 10번 대답합니다. 재생 시간을 알려주는 API 가 업데이트 주기가 있는것이었습니다. 이 문제를 해결하기위해 시간이 업데이트 되지않는 구간에서는 자바스크립트로 직접 현재 재생 시간을 계산해야했습니다.

아쉬운 점

Wimylime 은 YouTube 의 html5 player 와 html5 canvas 를 이용한 웹 프로그램이므로 초기 개발단계부터 모바일 기기를 지원하는 목표를 가지고 제작되었습니다. 특히 버튼의 갯수를 결정할 때, 게임의 전체적인 난이도, 모바일 기기에서의 해상도, 모바일 기기를 양손으로 잡고 플레이할 때의 감각 등을 고려하여 4개의 버튼으로 결정되었습니다.
이렇게 모바일 기기 지원을 결정한 후, 먼저 가장 먼저 생각한 모바일에서의 터치 입력이 잘되어 본격적으로 데스크탑에서 개발을 하여 어느 정도 플레이가 가능하게 되었을 때, 다시 모바일에서 플레이를 해보니 도저히 게임을 할 수 없었습니다. 모바일 기기의 성능으로는 아직까지 ‘동영상 재생 + canvas 30fps’ 의 성능을 내기에는 무리가 있었던 것이었습니다. 물론 웹 프로그램의 최적화는 아직 고려되지 않았기에 좀더 개선할 수는 있을 수 있겠으나, 많은 수의 모바일 기기에서의 동작에는 아직 무리가 있었습니다. 모바일 기기들의 전체적인 성능이 향상되거나 모바일 웹 브라우저들의 성능이 향상되기를 기대하며, 모바일 기기에서의 원활한 게임 플레이는 아쉽게도 매우 제한된 기기만 가능하게 되었습니다.

관련 URL

관련 소스 코드는 https://github.com/zelon/WimyLime 에 업데이트 중이며, 게임 페이지 주소는 http://lime.wimy.com/ 입니다.

WimyLime 소개 YouTube

http://www.youtube.com/watch?v=o2xw_BtvpCY 에서 소개 동영상을 보실 수 있습니다.

개발자 소개

김진욱은 게임 서버 프로그래밍을 주 직업으로 하고 있으며, 개인 취미로 프로젝트를 진행하며 새로운 기술들을 익히는 것을 좋아합니다. WimyLime 외에 ZViewer, ClipDic 프로젝트를 진행했습니다.

Contents

ML/Tensorflow
Android
Flutter
Web/Chrome
Cloud
Google Play
Community
Game
Firebase

검색

Tag

Archive

2024
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2023
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2022
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2021
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2020
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2019
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2018
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2017
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2016
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2015
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2014
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2013
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2012
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 3월
- 2월
- 1월

2011
- 12월
- 11월

Feed

Google
Privacy
Terms