트레블헌터 개발기획서

TRAVEL HUNTER
개발 기획서
Ver0.3
1Last Update: 2015-01-15
문서용도 2014년 2학기 SAGE 프로젝트 버전 Ver.0.3
문서이름 TRAVELHUNTER_UI기획서 최종 작성일 2014-11-22
열람자 팀원전체 작성자 이정희

Last Update: 2015-01-15 2
INDEX
0. Revision History
1. 게임개요
1.1. 기획의도
1.2. 게임소개
1.3. 게임목표
1.4. 전체 플로우 차트
2. 게임화면 및 시스템
2.1. 게임화면UI
2.2. 게임 시스템 정책 및 설계
2.3. 콤보 시스템 소개
2.4. 콤보 시스템 정의
2.5. 콤보 시스템 플로우 차트
3. 캐릭터 설정
3.1. 캐릭터 상태개요
3.2. 캐릭터 피격 판정영역
3.3. 캐릭터 HP설정
4. 몬스터 설정
4.1. 몬스터 종류
4.2. 몬스터 상태개요
5. 전체화면 설정
5.1. 전체화면 구성
5.2. 로고화면 설계
5.3. 메인화면 설계
5.4. 캐릭터선택화면
5.4.1. 캐릭터선택화면 설계
5.4.2. 캐릭터선택화면 프로세스
5.4.3. 그래픽작업 리스트
5.5. 스테이지선택화면
5.5.1. 스테이지선택화면 설계
5.5.2. 스테이지선택팝업 설계
5.6. 결과화면
5.6.1. 결과화면 설계
5.6.2. 랭크표시 기준표
5.6.3. 결과화면 프로세스

3
0. Revision History
버전 작성일 내용
Ver.0.1 2014-09.21 - 최초 기획서 작성
Ver.0.2 2014-11-22 - [5.7.3.랭크표시 기준표] 수정
Ver.0.3 2014-12-02 - 기획서 통합 작업
Last Update: 2014-11-21

1. 게임개요
1.1. 기획의도
- 리듬게임의 리듬과 액션게임의 액션을 살려 새로운 방식의 리듬액션게임을 기획자는 의도로 액션성을 살린 리듬게임 제작에 목표가 있다.
1.2. 게임소개
TRAVEL HUNTER
제목 TRAVEL HUNTER
장르 리듬액션
플랫폼 Android
타겟연령 15세~25세(스마트폰 리듬게임을 주로 즐기는 연령 층)
개발엔진 Cocos2d-X
개발인원 메인기획(1), 서브기획(2), 그래픽(3), 프로그래밍(1)
게임소개 고정 된 캐릭터에게 음악에 맞춰 다가오는 몬스터를 판정영역에 맞춰 액션으로 제거하는
리듬액션 게임이다.
1.3. 게임목표
- 스테이지 방식으로 해당 스테이지의 일정 몬스터를 제거하게 되면 클리어되며, 다음 스테이지(음악)를 보상받는다.

1. 게임개요
1.4. 전체 플로우차트

2.1. 게임화면 UI
1
2
3
4
6
5
7
8
번호 이름 설명 타입 사이즈 좌표 값
1 전체배경 스테이지의 전체 배경화면 Background W:1280, H:720 (0,0)
2 HP Bar 해당 캐릭터의 HP표시 바 Bar W:780, H:40 (150, 30)
3 Fever Bar 피버 게이지 Bar W:680: H40 (230, 100)
4 스코어 스코어 표시 String `YD2000` 12pt (224, 150)
5 Stop버튼 일시 정지 버튼으로 메뉴팝업을 출력 Button W:50, H:50 (1170,30)
6 콤보 몬스터 연속 제거 표시 Sting `YD2000` 12pt (1060, 160)
7 UP버튼 터치하면 캐릭터의 상단 공격실행 Button W:100, H:70 (30, 550)
8 Down버튼 터치하면 캐릭터의 하단 공격실행 Button W:100, H:70 (1060, 550)
9 캐릭터 캐릭터 배치 Img W:256, H:256 (120, 80)
- 좌표 값 기준점은 오른쪽 상단 (0,0) 이다.
9

