한동안 관심을 두지 못했는데 스크래치1.3으로 업그레이드 되었습니다. 릴리즈노트의 생성일을 보니 9월 3일에 업그레이드된 것 같습니다. 가장 반가운 소식은 이전 버젼에 비해 다양한 언어들이 추가되었고, 여기에 한글도 포함이 되어 있습니다. 이로인해 아이들이 훨씬 쉽게 스크래치를 사용할 수 있을 것 같습니다.


또하나 큰 변화는 변수중에 List가 추가되었습니다. 이제는 많은 변수들이나 문자, 숫자 상수를 List를 사용하여 편리하게 관리할 수 있습니다.

그외 스크립트에 간단한 주석을 넣을 수 있는 기능과 변수들의 보이고 숨기는 명령어 블럭들이 추가되었습니다. 1.3 버젼에 대한 자세한 사항은 릴리즈노트를 참고하시기 바랍니다.
AND

이번 장에서는 범고래가 자신보다 작은 물고기들을 잡아 먹으면서 점점 성장함에 따라 더 큰 물고기를 잡아 먹는 게임을 만들어 보겠습니다. 이런 방식의 게임은 많이 있어서 아마 해 보셨을 것입니다. 스크래치의 예제에도 이와 유사한 게임이 있습니다.

게임 방법은 방향키를 이용하여 자신보다 크기가 작은 물고기들을 잡아 먹습니다. 큰 물고기와 충돌하면 Live가 감소되며 0 이하가 되면 게임이 종료 됩니다. 일정 점수 이상이 되면  레벨업이 되어 크기가 한단계 커지게 되며, Live가 다시 100으로 충전됩니다. 마지막의 상어 두마리를 잡으면 게임이 클리어 되며 종료됩니다.

게임중에는 아래의 3종류의 아이템이 나옵니다.

사용자 삽입 이미지
화면에 나와 있는 모든 물고기들이 사라지며, 해당 점수가 추가됩니다. 최종 보스인 상어는 영향이 없습니다.
사용자 삽입 이미지
물고기들이 잠시 정지해 있습니다. 역시 최종 보스인 상어는 영향이 없습니다.

사용자 삽입 이미지
보너스 점수가 500점 추가되며 Live가 100으로 올라갑니다.


자바 VM이 설치된 컴퓨터에서는 아래의 게임을 바로 실행해 보실 수 있습니다.

게임의 실행 화면은 아래와 같습니다.
사용자 삽입 이미지 사용자 삽입 이미지


1. 스프라이트 생성
1) 스프라이트
사용자 삽입 이미지


KillerWhale, fish1_1, fish2_1, fish3_1, fish4_1, Shark_1, item1, item2, item3, button, Message 스프라이트를 먼저 생성합니다.

그외의 물고기 스프라이트들은 위의 스크립트를 먼저 작성 후에 'duplicate'를 이용하여 복사해서 사용합니다. 각 물고기들의 복사되는 갯수로 난이도를 조절할 수 있습니다.

이미지와 추가 커스튬들은 좌측의 파일을 다운로드 받으셔서 사용하시면 됩니다.

2) 배경화면
사용자 삽입 이미지
좌측과 같이 처음 시작화면과 게임화면을 추가합니다.

사용된 이미지는 위의 압축 파일에 포함되어 있습니다.






2. 변수
  • Game - 0이면 대기중, 1이면 게임중을 나타냅니다.
  • Live - 플레이어의 생명입니다. 100부터 시작되며 0이면 게임이 종료됩니다.
  • Score - 점수 입니다. 점수에 따라 레벨이 올라 갑니다.
  • State - 현재 레벨 상태이며, 1부터 시작해 5까지 올라 갑니다.
  • addValue - 추가될 점수 또는 감소될 Live 값을 설정합니다.
  • isMove - 1이면 물고기들이 움직이고 0일 경우에는 움직이지 않습니다.
  • shark1 - 1로 설정되며 상어1이 죽으면 0으로 설정됩니다.
  • shark2 - 2로 설정되며 상어2가 죽으면 0으로 설정됩니다.

그 외 플레이어와 각 물고기들은 isLive란 지역변수를 가지고 있습니다. 이 변수는 자신의 상태를 나타내며 1이면 살아있음을 0이면 죽어있음을 의미합니다.


3. 배경 스크립트
1) 초기화
사용자 삽입 이미지
관련 변수들을 기본값인 0으로 설정 합니다. 이전의 효과를 초기화 하고 배경 그림을 'start'로 설정합니다.

그 후에 계속 반복해서 배경음인 'Bubbles'을 출력합니다.
 








2) 게임 시작
사용자 삽입 이미지
플레이어가 화면내의 START 버튼을 클릭하면 전달되는 'start' 메시지를 받았을 때 실행되는 스크립트 입니다.

게임에 필요한 각종 변수들을 초기화한 후에 배경을 게임 배경인 'back1'으로 변경합니다.

그 후에 다른 스프라이트들에게 게임이 시작되어 초기화되어야 함을 알리기 위해 'init' 메시지를 전달합니다.




3) 아이템 1 처리
사용자 삽입 이미지
사용자가 아이템 1을 먹었을 때 실행되는 메시지 입니다.

'isMove'를 0으로 하여 모든 물고기들의 움직임을 정지합니다. 그 후 'color 효과'를 이용하여 화면에 효과를 준 후에, 'item1a' 메시지를 전달합니다. 이 메시지는 화면의 모든 물고기들에게 자신이 소멸되어야 함을 알립니다.

그 후에 'isMove'를 1로 다시 설정하고 화면 효과를 위와 반대(-25)로 주어 원래의 화면으로 돌아 오도록 합니다.







4) 아이템 2 처리
사용자 삽입 이미지
사용자가 아이템 2를 먹었을 때 실행되는 메시지 입니다.

위와 같이 'isMove'를 0으로 하여 모든 물고기들의 움직임을 정지합니다. 그 후 'ghost 효과'로 배경을 변경하여 물고기들이 3초간 정지된 상태임을 플레이어가 알 수 있도록 합니다.

3초가 지난 후에는 'isMove'를 1로 설정하여 다시 물고기들이 움직이게 하고 화면을 이전으로 돌립니다.

5) 게임 종료
사용자 삽입 이미지
플레이어가 보스 상어 2마리를 모두 처리하였을 경우에는 'end' 메시지를 발송합니다. 그리고 Live가 1 보다 작을 경우에는  'close' 메시지를 발송합니다.

두 경우 모두 'Game' 변수를 0으로 설정하여 더이상 게임이 진행되지 않도록 합니다.






4. 플레이어 스크립트
1) 이동
사용자 삽입 이미지
게임이 시작되면 스프라이트를 감추고 게임 중(Game=1)일 경우에만 움직이도록 합니다.

각각의 키값을 검사해서 플레이어가 동시에 두키를 누르더라도 반응을 하도록 합니다.

좌우키를 누를 경우에는 이미지의 좌우를 변경하도록 각각 direction을 왼쪽(-90), 오른쪽(180)으로 설정합니다.

사용자 삽입 이미지
direction 변경시 이미지가 회전하지 않고 거울처럼 좌우가 바뀌도록 좌측과 같이 '<-->'로 회전을 설정합니다.










2) 초기화
사용자 삽입 이미지
게임 시작을 알리는 'init' 메시지를 수신할 때 실행되는 스크립트입니다.

현재 상태(State)를 1로 설정하고 범고래를 중간에 위치시킨 후에 출력합니다.



3) 충돌 처리
사용자 삽입 이미지
자신보다 더 큰 물고기와 충돌을 알리는 'touch' 메시지가 수신되었을 때 실행되는 스크립트 입니다.

효과음(ouch)를 출력하고 'addValue' 변수에 설정된 값만큼 Live를 감소 시킵니다. 'addValue' 값은 물고기들의 크기에 다릅니다. 충돌을 시각화 하기 위해 'color 효과'를 0.1초간 적용한 후 효과를 초기화 합니다.

'Live'의 감소로 인해 1보다 작을 경우에는 게임 종료를 알리는 'close' 메시지를 전송합니다.




4) Item3 처리
사용자 삽입 이미지
Item3을 획득했을 때 실행되는 스크립트 입니다. 점수를 500 증가하고 Live를 100으로 만듭니다. 그후에 점수 처리를 위해 'point' 메시지를 발송합니다.




5) 점수처리
사용자 삽입 이미지
점수(Score)가 변동되어야 함을 알리는 'point' 메시지를 수신했을 때 실행되는 스크립트 입니다.

'addValue' 만큼 점수를 증가 시킵니다. 'isChange' 변수는 로컬변수로 점수 변경 후에 플레이어의 레벨업 여부를 설정합니다.

간 단계(State)에 맞는 레벨이 점수가 되는지를 확인하 후에 조건에 맞으면 'isChange'를 1로 설정합니다.

레벨업이 되어야 하면 [next costume] 을 두번 실행하여 다음 커스튬으로 설정합니다. 두번 하는 이유는 같은 레벨에 일반 커스튬과 먹이를 먹는 커스튬, 2개의 커스튬이 있기 때문에 다음 커스튬으로 변경하기 위해서는 2번 [ndex costume]이 실행되어야 하기 때문입니다.

레벨업이 되면 현재 레벨(State)을 1 증가 시키고 Live를 100으로 설정합니다.






6) 에니메이션
사용자 삽입 이미지
먹은 물고기로 부터 'eat' 메시지를 수신하면 실행되는 스크립트 입니다.

효과음(WaterDrop)을 출력하고 각 단계를 검사하여 그에 맞는 커스튬을 출력합니다.

뒤에 'a'가 붙는 커스튬은 범고래가 입을 벌린 커스튬입니다. 입을 벌린 상태를 0.2초간 보여주고 원래의 커스튬으로 다시 설정합니다.

에니메이션 효과가 끝나면 'point' 메시지를 발송하여 점수를 처리하도록 합니다.

그 후에 shark1, shark2 변수가 0이 되었는지 검사 합니다. 각각 두마리 보스 상어의 상태를 나타내며, 둘 다 0이면 게임 종료를 알리기 위해 'end' 메시지를 전송합니다.

























5. 물고기 스크립트
모든 물고기 스크립트는 점수, 공격력, 생성조건등을 제외하고는 거의 동일합니다. 이곳에서는 fish2_1의 두번째로 작은 물고기의 스크립트만 예를 들어 설명하겠습니다. 각각의 물고기 스크립트들의 차이점은 아래의 소스를 다운로드 받아 확인하시기를 바랍니다.

그리고 'duplicate'를 이용한 복사만으로 물고기를 추가 할 수 있도록 생성에 관련된 스크립트도 물고기의 스프라이트에 포함합니다.

1) 초기화
사용자 삽입 이미지
게임이 시작되면 스프라이트를 숨기고, 'isLive' 변수를 0으로 설정합니다.




2) 메인 스크립트
게인 중(Game=1)일 때만 실행되는 스크립트 입니다. 'isLive' 변수가 1로 살아 있을 경우에는 이동하면서 범고래와 충돌했는지를 검사합니다. 살아 있지 않고 생성 조건에 일치 한다면, 위치를 설정하고 'isLive'를 1로 설정하여 물고기가 화면에 출력되도록 합니다. 

물고기가 범고래와 충돌하였을 경우에는 범고래의 현재 레벨(state)를 확인하여 잡아 먹힐지 범고래의 생명을 줄일지 여부를 검사합니다. 잡아 먹힐 경우에는 'eat' 메시지를 피해를 줄 경우에는 'touch' 메시지를 발송합니다.

사용자 삽입 이미지

[if <<[isMove]=(1)> and <[pick random(1) to (200)]=(1)>>]
물고기의 'isLive'가 0일 경우에는 위의 조건에 일치하면 물고기가 출현하도록 합니다. pick random에서 200으로 설정된 값을 크게 하면 물고기가 출현하는 횟수가 줄어 듭니다. 이를 변경하여 게임의 난이도를 조절할 수 있습니다.

