정확히 언제부터인지는 모르겠지만 현 버젼(1.4)의 스크래치는 42001 포트를 이용한 소켓통신으로 양방향으로 데이터를 전송할 수 있습니다. 이를 이용해서 티스토리에 댓글이 추가되었을때 스크래치에서 알려주는 간단한 샘플을 만들어 보겠습니다.


1. 스크래치

1) 원격 센서 연결 활성화
소켓 통신을 위해서는 스크래치의 관찰 항목 하단의 '센서의 버튼누르기' 명령어 블럭을 마우스로 우클릭합니다. 나오는 메뉴중에 '원격 센서 연결 활성화'를 클릭하고  '원격 센서 연결 켜기' 대화상자가 뜨면 확인 버튼을 클릭합니다. 이로써 스크래치가 소켓통신이 가능한 상태가 됩니다.

2) 메시지 생성
다음은 메시지를 생성합니다. 제어 메뉴의 '방송하기' 명령어 블록을 우클릭하여 '새로 만들기...'를 클릭합니다. 메시지의 이름에 new_cmt를 입력하고 확인 버튼을 클릭합니다.


3) 스크립트
아래와 같이 스크립트창에서 명령어 블럭을 배열합니다. 캡쳐 이미지는 파이썬으로 부터 enw_cmt 메시지를 수신했을 때 동작하는 모습입니다.



2. 테스트 코드

1)  코드

스크래치가 준비되었으면 파이썬을 이용하여 테스트를 해볼 수 있는 간단한 코드를 작성해 보겠습니다. 에디터에서 아래의 소스를 입력하고 scratch.py로 저장합니다. 터미널에서 'chmod +x scratch.py' 명령을 실행하여 파일이 실행 가능하도록 권한을 변경합니다.

  1. #!/usr/bin/python
  2. #  -*- coding: utf-8 -*-
  3. import socket, httplib, re, time
  4. from array import array
  5.  
  6. DELAY_SEC = 5
  7. SCRATCH_PORT = 42001
  8.  
  9. def sendToScratch():
  10.     sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
  11.     sock.connect(('127.0.0.1', SCRATCH_PORT))
  12.  
  13.     msg = 'broadcast "new_cmt"'
  14.     sdata = array('c', [chr(0), chr(0), chr(0), chr(len(msg)&0xFF)])
  15.  
  16.     sock.send(sdata.tostring() + msg)
  17.     sock.close()
  18.  
  19. prevComment = ""
  20. while True:
  21.     webClient = httplib.HTTPConnection("www.cocoadev.co.kr")
  22.     webClient.request("GET", "/")
  23.     response = webClient.getresponse()
  24.  
  25.     rdata = response.read()
  26.  
  27.     webClient.close()
  28.  
  29.     result = re.search("/[0-9]*#comment[0-9]*", rdata)
  30.  
  31.     curComment = result.group(0)
  32.  
  33.     if curComment != prevComment:
  34.         print ">> New comment"
  35.         prevComment = curComment
  36.         sendToScratch()
  37.     else:
  38.         print "-- No new comment"
  39.  
  40.     time.sleep(DELAY_SEC)

2) 테스트
스크래치가 실행된 상태에서 위의 파이썬 코드를 실행합니다. 처음 한번은 새로운 메시지가 왔다는 이벤트를 보냅니다. 파이썬 시작후에 스크래치에서 'new_cmt' 메시지를 수신하고 해당 블럭이 실행되는 것을 확인하실 수 있습니다.


간단한 테스트 코드를 만들어 보았는데 위와 반대로 스크래치에서 보내는 메시지를 파이썬에서 수신도 가능합니다. 이를 이용하면 스크래치에서 트위터에 글을 내보내는 등 다른 어플리케이션들과 연동하여 다양한 방법으로 스크래치의 활용이 가능합니다. 아래의 파일을 클릭하여 위의 스크래치와 파이썬의 소스를 다운로드 받으실 수 있습니다.




저작자 표시 비영리 변경 금지
신고

스크래치 프로그래밍
카테고리 컴퓨터/IT
지은이 이창희 (에이스ME, 2009년)
상세보기

어제 스크래치 책이 나왔습니다. 저자에는 제 이름이 나와있지만 사실 저는 블로그의 내용만 제공하고 출판사에 계신 분들이 작업을 다하셨습니다. 어제 처음 책을 받아 보았는데 내용들도 많이 추가, 변경되고 한글 명령어로 다시 캡쳐하여 만드셨더군요. 왠지 뒤에서 고생은 다른 분들이 하고 제 이름이 무임승차한 것 같은 죄송함이 듭니다.


50대 중반이 되서 경험이 많이 쌓이면 개발에 관련된 책을 한번 써봤으면 좋겠다는 막연한 바램도 있었는데, 생각지도 못하게 이런 그림책(?)이 나오게될줄은 몰랐습니다. 즉흥적으로 시작했던 블로그인데 이 블로그를 통해서 같이 일하는 좋은 동료도 얻고, 책도 나오고, 술친구도 얻었으니 많은 선물을 받은 것 같습니다.
저작자 표시 비영리 변경 금지
신고

'책 이야기' 카테고리의 다른 글

YES24 연령별 관심도서  (0) 2010.04.21
스크래치 책 출간  (20) 2009.09.05

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


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

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

사용자 삽입 이미지
스크래치에 대해 잘 알지도 못하는 상태에서 시작해서 이제서야 조금 알게 된 것 같은데, '5.3 [고급] 범고래 봉봉 게임'을 마지막으로 스크래치 강좌를 종료 할려고 합니다.

아무런 관심과 피드백은 없었지만 올초에 블로그에서 계획했던 것 중에 하나이기 때문에 혼자 즐기면서 잘 포스팅을 해 온 것 같습니다. 지금와서 보면 틀리고 부끄러운 내용들도 많지만 그동안 올린 내용들을 나열해 놓고 보니 블로그에서 혼자 노는 것이 '아, 이 맛이구나!'하는 생각이 듭니다.

사용자 삽입 이미지

