Korea Blog
HackFair 출품작 소개 2탄!~ 나만의 리듬 액션 게임 WimyLime!!
Wednesday, December 5, 2012
나만의 리듬 액션 게임 만들기! 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
프로젝트를 진행했습니다.
No comments :
Post a Comment
ラベル
ad
AdMob
admob_sdk
Advanced Power Searching
Android
Android App Quality
android back button
Android back end
Android navigation
Android Player API
android server
android up button
androidL
androidtv
androidwear
App Translate Service
Audio Focus
Chrome
Chromecast
Code-in 2012
Core App Quality Guidelines
Daydream
design
designing for Tablets
designsprint
dialog
Drive SDK
Game Developers Conference
GCi
GCi 참가자
GDA
GDC
gdg
gdgkorea
Go
Google Cast
Google Code-in
Google Play
Google Play 스토어
Google Search
Google Summer of Code
Google+ Sign-In
Google+ Sign-In Bootcamps
Google+ 로그인
Google+ 로그인 부트캠프
googleanalytics
googleio
GooglePlay #AndroidDevStory #PlayStore #MaterialDesign #AndroidStudio #DeveloperConsole
GSOC
hackathon
HackFair 출품작
In-app Billing
io
io2014
ioapp
iobytes
ioextended
IRC Talk
IRC 서버
java7
kitkat
launch
Marshmallow
materialdesign
mobile ad
mobile_ads_sdk
multiscreen
NaCl
Native YouTube Player API
NRRN 사용 제한
Power Searching
product launch
SD 카드에 앱 설치
SecureKeyFactory
ux
webview
YouTube
YouTube Android Player API
YouTube API
YouTube API 3.0
YouTube API Update RSS Feed
광고
구글 HackFair
구글 Summer of Code
구글 개발자 사이트 홍보
구글 개발자 아카데미
구글 개발자 온라인 강좌
구글 검색
구글 고급 파워 서치
구글 드라이브 앱
구글 부트캠프
구글 아카데미
구글 코드인
구글 플러스 로그인
구글 핵페어
구글로 로그인하기
네이티브 클라이언트
데이드림
멀티 모바일
멀티 플랫폼
모바일 광고
수익화
스마트 브라우저
안드로이드
안드로이드 4.2
안드로이드 Back 버튼
안드로이드 Up 버튼
안드로이드 개인 정보 보호 정책
안드로이드 네비게이션
안드로이드 데이드림
안드로이드 디자인
안드로이드 방향탐색
안드로이드 보안
안드로이드 사용자 데이터
안드로이드 서버 백엔드
안드로이드 앱 품질
안드로이드 원격 제어
안드로이드 태블릿 디자인
안드로이드 현지화
안드로이드 화면 보호기
애드몹
애플리케이션 SD카드 설치
애플리케이션 개발 주민등록번호 사용 제한
애플리케이션 외부 저장 장치
앱 품질 체크리스트
오픈 소스
오픈소스 프로그램
웹 DMB
유튜브
유튜브 API
유튜브 API 3.0
유튜브 API 업데이트
유튜브 모바일
유튜브 안드로이드 플레이어 API
인앱 결제
인터넷상 주민등록번호 수집 이용 제한
주민등록번호 사용제한
추천이미지
출시
크롬브라우저
태블릿 디자인
태블릿용 앱
파워서치
한국 구글 개발자
한국 구글 개발자 사이트
핵심 앱 품질 가이드라인
핵심 태블릿 앱 품질 체크리스트
핵페어
핵페어 출품작
ブログ アーカイブ
2016
February
January
2015
December
November
October
September
August
July
June
May
April
March
February
January
2014
December
November
October
September
August
July
June
May
April
March
February
January
2013
December
November
October
September
August
July
June
May
April
March
February
January
2012
December
Google Code-in 2012 - 참가자수, 대한민국 8위!
Google Play에서 홍보 그래픽을 국가별로 현지화하세요.
간단하면서 더욱 강력해진 새로운 유튜브 Data API 출시!
GDE(Google Developers Expert) Summit 참가 후기
HackFair 출품작 소개 9탄! 언제 어디서든 우리는 개발한다, 구름 IDE
HackFair 출품작 소개 8탄!~ 멀티 플랫폼/모바일 환경의 약점을 극복한다, IRCT...
인앱 결제 (In-App Billing) 버전 3 출시!
HackFair 출품작 소개 7탄!~ 안드로이드 단말기를 PC로 제어한다, 리모트로이드~!
HackFair 출품작 소개 6탄!~ 웹에서 고화질 DMB를!!!, WebDMB!
HackFair 출품작 소개 5탄!~ 크롬 브라우저의 가능성을 열다, Cbox Console
HackFair 출품작 소개 4탄!~ 디지털 그림자 인형극
Google HackFair가 무사히 끝났습니다~
HackFair 출품작 소개 3탄!~ ash로 다양한 기기를 하나의 디바이스로 제어해 보세요!
HackFair 출품작 소개 2탄!~ 나만의 리듬 액션 게임 WimyLime!!
안드로이드로 구글 드라이브 앱 개발하기
HackFair 출품작 소개 1탄! - 스마트 브라우저
플레이 스토어(구 안드로이드 마켓) 추천 이미지 가이드라인
November
October
September
August
July
June
May
March
February
January
2011
December
November
Feed
No comments :
Post a Comment