[point in direction [pick random(-180) to (90)]]
물고기가 왼쪽에서 나타날지 오른쪽에서 나타날지 무작위로 선택하게 합니다.

3) 아이템 1 처리
사용자 삽입 이미지
플레이어가 아이템 1을 획득하여 모든 물고기가 죽어야 할 경우에 발송되는 'item1a' 메시지를 처리합니다. 'item1' 메시지는 배경 스크립트에서 처리한 후에 'item1a' 메시지가 발송됩니다.

'addValue'를 10으로 설정한 후, 'point' 메시지를 전송하여 점수가 10 증가 되도록 합니다.

'isLive'를 0으로 죽은 상태로 설정한 후에 'ghost 효과'를 10회 반복한 후에 스프라이트를 숨깁니다.




6. 아이템 스크립트
아이템도 3개의 종류가 있지만 플레이어와 충돌시에 전달하는 메시지의 종류를 제외하고는 기본적으로 서로 같습니다. 이곳에서는 item1에 대해서만 설명하겠습니다. item1의 스크립트를 완성하고 'duplicate'로 복사를 한 후에 커스튬의 이미지를 각 아이콘에 맞는 것으로 교체합니다.

1) 초기화
사용자 삽입 이미지
게임이 시작되어 'init' 메시지를 수신하면 스프라이트를 숨기고 'isLive'를 0으로 설정합니다.




2) 이동
생성 및 이동은 기존 물고기 스크립트와 유사합니다. 플레이어와 충돌하였을 경우에는 각각의 아이템에 맞는 메시지(item1, item2, item3)를 발송합니다.

사용자 삽입 이미지

[if <[pick random (1) to (3000) = (1)>]
아이템이 생성 여부를 결정합니다. pick random에 설정된 3000의 값을 줄이면 아이템이 자주 나오고 증가할수록 드물게 나옵니다.

[if <[pick random (1) to (2) = (1)>]
아이템이 왼쪽에서 나올지(1) 오른쪽에서 나올지(2) 결정합니다.


7. 버튼 스크립트

1) 효과처리
사용자 삽입 이미지
시작되면 show로 버튼을 출력합니다. 사용자가 버튼위로 마우스를 가져갈 때에는 'color 효과'가 적용되도록 합니다.










2) 클릭 처리
사용자 삽입 이미지
사용자가 버튼을 클릭하면 버튼 스프라이트를 감추고 'start' 메시지를 보내 게임시작을 알립니다.





3) 버튼 보이기
사용자 삽입 이미지
'close'나 'end' 메시지 수신으로 게임이 종료되었을 때는 플레이어가 다시 시작할 수 있도록 버튼을 출력합니다.







8. 메시지 스크립트

1) 메시지 출력
사용자 삽입 이미지
'close'로 플레이어의 생명이 종료되어 끝났을 경우에는 'game over' 커스튬을 출력합니다.

'end'로 사용자가 게임을 완료하여 끝났을 경우에는 'clear' 커스튬을 출력합니다. 






2) 게임 시작
사용자 삽입 이미지
스크래치가 시작되거나 게임이 시작되었을 경우에는 메시지 스크립트를 감춥니다.








모든 스프라이트의 스크립트는 아래의 파일을 다운로드 받아서 확인해 보세요.


AND

이번 장에서는 고전 게임인 브레이크아웃과 유사한 벽돌깨기 게임을 만들어 보겠습니다. 처음 스테이지는 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

이번 장에서는 마우스를 이용해 원반을 조준하여 맞추는 클레이 사격 게임을 만들어 보겠습니다. 게임 시작, 게임, 게임종료 화면을 추가하고 각각 시작과 다시시작 버튼을 클릭하여 게임을 시작할 수 있습니다. 5 스테이지까지 나오는 원반을 마우스를 조준하고 클릭하여 최대한 많이 맞추는 게임입니다.

사용자 삽입 이미지

1. 변수 생성
Variables에서 make a variable 버튼을 클릭하여 아래와 같은 변수들을 생성합니다.

  • gameStep - 0은, 12는 게임중, 2는 게임 종료 상태를 의미합니다.
  • stage - 1부터 5까지 현재 스테이지를 나타냅니다.
  • point - 플레이어가 맞춘 원반 수입니다.
  • count - 현재까지 발사 된 원반 수입니다.
  • thick - 프레임 카운터 입니다.
  • targetLive1 - 원반1의 상태이며 0은 대기, 1은 발사 중, -값은 파괴중입니다.
  • targetLive2 - 원반2의 상태입니다.
  • targetLive3 - 원반3의 상태입니다.
  • targetLive4 - 원반4의 상태입니다.
  • targetLive5 - 원반5의 상태입니다.
  • targetLive6 - 원반6의 상태입니다.

사용자 삽입 이미지
플레이어에게는 state와 point만 보여줍니다. 두 변수를 제외하고 나머지 변수의 출력선택의 체크를 해제합니다.


2. 스프라이트 생성
1) 커스튬 등록
좌측의 압축된 이미지 파일을 다운로드 받으신 후에 아래와 같이 스프라이트를 등록합니다. 

사용자 삽입 이미지

배경 이미지는 좌측과 같이 open, close, bg 세개의 이미지를 추가합니다. 원반 스프라이트들(sprite4~sprite9)은 우측과 같이 t1(t2, t3)의 깨지는 원반이 커스튬을 추가합니다.

사용자 삽입 이미지

2) 배경음/효과음 설정
사용자 삽입 이미지
배경의 Sounds 탭을 클릭하여 아래와 같이 대기, 게임, 종료 화면에서 배경음악으로 사용될 음악 파일을 등록합니다.

여기서 사용된 배경음악은 스크래치가 있는 폴더의 Media/Sounds/Music Loops에 있는 음악파일을 사용했습니다.

각자 취향에 맞는 음악 파일을 넣으셔도 됩니다.





접시가 깨질 때 사용되는 효과음은 스크래치에서 스프라이트 생성시 기본으로 등록되는 pop 사운드를 사용합니다. 다른 효과음을 원할 경우에는 하드디스크에 있는 음악 파일을 등록(Import)하거나 새로 녹음(Record)하여 사용하실 수 있습니다.

3. 배경화면 스크립트
1) 게임 초기화
사용자 삽입 이미지
플레이어가 '시작' 또는 '다시시작' 버튼을 클릭하였을 때 발생되는 'initGame' 메시지에 응답하는 스크립트 입니다.

각종 필요한 변수들을 초기화하고 배경음을 중단합니다. 그리고 현재 배경 이미지를 게임실행 화면(bg)으로 변경합니다.





2) 게임 종료
사용자 삽입 이미지
5 스테이지가 끝나고 게임이 완료되었을 경우 발생되는 closeGame 메시지에 응답하는 스크립트 입니다.

배경 이미지를 게임종료(close) 이미지로 변경하고 배경음을 중단합니다.

3) 배경음 출력
사용자 삽입 이미지
사용자가 시작버튼을 클릭하면 실행되는 스크립트 입니다. gameStep을 0(대기화면)으로 설정하고 이전에 플레이되는 배경음이 있다면 중지합니다. 그리고 배경 이미지를 게임대기(open) 이미지로 변경합니다.

forever내부의 스크립트는 무한루프로 반복되면서 각각의 gameStep에 맞는 배경음을 출력합니다.

* jungle - 게임중(gameStep=1) 배경음악
* Xylo1 - 게임종료(gameStep=2) 배경음악
* Cave - 게임대기(gameStep=0) 배경음악







4) 게임 제어
게임 진행 시(gameStep=1)에 실행되는 스크립트들입니다. 무한루프를 반복하면서 thick을 1씩 증가시킵니다.

사용자 삽입 이미지

[if <[[thick] mod [(10) + [[(5) - [stage]]*(3)]]]=(0)>]
원반이 발사될 시점을 검사하는 스크립트 입니다.

  • thick mod (식): 증가되는 thick과 (식) 값의 나머지를 구해 그 값이 0일 경우에만 원반을 발사 합니다. (식) 값이 작을 수록 원반이 자주 나타납니다.
  • 10+(5-stage)*3: stage는 1 부터 시작되며 1씩 증가됩니다. 1 스테이지에서는 22의 값을 가지며 점점 감소되어 최종 5 스테이지에서는 13의 값을 갖습니다.

사용자 삽입 이미지
좌측은 위의 스크립트에서 원반을 발사하는 검사가 참(1)일 경우에 실행되는 스크립트입니다.

