BLOG ARTICLE 브레이크아웃 | 1 ARTICLE FOUND

  1. 2008.07.13 5.2 [고급] 벽돌깨기 게임

이번 장에서는 고전 게임인 브레이크아웃과 유사한 벽돌깨기 게임을 만들어 보겠습니다. 처음 스테이지는 7개의 블록으로 이루어진 한줄로 시작되며, 스테이지가 증가될 수록 블록의 줄이 하나씩 늘어 나며 공의 속도가빨라 집니다. 총 4개의 스테이지로 되어 있으며 플레이어는 3번의 기회를 가집니다.

이번장에서는 이전과는 달리 블록의 모든 스프라이트를 생성하지 않고 Stamp를 이용하여 블록들을 출력할 것 입니다. 그렇기 때문에 공과 충돌한 블록의 삭제도 흰색 블록 스프라이트의 Stamp를 사용합니다. 그외 충돌 체크도 좌표방식이 아닌 색을 이용한 충돌 검사를 하고, 공의 진행도 Direction을 이용하여 결정합니다.

사용자 삽입 이미지

"여담이지만 '스티브 워즈니악'이란 책에서는 아타리의 잡스로 부터 의뢰를 받은 워즈니악이 블레이크아웃 게임을 4일만에 만들었다고 합니다. 잡스는 몇천달러를 받았지만 워즈니악에게는 700달러를 받았다고 거짓말을하고 그 반만 주었다고 하네요."

1. 변수 생성
게임에 필요한 아래의 변수들을 생성합니다.
  • BlockX - 파괴되는 블록의 X 위치 입니다.
  • BlockY - 파괴되는 블록의 Y 위칭 입니다.
  • Live - 플레이어의 남은 생명입니다.
  • Score - 현재 점수를 나타냅니다.
  • Speed - 공의 속도를 설정합니다.
  • Stage - 현재 스테이지 입니다. 1~4까지 스테이지가 있습니다.
  • State - 상태입니다. 0은 대기중 1은 게임중입니다.
  • resBlock - 남은 블록입니다. 남은 블록이 0이되면 다음 스테이지로 넘어 갑니다.

* Local 변수 생성
변수를 생성 할 때에는 입력창 아래에 'For all sprites'와 'For this sprite only'를 선택하는 버튼이 있습니다. 'For all sprites'는 모든 스프라이트에서 사용할 수 있는 변수이며, 'For this sprite only'는 현재 선택된 스프라이트에서만 사용할 수 있는 변수 입니다.
 
사용자 삽입 이미지

좌측의 resBlock은 모든 스프라이트에서 사용할 수 있는 변수이고, 그 밑의 idx는 현재 스프라이트에서만 사용할 수 있는 변수 입니다.

idx는 해당 스프라이트가 선택되었을 때에만 보여지며, 다른 변수들에 비해 색이 짙어 구분이 가능합니다. Block 스프라이트에서는 idx를 Ball 스프라이트에서는 isTouch 변수를 'For this sprite only'를 선택하여 생성합니다.




2. 스프라이트 생성
스프라이트에 사용된 이미지는 좌측의 파일을 다운로드 받고 압축을 푸신 후에 사용하시면 됩니다.

사용자 삽입 이미지

다운로드 받은 이미지로 위와 같이 스프라이트를 생성합니다. 이미지는 페인트 에디터로 직접 그리거나 기존의 다른 이미지를 사용하셔도 됩니다.

Blcok 스프라이트에는 block1을 기본으로 block2, block3, block4 이미지로 커스튬을 추가 합니다. bottom 스프라이트에는 bottom1을 기본으로 bottom2 커스튬을 추가합니다.

사용자 삽입 이미지
Button 스프라이트는 페인트 에디터를 사용하여 직접 그려서 추가합니다.

'Click to start'와 'End...' 커스튬을 추가합니다.







3. 블록 스크립트
1) 초기화
사용자 삽입 이미지
블록들은 실제 스프라이트가 아닌 Stamp로 복제된 이미지를 사용하기 때문에 스크립트가 시작되면 먼저 블록을 감춥니다.

점수(Score)를 0, 현재 스테이지(Stage)를 1, 플레이어 생명(Live)을 3, 현재 상태(State)를 대기(0)로 초기화합니다.

'initStage' 메시지를 발송하여 스테이지를 준비 하도록 합니다.



2) 스테이지 설정
사용자 삽입 이미지
[clear]
이전에 stamp로 찍어 놓은 이미지들을 삭제합니다.

[set Speed to [(3)+[[stage]*(0.8)]]]
공의 속도를 stage가 증가할 때 마다 기본속도(3)에서 0.8씩 증가 하도록 합니다.

[set resBlock to [(7)*[[stage]]]
블록의 수를 설정합니다. 스테이지가 증가 할 때마다 1줄(7개)씩 증가합니다.

[repeat [stage]]
stage만큼 반복하면서 블록을 생성합니다. idx는 반복될 때 마다 1씩 증가되며 한줄을 의미합니다.

[switch to cosutme [block#숫자]]
각 줄에 따라 블록의 이미지를 선택합니다.

[repeat (7)]
한줄에 7개의 블록을 생성합니다.

[stamp]
현재 커스튬의 이미지를 복사합니다. 복사한 후에 다음 블록을 생성하기 위해 우측으로 62만큼 이동합니다.

[change y by (-20)]
블록을 한줄 생성 후에 아래의 블록들을 출력하기 위해 Y 좌료를 20 감소 시킵니다.

블록 생성을 모두 끝내면 'Click to start' 버튼을 보여주도록 'waitPlay' 메시지를 발송합니다.
 



3) 다음 스테이지 처리
사용자 삽입 이미지
'nextGame' 메시지를 받으면 현재 스테이지를 1 증가 시키고 'initStage' 메시지를 발송해서 다음 스테이지를 위한 블록들을 준비하도록 합니다.




4. 공 스크립트
1) 초기화
사용자 삽입 이미지
시작되면 [go to front]로 스프라이트를 가장 앞쪽으로 가져다 놓습니다. 다른 스프라이트의 stamp로 복사된 이미지 보다 앞쪽으로 출력하기 위해서 입니다.

좌표를 초기화 하고 초기 진행방향을 150도로 설정합니다.

2) 게임 진행
사용자 삽입 이미지
게임이 진행중일 때(state=1) 실행되는 스크립트 입니다.