년초에 '스크래치 강좌', '코코아 강좌', '맥용 공개 어플리케이션' 세개의 목표를 잡았는데 한해의 반을 훌쩍 넘겨서야 고작 하나만 실행했네요. 이제 스크래치는 잠시 접고 새로(?) 나온 Xcode 3를 사용하고 공부해 보면서 관련된 이야기를 올릴려고 합니다.

일단 이전 Xcode의 카테고리 이름을 Xcode 2로 변경하고, Xcode 3이란 카테고리를 만들었으니 첫 삽은 뜬 것 같습니다. 아직 맛도 못봤는데 Xcode 4가 나오는 건 아닌지 모르겠네요. ^^;;
신고

'이야기들 > 소소한 이야기' 카테고리의 다른 글

급격한 Objective-C 사용자 증가  (4) 2009.08.20
WWDC 2009  (4) 2009.06.11
스크래치 강좌 끝~  (8) 2008.07.28
5년만에 강림하신 지름신  (16) 2008.07.15
Tumblebugs 드디어 클리어!  (2) 2008.06.18
맥북 DVI 어댑터  (2) 2008.06.16

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

게임 방법은 방향키를 이용하여 자신보다 크기가 작은 물고기들을 잡아 먹습니다. 큰 물고기와 충돌하면 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) 게임 시작
사용자 삽입 이미지
스크래치가 시작되거나 게임이 시작되었을 경우에는 메시지 스크립트를 감춥니다.








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


신고

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







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

신고

이번 장에서는 마우스를 이용해 원반을 조준하여 맞추는 클레이 사격 게임을 만들어 보겠습니다. 게임 시작, 게임, 게임종료 화면을 추가하고 각각 시작과 다시시작 버튼을 클릭하여 게임을 시작할 수 있습니다. 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개의 원반이 발사되면 게임이 종료됩니다. '다시 시작' 버튼을 클릭하여 게임을 다시 시작할 수 있습니다.

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

이번 장에서는 묵찌빠 게임을 만들어 보겠습니다. 가위바위보를 하는 시점이 사용자가 키를 누르는 시점이라는 것만 제외하면 게임규칙은 우리가 흔히 하는 묵찌빠 게임과 같습니다. 사용되는 키는 키보드 좌측 하단의 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중 하나를 선택하여 키보드로 입력하여야만 게임이 계속 진행됩니다.

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

이번장에서는 카드를 알아 맞추는 게임을 만들어 보겠습니다. 좌측 상단에 나와 있는 카드 중 가장 오른쪽에 나와 있는 모양을 아래에 뒤집혀진 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!!'과 함께 게임이 종료됩니다.

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

이번 장에서는 제가 어렸을 적에 자주 하던 숫자 야구게임을 만들어 보겠습니다. 게임 규칙은 다음과 같습니다. 시작되면 컴퓨터는 임의의 세자리 숫자를 설정합니다. 플레이어는 연속하여 세개의 숫자를 입력합니다. 플레이어가 입력한 숫자중에 컴퓨터에 설정한 숫자와 일치하는 수가 있으면 그 갯수만큼 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.5 [중급] 숫자야구 게임  (0) 2008.05.20
4.4 [중급] 영단어 퀴즈 게임  (0) 2008.05.19
4.3 [중급] 피아노 만들기  (6) 2008.05.18
4.2 [중급] 핑퐁 게임  (2) 2008.05.14

이번 장에서는 영어 단어를 맞추는 간단한 퀴즈게임을 만들어 보겠습니다. 스크래치 케릭터가 설명하는 내용을 보고 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 메시지를 받았을 때 현재 단계에 맞는 예문 코스튬을 출력하는 단순한 작업만 합니다. 

사용자 삽입 이미지

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

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

신고

이번 장에서는 키보드로 연주할 수 있는 피아노를 만들어 보겠습니다. 악기와 볼륨을 선택할 수 있고 해당 건반이 선택되었을 때 음계를 보여 줍니다. 키보드는 a(도), s(레), d(미), f(파), g(솔), h(라), j(시), k(도)로 매치됩니다.

사용자 삽입 이미지


1. 스프라이트 생성

아래와 같이 피아노와 음계 스프라이트를 생성합니다. 이미지는 아래의 압축파일을 다운로드 받으신 후 사용하시면 됩니다.

사용자 삽입 이미지


각 음계 스프라이트들을 마우스로 드래그 하여 아래와 같이 해당 건반위에 위치하게 합니다.

사용자 삽입 이미지
 

2. 스크립트

1) 메시지 생성
사용자 삽입 이미지
이전 장에서 처럼 broadcast 블럭의 화살표를 클릭한 후, 'new..'를 선택하여 좌측과 같이 각 음계의 메시지를 생성합니다.

도는 높은 도와 낮은 도 두개가 있기 때문에 높은 도는 'do2'로 지정합니다.




2) 음계 스크립트
모든 음계 스크립트는 아래와 같이 동일합니다. 한가지 다른 점은  [when i receive [message]] 블럭의 메시지에 각 음계의 메시지(do, re, mi, pa...)가 들어 갑니다. 아래는 도 스크립트이며 각 음계마다 아래와 같이 스크립트를 작성하며 메시지(do, re, me..)를 음계에 맞게 수정합니다.
사용자 삽입 이미지

이 스크립트가 하는 일은 간단합니다. 시작되면 [hide]로 음계 이미지를 숨깁니다. 그런 후에 [when i receive [message]] 에서 각 건반의 메시지를 받을 경우에 0.5초간 보여 준 후 다시 숨깁니다. 위의 do 메시지는 사용자가 키보드에서 'a'를 눌렀을 경우에 발생 합니다.

3) 피아노 스크립트
a. 변수 생성
Varaibles의 [Make a variable]을 클릭하여 instrument, volume, oldInstrument, oldVolume 변수를 각각 생성합니다. instrument는 현재 선택된 악기를 저장하며, voloume은 말 그대로 현재 볼률을 저장합니다.

oldInstrument, oldVolume은 각각 이전의 볼륨과 악기를 저장합니다. 사용자에 의해 instrument, volume이 변경되었는지의 검사를 위해서 사용됩니다. 아래의 스크립트에서 forever 블럭 내부를 보시면 용도를 알 수 있습니다.