이 스크립트는 6개의 원반들의 상태를 검사하여 현재 발사되지 않은 원반(targetLive#번호 == 0)이 있으면 initTarget#번호 메시지를 보내 해당 원반이 발사되도록 합니다.

원반이 발사되었을 경우에는 현재 발사된 원반수를 나타내는 count 값을 1 증가 시킵니다.






















사용자 삽입 이미지
현재 발사된 원반 수를 검사하여 스테이지를 증가 시키거나 게임의 종료를 검사하는 스크립트 입니다.

발사된 원반수에 따라 아래와 같이 설정합니다.

* 11~25: 2 스테이지로 설정
* 26~45: 3 스테이지로 설정
* 46~70: 4 스테이지로 설정
* 71~100: 5 스테이지로 설정
* 100이상: 게임 종료(gameStep=2)














4. 표적 스크립트
표적은 게임 진행중에만 출력됩니다. 현재 마우스의 위치를 따라 이동하며, 플레이어가 마우스 버튼을 클릭하였을 경우에 원반들과 충돌을 검사합니다.

사용자 삽입 이미지
게임시작(initGame) 메시지를 받았을 경우에는 show로 표적을 출력합니다. 게임종료 메시지(closeGame)를 받았을 경우에는 hide로 표적을 출력하지 않습니다.





게임이 시작되면 아래의 스크립트가 실행됩니다.

[go to [mouse-pointer]]
사용자의 마우스 포인터의 움직임에 따라 표적을 이동합니다.

[if <mouse down?>]
마우스가 클릭되면 표적의 위치가 해당 원반과 충돌하고 원반이 발사되었을 경우(targetLive#번호=1)에는 해당 원반에게 격추되었다는 hitTarget#번호 메시지를 발송합니다.

사용자 삽입 이미지

5. 원반 스크립트
원반 스프라이트는 3가지 각도로 이동하며 좌측, 우측에서 나타나는 총 6개의 종류가 있습니다. 원반의 위치와 이동경로를 제외하고는 대부분 동일하기 때문에 여기서는 하나의 스크립트만 설명하겠습니다. (각각의 구현 예는 아래의 소스를 다운 받아 스크래치에서 직접 확인해 주세요)

사용자 삽입 이미지
게임 초기화 메시지를 받았을 경우에는 해당 원반을 숨기고 'targetLive#번호' 변수를 발사 대기중임을 나타내는 0으로 설정합니다.



사용자 삽입 이미지
원반이 격추당했을 경우에 발생되는 메시지(hitTarget#번호)를 받았을 경우에 실행되는 스크립트 입니다.

효과음(pop)을 출력하고 'targetLive#번호' 변수를 파괴중임을 나타내는 -1로 설정합니다. 그리고 점수(point)를 1증가합니다.


사용자 삽입 이미지
발사 준비 메시지(intTarget#번호)를 받았을 경우에 실행되는 스크립트 입니다.

'targetLive#번호' 변수를 발사중(1)로 설정하고 출발위치를 설정합니다. (출발 위치는 원반 종류에 따라 조금씩 차이가 있습니다)

'target#번호' 로 커스튬을 원반 기본 이미지로 설정합니다. 원반 파괴 효과를 위해 설정된 효과(effects)를 초기화한 후에 원반을 보이도록 합니다.

다음은 실제 원반을 움직이는 스크립트입니다.
사용자 삽입 이미지

[change x by [(2)+[[stage] * (0.3)]]
[change y by [(1)+[[stage] * (0.3)]]
발사 중(targetLive#번호=1)일 때aㅏㄴ 원반을 이동합니다. 원반을 이동시키는 방법은 각각의 원반에 따라 조금씩 틀립니다. 이 스크립트의 원반은 x 축으로 2 이동할 때 y 축으로는 1 이동합니다. stage * 0.3으로 스테이지가 증가함에 따라 원반의 이동속도가 증가되도록 합니다.

[change taregetLive#번호 by (-1)]
폭파중일 때(targetLive#번호<0)는 targetLive#번호를 -1씩 감소 시킵니다. -30이 되면 사라집니다.

[switch to costume [t1]]
'targetLive#번호'가 -3 보다 큰 3 프레임 동안에는 파괴된 이미지로 변경합니다. 그 후에는 -30이 될 때까지 [change [ghost] effect by (25)]로 파괴된 이미지가 서서히 사라지는 효과가 나타나게 합니다.

[if <<<[x position] > (265)> or <[y position] > (180)>> or <[targetLive#번호] < (-30)>>]
x, y가 화면의 범위를 벗어 났거나 'targetLive#번호'가 -30이 넘어 30 프레임 동안 원반이 파괴되는 효과를 보여 주었으면 'targetLive#번호'를 0으로 대기상태로 만들고 hide로 원반을 출력하지 않습니다.

6. 버튼 스크립트
1) 시작 버튼
사용자 삽입 이미지
시작 시에는 show로  버튼을 보여 줍니다.

현재 게임상태가 대기(gameStep=0)이고 버튼 이미지가 클릭되면 gameStep을 1(게임 모드)로 설정하고 initGame 메시지를 발송한 다음 버튼 이미지를 감춥니다.






2) 다시시작 버튼
사용자 삽입 이미지
게임이 종료되었음을 알리는 closeGame 메시지를 받았을 때에 show로 버튼을 출력합니다.


사용자 삽입 이미지
시작 시에는 hide로 보여 주지 않습니다.

현재 게임상태가 종료(gameStep=2)이고 버튼 이미지가 클릭되면 gameStep을 1(게임 모드)로 설정하고 initGame 메시지를 발송한 다음 버튼 이미지를 감춥니다.






이상으로 게임을 완성하였습니다. 시작버튼을 클릭하여 스크립트를 실행합니다. 초기 화면에서 '시작' 버튼을 클릭하면 게임이 시작됩니다. 5 스테이지까지 100개의 원반이 발사되면 게임이 종료됩니다. '다시 시작' 버튼을 클릭하여 게임을 다시 시작할 수 있습니다.

전체 구조와 스크립트는 아래의 파일을 다운로드 받으셔서 확인해 보세요

'프로그래밍 강좌 > 스크래치' 카테고리의 다른 글

5.3 [고급] 범고래 봉봉 게임  (10) 2008.07.18
5.2 [고급] 벽돌깨기 게임  (0) 2008.07.13
4.7 [중급] 묵찌빠 게임  (0) 2008.06.16
4.6 [중급] 카드 맞추기  (0) 2008.06.11
4.5 [중급] 숫자야구 게임  (0) 2008.05.20
AND

이번 장에서는 묵찌빠 게임을 만들어 보겠습니다. 가위바위보를 하는 시점이 사용자가 키를 누르는 시점이라는 것만 제외하면 게임규칙은 우리가 흔히 하는 묵찌빠 게임과 같습니다. 사용되는 키는 키보드 좌측 하단의 z(묵), x(찌), c(빠) 입니다.


사용자 삽입 이미지


1. 변수 생성
Variables의 [Make a variable]을 클릭하여 아래의 변수들을 생성합니다.
  • state - 게임 상태입니다. 0은 가위바위보로 공격을 정하는 상태고 1은 사용자가 공격중인 상태, 2는 컴퓨터가 공격중인 상태입니다.
  • computer - 컴퓨터가 이긴 횟수입니다.
  • player - 사용자가 이긴 횟수입니다.
  • computerChoice - 현재 컴퓨터가 선택한 값(묵:1, 찌:2, 빠:3)입니다.
  • playerChoice - 현재 사용자가 선택한 값입니다.
  • winner - 승자를 나타내며 1은 사용자가 이겼을 경우, 2는 컴퓨터가 이겼을 경우입니다.

2. 스프라이트

1) 스프라이트 생성
이번장에서 사용하는 스프라이트는 4가지 입니다. Sprite1은 사용자 이미지, Sprite2는 컴퓨터 이미지, Sprite3은 현재 공격 차례를 나타내는 화살표이며 Sprite4는 각종 안내 문구를 출력합니다. 

사용자 삽입 이미지

Sprite1과 Sprite2는 '바위' 이미지외에 '가위', '보' 커스튬을 추가합니다. 좌측은 Sprite1, 우측은 Sprite2입니다.
사용자 삽입 이미지

Sprite4에도 s1, s2 이미지를 커스튬에 추가합니다. 아래의 압축파일을 다운로드 받아서 사용하시면 됩니다.

2) 효과음 생성
* 효과음을 녹음 할려면 헤드셋 또는 웹켐과 같이 마이크가 연결되어 있어야 합니다. 없으신 분들은 다음 장으로 바로 넘어 갑니다.

사용자 삽입 이미지
공격시 '묵, 찌, 빠'의 효과음 출력을 위해 Sprite1에서 Sounds 탭을 선택한 후에 녹음을을 위해 [Record] 버튼을 클릭합니다.


아래와 같이 녹음창이 뜨면 붉은색 녹음 버튼을 클릭한 후 '묵'을 녹음 하고 OK 버튼을 눌러 저장합니다. 같은 방법으로 '찌', '빠'도 추가하며 각각의 이름을 'muk', 'ji', 'pa'로 변경합니다.
사용자 삽입 이미지


사용자 삽입 이미지
Sprite1의 Sounds 탭에 좌측과 같이 녹음된 음성들이 저장 되어 있음을 확인합니다.

Sprite2에도 같은 방법으로 효과음을 추가합니다. 컴퓨터에서 사용하는 목소리기 때문에 Sprite1과 다른 목소리로 녹음하시는 것이 좋습니다.








3. 사용자(Sprite1) 스크립트
1) 초기화
사용자 삽입 이미지

게임이 시작되면 initPlayer 메시지를 발송하고 player, computer의 점수를 0으로 설정합니다.

initPlayer 메시지를 받으면 현재의 커스튬을 묵(bw)으로 설정한 후에 winner, state 변수를 0으로 설정합니다.

2) 입력 처리
사용자 삽입 이미지
사용자 입력을 처리하는 스크립트 입니다. z는 묵, x는 찌, c는 빠를 선택한 경우입니다.

[if <[state]=(1)>]
현재 상태가 사용자가 공격일 경우에만 사용자의 입력에 따라 '묵', '찌', '빠' 음성을 출력합니다.

[set playerChoice to (값)]
사용자의 선택을 저장합니다. 값은 묵은 1, 찌는 2, 빠는 3입니다.

[swtich to costume [custume]]
사용자가 선택한 값에 따라 커스튬을 변경합니다.

[broadcast [setComputer] and wait]
컴퓨터의 처리를 위해 setComputer 메시지를 발송합니다.














4. 컴퓨터(Sprite2) 스크립트
1) 초기화
사용자 삽입 이미지
시작시에는 기본으로 묵(bw2) 커스튬을 출력합니다.




2) 컴퓨터 순서 처리
사용자 삽입 이미지

[set computerChoice [ping random (1) to (3)]]
1에서 3까지 임의의 수를 선택합니다.

[if <[computerChoice]=(값)>]
선택된 값을 묵(1), 찌(2), 빠(3)인지 검사합니다.

[swtich to costume [custume]]
선택된 값에 따라 커스튬을 출력합니다.

[if <[state]=(2)>]
state가 2인 컴퓨터의 공격순서일 경우에는 효과음을 출력합니다.

[broadcast [decision] and wait]
사용자 입력과 컴퓨터의 선택된 값에 따른 처리를 위해 decision 메시지를 발송합니다.

3) 승부 처리
사용자 삽입 이미지

[if <<[playerChoice]-[computerChoice]>=(0)>]
사용자와 컴퓨터가 같은 선택을 하였는지를 검사합니다.

[if <not <[state]=(1)>>]
state가 0이 아닐 경우, 즉 공격우선권을 위해 가위바위보를 하는 경우가 아닐 경우를 의미합니다. 같은 선택을 하였기 때문에 사용자가 공격중일 경우(state=1)에는 plyaer 우승횟수를 1 증가하고 winner를 1(사용자)로 설정합니다. 컴퓨터가 공격중일 경우에는 computer 우승횟수를 1 증가하고 winner를 2(컴퓨터)로 설정합니다.

[broadcast [showMessage] and wait]
결과 출력을 위해 showMessage 메시지를 발송합니다.

[broadcast [initPlayer] and wait]
[swtich to costume [bw2]]
다시 게임을 시작하기 위하여 initPlayer 메시지를 발송하고 커스툼을 '주먹'으로 변경합니다.

playerChoice-computerChoice가 -1 또는 2일 경우에는 사용자가 이긴 경우입니다. 이때는 [set state to (1)]로 사용자에게 공격권을 설정하고, 아니면 컴퓨터에게 공격권(state=2)을 설정합니다.

[broadcast [setArrow] and wait]
화살표 아이콘이 현재 공격권을 가지고 있는 쪽에 출력되도록 합니다.

[broadcast [showMessage] and wait]
안내문 출력을 위해 showMessage 메시지를 발송합니다.

5. 화살표 스프라이트
사용자 삽입 이미지
시작되면 아이콘을 숨기고 Y위치를 40으로 설정한 후 무한반복 되면서 아래, 위로 0.2초의 간격을 두고 움직입니다.

사용자에게 공격권이 있을 경우(state=1)에는 X 위치를 사용자 쪽으로 이동(-177)하고 출력합니다. 컴퓨터에게 공격권이 있을 경우(state=2)에는 컴퓨터 쪽으로 이동(00)하고 출력합니다. 그외 공격권을 위해 가위바위보 중(state=0)일때는 아이콘을 숨깁니다.


6. 메시지 스프라이트
1) 초기화
사용자 삽입 이미지
초기 커스튬을 s0으로 설정합니다. s0은 "가위, 바위, 보"란 커스튬을 출력합니다.



2) 메시지 출력
사용자 삽입 이미지
showMessage를 처리하는 스크립트 입니다. state가 0일 경우(공격권 선택중)일 때는 "가위, 바위, 보"란 메시지를 출력합니다.

누군가 공격중일 때는 사용자가 이겼을 경우(winner=1)에는 s1 커스튬(플레이어 승!!)을 출력하고, 컴퓨터가 이겼을 경우에는 s2 커스튬(컴퓨터 승!!)을 출력합니다.

[wait (3) secs]
[hide]
메시지를 3초간 출력하고 감춥니다.















이제 완료하였습니다. 시작버튼을 클릭하여 플레이 해 봅니다. 처음엔 z, x, c로 가위바위보를 하여 공격권자를 선택합니다. 사용자는 공격시에도 방어시에도 z, x, c중 하나를 선택하여 키보드로 입력하여야만 게임이 계속 진행됩니다.

전체소스는 아래의 파일을 다운로드 받아 확인해 보시기 바랍니다.
AND

이번장에서는 카드를 알아 맞추는 게임을 만들어 보겠습니다. 좌측 상단에 나와 있는 카드 중 가장 오른쪽에 나와 있는 모양을 아래에 뒤집혀진 4개의 카드 중에 찾아 내는 게임입니다. 예상되는 위치의 카드를 클릭하면 정답일 경우에는 다음 카드로 넘어 가고 틀렸을 경우에는 1초간 카드를 보여준 후 다시 게임이 진행됩니다. 3번의 기회가 있습니다. 

사용자 삽입 이미지

1. 변수 만들기
Varaiables의 [Make a variable] 버튼을 클릭하여 아래와 같이 변수를 만듭니다.

1) card1, card2, card3, card4
4개의 카드(스페이드-card1, 클로버-card2, 스타-card3, 하트-card4)들의 위치를 나타냅니다. 1~4의 값을 가지며 각각 첫번째, 두번째, 세번째, 네번째 위치에 있음을 의미합니다. 