[if on edge, bounce]
벽면에 공이 맞으면 현재 진행되는 방향을 반대로 설정합니다.

[move [speed] steps]
공의 속도(speed)만큼 현재 설정된 각도(direction)로 진행합니다.

[set isTouch to (0)]
isTouch 변수를 0으로 초기화 합니다.

3) 충돌 체크
사용자 삽입 이미지
공과 블록과의 충돌을 체크하는 스크립트 입니다.

[if <touching color [#컬러]?>]
각 컬러의 블록들과 공이 충돌 하였는지 검사 합니다.

[set BlockY to (#열)]
충돌한 블록의 열 위치(BlockY)를 설정합니다.

[set isTouch to (1)]
충돌 여부 변수 'isTouch'를 1로 설정합니다.

[change Score By (#점수)]
각 열의 점수(10, 20, 30, 40)를 증가합니다.









4) 아웃 체크
사용자 삽입 이미지
하단과의 충돌을 검사합니다. 하단과 충돌하였을 경우에는 플레이어의 생명(Live)을 1 감소합니다.

만약 생명이 없다면(Live=0) 'endGame' 메시지를 발송하여 게임이 종료되었음을 알리고 스크립트를 중지합니다.










5) 충돌 처리
블록과 충돌되었을 경우(isTouch=1) 실행되는 스크립트 입니다.
사용자 삽입 이미지

[set BlockX to [round [[(188)+[[x position] - (7)]]/(62)]]]
충돌된 블록의 행을 구하여 BlockX에 설정합니다. 현재 행은 이전에 블록을 복사하는 공식을 역으로 활용하여 구합니다. 공의 중심값을 보정하기 위해서 현재 위치(x position)에서 7을 감소시킵니다.
 
[change resBlock by (-1)]
남은 블록의 수를 1 감소합니다. 남은 블록의 수가 0일 경우에는 'nextGame' 메시지를 발송하여 다른 스프라이트들이 다음 레벨을 준비할 수 있도록 합니다.

[if <touching[bar]?>]
공이 바와 충돌했을 경우에는 반사 되도록 'reflex' 메시지를 발송합니다.

6) 'reflex' 메시지 처리
사용자 삽입 이미지
공이 반사되야 함을 알리는 'reflex' 메시지를 수신하였을 경우에 실행됩니다.

[point in direction [(180)-[direction]]]
180에 현재 진행방향의 각도(direction)를 빼서 진행방향을 반대로 설정합니다.


[move [[speed]+(2)]steps]
reflex 메시지를 다시 받지 않기 위해 공을 진행방향으로 이동시킵니다.

7) 'nextGame' 메시지 처리
사용자 삽입 이미지
다음 스테이지를 알리는 'nextGame' 메시지를 받았을 경우에는 공의 좌표를 시작위치로 이동합니다.



5. 바 스크립트
사용자 삽입 이미지
바 스크립트는 간단합니다. 시작시에 초기 위치를 정하고 사용자가 왼쪽 방향키를 눌렀을 때는 x를 -10만큼 이동하고, 오른쪽 방향키일 경우에는 x를 10만큼 이동합니다.









6. 마킹 스크립트
1) 초기화
사용자 삽입 이미지
마킹은 흰색으로된 블록과 같은 크기의 스크립트로 파괴된 블록을 감추는 역활을 합니다. 시작되면 clear로 이전의 Stamp를 지웁니다.




2) 블록 지우기
사용자 삽입 이미지
공과 블록이 충돌했을 경우에는 블록을 지우기 위해 'markBlock' 메시지가 전송됩니다. 이 메시지르 받으면 지워야할 블록 위치로 이동한 후에 stamp로 이미지를 복사합니다.

7. 버튼 스크립트
1) 초기화
사용자 삽입 이미지
대기중인 'waitPlay' 메시지를 받으면 현재 게임 상태를 0으로 설정하고 "Click to start" 버튼을 출력합니다.




2) 게임종료
사용자 삽입 이미지
게임이 종료되었다는 'endGame' 메시지를 받으면 커스튬을 "End..."로 변경하여 출력합니다.




3) 클릭처리
사용자 삽입 이미지
게임이 대기중이고 버튼이 클릭되면 버튼을 감추고 state 변수를 게임중인 1로 설정합니다.


8. 하단 배경 스크립트

사용자 삽입 이미지
하단의 물결이 출렁이는 에니메이션을 보여주는 스크립트 입니다. 게임중(state=1)이면 1초 간격으로 bottom1과 bottom2 커스튬을 번갈아 가며 보여줍니다.







완료 되었습니다. 시작 버튼을 클릭한 후 좌우 방향키를 이용하여 게임을 테스트 해 봅니다. 전체 스크립트는 아래의 파일을 다운로드 받아서 확인해 보세요.

AND