사용자 삽입 이미지

b. 시작시 초기화
[set volume to (50)] 현재 볼륨을 중간(50)으로 설정합니다.
[set instrument to (1)] 현재 악기를 1로 선택합니다.
[set oldVolume to (volume)] oldVolume을 Volume과 같게 만듭니다.
[set oldInstrument to (instrument)] oldInstrument를 Instrument와 같게 만듭니다.

사용자 삽입 이미지
[set instrument to [값]]의 입력창내의 화살표를 클릭하시면 좌측과 같이 128가지의 선택 가능한 악기들이 나옵니다. 이 악기중 하나를 선택할 수 있습니다.

이 프로그램에서는 1~100까지의 악기만 선택할 수 있습니다.


c. 무한루프
forever 내에서는 현재 볼륨(volume)과 악기(instrument)가 사용자에 의해서 변경되었을 경우 볼륨과 악기를 다시 설정합니다. 설정 후에는 변경된 값들을 다시 old 변수들에 저장하여 같은 값을 다시 지정하지 않도록 합니다.

d. 사용자 입력 처리
사용자가 건반에 해당되는 키를 눌렀을 때는 아래와 같은 명령이 실행됩니다.

[play note [값] for (0.3) beats] note 다음에 오는 값은 음의 높이를 설정합니다. 48(낮은 도)부터 반음을 포함하여 1씩 증가 됩니다. beats 앞의 값은 음의 길이를 설정합니다. 여기서는 0.3으로 설정했습니다. 더 짧게 끝낼려면 0.3보다 작은 값을 입력합니다.

그후에 [broadcast [메시지]]를 이용하여 각각의 메시지를 보냅니다. 이 메시지를 받은 각 음계의 스프라이트들은 잠시 나타났다 사라지게 됩니다.

이제 완료되었습니다. 시작버튼을 클릭하여 테스트를 하여 봅니다.
사용자 삽입 이미지
캔버스 내의 instrument와 volume값을 변경하여 실행해 봅니다. 좌측 하단의 동그란 버튼을 드래그 하면 값들이 변경됩니다.

사용자 삽입 이미지
사용자 삽입 이미지
변수를 더블클릭하면 좌측과 같이 모양이 차례대로 변경됩니다.


신고

이번 장에서는 벽에 반사되는 공을 번갈아 가며 막아 내는 간단한 2인용 핑퐁 게임을 만들어 보겠습니다. 사용되는 키는 아래와 같습니다.

  • q - 플레이어1 Up
  • a - 플레이어1 Down
  • o - 플레이어2 Up
  • l - 플레이어2 Down

q와 a는 플레이어 1이 o와 l은 플레이어 2가 사용합니다.

사용자 삽입 이미지

1. 스크립트/배경 설정
사용자 삽입 이미지
배경과 바, 공 이미지를 페인트 툴에서 직접 그리거나 아래의 압축 파일을 다운로드 받아서 사용합니다.





사용자 삽입 이미지
첫 바 이미지로 Sprite1을 생성한 후에 해당 스프라이트에 마우스 우클릭을 하면 좌측과 같은 메뉴가 나옵니다.

여기서 duplicate를 클릭하면 똑 같은 스프라이트가 Sprite2로 복사됩니다. 


2. 바 스크립트
* 브로드캐스트(broadcast)
스프라이트는 다른 스프라이트에게 동작을 지시하는 등 서로 통신을 할 필요가 있습니다. 이를 위해서 broadcast를 사용합니다. 보내는 쪽에서는 [broadcast [message]] 명령어를 이용해 특정 메시지를 보내고 받는 쪽에선 [when i receive [message]]로 메시지가 발생하였을 때의 동작을 처리할 수 있습니다. 아래의 사용 예를 보시면 이해하기가 쉬울 것입니다.
 
사용자 삽입 이미지

왼쪽은 Sprite1의 스크립트이고 오픈쪽은 Sprite2의 스크립트 입니다. 거의 동일하며 a, q를 입력받는 것과 o, ㅣ을 입력받는 차이만 있습니다.

[if <touching [Sprite3]>] Sprite3은 공 스프라이트 입니다. 공과 바가 충돌했을 경우에는 broadcast를 이용해 reflex란 메시지를 보냅니다.

사용자 삽입 이미지
'reflex'란 메시지를 만들기 위해서 좌측과 같이 broadcast 블럭의 화살표를 클릭한 후에 new 메뉴를 선택합니다. 메시지 이름을 'reflex'로 입력하고 OK버튼을 클릭합니다. 여기서는 [broadcast [message] and wait] 를 사용합니다. 'and wait'가 추가되면 메시지를 발송하고 응답을 받을 때까지 기다립니다. 'and wait' 없이 [broadcast]를 사용하면 공이 바에 충돌하는 동안 계속 메시지가 발생하게 됩니다.


3. 공 스크립트
사용자 삽입 이미지
이전 장에서 설명한 것과 같이 Variables의 [Make a variable]  버튼을 클릭하여 좌측과 같이 ball_x, ball_y, score1, score2 네개의 변수를 생성합니다.

ball_x와 ball_y는 현재 공의 방향을 나타내는 변수 입니다. ball_x가 음수(-)이면 공은 좌측으로 움직이고 양수(+)면 우측으로 움직입니다. ball_y가 음수(-)이면 공이 위쪽으로 양수(+)면 아래로 움직입니다.

score1은 플레이어1의 점수이며 score2는 플레이어2의 점수 입니다. 점수는 스테이지에 보여져야 하므로 좌측의 체크박스를 선택합니다.










스크립트는 아래와 같이 시작시 반복하면서 공을 움직이고 벽과 충돌하는지 검사하는 부분과 플레이어의 바로 부터 메시지를 받았을 경우에 공의 방향을 변경하는 2개의 부분으로 이루어져 있습니다.

사용자 삽입 이미지

1) 변수 초기화
게임이 시작될 때 변수들을 초기화 합니다.