2) live
남은 기회를 의미합니다. 3에서 부터 시작해서 틀릴 경우에 1씩 감소되며, 0이 되면 게임이 종료됩니다.

3) step
현재 맞출 카드의 순서를 나타냅니다. 1~4의 값을 갖습니다.

4) curMessage
화면에 보여줄 메시지를 의미합니다. 1~4의 값에 따라 'Correct!', 'Wrong!', 'You Win!!", 'You loose!!'를 출력합니다.


2. 스프라이트 생성

아래와 같이 각각 4개씩 아이콘, 카드, 뒷면 스프라이트를 생성합니다. 카드 뒷면 스프라이트는 먼저 하나만 만들고 스크립트를 작성 후에 'duplicate'로 복사하여 변경하여 사용하는 것이 편리합니다. (아래의 압축파일을 다운로드 받으시면 사용된 이미지들이 있습니다)


사용자 삽입 이미지

사용자 삽입 이미지
위의 이미지에서 Sprite13인 Wrong!! 스프라이트는 페인트 에디터를 이용해 직접 작성합니다. 그 뒤에 커스튬에서 'Wrong!', 'You win!!', 'You loose' 를 순서대로 추가 합니다.






3. 배경 스크립트 생성

배경에서 초기화 및 사용자 선택 시 처리에 관한 스크립트를 처리 합니다. 스프라이트 목록에서 좌측에 있는 배경을 선택한 후에 아래와 같이 스크립트를 추가합니다.

1) 초기화
사용자 삽입 이미지
[set step to (1)]

현재 단계를 1로 설정합니다.

[set live to (3)]
남은 기회를 3으로 설정합니다.

[set card1 to (0)]
[set card2 to (0)]
[set card3 to (0)]
[set card4 to (0)]
네개의 카드 위치를 모두 0으로 초기화 합니다.

[broadcast [setCard_1] and wait]
[broadcast [setCard_2] and wait]
[broadcast [setCard_3] and wait]
[broadcast [setCard_4] and wait]
순서를 정하도록 각각의 카드에 메시지를 보냅니다.



[broadcast [setPos_1] and wait]
[broadcast [setPos_2] and wait]
[broadcast [setPos_3] and wait]
[broadcast [setPos_4] and wait]
순서에 맞추어 카드가 위치하도록 메시지를 보냅니다.

2) 정답 처리
사용자 삽입 이미지
[change step by (1)]

단계를 1 증가합니다.

[set curMessage to (1)]
'Correct!' 란 메시지를 출력하도록 1로 설정합니다.

[broadcast [showCard_카드번호]]
각 단계에 맞추어 아이콘을 출력하도록 합니다.

[if <[step]=(5)>]
모든 단계가 종료되었을 경우에는 'You win!!'을 출력하도록 curMessage를 3으로 설정합니다.

[broadcast [showMessage] and wait]
설정된 curMessage에 맞추어 메시지를 출력하도록 합니다.





3) 오답 처리
사용자 삽입 이미지
[change live by (-1)]
기회를 1 감소합니다.

[if <[live] < (1)>]
기회가 1보다 작을 경우에는 curMessage를 4(You loose!!)로 아닐 경우에는 2(Wrong!)으로 설정합니다.

[broadcast [showMessage] and wait]
설정된 curMessage에 맞추어 메시지를 출력하도록 합니다.


4. 아이콘 스프라이트
 
첫번째 아이콘은 [show]로 시작시 보여 주며 나머지 아이콘들은 [hide]로 출력하지 않습니다. 아래는 각각의 아이콘 스프라이트에 따른 스크립트 입니다. 

사용자 삽입 이미지

[when I receive [showCard_카드번호]]
각 단계가 지날 때 마다 'showCard_카드번호' 메시지를 받게 되며 해당 카드는 [show]로 출력되게 합니다.


5. 앞면 카드 스프라이트

1) 초기화 및 좌표 설정
사용자 삽입 이미지

[go back (1) layers]
각 카드들은 카드 뒷면(?)과 겹쳐서 출력됩니다. 카드 뒷면이 먼저 보이도록 앞면카드들은 출력순서를 뒤로 보냅니다.

[set y to (-20)]
Y 좌표는 모든 카드가 같습니다.

[if <[card1]=(1)>]
자신의 위치에 따라 x 좌표를 결정합니다.  현재 스크립트는 첫번째 카드이기 때문에 card1을 비교하며 카드에 따라 각각 cad2, card3, card4를 비교합니다.

2) 위치 설정

사용자 삽입 이미지
첫번째 카드는 1~4중 임의의 위치로 설정합니다.



사용자 삽입 이미지
두번째 카드도 1~4중 임의의 위치로 설정합니다. 하지만 첫번째 카드와 중복된 위치가 되면 안되므로 card1과 검사하여 중복되지 않게 설정하도록 합니다.

[if <[card2]=[card1]>]
card1과 같은 번호일 때는 card2를 0으로 만들어 계속 루프를 돌도록 합니다.

[if <not<[card2]=(0)>>]
card2가 0이 아닐때는 스크립트를 중지합니다.


사용자 삽입 이미지
세번째 카드도 위와 동일한 방법으로 card1, card2와 중복되지 않도록 설정합니다.

위와 바뀐점은 card2와의 검사가 추가되었습니다.












사용자 삽입 이미지
네번째 카드도 위와 동일한 방법으로 card1, card2, card3와 중복되지 않도록 설정합니다.

위와 바뀐점은 card3과의 검사가 추가되었습니다.

















6. 뒷면 카드 스크립트

사용자 삽입 이미지
좌측은 첫번째 뒷면 카드의 예입니다. 다른 세장의 뒷면 카드들도 이와 동일 하면 x좌표만 각각 -50, 50, 150으로 바뀝니다.

[go to front]
같은 위치의 앞면 카드를 가리기 위해 가장 앞쪽에 출력되도록 합니다.

사용자 삽입 이미지
카드가 클릭되면 1초간 감추어서 아래장에 있는 앞면 카드가 출력되도록 한다음 다시 출력합니다.

각 단계(step)에 맞추어 각각의 카드를 검사합니다. step이 1일 경우에는 card1, 2일 경우에는 card2, 3일 경우에는 card3, 4일 경우에는 card4의 위치가 1인지 확인합니다. 여기서는 첫번째 뒷면 카드이기 때문에 1과 비교하고 뒷면 카드에 따라 각각 2, 3, 4와 비교합니다.

[if <[card1]=(1)>]
단계가 1이고 card1의 위치가 1일 경우에는 맞는 카드를 고른 경우입니다.

맞는 카드를 선택하였을 경우에는 [hide]로 뒷면 카드를 감추고 correct 메시지를 보냅니다. 이 메시지는 이전에 작성하였던 배경 스크립트에서 처리됩니다.

틀린 카드를 선택하였을 경우에는 wrong 메시지를 보냅니다.
























이제 완료되었습니다. 시작버튼을 클릭하여 플레이를 해봅니다. 아이콘에 나타난 카드를 네개의 뒤집어진 카드에서 마우스로 선택을 하여 3번의 기회동안에 4개의 카드를 모두 찾아 내면 'You win!!'과 함께 게임이 종료됩니다.

전체 소스는 아래의 파일을 다운로드 받아서 참고하세요.
AND

이번 장에서는 제가 어렸을 적에 자주 하던 숫자 야구게임을 만들어 보겠습니다. 게임 규칙은 다음과 같습니다. 시작되면 컴퓨터는 임의의 세자리 숫자를 설정합니다. 플레이어는 연속하여 세개의 숫자를 입력합니다. 플레이어가 입력한 숫자중에 컴퓨터에 설정한 숫자와 일치하는 수가 있으면 그 갯수만큼 strike로 판정됩니다. 숫자에 따른 각각의 결과를 보고 컴퓨터가 설장한 세개의 숫자를 유추해 내어 모두 알아 맞추면 3 Stike가 되어 게임이 종료됩니다.

사용자 삽입 이미지

예를 들면 컴퓨터가 '379'를 설정하였다면, 사용자 입력에 따라 결과는 아래와 같습니다.

  • 126 - 3 ball (일치하는 숫자 없슴)
  • 589 - 1 strike 2 ball ('9' 1개 일치)
  • 389 - 2 strike 1 ball ('3', '9' 2개 일치)
  • 379 - 3 strike (3개 모두 일치, game over)

1. 변수 생성

이번 장에서는 생성하는 변수가 많습니다. 아래의 변수들을 위의 변수들을 Variables에서 [Make a variable]을 클릭하여 생성합니다. 각 변수의 사용 용도는 다음과 같습니다.
 
* inputCount : 사용자가 숫자를 입력할 때 마다 1씩 증가합니다. 3개의 숫자를 입력 받기 때문에 3까지 증가 한 후 다시 0으로 설정 됩니다.

* inputNumber: 사용자가 현재 입력한 숫자 입니다.

* number1: 컴퓨터가 설정한 첫번째 숫자 입니다.
* number2: 컴퓨터가 설정한 두번째 숫자 입니다.
* number3: 컴퓨터가 설정한 세번째 숫자 입니다.

* user1: 사용자가 입력한 첫번째 숫자 입니다.
* user2: 사용자가 입력한 두번째 숫자 입니다.
* user3: 사용자가 입력한 세번째 숫자 입니다.

* strike: 컴퓨터와 사용자 숫자의 일치하는 갯수입니다.
* try: 현재 사용자가 시도하는 횟수 입니다.

사용자 삽입 이미지
try, user1, user2, user3만 사용자에게 보여 줍니다. 위 변수들의 출력에 체크를 합니다. 캔버스에서 변수들을 더블 클릭하여 좌측과 같이 모양을 변경합니다. try 밑의 변수들은 좌측 부터 각각 [user1][user2][user3] 입니다. 


2. 스크립트 작성


1) 사용자 입력 처리
사용자 삽입 이미지

위와 같이 사용자 숫자 입력에 대응하는 모든 스프라이트들을 생성합니다. 각각의 숫자가 클릭되면 [set inputNumber to (num)]으로 현재 입력된 숫자를 inputNumber 변수에 저장합니다. 그런 후에 다른 스크립트에서 처리하기 위해 input 메시지를 보냅니다.

2) 시작 시 처리
게임이 시작될 때 각 변수들을 초기화하는 스크립트 입니다.
사용자 삽입 이미지

a. 숫자 설정
[pick random(start) to (end)] 는 start부터 end 사이에서 임의의 한 수를 생성합니다. 사용자가 맞추어야 하는 number1, number2, number3에 임의의 세개의 수를 생성하여 할당합니다.

b. 변수 초기화
사용하는 변수들을 0으로 초기화 합니다. 시도 횟수인 try만 1로 선택합니다. 초기화가 완료되면 사용자가 수를 입력 하도록 캐릭터가 "input number"를 출력합니다.

3) input 메시지 처리
위에 사용자가 숫자를 입력하였을 때 실행되는 [when [num] key pressed]에서 보내는 메시지를 처리하는 스크립트입니다.

사용자 삽입 이미지

a. 초기화
[if <(inputCount) > (2)>] 사용자가 3개의 숫자의 입력을 완료하고 다음 입력을 하는 지를 검사하고, 다음 시도이면 필요한 변수들을 0으로 초기화 합니다. 사용자의 시도 횟수를 알려주는 try만 1 증가시켜 줍니다.

b. strike 판별
[change inputCount by (1)] 먼저 현재 입력 카운트(inputCount)를 1 증가시킵니다. 위의 스크립트중 잘려진 if블럭의 전체 모습은 아래와 같습니다.

사용자 삽입 이미지

현재 입력된 inputNumber가 컴퓨터가 저장하고 있는 number1, number2, number3중 하나와 일치할 경우에는 [change strike by (1)] 로 strike를 1 증가시킵니다.

c. 입력횟수에 따른 처리
inputCount에 따라 사용자에게 보여 줄 user1, user2, user3를 설정합니다. 3번째 입력이 되어 완료되었을 경우에는 검사를 위해 [broadcast [check] and wait] 명령으로 check 메시지를 발송합니다.

