게임을 만들어 보자!

친구들과 내기할 때, 게임할 때 별로 할만한게 없었는데...
이제 친구들과 잠깐 재미있게 할 수 있는 게임을 직접 만들어 봅시다.
그 이름 바로 '카멜레온'
나타나는 카멜레온을 잡아 점수를 얻고, 보너스 시간도 받아 봅시다!!
그럼 시작합니다~

이 튜토리얼을 시작하기 전에

아래 사항을 꼭 준비하세요.

  • # 안드로이드 폰(앱인벤터로 만든 앱은 안드로이드 스마트폰에서만 작동합니다.)
  • # 스마트폰과 PC가 공유하는 WiFi 네트워크 또는
      스마트폰과 PC를 연결하는 케이블
  • #드림코드에서 제공하는 배포파일 (그림파일, 소리파일, 완성된 소스코드)
  • 혹시 처음이시라면! 앞의 intro를 좀 봐주시고요.

    • 준비 됐나요~? 그럼, 설명 시작합니다!ㅋㅋ

우리가 만들어볼 앱 미리보기

중독성 강한 카멜레온 게임! 30초 동안 숨어 다니는 카멜레온을 잡으면 점수가 올라가는 게임. 카멜레온 잡기 게임!

배울 수 있는 기능

이번 앱 만들기를 통해서 배울 수 있는 기능들은 다음과 같습니다. 우후훗!

  • #TextBox, Label, Button의 사용방법
  • #Clock을 사용한 시간 활용
  • #Canvas와 ImageSprite의 이해와 활용법
  • #Procedure(함수)의 이해와 활용법

프로젝트 만들기

Chameleon 프로젝트를 생성합니다.

스크린 추가하기

카멜레온 앱을 완성시키기 위해서 시작화면, 게임화면, 점수화면 총 3개의 스크린이 필요합니다.
홈페이지 상단에 Add Screen 버튼을 눌러 GameScreen과 ScoreScreen 이름의 새로운 스크린을 추가
시켜줍시다.

프로그램 작동 흐름

1~6강을 통해서 저희는 여러가지 앱을 만들어 보았습니다...
이번에는 카멜레온 앱을 만들기 위해서 무엇이 필요하고 프로그램이 어떻게 흘러갈지 스스로 한번 먼저
예측해 볼까요?!
(그러기 위해선 먼저 앱을 다운 받아서 한번 해 봐야겠죠?)
한 번 생각해 봤다면 우리 다 같이 간단하게 프로그램 작동흐름을 적어 봅시다!

카멜레온 앱은 친구들과 재미있게 내기 게임을 할 수 있는 게임입니다.

  1. 앱을 시작해서 3초 후 START버튼(StartButton)을 클릭하면 게임이 시작되고
  2. 30초 동안 두 마리 카멜레온이 일정한 시간 간격으로 돌아다닙니다.
  3. 잡으면 점수가 올라 가고 일정한 점수를 획득하면 게임시간이 추가 됩니다.
  4. 게임이 종료되면 총 획득한 점수를 보여주며 다시 시작 할 수 있는 버튼(AgainButton)이 나타납니다. AgainButton을 클릭하면 게임이 다시 시작됩니다.

시작화면(Screen1)은
1). 앱을 시작해서 3초 후에 START버튼(StartButton)을 띄우는 기능
2). START버튼을 누르면 GameScreen으로 넘어가는 기능이 필요합니다.
(clock 과 button이 필요할 것 같죠?)

게임화면(GameScreen)은
1). 카멜레온의 움직임 기능(랜덤으로 위치하는 기능, 일정 시간마다 위치를 바꾸는 기능)
(마찬가지로 Clock과 이번 강의에서 처음으로 사용하게 될 이미지를 띄우는 도화지 역할을 할 Canvas와
움직이는 카멜레온을 나타낼 수 있는 ImageSprite 기능이 필요해 보입니다. 처음 나오는 것이니 모른다고
좌절하지 마세요)
2). 카멜레온을 잡을 때마다 올라가는 점수 계산 기능, 30초 제한 시간 기능이 필요합니다.
(if문을 이용해서 만들 수 있을 것 같은 느낌이 들지 않나요?)

점수화면은
1) 획득한 점수를 띄우는 기능
2) Again버튼을 누르면 다시 GameScreen으로 넘어가는 기능이 있습니다.
(GameScreen에서 획득한 총 점수를 ScoreScreen으로 가져와 보여주는 기능과 Button이 필요해 보입니다.)

화면 구성요소 배치하기

이제 세 스크린화면에 디자인과 관계 없이 보이는 구성요소만 배치해보도록 하겠습니다.

게임 시작화면(Screen1)
- 게임 시작을 명령할 Button1
- 일정 시간이 지난 후 버튼을 띄우도록 시간을 체크하는 Clock1

게임화면(GameScreen)
시간이라는 단어이미지를 삽일할 Image1
시간을 표시할 Label1
점수라는 단어이미지를 삽입할 lmage2
점수를 표시할 Label2
게임의 시간을 정할 Clock1
카멜레온1(ImageSprite1)의 움직이는 시간을 정해줄 Clock2
카멜레온2(ImageSprite2)의 움직이는 시간을 정해줄 Clock3

게임 배경음악을 재생할 음악재생기 Player1
카멜레온을 잡을 때마다 나는 소리 Sound1
보너스 시간을 얻을 때 나는 소리 Sound2

게임이 진행될 Canvas1
터치하면 움직이는 ImageSprite1
터치하면 움직이는 ImageSprite2

점수화면(ScoreScreen)
총 획득한 점수를 보여줄 Label1
게임을 다시 시작 할 수 있는 Button1

Viewer와 Components 구역에 각각의 요소들이 배치되는 것을 확인할 수 있습니다.

배치한 구성요소(Components)들의 이름 바꾸기

게임 시작화면(Screen1)

게임화면(GameScreen)

점수화면(ScoreScreen)

사운드 업로드 및 시간 제한 설정하기

본격적으로 Blocks를 이용해 기능을 만들기 전에 필요한 사운드와 시간(Clock)설정을 하겠습니다.
배경음악 Player1 : GameMusic.mp3
카멜레온을 잡으면 나는 소리효과 CatchSound : catch.mp3
추가적인 시간을 받을 때 나는 소리 효과 BonusSound : Bonus.mp3

이제 Clock들의 시간을 설정해 보겠습니다. 앞선 6강에서 Clock의 기능을 다뤄 보았기 때문에 이번 시간에는 간단히 표로 나타내겠습니다.

이제 대략적인 디자인적 요소들을 완성 시켰습니다. 다음페이지에서 Blocks를 이용해 본격적으로 앱을
작동시키는 기능을 구현해 보도록 하겠습니다.

댓글