1) 스테이지 시작
- 스테이지가 시작되면 Ready->Fight 이미지가 순차적으로 화면중앙에 출력된 후 사라지며, 스테이지에 따른 사운드가 출력되며 게임이 시작된다.
1sec 1sec
2) 몬스터 상/하단 출력
- 몬스터 배치도에 따라 몬스터가 왼쪽으로 출력되며, 몬스터 출력 선에 따라 상/하단으로 출력된다.
상단 몬스터 출력 선
하단 몬스터 출력 선

3) 몬스터 제거 및 판정영역
- 상/하단 몬스터가 1픽셀 이라도 판정영역에 걸치게 되었을 때 UP/DOWN버튼을 터치하면 제거된다.
4) 피버모드 전환
- 피버 게이지가 모두 차게되면 10초동안 피버모드로 전환되었다 10초가 지나면 원래 게임화면으로 전환된다. (*자세한 설명은 피버 시스템 참조)
5) 게임종료
- HP가 0이 되거나 음악이 종료되면 게임이 종료되고 결과팝업이 뜬다.
판
정
영
역
1 사이즈 = W:100 H:720, 좌표 값=(200, 0)

2.4. 콤보 시스템 정의
1) 콤보카운트 시작 및 화면출력
- 콤보카운트는 캐릭터가 몬스터를 연속으로 두 번 제거했을 때 화면에 출력되며 시작카운트 수는 2이다.
2) 몬스터 제거에 따라 올라가는 콤보카운트 수
- 몬스터를 한 마리 제거 할 때마다 1씩 올라간다.
3) 콤보카운트 숫자 색상 변환
- 콤보카운트 수 10부터 색상이 변경된다. (처음시작 노란색 -> 콤보카운트 10부터 빨간색)
4) 콤보카운트 종료
- 캐릭터가 몬스터를 한 마리라도 놓치게 되면 콤보카운트가 종료되며, 화면에 출력되지 않는다.
5) 콤보카운트 종료
- 캐릭터가 몬스터를 한 마리라도 놓치게 되면 콤보카운트가 종료되며, 화면에 출력되지 않는다.
6) 최대 콤보카운트 저장
- 최대 콤보카운트를 저장하여 추후 스테이지 클리어 시 화면에 출력할 수 있도록 한다.
2.3. 콤보 시스템 소개
- 몬스터를 연속으로 제거하면 콤보가 쌓이게 되고, 결과창에 최대 콤보를 표시하여 유저들에게 목표를 심어주자는 의도

Last Update: 2015-01-15 10
2.5. 콤보 시스템 플로우차트

Last Update: 2015-01-15 11
3. 캐릭터 설정
3.1. 캐릭터 상태개요
대기상태;
종료상태;
상단공격
상태
하단공격
상태
피격상태;
UP버튼 터치DOWN버튼 터치
모션종료모션종료
피
격
모
션
종
료
상태 설명 모션 시작조건 종료조건
대기상태 - 캐릭터 대기 시 상태 대기모션 행동 없음 공격, 피격
종료상태 - 게임종료 시 상태 대기모션 HP=0 or 음악종료 없음
상단공격 상태 - 상단공격 상태
- 상단공격 1,2 자동루프
상단공격1,2모션 UP버튼 터치 모션종료 및 피격
하단공격 상태 - 하단공격 상태
- 하단공격 1,2 자동루프
하단공격1,2모션 Down버튼 터치 모션종료 및 피격
피격상태 - 몬스터에게 피격 시의 상태 피격모션 몬스터에게 피격 모션종료

