돈 넣고 돈 먹기(야바위) 모바일 게임 만들기 1

오늘은 Corona SDK 로 만든 돈 넣고 돈 먹기 게임을 공부해 보겠습니다.
예전에 장터에 가면 사발이 세개 있고 그 중 한개에 구슬이나 주사위를 넣은 다음 막 돌린 다음 그 주사위가 어디에 있는지 알아 맞추는 놀이가 있었죠?
야바위라고 어른들이 그러셨는데....

Carlos Yanez 라는 개발자가 이 야바위를 모바일 애플리케이션으로 개발 했습니다. Corona SDK로요.
그리고 그 소스를 공유했습니다.

제가 보기엔 아주 프로그램이 알차게 잘 돼 있는 것 같습니다.
이 소스코드를 분석하면 아주 공부가 잘 될 것 같습니다.
(그리고 이 야바위 게임이 전 세계적으로 있었나 보네요. 몰랐는데......)

아래 각 게임 화면들을 캡쳐 했습니다.

이걸 게임 개발 하기 전에 개발자가 받은 Story Board 라고 생각을 해 보죠.
아주 훌륭한 기획자라면 이렇게 디자인까지 다 된 스토리보드를 개발자에게 줄 거예요.
그런데 너무 그런거까지 기대하지 마세요. 디자인 까지는 안 되더라도 모바일 이미지 내 objects 배치해서 주는 기획자도 드물거예요.
그냥 볼펜으로 끄적인 스토리 보드만 줘도 감지덕지죠.
안 에 들어가는 Objects 들하고 있게 될 Event 들 하고 그 이벤트로 인해 진행되는 object 들의 behavior 만 잘 정리 되면 되죠 뭐.

하여간 아래 내용은 세계에서 최고로 개발자에게 편하게 기획하는 기획자가 만든 앱의 스토리보드라고 생각해 봐요 우리.

1. 첫 화면

Objects (객체들)

:  bg 배경이미지, title 게임 제목,  playBtn 플레이 버튼, creditsBtn 크레딧 버튼

Events/Behavior (이벤트)

: playBtn 누르면 현재화면 중 배경만 남고 모두 없어짐 -> 게임 화면으로 옮김

  현재 화면 객체들 왼쪽으로 slide 되면서 없어질 것

: creditsBtn 누르면 Credits를 보여 줌

  플레이와 크레디트 버튼 없어지고 크레디트 이미지가 왼쪽에서 slide 되면서 나옴

2. Credit 화면 (Credit 버튼 누르면 나옴)

Objects

: Credits 이미지

  나머지 bg와 title은 이전화면에서 없어지지 않고 그대로 있음

: Events/Behavior

  Credits 이미지를 클릭하면 이미지가 왼쪽으로 사라짐

  1번 화면이 다시 나옴

3. 게임 화면

objects

: bg 배경화면 그대로

: bank 왼쪽 상단 숫자, 처음엔 5자가 표시 됨

: bankText BANK 이미지

: ball

: s1/s2/s3 shell 3개

: buttonBar 밑에 진한 사각형

: msg 좌측 하단에 메세지, 처음에 Click Bet to start 가 표시 됨

: betBtn 게임 시작 버튼

Events/Behavior

betBtn 버튼에 tab 리스너를 담.

betBtn을 누르면

- Bank 숫자에서 -1을 함

- betBtn 리스너를 Remove 함

- msg 텍스트를 없앰

- 위로 올라간 shell 이 ball 을 덮음

- shell 을 총 5번 움직임. 움직임 속도는 600으로 함. 랜덤하게 움직임

4. Shell 이 다 움직이고 User 의 선택을 기다리는 화면, 선택한 후 화면

objects

: 게임 화면이므로 3번 게임화면과 똑 같음

Event/Behavior

: msg는 Click where the ball is 를 표시함

: 각 shell 에 리스너를 담

: 어떤 Shell 을 클릭해도 공이 있는 Shell이 올라감

: 공이 있는 Shell 을 클릭하면 bank+2를 해 줌, msg는 Correct! Click Bet to play again 을 표시해 줌

: 공이 없는 Shell 을 클릭하면 msg는 Wrong! Click Bet to play again을 해 줌

: betBtn 에 다시 리스너를 담,

: bank 가 0점이면 alert() 화면을 띄움

5. Game Over 화면 (Alert)

Objects
: alert 이미지
Event/Behavior
: msg는 표시 안 함
: alert 이미지에 리스너를 담
  클릭하면 게임을 재 시작 함


자 여기까지가 바로 세계에서 제일 훌륭한 기획자가 만든 스토리 보드 입니다.
기획에서 이정도만 해주면 개발자는 아주 편하겠죠?

이제 이 것을 토대로 Flow Chart 도 만들어 보고 Use Case 도 만들어보고 나름대로 함수(클래스) 설계도 해 보세요.

아마 그러면 실력향상에 아주 도움이 될 겁니다.

다음 시간엔 이 스토리 보드를 가지고 소스 코딩을 해 보겠습니다.