[set ball_x to (2)], [set ball_y to (2)] 초기 공의 방향을 우상단(45도)으로 시작되도록 합니다. ball_x, ball_y에 대입되는 (-)2는 한 프레임당 움직이는 속도 입니다. 숫자가 증가되면 공의 움직임이 빨라 집니다. 그외 score1, score2 점수를 0으로 설정합니다.

2) 공 이동
그 아래있는 [chang x by (ball_x)], [chang y by (ball_y)]는 공의 좌표를 변경해 공이 이동하도록 합니다. 공의 x, y 좌표에 각각 ball_x, ball_y 만큼 더해 집니다.

3) 벽과의 충돌 검사
[if <(y position)  > (170)>] 공이 하단의 벽과 충돌하였을 경우 입니다. ball_y를 -2로 변경하여 공이 반대로 위로 움직이도록 합니다.

[if <(y position)  < (-170)>] 공이 상단의 벽과 충돌하였을 경우 입니다. ball_y를 2로 변경하여 공이 반대로 아래로 움직이도록 합니다.

4) 득점
[if <(x position)  > (220)>] 공이 우측의 벽과 충돌하였을 경우 이며, 플레이어1이 득점을 하게 됩니다. 이 경우에는 공의 위치를 중앙에서 다시 시작하도록 하면 플레이어1의 점수에 1을 증가합니다.

[go to x:(0) y:(0)] 공을 화면의 중앙에 위치하게 합니다.

[set ball_x to (-2)], [set ball_y to (2)] 플레이어1이 득점을 하였기 때문에 이긴 사람이 먼저 공격을 받도록 시작 시 ball_x를 -2로 설정하여 플레이어1쪽으로 진행되도록 합니다.

[change score1 by (1)] 플레이어1의 점수를 1 증가 시킵니다.

아래의 [if <(x position)  < (-220)>] 는 좌측의 벽에 충돌하여 플레이어2가 득점을 한 경우이며 위와 동일한 작업을 합니다.

이제 완료 되었습니다. 깃발(시작) 버튼을 눌러 플레이 해 봅니다. 플레이어 1은 q, a로 플레이어 2는 o,l로 바를 조종합니다. 갈수록 스크립트가 많아져 이전과 중복되는 설명은 생략하였습니다. 어려운 부분은 이전 포스팅을 참조 하시기 바랍니다.


신고

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

4.4 [중급] 영단어 퀴즈 게임  (0) 2008.05.19
4.3 [중급] 피아노 만들기  (6) 2008.05.18
4.2 [중급] 핑퐁 게임  (2) 2008.05.14
4.1 [중급] 대전게임 케릭터 만들기  (0) 2008.03.21
3.7 [초급] 다트 게임  (0) 2008.02.12
3.6 [초급] 페인터  (0) 2008.02.11

아래의 이미지들을 가지고 대전게임에서 나오는 캐릭터와 같은 에니메이션을 간단하게 만들어 보겠습니다. 좌측을 클릭하시면 이미지들을 압축한 파일만 다운로드 받으실 수 있습니다.

사용자 삽입 이미지

사용되는 키는 아래와 같습니다.
  • 위 방향키 - 점프
  • 아래 방향키 - 방어
  • 좌우 방향키 - 이동
  • a, s - 공격

1. 이미지(Costume) 준비

사용자 삽입 이미지
좌측과 같이 각 동작에 필요한 이미지들을 준비합니다. [Paint] 버튼을 눌러 직접 그리거나 [Import] 버튼을 클릭하여 준비된 이미지를 가져 옵니다. 제가 사용한 아래의 파일을 다운로드 받으셔서 사용하셔도 됩니다.




act1, act2는 평상시 동작, act3은 손공격, act4는 발공격, act5는 점프, act6은 방어 동작입니다.


사용자 삽입 이미지
주의 하실 점은 크기가 다른 각 이미지 마다 중심점을 맞추기 위해 모든 코스튬에서 [Edit]를 클릭하여 Paint Editor에서 [+] Set rotation center를 클릭하여 좌측과 같이 좌측 하단에 중심점을 맞추어 줍니다.



2. 변수 생성
변수(Variable)는 말 그대로 변할 수 있는 수입니다. 스크래치에서는 여러 유동적인 값을 저장하기 위해 사용합니다.

사용자 삽입 이미지
이번 장에서는 현재동작과 현재 프레임을 저장하기 위해 'curAction'과 'curFrame' 두개의 변수를 생성합니다. 변수를 생성하기 위해서는 좌측과 같이 Variables 를 클릭하고 [Make a variable]을 클릭합니다.



사용자 삽입 이미지
입력창에 좌측과 같이 curAction을 입력한 후에 하단의 [OK] 버튼을 클릭합니다.

완료되면 다시 [Make a variable]을 클릭해서 curFrame을 입력하고 [OK]버튼을 클릭합니다.





3. 사용자 키입력 처리
각 동작들은 한두개의 차이를 제외하고는 모두 비슷하기 때문에, 여기서는 가장 복잡한 점프 동작만 설명하겠습니다. 다른 동작들은 아래의 전체 스크립트를 참조하시기 바랍니다.

사용자 삽입 이미지
좌측은 위 방향키가 눌러졌을 때, 동작을 지정하는 블록들입니다.

[if <[curAction] = (0)>] 은 현재 동작(curAction)이 공격이나 점프가 아닌 일반 동작(0)일 경우에 실행되도록 합니다.

[set curAction to (1)] 현재 동작(curAction)을 1로 설정해 이제 현재 동작이 일반 동작이 아님을 나타냅니다.

[set curFrame to (20)] 현재 프레임을 20으로 설정합니다. 모든 동작은 40 프레임이 되면 초기화 되는데 20 프레임 동안 점프 동작을 보여주기 위해  (40-20=)20으로 설정합니다.

[change y by (30)] 다른 동작과 달리 점프 동작은 일반 동작 보다 위에 출력해야 하기 때문에 y 값에 30을 더해 30pixel 만큼 위로 올립니다.

[switch to costume [act5]] 현재 동작을 점프 동작(act5)으로 설정합니다.