4) check 메시지 처리
사용자가 세개의 숫자를 입력하였을 때 결과의 처리를 위해 실행되는 스크립트 입니다.

사용자 삽입 이미지
a) strike가 0일 경우
사용자가 입력한 세개의 숫자중에 일치하는 숫자가 하나도 없을 경우입니다. 캐릭터가 "Oops! 3ball"이란 메시지를 출력합니다.

b) strike가 1일 경우
"1 strike 2 ball"이란 메시지를 출력합니다.

c) strike가 2일 경우
"2 strike 1 ball"이란 메시지를 출력합니다.

d) strike가 3일 경우
사용자가 입력한 숫자가 모두 일치한 경우 입니다. 캐릭터가 "3 strike"를 1초간 출력 한 후에 "You Win!!!" 이란 메시지를 출력하고 게임을 종료 합니다.

[stop all ( )]는 사용자가 Stop 버튼을 클릭한 것과 동일하게 스크립트 실행을 중단합니다.



이제 완료되었습니다. 시작버튼을 클릭하여 테스트 해 봅니다. 세개의 숫자를 입력하면 결과가 나옵니다. 결과를 확인하고 컴퓨터가 설정한 세개의 숫자를 유추하여 다시 숫자를 입력하는 것을 반복합니다. 세 숫자를 모두 맞추면 게임이 종료 됩니다. 

'프로그래밍 강좌 > 스크래치' 카테고리의 다른 글

4.7 [중급] 묵찌빠 게임  (0) 2008.06.16
4.6 [중급] 카드 맞추기  (0) 2008.06.11
4.4 [중급] 영단어 퀴즈 게임  (0) 2008.05.19
4.3 [중급] 피아노 만들기  (6) 2008.05.18
4.2 [중급] 핑퐁 게임  (2) 2008.05.14
AND

이번 장에서는 영어 단어를 맞추는 간단한 퀴즈게임을 만들어 보겠습니다. 스크래치 케릭터가 설명하는 내용을 보고 1~4번까지의 보기중에서 정답에 해당하는 번호를 선택하는 게임입니다. 5단계까지 진행되며 정답이면 score가 1점 올라 갑니다.

사용자 삽입 이미지

1. 변수 만들기

사용자 삽입 이미지
좌측과 같이 Variables의 [Make a variable] 버튼을 클릭하여 answer, score, step 3개의 변수를 만듭니다.

answer는 사용자가 선택한 1~4의 값 중 하나를 저장하는 용도록 사용합니다.

score는 점수로 정답과 일치할 때만 1씩 증가됩니다.

step은 현재 진행 단계를 나타내며 총 5개의 문제까지 진행됩니다.

score와 step만 체크 표시를 하여 사용자가 볼 수 있도록 합니다.




2. 사용자 입력 처리

1) 초기화
현재 단계(step)를 1로 점수(score)를 0으로 설정하고, 첫번째 문제인 "A round fruit..."을 출력합니다. change 메시지를 전송하여 첫번째 답들이 출력되도록 합니다.
 
사용자 삽입 이미지


2) 사용자 입력 처리
사용자가 정답을 선택하고 1~4의 숫자를 입력하였을 때 실행되는 스크립트 입니다.

사용자 삽입 이미지

[set answer to (입력 값)]
  사용자가 현재 입력한 값을 answer 변수에 저장합니다.

[broadcast [check] and wait]
  입력한 값을 정답과 비교하고 처리하도록 check 메시지를 전달합니다.

[change step by (1)]
  현재 진행단계를 1 증가합니다.

[broadcast [change] and wait]
  다음 문제를 보여 주도록 change 메시지를 전달합니다.


3. 정답 처리
 
사용자가 정답을 입력하면 check 메시지를 받게되어 실행됩니다. 각 단계의 정답을 검사 하고 정답이면 점수를 1 증가한 후에 'Good'을 2초간 출력하고, 오답이면 'Wrong'을 2초가 출력한 후에 다음 문제를 출력합니다. 

사용자 삽입 이미지

[if <(step)=(단계)>]
  현재 단계를 검사하여 각 단계마다 다른 정답들을 검사하고 다음 문제를 출력 할 수 있도록 합니다. 위의 이미지에서는 1, 2 단계만 나오고 3, 4, 5는 생략되었습니다.

[if <(answer)=(정답)>]
  각 단계마다 정답을 비교합니다. 위의 스크립트를 보면 step이 1일 경우에는 정답은 2이며 step이 2일경우에 정답은 3입니다.
 

4. 답변 처리

1) 스프라이트 생성
페인트 에디터를 클릭하여 스프라이트를 생성합니다. 좌측 도구에서 'T'라고 되어 있는 버튼을 선택 후에 아래와 같이 4개의 답변들을 입력합니다. 이 답변은 첫번째 문제의 답변으로 사용됩니다.

사용자 삽입 이미지

2) 코스튬 추가
아래와 같이 Costumes에서 New costume: [Paint] 버튼을 클릭하여 다른 문제들의 답들을 코스튬으로 추가합니다. 답들은 각 단계에 맞추어 입력하시면 됩니다.

사용자 삽입 이미지

3) 스프라이트 작성
답변 스프라이트의 스크립트는 change 메시지를 받았을 때 현재 단계에 맞는 예문 코스튬을 출력하는 단순한 작업만 합니다. 

사용자 삽입 이미지

이제 완료되었습니다. 시작 버튼을 클릭하여 각 문제에 맞는 답을 선택하여 점수를 확인해 봅니다. 각자 질문과 답을 변경하거나 추가하여 다양한 퀴즈게임을 만들 수 있습니다.

아래의 압축파일을 다운로드 받으시면 전체 소스를 보실 수 있습니다.

AND

이번 장에서는 마우스를 이용하여 자유롭게 그림을 그릴 수 있는 페인트 툴을 만들어 보겠습니다. Pen을 이용하여 선의 크기와 색상을 변경할 수 있고, 전체를 지울 수 있는 간단한 기능을 넣어 보겠습니다.

사용자 삽입 이미지

1. 변수 생성 및 설정

사용자 삽입 이미지
Variables 의 [Make a variable] 버튼을 클릭하여 좌측과 같이 color와 size 두개의 변수를 생성합니다.

color는 현재 칠해질 색상을 저장하며 size는 선의 굵기를 저장합니다. 스크래치에서 color 값은 0 (빨강) 부터 시작하여 숫자가 커질 수록 무지개 색의 '빨주노초파남보'를 나타내며 다시 200에서 빨강으로 설정됩니다.  




사용자 삽입 이미지
캔버스에서 color 변수를 마우스로 우클릭 하면 좌측과 같은 메뉴가 나타납니다. 색의 범위를 0~200까지 설정하기 위해 'set slider min and max'를 클릭합니다.



아래와 같이 슬라이더의 범위를 설정하는 창이 출력되면 Min에 0을 Max에 200을 입력하고 [OK]를 클릭합니다.
사용자 삽입 이미지


2. 스프라이트 생성

사용자 삽입 이미지
기본 스프라이트를 삭제하고 좌측의 'Paint new Sprite' 버튼을 클릭하여 페인트 에디터를 실행합니다.
 
사용자 삽입 이미지

마우스 커서만 보여지게 하기 위해 시작시 스프라이트를 숨기기(hide) 때문에 좌측처럼 점만 하나 찍은 후에 페인트 에디터의 [OK] 버튼을 클릭하여 저장합니다.



3. 스크립트 생성

전체 스크립트의 모습은 아래와 같으며, 그리 복잡하지 않습니다.

사용자 삽입 이미지

1) 초기화
시작버튼이 클릭되면 페인터의 초기화를 위해 아래와 같은 작업을 합니다.

[hide]
스프라이트를 숨깁니다.

[set color to (100)]
현재 색상을 100으로 설정합니다. 기본으로 다른 색상을 원할 경우에는 100이외의 다른 값으로 변경하셔도 됩니다.

[set size to (3)]
현재 선 굵기를 3으로 설정합니다. 위의 color와 같이 다른 값으로 설정하셔도 됩니다.

[pen up]
그리기 모드를 해제합니다.

[clear]
캔버스를 지웁니다.

2) 루프
시작 후에는 forever 내에서 무한으로 아래의 작업을 반복합니다.

[set pen size to (size)], [set pen color to (color)]
사용자에 의해 펜의 색상과 크기가 변경되었을 경우에 다시 설정합니다.

[go to [mouse-pointer]]
스프라이트의 현재 위치를 마우스 포인터의 위치로 설정합니다.

[if <mouse down?>]
마우스가 클릭되었을 경우에는 [pen down]으로 선을 그리고 클릭되지 않은 상태면 [pwn up]으로 선을 그리지 않습니다.

3) 캔버스 삭제
[when [c] key pressed]
키보드에서 c 키가 눌러 졌을 경우에는 [clear]로 전체 캔버스를 지웁니다.


이제 완성되었습니다. 시작 버튼을 눌러 color와 size의 값들을 변경해 가면서 그림을 그려 봅니다.

전체 소스는 아래의 압축파일을 다운로드 받으세요

AND

음악파일을 연주하는 간단한 스크래치 프로젝트를 시작해 보겠습니다. 완성된 모습은 제 스크래치 프로젝트 페이지에서 확인하실 수 있습니다.

사용자 삽입 이미지

모양은 위와 같습니다. 음악이 연주되면 좌측과 같이 플레이 아이콘이 표시되며 음악이 중지되면 우측과 같은 중지 아이콘이 표시됩니다. 입력은 스페이스 키를 받으며 누를 때마다 시작, 중지가 번갈아 가며 실행됩니다.



1. 이미지 파일 생성

1) 기본 스프라이트 삭제
사용자 삽입 이미지
먼저 스크래치를 실행합니다. 좌측과 같이 기본 스프라이트가 있습니다.

우측 하단의 기본 스프라이트를 마우스로 우클릭하면 좌측과 같은 메뉴가 나옵니다. 이 중 delete를 클릭하여 기본 스프라이트를 삭제합니다.


2) 스프라이트 생성
스프라이트를 생성하는 방법은 두 가지가 있습니다. 페인트 에디터를 이용해서 새로 그리는 방법과 기존의 이미지 파일에서 불러 오는 방법이 있습니다.(기본 이미중에 하나를 무작위로 불러와서 생성하는 한 가지 방법이 더 있지만, 여기서는 제외합니다.)

사용자 삽입 이미지
우측 스테이지 하단을 보시면 좌측과 같은 버튼이 두 개 있습니다. 그 중 좌측의 버튼이 페인트 에디터를 이용하여 스프라이트를 생성하는 버튼이며, 우측의 버튼이 기존의 이미지 파일에서 불러와 스프라이트를 생성하는 버튼입니다.

아래의 페인트 에디터로 직접 그려서 스프라이트를 생성하는 a 방법과 기존의 이미지 파일에서 불러오는 b 방법 중에 하나를 선택하셔서 진행하시면 됩니다.

a. 페인트 에디터 이용

사용자 삽입 이미지
먼저 페인트 에디터를 사용하여 직접 스프라이트를 그려 보겠습니다. 좌측의 버튼을 클릭하여 아래와 같이 페인트 에디터를 엽니다. 각종 그리기 툴들을 이용하여 적당한 플레이 아이콘을 그린 후에 완료되면 아래의 [OK] 버튼을 클릭하여 저장합니다.

사용자 삽입 이미지

사용자 삽입 이미지
좌측과 같이 스프라이트가 새로 만들어졌습니다. 기본으로 'Costume1'로 되어 있는 부분을 마우스로 클릭하여 입력이 가능하도록 합니다. 아래와 같이 이름을 'play'로 변경합니다.

사용자 삽입 이미지






이제 정지된 모양을 추가하겠습니다. 같은 스프라이트에서 모양(costume)이 추가될 때는 [Paint] 또는 [Import] 버튼을 이용합니다.

