튜토리얼을 진행하기에 앞서 스크래치 툴에 관해서 간단히 알아 보겠습니다. 스크래치의 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] 캔버스의 모든 내용을 삭제합니다.


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




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

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

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

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

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

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

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

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

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

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



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

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



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


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


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