4. 에니메이션
[forever]로 실행되는 동안 반복되면서 에니메이션을 출력하는 핵심 부분입니다. 한번 반복될 때 마다 프레임을 증가 시키고 현재 상태(curAction, curFrame)에 따른 필요한 작업을 수행합니다.

사용자 삽입 이미지
[if <[curAction] = (0)>] 블록은 현재 동작이 사용자가 동작 키를 입력하지 않은 일반동작(0)일 경우에만 실행됩니다.

현재 프레임이 0~19면 모양을 act1로 설정하고 20 이상이면 act2로 설정합니다. act1과 act2를 반복적으로 보여줌으로서 일반상태의 움직임을 표현합니다.

[change curFrame by (1)] 현재 프레임을 1 증가 시킵니다.

[if <[curFrame] > (40)>] 블록은 현재 프레임이 40보다 클경우 실행되며 각종 변수들과 동작을 초기화 합니다.

[if <(costume #)=(3)>] 현재 이미지가 점프 동작이면
[change y by (-30)]으로 점프시에 30 증가했던 값을 본래 위치로 설정합니다. (저는 코스튬을 몇번 삭제하고 다시 올렸기 때문에 3이지만 등록 순서에 따라 틀릴 수 있습니다. 점프 커스튬의 좌측 상단 숫자를 입력하시면 됩니다.)

[set curAction to (0)] 현재 동작을 일반동작(0)으로 설정합니다.

[set curFrame to (0)] 현재 프레임을(curFrame)을 0으로 만들어 프레임 값이 항상 0~39로 한정되게 합니다.

5. 완료

전체 스크립트는 아래와 같습니다. 조금 복잡하지만 이전 내용과 비슷한 부분이 많고 반복되는 부분을 제외하면 이해할 부분은 많지 않습니다.
사용자 삽입 이미지

웹에서 실행되는 모습과 프로젝트 파일 다운로드는 스크레치 사이트의 제 프로젝트에서 확인하실 수 있습니다.
신고

이번 장에서는 빙글빙글 회전하는 표적에 마우스를 클릭하여 표적의 1, 2, 3, 4의 번호 중 하나를 선택하는 게임을 만들어 보겠습니다.
사용자 삽입 이미지
1. 스프라이트 추가

사용자 삽입 이미지
기존 스프라이트를 삭제하고 좌측의 스프라이트 추가 버튼을 클릭하여 표적과 화살 이미지를 선택하여 아래와 같이 두개의 스프라이트를 추가합니다. 표적과 화살 이미지는 페인트 툴에서 직접 그리거나 아래의 이미지 파일을 다운로드 받아 사용합니다.


2. 표적 스크립트

1) 변수 생성
변수(Variables)는 스크립트에서 특정 상태나 값을 저장하기 위해서 사용합니다. 변수는 말 그대로 변할 수 있는 수(값)이기 때문에 원하는 값을 설정하고 참조할 수 있습니다. 이 프로그램에서는 표적이 회전해야 하는지 화살이 발사되어 멈추어야 하는지를 판별하기 위해 isEnd란 변수를 생성하여 사용합니다.

isEnd가 1일 경우에는 사용자가 마우스를 클릭하여 화살이 발사된 경우며, 0일 경우에는 아직 발사하지 않은 상태입니다.

사용자 삽입 이미지
변수를 만들기 위해 Variables를 항목에서 [Make a variable] 항목을 클릭합니다.

아래와 같이 변수를 생성하는 창이 열리면, 생성될 변수의 이름을 입력한 후 [OK]를 클릭합니다.

For all sprites는 모든 스프라이트가 사용하도록 생성됩니다. For this sprite only는 해당 스프라이트에서만 사용하는 변수입니다. 여기서는 표적 스프라이트와 화살 스프라이트에서 모두 참조 하므로 아래와 같이 For all sprites를 선택합니다.

사용자 삽입 이미지

사용자 삽입 이미지
변수 생성이 완료되면 좌측과 같이 세개의 블럭이 추가됩니다. 각 블럭들의 의미는 다음과 같습니다.




[change 변수 by (값)]
변수에 (값)에 있는 수만큼 더 합니다.

[set 변수명 to (값)]
변수를 (값)에 입력된 값을 대입합니다.

[변수명]
변수를 if와 같은 조건 블럭이나 Numbers의 여러 대입, 비교등의 블럭내에 드래그 하여 가져다 놓을 수 있습니다.

사용자 삽입 이미지
앞의 체크박스를 클릭하면 좌측과 같이 실행화면에서 좌측과 같이 변수의 값을 확인할 수 있습니다.

2) 스프라이트
표적을 회전시키기 위해 해당 블럭들을 가져와서 아래와 같이 배치합니다.

사용자 삽입 이미지

[set isEnd to (0)]
시작시에 isEnd 값을 0으로 설정합니다.

[forever if <isEnd = (0)>]
포함된 명령어 블럭들이 isEnd가 0인 동안 무한으로 반복됩니다. 녹색의 <() = ()> 블럭은 Numbers에 위치합니다.

[turn (15) degrees]
표적을 한번 반복될 때마다 15도씩 시계방향으로 회전시킵니다.

3. 화살 스크립트

마우스가 클릭되었을 때 화살을 마우스가 눌려진 위치에 출력하고 표적을 정지 시키기 위해 아래와 같이 명령어 블럭들을 배치 합니다.

사용자 삽입 이미지

[hide]
시작시에는 화살의 모습을 숨깁니다.

if <<isEnd = 0> AND <mouse down?>>]
isEnd 변수가 0(표적이 회전 중)이고 사용자의 마우스가 눌러 졌을 경우에만 화살을 발사하도록 합니다. <> and <> 블록은 좌측과 우측의 값이 모두 참(1)일 경우에만 참(1)이 됩니다.

[set isEnd to (1)]
화살이 발사 되었으므로 isEnd를 1로 설정합니다. isEnd가 1이므로 표적이 회전하지 않습니다. (상단 표적 스프라이트 참조)