사용자 삽입 이미지
[Paint] 버튼을 클릭하여 다시 페인트 에디터를 오픈하여 위와 같은 방법으로 종료 버튼을 그린 후에 [OK]를 클릭합니다.

사용자 삽입 이미지
play와 동일한 방법으로 이름을 'stop'으로 변경하여 줍니다.

좌측과 같이 각각의 모양들이 'play'와 'stop'이란 이름으로 저장되어 있음을 확인합니다.

이와 같이 페인트 에디터로 직접 스프라이트를 만들었으면 아래의 'b. 이미지 파일에서 불러 오기'는 건너 뛰고, 2.음악파일 등록으로 진행합니다.




b. 이미지 파일에서 불러 오기

이미지는 기존에 가지고 계신 이미지나 제가 만든 아래의 이미지를 다운로드 하셔서 압축을 푸시고 사용하시면 됩니다.

사용자 삽입 이미지
스테이지 하단의 좌측과 같은 볼러오기 버튼을 클릭합니다. 아래와 같이 파일선택 창이 나오면 play 이미지를 선택하고 [OK] 버튼을 클릭합니다. 스크래치에서는 jpg, bmp, png, gif 형식의 이미지 파일을 사용하실 수 있습니다.

사용자 삽입 이미지

사용자 삽입 이미지
다시 스프라이트 창으로 돌아와 Stop 이미지를 위해 좌측과 같이 [Import] 버튼을 클릭합니다. 위와 같이 파일선택 창이 나오면 정지 아이콘으로 사용할 stop 이미지를 선택하고 [OK] 버튼을 클릭합니다.

사용자 삽입 이미지
위의 a.페인트 에디터와 같은 방법으로 각 모양(costume)의 이름을 'play'와 'stop'으로 변경합니다.

이제 좌측과 같이 설정되어 있음을 확인합니다.









2. 음악 파일 등록

1) 음악 파일 불러 오기
사용자 삽입 이미지
이제 연주 할 음악파일을 선택합니다. 음악 파일은 mp3를 기본으로 wav, wma, aif, au 파일을 지원합니다.

좌측과 같이 Sounds 탭을 클릭하여 [Import] 버튼을 클릭합니다. 파일 선택창에서 플레이할 음악파일을 선택한 다음 [OK] 버튼을 클릭합니다.


2) 이름 변경
사용자 삽입 이미지
스프라이트와 같은 방법으로 마우스로 클릭한 후에 파일명으로 되어 있는 이름을 좌측과 같이 'myMusic'으로 이름을 변경합니다.



3. 스크립트 생성

1) 변수 isPlay 생성
현재 상태가 연주 중인지 정지 중인지를 알기 위해서 'isPlay'라는 변수를 하나 생성합니다. 이 변수가 '1'일때는 연주 중이며 '0'일 때는 정지 중을 나타냅니다.

사용자 삽입 이미지
좌측과 같이 붉은 색 [Varialbles] 버튼을 클릭한 후에 아래에 있는 [Make a variable]을 클릭합니다.




사용자 삽입 이미지
좌측과 같은 창이 나오면 변수명에 'isPlay"'를 입력하고 [OK] 버튼을 클릭합니다.

아래와 같이 isPlay 변수가 생겼음을 확인합니다.





사용자 삽입 이미지
[change isPlay by (1)] 현재 isPlay의 값에서 ()안의 수만큼 더합니다. ()안의 수를 -로 입력하면 그 수만큼 빼게 됩니다.

[set isPlay to (0)] isPlay의 값을 ()의 수로 설정합니다. 이 명령어 블록을 그대로 가져가면 isPlay는 0으로 설정됩니다.

[[v] isPlay] 변수이며 비교 및 사용시에 스크립트 영역으로 드래그해서 사용합니다. 체크[v]되면 스테이지에서 보이게 됩니다.

2) 명령어 블록 배치


a. 블럭 배치 방법
사용자 삽입 이미지
사용자 삽입 이미지
을 클릭한 후에 좌측과 같이 [When (flag) checked]를 마우스로 클릭한채로 Scripts 영역으로 드래그 하여 가져다 놓습니다.

삭제시에는 반대로 스크립트 영역 내의 블럭을 드래그 하여 블럭들이 있는 창으로 가져다 놓습니다.

사용자 삽입 이미지
스크립트 영역에서 여러 블럭들을 연결할 때는  해당 블럭을 드래그 하여 연결할 곳으로 가져 갑니다.

연결이 가능하면 좌측과 같이 붉은색 화살표가 가르키는 것과 같은 흰색 마크가 생깁니다. 여기서 마우스 버튼을 놓으면 그 위치에 블럭이 위치합니다.

b. 속성 변경 방법
사용자 삽입 이미지
좌측과 같이 블럭 중에서  하얀 배경색으로 되어 있는 부분은 마우스로 클릭 후에 키보드 입력으로 원하는 값으로 변경할 수 있습니다.

사용자 삽입 이미지
아래로 화살표가 있는 부분은 마우스를 클릭하면  선택 가능한 목록들이 표시됩니다. 마우스로 목록 중에서 선택될 부분을 클릭합니다.


c. 블럭 배치
이제 블럭들을 배치해 보겠습니다. 각각의 블럭들 항목에서 가져다가 스크립트 창에 블럭들을 아래와 같이 연결합니다.

사용자 삽입 이미지

[Control]에서 [when (flag) clicked]를 가져 옵니다. 사용자가 시작 버튼을 클릭하면 실행되는 부분입니다. 여기서 초기 시작시 필요한 행동이나 초기값을 설정할 수 있습니다.

[Variables]에서 [set isPlay to (0)]을 가져 옵니다. 처음에는 음악이 연주되지 않기 때문에 'isPlay' 변수 값을 '0'으로 설정합니다.

[Looks]에서 [switch to costume [stop]]을 가져 옵니다. 위와 마찬가지 이유로 정지 이미지가 표시되도록 합니다.

이제 음악의 연주와 중지를 위해 아래와 같이 각각의 블럭들을 가져와서 배치하고 설정합니다. 블럭들의 색을 참조하시면 블럭들이 포함된 위치를 알 수 있습니다.

사용자 삽입 이미지

각각의 스크립트 블록 명력들은 아래와 같은 동작됩니다.

[When [space] key pressed] 스페이스키가 눌러 졌을 때 아래에 연결된 블럭들이 실행됩니다.

[if <(isPlay) = 0>] 만약 현재 상태가 정지중이면 포함된 명령을 실행합니다.
[set isPlay to (1)]  현재 상태를 연주중으로 설정합니다.
[play sound [myMusic]] myMusic을 연주 합니다.
[switch to costume[play]] 버튼 모양을 연주중으로 변경합니다.

[else] 만약 현재 상태가 정지중이 아니면 포함된 명령을 실행합니다.
[set isPlay to (0)] 현재 상태를 정지로 설정합니다.
[stop all sounds] 연주를 중지 합니다.
[switch to costume[stop]] 버튼 모양을 중지로 변경합니다.


4. 실행 및 저장

1) 실행
사용자 삽입 이미지

사용자 삽입 이미지
좌측의 시작 버튼을 클릭합니다. 키보드에서 Space 키를 입력하시면 아이콘이 플레이 모양으로 변경되면서 등록한 음악이 연주가 됩니다. 중지 시에는 다시 Space키를 입력합니다.


2) 프로젝트 저장

사용자 삽입 이미지
툴바에서 [Save] 버튼을 클릭하여 지금까지 작업한 내용을 저장합니다. 저장된 파일은 [Open]을 이용해서 이후에 다시 불러 올 수 있습니다.

사용자 삽입 이미지

Project author 항목에는 제작자 이름을 입력합니다. About this project에는 이 프로젝트에 대한 설명을 입력합니다. 위의 두 입력은 선택사항이며 입력하지 않아도 무방합니다.

마지막으로 New Filename에 프로젝트 명을 입력하고 [OK]를 클릭하여 저장합니다.
(모든 입력창에서 한글은 입력되지 않습니다.)
스크래치로 음악을 연주하는 간단한 프로그램을 만들어 보았습니다. 다음 장에선 스프라이트를 움직이는 간단한 프로젝트를 만들어 보겠습니다.

AND

튜토리얼을 진행하기에 앞서 스크래치 툴에 관해서 간단히 알아 보겠습니다. 스크래치의 UI는 간단하고 직관적이기 때문에 몇 번만 사용해 보면 쉽게 적응하고 사용할 수 있습니다. 들어 가기전에 스크래치에서 자주 쓰이는 스프라이트와 스크래치에 대해서 알아 보겠습니다.

스프라이트

스프라이트는 스크래치에서 움직일 수 있는 특정한 대상을 가르키는 단어입니다. 스테이지가 무대라면 스프라이트는 배우라고 할 수 있습니다.
 
스프라이트는 각각의 스크립트에 의해 지정된 동작대로 움직이고, 소리를 내고 변화에 반응하는 등의 동작을 합니다. 스프라이트는 기존 이미지에서 불러 오거나 내장된 페인트 에디터로 만들 수 있습니다. 또한 현재 상태와 동작에 맞는 여러 이미지(Custums)로 변경할 수 있습니다.

 스크립트
각각의 명령어 블록들로 조합되어진 스크립트를 움직이는 명령어 집합입니다. 스프라이트가 움직이고 소리내고 보여지는 모든 행동들은 스크립트에 의해 정해진 대로 스테이지내에서 표현됩니다. 한마디로 스크립트는 스프라이트에 생명을 줍니다.   

1. 스크래치 둘러 보기
사용자 삽입 이미지

1) 메인 메뉴
사용자 삽입 이미지
메인 메뉴는 위와 같이 스크래치 상단에 위치한 버튼들로 프로젝트 생성/저장/공유 및 스크래치 설정에 관한 기능을 가지고 있는 버튼들입니다. 각각의 버튼들은 아래와 같은 기능을 합니다.

[New] 새로운 프로젝트를 실행합니다.

[Open] 기존에 저장해 놓은 프로젝트(*.sb)를 다시 불러 옵니다.

[Save] 현재 프로젝트를 저장합니다.

[Save As] 현재 프로젝트를 다른 이름으로 저장합니다.

[Share!] 현재 프로젝트를 다른 회원들과 공유하기 위해  스크래치 사이트로 업로드 합니다. 이 기능을 사용하기 위해서는 스크래치 사이트에서 회원가입을 하셔야 합니다.

[Undo] 바로 직전에 실행된 내용을 취소합니다.

[Language] 스크래치에서 사용할 언어를 설정합니다. 다양한 언어가 있지만 한글은 지원하지 않습니다.

[Extras] 아래와 같은 기타 메뉴들이 있습니다.
> About
 스크래치에 대한 간단한 소개와 현재 버전에 관한 정보가 있습니다.

> Import Project
 다른 프로젝트로부터 스프라이트와 배경 이미지를 가지고 옵니다.

> Start Single Stepping
 스크립트를 한 단계씩 실행합니다. 현재 실행되는 블럭은 스크립트 영역에서 밝게 표시됩니다. 오류를 찾거나 다른 사람이 만든 프로젝트를 분석할 때 유용합니다.

> Compress Sounds
 프로젝트에 포함된 사운드 파일을 압축합니다.

> Compress Images
 프로젝트에 포함된 이미지 파일을 압축합니다.
   
[Whant Help?]
웹브라우저에서 도움말 페이지를 오픈합니다. PDF 도움말 파일이나 스크래치 사이트의 페이지로 이동할 수 있습니다.

2) 툴바
스테이지 내의 스프라이트의 이동/복사/삭제/확대/축소를 할 수 있는 버튼들의 모음입니다. 동작을 선택하고 적용될 스프라이트를 클릭하면 실행됩니다.

사용자 삽입 이미지
이동
스프라이트를 드래그 하여 스테이지에서 원하는 위치로 이동합니다.

사용자 삽입 이미지
복사
스프라이트, 사운드, 블록 등을 복사합니다.

사용자 삽입 이미지
삭제
스프라이트, 사운드, 블록 등을 삭제합니다.

