3.5 [초급] 키보드로 움직이는 우주선

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

1. 에니메이션

1) 스프라이트 추가

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

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

invalid-file

 

기존의 사용하지 않는 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로 설정합니다.





이제 실행하여 보면 아래와 같이 우주선의 이동경로를 따라 지정된 선이 그려지는 것을 확인할 수 있습니다.

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