[play sound [pop]]
스프라이트가 기본으로 가지고 있는 소리(pop)를 출력합니다.

[go to [mouse-pointer]]
마우스 포인터가 위치한 곳으로 스프라이트의 위치를 이동합니다.

[show]
이제 화살을 출력합니다.

이제 테스트를 위해 시작버튼을 클릭합니다. 회전하는 표적에 마우스를 가져가서 클릭하면 해당 위치에 화살이 출력되며 표적이 멈춥니다.


신고

이번 장에서는 마우스를 이용하여 자유롭게 그림을 그릴 수 있는 페인트 툴을 만들어 보겠습니다. 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의 값들을 변경해 가면서 그림을 그려 봅니다.

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

신고

사용자 삽입 이미지
이번 장에서는 키보드의 입력에 따라 움직이는 우주선을 만들어 보겠습니다. 그리고 우주선의 불꽃 부분이 움직이는 에니메이션 효과와 우주선의 움직임에 따라 선을 그리도록 추가해 보겠습니다.

1. 에니메이션

1) 스프라이트 추가

사용자 삽입 이미지
먼저 우주선 스프라이트를 추가해 보겠습니다. 우선 스크래치를 실행하고, 좌측과 같이 스프라이트의 메뉴에서 Costumes를 선택합니다.

페인트 에디터를 이용하여 직접 그릴 경우에는 [Paint] 버튼을 클릭하고 기존의 이미지에서 불러 올 경우에는 [Import] 버튼을 클릭합니다. 아래의 압축 파일을 다운로드 받으시면 이 예제에서 사용한 2개의 우주선 이미지를 사용할 수 있습니다.

 
사용자 삽입 이미지
기존의 사용하지 않는 costume들은 삭제합니다. 각 이미지 우측 하단의 [X] 버튼을 클릭하여 삭제합니다.


2) 기준점 설정
사용자 삽입 이미지
기존 커스텀은 삭제되고 좌측과 같이 불꽃 모양이 다른 우주선 커스툼 두개가 등록되어 있습니다.

만약 페인트 에디터를 사용하여 직접 그리거나 다른 이미지를 불러 왔다면, 이름을 더블클릭하여 좌측과 같이 커스툼 이름을 변경하여 줍니다.

좌측을 보시면 39X39와 36X39로 두개의 이미지 크기가 다릅니다. 이는 번갈아 보여주는 에니메이션시 두개의 우주선의 위치가 바뀌어 보일 수 있습니다.

사용자 삽입 이미지
좌측과 같이 똑 같은 위치에 우주선을 보여 주면 너비가 다르기 때문에 위치가 변경되어 우주선이 흔들리는 것처럼 보여 집니다.

이와 같이 크기가 틀린 커스툼들을 보여줄 경우에는 위치를 보정하기 위해 기준점을 설정합니다. 기준점은 페인트 에디터에서 설정할 수 있습니다. 커스텀 영역내에 있는 [Edit] 버튼을 클릭하여 페인트 에디터를 실행합니다.
 

사용자 삽입 이미지
기준점 설정을 위하여 페인트 에디터의 좌측하단에 있는 [Set rotation center] 버튼을 클릭합니다.

사용자 삽입 이미지
좌측과 같이 기준점을 비행기 중앙의 원의 중심에 일치하도록 설정합니다. 두번째 그림(ship2)도 이와 동일하게 적용합니다.

이제 크기가 다른 이미지가 번갈아 가며 보여지더라도 정확한 위치에서 흔들림 없이 불꽃의 길이만 변경됩니다.


3) 스크립트
사용자 삽입 이미지
에니메이션을 위해 좌측과 같이 블럭을 스크립트 영역에 배열합니다.

[When flag Clicked] 사용자가 시작 버튼을 클릭하면 연결된  명령들이 실행됩니다.

[point in direction [0]] 우주선의 초기 방향을 위로 향하도록 합니다. 방향에 대한 설명은 아래에서 다시 하겠습니다.

[forever] forever내의 명령들은 프로젝트가 실행되는 동안 무한으로 반복되어 실행됩니다.
    [switch to costume [sihp]] 모양을 ship 커스툼으로 변경합니다.
    [wait [0.1] secs] ship 커스텀 모양을 0.1초 유지하도록 합니다.
    [switch to costume [sihp2]] 모양을 ship2 커스툼으로 변경합니다.

이제 깃발 버튼을 클릭하여 프로젝트를 실행 하고 에니메이션이 되는지 확인합니다.

2. 이동
사용자 삽입 이미지
방향키가 클릭되었을 때 이미지를 선택된 방향으로 회전하고 이동하도록 하여 줍니다. 좌측과 같이 각각의 블럭들을 배치합니다.

[when [up arrow] key pressd]
위 방향키가 클릭되었을 때 연결된 블럭들이 실행됩니다.

[change y by [10]]
현재 y 좌표에 10을 더합니다. y의 수가 클수록 위로 이동합니다.

[point in direction [0]]
주어진 각도로 이미지를 회전합니다. 이미지 회전 위치는 아래와 같습니다.

다른 방향키도 위와 같은 방법으로 설정된 방향으로 방향을 바꾸고 이동하도록 되어 있습니다.



사용자 삽입 이미지
[point in direction [값]] 블럭은 값에 따라서 좌측의 이미지와 같은 방향으로 커스툼을 회전합니다. 방향에 따른 각각의 값들은 아래와 같습니다.

위: 0
아래:180
좌측:-90
우측:90


3. 선 그리기
사용자 삽입 이미지
이제 마지막으로 우주선이 움직이는 경로에 선이 그려지도록 하겠습니다. 이와 관계된 블럭들은 [pen] 분류에 있습니다.

사용자 삽입 이미지
좌측과 같이 기존의 [when flag clicked]에 펜에 관련된 초록색 블럭들을 세개 추가합니다.

[clear] 펜으로 그려진 선들을 모두 지웁니다.

[pen down] 해당 스프라이트가 이동 시에 현재 스프라이트 위치에 선을 그리도록 설정합니다.
 
[set pen size to [5]] 선 굵기로 5로 설정합니다.