사용자 삽입 이미지
확대
스프라이트를 확대합니다.

사용자 삽입 이미지
축소
스프라이트를 축소합니다.


3) 스테이지
스테이지는 스프라이트를 배치하며 작업을 하는 공간이며, 스크래치가 실행시 보여지는 화면입니다. 크기는 가로 480픽셀, 세로 360픽셀로 되어 있습니다. 유의하실 점은 좌표가 아래와 같이 중앙에서 0, 0으로 시작하며 위로 또는 좌측으로는 마이너스(-)로 표현됩니다.
사용자 삽입 이미지

4) 명령어 블록
사용자 삽입 이미지
명령어 블록 상단에는 스크래치 좌측 상단에 위치한 명령어 블록들을 용도별로 분류해 놓은 8개의 버튼들이 있습니다.

각각의 버튼을 클릭하면 포함된 명령어 블록들을 바로 하단에서 보실 수 있습니다.

Motion
스프라이트의 이동, 회전, 범위 검사 등 움직임에 관한 제어 블럭들이 있습니다.

Looks
스프라이트 이미지/크기/색상 변경, 그래픽 효과 설정, 보여주기/감추기, 레이어 위치 설정, 대화/생각하는 구름 표시 등 보여주는 모습을 설정할 수 있는 블럭들이 있습니다.

Sound
음악을 플레이/중지 하고 볼륨과 템포 조절, 각종 악기음 설정/연주 등의 사운드에 관련된 블럭들이 있습니다.

Pen
선을 그리고 색상, 크기 등을 설정하는 블럭들이 있습니다. Pen은 스프라이트와 결합하여 스프라이트의 이동경로 등을 그릴 때 사용됩니다.

Control
변수나 스프라이트의 상태를 검사하고 행동을 반복하고, 키보드 입력, 이벤트 수신/발송 등 스프라이트를 조종할 수 있는 블럭들이 있습니다.

Sensing
마우스 상태 검사, 스프라이트 충돌, 위치 검사 등 스프라이트의 위치나 상태를 검사를 할 수 있는 블럭들이 있습니다.

Variable
상태 저장을 위한 변수를 생성하고 값을 변경할 수 있는 블럭들이 있습니다.


5) 스크립트 영역
사용자 삽입 이미지
상단 중앙에 Scripts, Costumes, Sounds 세 개의 탭이 있습니다. 현재 선택된 오브젝트가 스크립트냐 배경화면이냐에 따라서 두 번째 메뉴가 Custumes 또는 Background로 변경됩니다.

Scripts 탭은 좌측과 같이 실행될 스크립트 블럭들이 위치하는 곳입니다. 해당 스프라이트를 클릭하고 명령어 분류 목록에서 해당 블록을 드래그해서 이곳으로 가져다 놓으면 실행됩니다.




사용자 삽입 이미지
Costumes를 선택하면 해당 스프라이트의 동작(모습)을 추가할 수 있습니다.

[Paint] 페인트 에디터를 오픈하여 스프라이트를 그린 후, 새로운 스프라이트를 추가합니다.

[Import] 파일(*.png, *.jpg)에서 새로운 스프라이트를 불러온 다음 추가 합니다.

[Edit]  현재 스프라이트를 페인트 에디터에서 편집합니다.

[Copy]
  현재 스프라이트를 복사해서 추가합니다.

[X] 현재 스프라이트를 삭제합니다.

사용자 삽입 이미지
마지막 사운드 탭은 해당 스크립트 또는 배경화면에 효과음과  배경음악을 등록할 수 있습니다.

PC에 마이크가 설치되어 있으면 [Record] 버튼으로 녹음도 가능합니다.


6) 스프라이트 목록
사용자 삽입 이미지

위와 같이 프로젝트에서 사용되는 모든 스프라이트들의 목록을 볼 수 있는 창입니다. 스프라이트 이미지 하단에는 스프라이트의 이름과 스크립트에 포함된 모양(Custumes) 갯수와 스크립트 갯수를 표시합니다. 여기서 선택된 스프라이트가 8) 스프라이트 창에 나타납니다.

7) 스프라이트 생성 버튼

사용자 삽입 이미지
새로운 스프라이트를 만들기 위해 페인트 에디터를 오픈합니다.


사용자 삽입 이미지
기존에 저장된 이미지(*.png), 스프라이트(*.sprite)를 불러와 새로운 스프라이트를 생성합니다.

사용자 삽입 이미지
렌덤하게 스크래치가 가지고 있는 이미지들을 불러 옵니다. 이 이미지들은 스크래치 디렉토리 밑의  Media/Cotumes에 위치 합니다.

스프라이트 생성버튼의 좌우측으로 아래와 같은 버튼과 상태 창이 있습니다.

사용자 삽입 이미지
스크래치가 프리젠테이션 모드(전체화면)로 실행됩니다.

사용자 삽입 이미지
스테이지 중앙을 기준으로 마우스의 현재 x, y 위치를 보여 줍니다.


8) 스프라이트 창
사용자 삽입 이미지




상단에 있는 스프라이트 창에서는 스프라이트 이름을 변경하고 스테이지에서 현재 위치와 방향을 보여 줍니다. 그 외 스프라이트를 저장하거나 회전/락 설정을 할 수 있습니다.

사용자 삽입 이미지
좌측의 세 개의 버튼은 사용자가 스프라이트 회전에 관한 옵션을 선택합니다. 첫번째 상태에서는 스프라이트 방향을 회전할 수 있으며, 두번째 상태는 좌우로 변경만 가능, 세번째 상태는 회전할 수 없습니다.

사용자 삽입 이미지
좌측과 같이 자물쇠가 잠겨 있는 아이콘이 설정되어 있는 스프라이트는 프리젠테이션이나 웹상에서 실행시에 마우스 드래그로 이동이 되지 않습니다.

[Export] 현재 스프라이트를 저장합니다. *.sprite 확장자로 저장됩니다. 저장된 스프라이트는 다른 스크래치 프로젝트에서 불러와 사용하실 수 있습니다.

9) 시작/종료 버튼
사용자 삽입 이미지
실행/중지 - 깃발모양은 스크립트를 실행합니다.
붉은 색 버튼은 현재 실행되는 스크립트를 종료합니다.



사용자 삽입 이미지
상단 우측을 보면 좌측과 같이 노트 모양의 아이콘이 있습니다. 이 아이콘을 클릭하면 간단하게 프로젝트에 관한 메모를 할 수 있습니다. 하지만 역시 한글은 입력되지 않습니다.


2. 페인트 에디터 둘러 보기

스프라이트를 생성/편집할 수 있는 이미지 툴입니다. 이 역시 메뉴가 간단하니 다른 그래픽 툴을 사용해 보신 분들은 쉽게 사용하실 수 있을 것입니다.

사용자 삽입 이미지

상단에는 스프라이트의 모양을 조절할 수 있는 아래와 같은 버튼들이 있습니다.

사용자 삽입 이미지
스프라이트의 크기를 확대합니다.

사용자 삽입 이미지
스프라이트의 크기를 축소합니다.

사용자 삽입 이미지
스프라이트를 오른쪽으로 회전합니다.

사용자 삽입 이미지
스프라이트를 왼쪽으로 회전합니다.

사용자 삽입 이미지
스프라이트를 좌우로 뒤집습니다.

사용자 삽입 이미지
스프라이트를 아래위로 뒤집습니다.


[Import] 기존의 이미지 파일을 불러 옵니다. png 파일을 지원합니다.

[Undo] 직전에 동작을 취소합니다.

[Redo] 취소한 동작을 다시 실행합니다.

[Clear] 캔버스의 모든 내용을 삭제합니다.


사용자 삽입 이미지
좌측 중간에는 캔버스에 그릴 수 있는 툴들을 모아 놓은 좌측과 같은 버튼들이 있습니다. 버튼 하단에는 현재 선택된 작업의 옵션을 설정할 수 있습니다.




사용자 삽입 이미지
마우스의 움직임대로 자유롭게 선을 그릴수 있는 툴입니다.
옵션 : 선의 굵기를 설정할 수 있습니다.

사용자 삽입 이미지
마우스의 움직임대로 지울 수 있는 툴입니다.
옵션 : 지울 수 있는 크기를 설정할 수 있습니다.

사용자 삽입 이미지
지정된 영역에 색을 칠하는 툴입니다.
옵션 : 그라데이션 효과를 설정할 수 있습니다.

사용자 삽입 이미지
사각형을 그리는 툴입니다.
옵션 : 꽉찬 사각형 또는 선만 선택할 수 있습니다.

사용자 삽입 이미지
원을 그리는 툴입니다.
옵션 : 꽉찬 원 또는 선만 선택할 수 있습니다.

사용자 삽입 이미지
직선을 그립니다.
옵션 : 선의 굵기를 설정할 수 있습니다.

사용자 삽입 이미지
문자를 출력합니다. 역시 한글은 사용할 수 없습니다.
옵션 : 문자의 폰트와 크기를 설정할 수 있습니다.

사용자 삽입 이미지
영역을 설정합니다.
설정된 영역은 삭제, 변경, 이동시 영향을 받습니다.

사용자 삽입 이미지
도장
영역을 설정하면 설정된 영역만큼 복사를 할 수 있습니다.

사용자 삽입 이미지
캔버스 내에서 색상을 추출하여 현재 색상으로 적용합니다.



사용자 삽입 이미지
좌측 하단에는 현재 색상을 설정할 수 있는 툴들이 있습니다. 상단의 두 색상을 클릭하면 상, 하 색상이 교체됩니다.

선과 도형을 그리거나 색을 채우는 작업을 할 때, 현재 이 곳에서 선택된 색상을 사용합니다.



사용자 삽입 이미지
스프라이트가 회전할 때 중심이 되는 위치를 설정합니다.


사용자 삽입 이미지
캔버스를 확대하거나  축소 합니다.


이번 장에선 스크래치와 스크래치에서 스프라이트를 그릴 때 사용되는 페인트 에디터에서 대해서 살펴 보았습니다. 다음 장부터는 스크래치를 이용하여 간단한 예제들을 작성해 보겠습니다.
AND

년초 포스팅에서 계획 했었던 어린이를 위한 쉬운 프로그래밍 강좌를 해보려고 합니다. 이런 생각을 한 이유는 제가 어린이 교육에 관심이 깊다거나 하는 거창한 이유가 아닌, 일차적으로 제 어린 아들을 위해서 입니다.

제 아이는 프로그래밍에 관심을 많이 가지고 있습니다. 프로그래밍이라기 보다는 자신이 그린 캐릭터들이 움직이는 것에 관심이 많습니다. 목표는 본인 스스로 게임을 만들어 보는 것입니다. 그동안 플래쉬와 스퀵, 스크래치 등의 툴들을 사용했지만 너무 어렵고 영어라는 제약을 뛰어 넘지 못하고  늘 어느선에 머물렀습니다.

사용자 삽입 이미지
좌측은 제 아들이 스크래치로 최근에 만든 것입니다. 스테이지, 레벨업, 무기 변경, 난이도 변경 등을 하고 싶어 하지만 구현하지 못하고 있습니다.  실제로 동작하는 모습은 스크래치 프로젝트 페이지에서 보실 수 있습니다.
 
초등학교 3학년 아이가 혼자서 만들기엔 어렵고 한글로 된 참조할 자료가 없기 때문에 더 이상 진행을 못하고 있는 것 같습니다.


그래서 일차적으로 제 아들을 위하여 그 다음은 저와 비슷한 관심을 가지고 있는 부모님들과 어린이들을 위해 강좌를 해보려고 합니다. 초등학교 4학년 이상이면 따라해 볼 수 있도록 가능하면 쉽게 해보려고 합니다.

0. 어린이와 프로그래밍


사용자 삽입 이미지
아이들은 일반 언어도 그렇고 어른들과 다르게 흥미있는 지식은 물 묻은 스폰지처럼 빠르게 흡수합니다. 그래서 오래전부터 제 아이에게 어렸을 때에 프로그래밍을 가르쳐 보려고 생각하고 있었습니다.