Last Update: 2015-01-15 12
3. 캐릭터 설정
- 모든 캐릭터의 HP는 100으로 몬스터에게 피격 시 마다 5씩 줄어든다.
- HP가 0이 되면 게임이 종료되고 결과팝업이 출력된다.
Total
HP= 100
5씩 감소
게임종료
결과팝업
출력
몬스터에게 피격 시
3.2. 캐릭터 피격 판정영역
3.3. 캐릭터 HP설정
W:600 H:400
- 몬스터가 해당 판정영역에 1px이라도 도달하게 되면 판정이 성립한다.

Last Update: 2015-01-15 13
4. 몬스터 설정
4.1. 몬스터 종류
종류 설명
상단 몬스터 - 상단으로 출력되는 몬스터
하단 몬스터 - 하단으로 출력되는 몬스터
4.2. 몬스터 상태개요
이동상태
피격상태
상태 설명 모션 시작조건 종료조건
이동상태 - 몬스터 이동상태 이동모션 캐릭터 출력 피격 및 판정영역
지남
캐릭터 공격 - 캐릭터 판정영역에 진입한 상태 사라짐 캐릭터 판정영역 진입 사라짐
피격상태 - 몬스터 피격상태 피격모션 캐릭터 피격 모션종료
제거상태 - 몬스터가 제거되어 사라지는 상태 사라짐 피격모션 후 사라짐
제거상태
캐릭터
공격

Last Update: 2015-01-15 14
5.1. 전체화면 구성
화면 설명
로고화면 - 프로젝트 로고 출력화면
메인화면 - 메인 타이틀 및 메인 배경 출력화면
캐릭터선택화면 - 캐릭터를 선택 가능한화면
스테이지선택화면 - 스테이지 선택이 가능한화면
게임화면 - 게임 플레이화면
결과화면 - 스테이지의 결과를 알려주는 화면
로고화면 메인화면
캐릭터
선택화면
스테이지
선택화면
게임화면 결과화면
다시하기(Button)
스테이지선택(Button)
Touch To Start(Button)

Last Update: 2015-01-15 15
5.2. 로고화면 설계
1
2
1 Logo_bg 로고화면 검은색 배경 Background W:1280, H:720 (0,0)
2 Logo_word 로고화면 문구 Img W:980, H:140 (150,280)
* 검은색의 배경
• 테두리와 빛 효과를 살려
문구제작