이제 실행하여 보면 아래와 같이 우주선의 이동경로를 따라 지정된 선이 그려지는 것을 확인할 수 있습니다.
사용자 삽입 이미지
웹에서 실행되는 모습과 프로젝트 파일 다운로드는 스크레치 사이트의 제 프로젝트에서 확인하실 수 있습니다.
신고

이번장에서는 신나는 음악에 맞추어 케릭터가 춤을 추는 에니메이션을 만들어 보겠습니다. 연속적으로 케릭터가 동작하는 방법과 스크래치에 포함된 케릭터, 배경 이미지와 음악을 활용하는 방법을 알아 보겠습니다.   

사용자 삽입 이미지

1. 배경화면 설정
스크래치는 페인트 툴과 녹음 기능을 이용하여 원하는 이미지와 효과음을 직접 만들어 사용할 수도 있고, 존재하는 파일을 불러 와서 사용할 수 있습니다. 이와 함께 사용자가 스크래치에 이미 준비되어 있는 각종 그림과 음악 파일들을 사용할 수 있습니다.

스크래치가 설치된 폴더를 보면 Media란 폴더가 있습니다. 이곳에는 배경과 커스튬에 사용할 수 있는 이미지 파일과 효과음과 배경음으로 사용할 수 있는 음악 파일들이 있습니다. 이곳에 있는 파일들을 이용하면 손쉽게 원하는 스크래치 프로그램들을 만들 수 있습니다.

1) 배경화면 설정
사용자 삽입 이미지
스크래치 우측하단의 Stage의 사각형 부분을 클릭하면 Backgrounds란 텝이 나타납니다. New background:에서 [Import] 버튼을 클릭합니다.

Backgrounds/Indoors 폴더를 선택합니다. spotlight-stage 이미지 파일을 선택하고 [OK] 버튼을 클릭합니다. 기존의 background1로 되어 있는 파일은 (X) 버튼을 클릭하여 삭제합니다.

사용자 삽입 이미지

2. 커스텀 설정

1) 기본 스프라이트 삭제
사용자 삽입 이미지
새로운 스크래치 프로젝트를 만들면 좌측과 같이 스크래치의 기본 캐릭터가 Sprite1로 설정되어 있습니다.

 기본 캐릭터에 마우스 오른쪽 버튼을 클릭하여 나오는 메뉴에서 delete를 클릭하여 삭제합니다.


2) 스프라이트 추가
사용자 삽입 이미지
좌측과 같은 우측 중간에 위치해 있는 버튼을 클릭하여 스프라이트를 파일로 부터 추가합니다. 아래와 같은 창이 뜨면 Costumes/People에서 breakdancer-1이란 스프라이트를 추가합니다.

사용자 삽입 이미지

3) 커스튬 추가
춤추는 에니메이션을 위해서 기본 스프라이트에  커스튬을 추가합니다. 스프라이트의 Custumes 탭에서 New costume의 [Import] 버튼을 클릭하여 breakdance-2부터 4까지 파일을 아래와 같이 추가 합니다.
사용자 삽입 이미지

3. 배경음 설정
Stage가 선택된 상태에서 아래와 같이 Sounds탭을 선택한 후에  New sound:의 [Import] 버튼을 클릭합니다. 창이 뜨면 Sounds/Music Loops밑의 Drum을 선택합니다. 아래와 같이 Drum 사운드 파일이 등록되었음을 확인합니다.

사용자 삽입 이미지

4. 스크립트

1) 에니메이션
스크립트 블럭을 가지고 와서 아래와 같이 배치합니다.
사용자 삽입 이미지

[switch to costume (custume)]은 현재 스프라이트의 커스튬(이미지)를 설정된 커스튬으로 변경해 주는 명령어 입니다. 아래와 같이 화살표를 클릭하면 현재 스프라이트에 등록된 custume을 선택할 수 있습니다.
사용자 삽입 이미지

[repeat (5)]는 블럭안의 명령어들이 ()안에 지정된 숫자만큼 반복해서 실행됩니다. [wait (0.5) secs]는 ()안에 지정된 초만큼 기다렸다 다음 블럭이 실행됩니다.

여기선 custume1을 보여 주고 0.5초씩 멈추어 가며  2, 3, 4 custume을 반복해서 5회 보여 준 후에 다시 custume1 부터 반복해서 보여주게 만들어 줍니다. 이 명령어들로 케릭터가 반복적으로 춤을 추는 것처럼 보이는 에니메이션을 만듭니다.

2) 배경음악 출력
Stage를 클릭하고 Scripts에서 아래와 같이 블럭을 배치 합니다.

사용자 삽입 이미지

[forever]로 배경음악을 반복해서 연주 하도록 합니다. [play sound (Drum) until done]은 음악이 끝날 때까지 다음 명령어가 실행되지 않습니다. [play sound (Drum)]은 연주가 끝나지 않더라도 계속 연주를 하기 때문에 겹쳐서 들리게 됩니다.

이제 깃발 버튼(Start)을 클릭하여 실행하여 봅니다. 음악에 맞추어 브레이크 댄스를 추는 모습을 볼 수 있습니다.


신고

이번 장에서는 이전 포스트에서 만들었던 프로젝트를 스크래치 홈페이지에 올려 다른 사람들과 공유하는 방법에 대해서 알아 보겠습니다.

업로드 하기전에 이전 포스트에서 작업했던 프로젝트를 조금 변경해 보겠습니다. 연주/정지 명령을 키보드 스페이스 입력으로 되어 있던 부분을 마우스 클릭으로 받도록 변경해 보겠습니다.

1. 프로젝트 수정

상단 툴바의  [Open] 버튼을 클릭하여 이전 포스트에서 작성해 놓은 프로젝트를 불러 옵니다. 

1) 키보드 입력 블럭 제거
사용자 삽입 이미지
[when space key pressed]를 제거합니다.

[when space key pressed] 블럭을 마우스로 드래그 하면 해당 블럭들 전체가 이동을 합니다. 그렇기 때문에 그 하단의 [if <(isPlay)=0>] 블럭 부분을 마우스로 클릭한 후에 이동하여 분리합니다.