가르치려는 이유는 아이가 성인이 되어서 프로그래머가 되기를 바래서가 아니라 아래와 같은 효과가 있을 것 같기 때문입니다.

(사진출처: 스퀵랜드)

1) 창의력과 논리력이 향상됩니다.
프로그래밍은 무에서 유를 만들어 가는 과정입니다. 레고와 같은 유형의 교육용 장난감들도 이런 역할을 수행 합니다. 하지만 컴퓨터는 양이나 범위, 방법에 관해 어떠한 제한도 없이 생각하는 모든 것을 구현할 수 있습니다. 게다가 무료입니다.

사용자 삽입 이미지
아이들은 프로그래밍이라는 딱딱하고 어려운 작업이 아니라 레고를 가지고 놀듯이 명령어들을 조합하여 원하는 결과물을 다양하게 만들어 낼 수 있습니다. 실제 레고사에서는 스크래치에서 사용할 수 있는 좌측과 같은 이미지의 레고 이미지 팩을 기증(?)하였습니다.

학생 본인 또는 부모님이나 선생님들의 작은 노력만 있다면, 생각한 대로 가지고 놀 수 있는 가장 값어치 있는 장난감을 손에 넣을 수 있습니다.

2) 깊은 성취감을 느낄 수 있습니다.
개발자들이 가장 기쁨을 느끼는 순간이 코드가 컴파일되고 생각한대로 실행되는 모습을 확인할 때 입니다. 이는 아이들도 마찬가지로 여러 명령어 조합을 맞춰 보고 제대로 실행되었을 때 컴퓨터로 본인 스스로 무엇인가를 만들었다는데 대해서 깊은 성취감과 자신감을 가질 수 있습니다.

3) 컴퓨터의 생산적인 사용방법을 습득할 수 있습니다.
대부분 아이들이 컴퓨터를 게임기로 사용합니다. 오락적인 요소도 중요하지만 컴퓨터로 원하는 일을 할 수가 있고 이를 위한 도구로서 이용할 수 있게 만듭니다.

게임을 하거나 재미있는 글과 사진, 동영상을 보기 위한 소비적인 이용뿐만 아니라 스케치로 원하는 결과물을 만들어 내는 생산적인 이용을 가능하게 합니다.

4) 자발적으로 영어와 친숙해 질 수 있습니다.
홈페이지와 스크래치의 모든 명령은 영어로 되어 있습니다. 사용되는 영어와 명령어 수가 많지 않기 때문에 쉽게 외우고 사용할 수 있습니다.

뒤에서 자세히 설명하겠지만 스크래치 홈페이지에서 프로젝트를 올리고 평가하고 공유하며, 또한 놀면서 외국의 아이들과 의견을 교환할 수 있습니다. 의사소통을 위해 자발적으로 기분좋게(?) 영어를 배운다면 아이에게도 즐거운 일일 것 같습니다.

5) 프로그래밍 기본개념 습득
스크래치는 아이들의 놀이/학습뿐만 아니라, 프로그래밍을 처음 접하는 성인들도 프로그래밍에 대한 기초와 개념을 쉽게 가지게 해줄 수 있는 툴입니다. 프로그래밍에 대한 기본 지식을 습득하면 나중에 직접 타이핑을 해야 하는 프로그래밍 언어와 툴들도 쉽게 적응할 수가 있습니다.

1. 스크래치란?

사용자 삽입 이미지
스크래치는 스퀵을 기반으로 MIT Media Lab에서 개발한 8세 이상의 어린이들의 개발을 위한 툴입니다. 8세라는 것은 스크래치 사이트에 나와있는 내용이며 영어권 국가의 기준입니다.

"우리나라와 같이 비영어권 국가에서는 초등학교 저학년의 경우에는 부모님의 도움이 필요할 것 입니다. 스크래치에서 사용하는 영어는 간단하고 얼마 되지 않으니 5/6학년 정도의 고학년 어린이들은 이 블로그의 내용만 보고 따라할 수 있을 것으로 생각됩니다."

스크래치는 위 로고의 아래  내용처럼 생각한 내용을 애니메이션, 게임, 음악 등으로 쉽게 표현할 수 있고 웹을 통해서 다른 사람들과 공유할 수 있게 해줍니다. 스크래치 프로젝트는 스크래치에서 바로 홈페이지로 업로드할 수 있으며, 개인의 홈페이지나 블로그에서도 올릴 수 있습니다.

스크래치의 결과물은 자바 애플릿을 이용하여 웹상에서 바로 실행될 수 있습니다. 윈도우즈일 경우에는 JRE가 설치되어 있어야 합니다. JRE가 없으면 이곳에서 설치할 수 있습니다.

2006년 3월을 시작된 스크래치 홈페이지는 현재 회원수가 6만명이 넘을 정도로 빠르게 사용자가 늘어 가고 있습니다. 제가 본 무료로 배포되는 교육용 프로그램 중에서는 가장 사용하기가 쉽고 완성도 높은 것으로 생각됩니다.

사용자 삽입 이미지
스크래치는 스퀵으로 작성되었습니다. 스퀵으로 만든 결과물 중에 가장 훌륭한 것이 아닐까 생각됩니다. 스크래치의 소스는 홈페이지에 공개되어 있으며 이곳에서 다운로드 받으실 수 있습니다.
스퀵은 스몰토크-80으로 작성되었으며, 스퀵 그 자체에 스몰토크-80과 기본 라이브러리를 가지고 있는 개발툴입니다.


2. 회원가입 및 설치

1) 회원 가입
스크래치를 다운로드 받기 위해서는 스크래치 홈페이지를 방문해야 합니다. (사이트는 영어, 독일어, 프랑스어를 지원합니다.) 스크래치를 다운로드 받기에 앞서 회원가입을 먼저 합니다.

사용자 삽입 이미지
회원가입은 좌측과 같이 이메일을 제외하고는 중요한 개인정보를 요구하지 않습니다.

스크래치를 적극적으로 활용하고, 다양한 활동을 위해서는 가입을 하시는 것이 좋습니다.



사용자 삽입 이미지
회원가입을 하시면 포럼에 참여할 수 있으며 스크래치로 만든 프로젝트를 해당 사이트에 등록할 수 있습니다.

만든 프로젝트를 등록하면 좌측과 같이 다른 이용자들과 공유하며 다양한 평가와 의견을 받을 수 있습니다.

마찬가지로 다른 사람이 올린 프로젝트들에 대하여 평가하고 즐겨찾기로 등록할 수 있습니다. 프로젝트를 다운로드 받으면 다른 사람들이 구현한 노하우를 쉽게 참조할 수 있습니다.





2) 다운로드 및 설치
현재 버전은 1.2.1입니다. Mac OS X와 Windows용이 있습니다. (Linux 버전은 현재 작업중이라고 합니다.) 사용하는 OS 버전별로 다운로드를 받으시면 됩니다. 최소 설치 사양은 아래와 같습니다.
  • 해상도 :  1024 x 768이상, 16비트 컬러 이상
  • OS : MS 윈도우 98 이상, 맥 OS X 10.3 이상
  • 하드디스크 : 120MB 이상

맥에서는 압축만 풀고 바로 사용할 수 있습니다. 윈도우에서는 인스톨 버젼(exe)를 실행하시면 됩니다.

현재 스크래치에서 지원하는 언어는 아래와 같습니다. 생소한 언어들도 있는데 한국 뿐만 아니라 중국, 일본도 없습니다. 로컬화는 매우 쉽습니다. 하지만 이전에 한글화를 시도해 본적이 있었는데 깨져서 나왔습니다. 아쉽지만 1byte 코드를 사용할 수 없는 언어들은 표시할 수가 없는 것 같습니다. 그래서 한글과 같은 아시아권 언어가 없는 것 같습니다.

Català, Cesky, Dansk, Deutsch, English, Español, Français, Galego, Italiano, Magyar, Nederlands, Norsk, Polski, Português, Româna, Slovencina, Suomi, Svenska

이제 스크래치 아이콘을 클릭하여 실행하여 봅니다. 아래와 같이 실행되면 스크래치를 사용하여 작업을 할 준비가 완료된 것입니다.

사용자 삽입 이미지


3. 기타 유용한 정보

1) Board
사용자 삽입 이미지
PC와 연결해서 입력을 받아 스크래치로 전달하는 보드입니다. 슬라이드와 버튼이 있어 스크래치로 만든 게임등의 프로젝트에서 입력 받을 수 있습니다.



이외에도 라이트와 사운드 센서가 있고, 전기저항을 감지할 수 있는 악어클립으로 사용자가 입력을 커스터마이징 할 수 있습니다.  

PC와의 연결은 USB를 이용하며, 맥 OS X와 윈도우 드라이버를 제공합니다. 가격은 25달러(US)이며, 운송비로 미국내에서는 5달러, 그 외의 나라들은 20달러가 추가 됩니다. 우리나라에서 주문을 하려면 45달러가 듭니다. 

2) Card
사용자 삽입 이미지
PDF로 되어 있는 스크래치의 중요 동작들에 대한 카드입니다. 앞면에는 동작의 예가 있으며 뒷면에는 구현방법에 대한 설명이 있습니다.

아래와 같이 칼라 프린트로 출력한 후에 오려서 코팅을 해주면 아이들이 오래도록 잘 사용할 수 있을 것 같습니다.

사용자 삽입 이미지

3) 참조할 내용
사용자 삽입 이미지
홈페이지의 support메뉴를 클릭하시면 스크래치를 사용하는데 도움이 되는 다양한 자료들을 보실 수 있습니다.

이곳에서 레퍼런스 가이드를 다운로드 받거나 동영상 강좌를 보실 수 있습니다. 이외에도 다양한 자료들이 있으니 방문하셔서 확인해 보시기 바랍니다.





마지막으로 제가 이전에 작성한 관련 포스팅들을 링크하고 마치겠습니다. 다음 장부터 본격적인 스크래치의 사용법에 대해서 알아보겠습니다.
AND

우연히 Scratch란 프로그램을 보았습니다. Squeak에서 Image 파일이 열리는 것으로 봐서는 확실하지는 않지만 Squeak으로 만들었던지 같은 엔진을 사용한 것 같습니다.

 홈페이지를 가보니 Squeak에 대한 언급은 없었고, MIT 미디어 연구소에서 어린이(8세 이상) 교육을 위해서 개발한 것이라고 합니다. 윈도우용과 맥용 두가지 버젼으로 다운로드 받을 수 있습니다.
사용자 삽입 이미지
위에 보이는 것과 같이  Squeak 보다 더욱 깔끔하고 직관적인 인터페이스를 제공합니다. 잠깐 써봤지만 Squeak 보다 사용법도 더 쉬운 것 같았습니다. 아이들이 쉽게 사용할 수 있도록 Squeak에서 복잡성과 불필요한 부분을 제외하고, UI를 이쁘게 만든 것 같습니다.

또한 사이트로 가면 아래와 같은 동영상 튜토리얼이나, 메뉴얼 등 사용을 도와 주는 다양한 자료들을 제공합니다. 동작들에 대해 그림과 함께 설명이 있는 scrach cards는 프린팅하여 잘라 주면 아이들에게 더욱 흥미를 제공하고, 쉽게 적응할 수 있도록 할 것 같습니다.

사용자 삽입 이미지

또 하나 눈길을 끝는 것은 바로 위에 있는 Scratch Board란 하드웨어 입니다. Scratch와 연동하여 다양한 입출력을 제공하는 것 같습니다. 가격은 25달라인데 선적비용 까지 합치면 한국에선 45달라에 주문할 수 있습니다. 가격이 너무 비싼 것 같습니다. 전기나 회로에 관한 지식만 있다면 만들기가 그리 어려울 것 같지는 않은데, 저는 전혀 없으니 자작은 불가능할 것 같습니다.

직관적이고 심플하여 더 이상 뭐가 있을 것 같지는 않지만, 나중에 더 많이 사용해 보고 제대로 글을 올려 보아야 겠습니다. 
AND