Last Update: 2015-01-15 16
5.3. 메인화면 설계
1 Main_bg 메인화면 배경 Background W:1280, H:720 (0,0)
2 Main_logo 게임제목(Text’TRAVEL HUNTER;) Img W:900, H:450 (185,40)
3 Main_start_button 스타트 버튼(Text`Touch To Start’)
깜빡이는 효과 지속
Button W:350, H:50 (470,580)
1
2
3
* 파란색 계열의 배경
• 뒤쪽에 불꽃 같은 효과를 넣어준다.
• 기울임꼴을 사용하여 문자를 기울임
• 문구 뒤쪽에는 음표를 넣어준다.

Last Update: 2015-01-15 17
• 용어설명
• 캐릭터선택화면 소개
- 플레이어가 플레이하고 싶은 캐릭터를 선택하는 화면이다.
용어 설명
캐릭터 얼굴
(버튼)
- 해당 버튼을 원 터치하면 해당 캐릭터의 정보(이름, 이미지, 스토리)를 출력한다.
- 해당 버튼을 더블 터치하면 캐릭터를 선택하고 스테이지 선택화면으로 이동한다.
캐릭터 이름
출력 창
- 캐릭터의 이름을 출력하는 창
캐릭터 스토리
출력 창
- 캐릭터의 스토리를 출력하는 창
캐릭터 이미지
출력 창
- 캐릭터의 이미지를 출력하는 창
5.5. 캐릭터선택화면

Last Update: 2015-01-15 18
5.4.1. 캐릭터선택화면 설계
번호 이름 설명
1 전체배경 - 배경화면을 출력한다.
2 캐릭터 이름 - 하단의 캐릭터 얼굴 버튼을 선택하면 해당 캐릭터의 이름을 출력한다.
3 캐릭터 이미지 - 하단의 캐릭터 얼굴 버튼을 선택하면 해당 캐릭터의 이미지를 출력한다.
4 스토리 이미지 - 하단의 캐릭터 얼굴 버튼을 선택하면 해당 캐릭터의 스토리 이미지를 출력한다.
5 캐릭터1 얼굴 버튼 - 버튼을 원 터치하면 활성화된다.
- 터치한 상태에서 한번 더 터치하면 캐릭터1이 선택되고 스테이지 선택화면으로 이동한다.
1 2
3 4
5

Last Update: 2015-01-15 19
2. 캐릭터 선택화면
5.4.1. 캐릭터 선택화면 설계
번호 이름 설명
- 터치한 상태에서 한번 더 터치하면 캐릭터2가 선택되고 스테이지 선택화면으로 이동한다.
- 터치한 상태에서 한번 더 터치하면 캐릭터3이 선택되고 스테이지 선택화면으로 이동한다.
6 7

Last Update: 2015-01-15 20
5.4.2. 캐릭터선택화면 프로세스
- 처음에 화면을 진입하면 캐릭터1의 정보만 출력하며, 하단 얼굴 이미지는 캐릭터1 얼굴만 활성화된다.
캐릭터
선택화면 출력
캐릭터1
얼굴버튼
캐릭터2
얼굴버튼
캐릭터3
얼굴버튼
버튼
원터치?
터치된 버튼
활성화 및
데이터 출력
버튼
더블터치?
캐릭터N
선택
스테이지
선택화면
이동
캐릭터
선택화면 종료
DATA: 캐릭터N
- 캐릭터N 이름
- 캐릭터N 스토리 이미지
- 캐릭터N 이미지
No
YESNo
YES

Last Update: 2015-01-15 21
번호 이름 설명 확장자 사이즈
1 C_select 캐릭터 선택화면 배경 Png W:1280, H:720
2 C1_name 캐릭터1 이름 Png W:300, H:50
3 C1_img 캐릭터1 이미지 Png W:500, H:500
4 C1_story 캐릭터1 스토리 Png W:500, H:450
5 C1_Select_button 캐릭터1 얼굴 버튼 Png W:300 , H:100
- 작업완료 후 프로젝트 N드라이브 UI 폴더에 C_select.zip으로 압축하여 업로드 함

Last Update: 2015-01-15 22
• 용어설명
• 스테이지 선택화면 소개
- 플레이어가 플레이하고 싶은 스테이지를 선택 가능한 화면으로 C이상의 등급을 받으면 다음 스테이지를 보상 받는다.
용어 설명
선택 영역 - 해당 영역에서만 스테이지 선택이 가능하다. * 자세한 설명은 [3.4. 스테이지 선택 방법]을 참조한다.
START (버튼) - 해당 버튼을 터치하면 선택한 스테이지를 시작한다.
BACK (버튼) - 해당 버튼을 터치하면 스테이지 선택화면으로 돌아간다.
5.5. 스테이지선택화면

Last Update: 2015-01-15 23
1
2
4
3
5 6 7
5.5.1. 스테이지선택화면 설계
1 StageN_Select_bg
(*N은 각스테이지 숫자)
스테이지 선택화면 배경(*각 스테이지 화면) Background W:1280, H:720 (0,0)
2 Stage_logo 스테이지 선택화면 로고 Img W:250, H:50 (20,20)
3 Stage_Select_arrow 스테이지 선택 화살표 Img W:50, H:40 (595,190)
4 Stage_Select_areea 스테이지 선택 영역 Img W:1280, H:250 (0,245)
5 StageN_Select_a 스테이지N 이미지 Img W:320 , H:180 (457,280)
6 StageN_Select_b 스테이지N 이미지 Img W:320 , H:180 (40,280)
7 StageN_Select_a 스테이지N 이미지 Img W:320 , H:180 (910,280)
* 각 스테이지 화면에 투명도를
조절한 검은색 배경 삽입
* 스테이지 선택영역은 투명도를
조절한 하얀색
* 이미지 하단에 스테이지 이름 삽입
스테이지 선택 이미지는 테두리를
사용하여 강조

Last Update: 2015-01-15 24
5.5.2. 스테이지선택팝업 설계
START Back
1
2 3
1 StageN_Select_c
스테이지 선택 팝업 이미지(*각 스테이지 화면) Img W:1280, H:720 (0,0)
2 Stage_start_button 스테이지 시작 버튼 Img W:200, H:70 (390,520)
3 Stage_back_button 스테이지 뒤로가기 버튼 Img W:200, H:70 (680,520)
1
* 각 스테이지 화면에 투명도를
조절한 검은색 배경 삽입
* 이미지 상단에 스테이지 이름 삽입

Last Update: 2015-01-15 25
5.5.3. 스테이지선택방법
Slid
- (3)번의 스테이지 선택영역에서 손가락으로 슬라이드하여 (1)번의 기준점에 스테이지 이미지를 위치시킨다.
- (1)번의 좌표 값은 (620,245)이다.
- 스테이지를 중앙에 위치 시키면 스테이지 이미지가 활성화 되며, 터치 가능 상태가 된다.
- 스테이지를 원 터치하면 스테이지 팝업이 출력되고, (3)번의 스타트 버튼을 터치하면 해당 스테이지의 게임이 시작된다.
- 스테이지 선택 영역에서만 슬라이드가 가능하다.
- 스테이지가 (2)번과 같이 닫힘 상태이면 스테이지 선택이 불가능하며 터치 시 아무 동작도 하지 않는다.
- (1)번의 화살표 중앙점에 위치시키지 않으면 터치가 불가능하다.
3.3. 스테이지 선택 예외처리
2
START Back
3
<스테이지 선택화면> <스테이지 선택 팝업>
3
1

Last Update: 2015-01-15 26
5.5.4. 스테이지선택화면 프로세스
스테이지N
중앙 위치
스테이지 선택
팝업 출력
START
(Button)
Back
(Button)
스테이지N
게임시작
스테이지N
활성화 이미지
출력
One Touch
스테이지
열림?
반응 없음
- 최초 진입 시 스테이지2 중앙 출력
- 스테이지는 처음 기준 N+1로 배치한다.
No
YES
스테이지 선택
Slide;
스테이지N
전체 배경 출력
결과 팝업 출력
결과 팝업 종료

Last Update: 2015-01-15 27
1 StageN_select_bg
스테이지 선택화면 배경(*각 스테이지 화면) Png W:1280, H:720
2 Stage_logo 스테이지 선택화면 로고 Png W:250, H:50
3 Stage_select_arrow 스테이지 선택 화살표 Png W:50, H:40
4 Stage_select_areea 스테이지 선택 영역 Png W:1280, H:250
5 Stage1_select_a 스테이지1 선택 전 이미지 Png W:320 , H:180
6 Stage1_select_b 스테이지1 선택 후 이미지 Png W:320 , H:180
7 Stage1_select_c 스테이지1 이미지(스테이지 선택 팝업) Png W:1280 , H:720
14 Stage_start_button 스테이지 시작 버튼 Png W:200 , H:70
15 Stage_back_button 스테이지 뒤로가기 버튼 Png W:200 , H:70
- 작업완료 후 프로젝트 N드라이브 UI 폴더에 Stage.zip으로 압축하여 업로드 함

Last Update: 2015-01-15 28
5.6. 결과화면
- 결과화면은 게임종료 후 팝업으로 출력되며 해당 스테이지의 플레이어 기록을 보여준다.
인 게임
플레이 종료
결과화면
팝업 출력
용어 설명
랭크(등급) - 랭크는 S~F까지 존재하며, 해당 스테이지의 몬스터 제거에 따라 랭크가 다르게 부여된다. * [5.4.랭
크표시 기준표] 참조
토탈 스코어 - 해당 스테이지에서 플레이어가 획득한 총 점수를 표시한다.
맥스 콤보 - 해당 스테이지에서 플레이어가 달성한 최대 콤보 수를 표시한다.
스테이지 선택
(버튼)
- 해당 버튼을 터치하면 스테이지 선택화면으로 이동한다.
다시하기
(버튼)
- 해당 버튼을 터치하면 해당 스테이지를 다시 플레이 한다.
• 용어설명
• 결과화면 소개

Last Update: 2015-01-15 29
1
2
3
4
5
6
7
9 10
8
1 Result_name Text`Result’ Img W:216, H:188 (39,3)
2 Result 결과 창 Img W:1280, H:720 (0,0)
3 Result_rank 랭크 문구 Img W:322, H:504 (195,157)
4 Result_rank_N(N은 등급) S-F까지 랭크 표시 구간 Img W:314, H:388 (198,212)
5 Result_ts 토탈 스코어 문구 Img W:229 , H:42 (780,110)
6 Result_ts_a 토탈 스코어 표시 창 Img W:453 , H:108 (668,165)
7 Result_mx 맥스 콤보 표시 문구 Img W:187 , H:42 (797,312)

Last Update: 2015-01-15 30
1
2
3
4
5
6
7
9 10
8
8 Result_mx_a 맥스 콤보 표시 창 Img W:453, H:108 (668,367)
9 Result_button1 스테이지 선택 메뉴 이동 버튼 Button W:120, H:100 (877,534)
10 Result_button2 다시 하기 버튼 Button W:120, H:100 (1042,534)

Last Update: 2015-01-15 31
5.6.2. 랭크표시 기준표
랭크 몬스터 제거
S 100%
A 90%~99%
B 70%~89%
C 50%~69%
D 0%~49%
F 캐릭터 HP=0
- 랭크표시는 각 스테이지의 몬스터 제거를 기준으로 하며 기준표는 아래와 같다.

Last Update: 2015-01-15 32
5.6.3. 결과화면 프로세스
- 인 게임 화면에서 HP가 0이 되거나 음악이 종료되면 해당 결과 팝업을 출력하며, 진행되던 게임은 멈춘다.
결과 팝업 출력
랭크 계산 및
출력
토탈 스코어
출력
맥스 콤보
출력
스테이지선택
(Button)
다시하기
(Button)
해당 스테이지
다시시작
스테이지 선택
메뉴 이동
결과 팝업 종료

Last Update: 2015-01-15 33
5.6.4. 그래픽 작업리스트
1 Result_name 결과 창 이름 Png W:216, H:188
2 Result 결과 창 Png W:1280, H:720
3 Result_rank 랭크 문구 Png W:322, H:504
4 Result_rank_N(N은 등급) S-F까지 랭크 표시 구간 Png W:314, H:388
5 Result_ts 토탈 스코어 문구 Png W:229 , H:42
6 Result_ts_a 토탈 스코어 표시 창 Png W:453 , H:108
7 Result_mx 맥스 콤보 표시 문구 Png W:187 , H:42
8 Result_mx_a 맥스 콤보 표시 창 Png W:453, H:108
9 Result_button1 스테이지 선택 메뉴 이동 버튼 Png W:120, H:100
10 Result_button2 다시 하기 버튼 Png W:120, H:100
- 작업완료 후 프로젝트 N드라이브 UI 폴더에 Result_popup.zip으로 압축하여 업로드 함

트레블헌터 개발기획서

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to 트레블헌터 개발기획서

Similar to 트레블헌터 개발기획서 (11)

트레블헌터 개발기획서