분리된 후 [when space key pressed] 블럭을 좌측의 블럭들 목록으로 드래그 하시면 삭제됩니다.






2) 마우스 클릭 블럭 추가
사용자 삽입 이미지

스프라이트에 마우스 버튼이 클릭되었을 경우에 행동을 지정하기 위해  [when (sprite name) clicked]를 사용합니다. (sprite name)은 해당 스프라이트의 이름입니다. 저는 위의 이미지와 같이 'Play'로 변경하였습니다.

첫번째 스프라이트는 기본값으로 'Sprite1'로 지정되며, 이 경우에는 [when Sprite1 clicked]로 되어 있을 것입니다. 이 블럭을 클릭하여 아래와 같이 [if <(isPlay)=0>]  상단에 결합 합니다.

사용자 삽입 이미지

3) 블럭 수정
기존의 연주 상태를 나타내기 위해 스프라이트를 사용했지만 버튼으로 사용하기 위해 스프라이트의 이미지를 반대로 설정합니다. 이전에는 연주중이면 연주중이라는 표시를 위해 play 이미지를 사용했지만, 이제 연주를 중지하는 명령의 의미로 사용하기 때문에 연주 중에는 stop이미지를 사용합니다. 반대로 연주가 중지 중일때도 동일하게 적용합니다.

이를 위해 [switch to costume [custume]] 블럭들의 모양(custume)을 위의 붉은색 표시와 같이 이전과는 반대로 이미지를 설정합니다. 이제 기존의 space 키 대신에 마우스로 버튼을 클릭하여 음악을 연주/중지 할 수 있습니다.


2. 프로젝트 업로드

1) 업로드
사용자 삽입 이미지
상단 툴바에서 좌측과 같은 Share!를 클릭합니다. 아래와 같은 업로드 창을 보실 수 있습니다.

스크래치 사이트에 회원가입이 되있어야 업로드를 할 수 있습니다. 회원등록을 하지 않으셨으면 아이디 입력란 하단에 Create account을 클릭하여 스크래치 사이트로 들어가 회원 가입을 합니다. (회원가입에 관련된 내용은 이전 포스트를 확인해 주세요.)

사용자 삽입 이미지

Your scratch website login name: 스크래치 사이트의 로그인 아이디를 입력합니다.

Password: 스크래치 사이트의 로그인 패스워드를 입력합니다.

Project name: 프로젝트 이름을 입력합니다.

Project notes: 프로젝트에 관한 간단한 설명을 입력합니다.

Tags: 프로젝트의 미리 정의된 태그를 설정합니다.

More tags: 사용자가 필요한 태그를 입력합니다.

[v] Compress sounds and image 포함된 음악, 이미지 파일의 압축 여부를 선택합니다.

사용자 삽입 이미지
각각의 입력을 확인한 후 [OK] 버튼을 클릭합니다. 좌측과 같은 진행 창이 오픈되어 업로드 상황을 확인할 수 있습니다.

"Your project is now online at scratch.mit.edu" 란 메시지가 나오면 성공적으로 업로드 된 것입니다. [OK]를 클릭합니다.



2) 스크래치 사이트에서 확인

이제 확인을 위하여 스크래치 사이트로 가서 로그인을 한 후에 우측 상단 메뉴의 my stuff를 클릭합니다. 아래와 같이 업로드 한 프로젝트들을 보실 수 있습니다.

사용자 삽입 이미지

a. 상세 보기
조금 전에 올린 playDemo2를 클릭하여 상세보기로 들어 갑니다. 아래와 같이 실행 화면과 기타 프로젝트에 관련된 정보를 볼 수가 있습니다.

사용자 삽입 이미지


b. 다른 웹사이트 올리기
상세보기에서 좌측을 보시면 'Link to this Project'란 메뉴가 있습니다. 이 메뉴 중 Embed는 프로젝트와 이미지를 직접 HTML을 넣을 수 있는 소스를 제공합니다. 이 소스를 복사하여 홈페이지나 블로그 편집창에서 붙여 넣으시면 해당 사이트(블로그)에서 바로 실행할 수 있습니다. Post는 del.icio.us, Digg, Facebook, Reddit과 같은 웹사이트에 바로 등록할 수 있게 해줍니다.

사용자 삽입 이미지
(좌측은 Embed, 우측은 Post 메뉴입니다.)

c. 댓글
스크래치 사이트에서는 다른 사람들이 올린 프로젝트에 댓글을 달 수가 있습니다. 아래는 위의 샘플 프로젝트에 달린 댓글들입니다.

사용자 삽입 이미지
좌측에 보시는 것처럼 제가 올린 프로젝트에 두 개의 댓글이 등록되어 있습니다.

위의 댓글은 "뭐 이런 간단한 것을 올렸냐"는 의미인 것 같습니다. 아래 댓글은 "너무나 간단해서 신선하다" 그런 의미인 것 같고요.

보시는 바와 같이 댓글을 통해 다른 사람들과 의견을 교환할 수 있습니다. 잘 만든 프로젝트에는 칭찬이 달리고 못 만들었더라도 격려와 개선사항에 대해서 알려 줍니다. 나이 어린 사용자들이 많아서인지 악플은 거의 없는 것 같습니다.

이상으로 만들은 프로젝트를 스크래치 사이트로 업로드 하는 방법에 대해서 알아 보았습니다. 꼭 잘만들지 않았더라도 업로드 하고 공유하여 다른 사람들의 의견과 조언을 들을 수 있습니다. 또한 꾸준히 올려 본인만의 프로젝트 갤러리를 만들어 발전하는 모습을 쉽게 확인할 수 있습니다.

신고

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

사용자 삽입 이미지

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

예제로 사용된 MP3에 대하여...



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]를 클릭하여 저장합니다.
(모든 입력창에서 한글은 입력되지 않습니다.)
스크래치로 음악을 연주하는 간단한 프로그램을 만들어 보았습니다. 다음 장에선 스프라이트를 움직이는 간단한 프로젝트를 만들어 보겠습니다.

신고