스크래치 기초 4-3 : 배경이미지 업로드 및 예제 풀어보기

이번 포스팅에서는 계속 배우기만 하면 지루하니 스스로 풀어보는 시간을 가져보기 위해 앞에서 배운 내용을 응용해서 예제 문제를 하나 풀어 보려고 합니다.

 

(예제) 거미줄에서 거미가 키보드의 상하 키에 반응하여 위아래로 30의 속도로 움직이게 만들고 스페이스바를 누르면 좌표 (-150, 100) 지점으로 이동하게 하시오. 또한, 배경은 거미줄 이미지를 배경으로 사용하세요.

 

대충 문제를 읽어보니 왠지 우리가 했던 대로 하면 금방 될 것 같습니다.

이미지 재료로 먼저 거미와 거미줄 배경을 구해야겠습니다. 스프라이트 고르기에서 동물 칸에 들어가 보면 'Ladybug2'라는 위아래로 움직이기 적당한 거미가 있습니다. 이걸로 골라야겠습니다.

 

다음으로 거미줄이 있는 배경 이미지를 찾아보니 스크래치 자체에는 보이질 않네요. 

저작권 무료 이미지 사이트인 pxhere에 들어가 거미줄이라고 검색해보니 재료로 쓸만한 많은 거미줄이 보이는데 적당한 것을 골라 줍니다. 저는 아래의 거미줄을 고른 뒤 800 × 600을 다운로드하였습니다.

 

거미는 에디터로 불러들였는데 배경으로 쓸 거미줄은 아직 불러오지 못한 상태입니다.

에디터에서 미리 보기창 바로 오른쪽 아래에 있는 배경 업로드하기를 클릭한 뒤 다운로드한 거미줄을 선택해 줍니다. 배경 탭에서 이미지 편집창 아래에 있는 백터로 바꾸기를 눌러주어 이미지 축소/확대에 따른 손실이 적은 백터 포맷으로 바꾸어 줍니다.

 

 

그런데 배경으로 쓰려고 한 거미줄 이미지 800 × 600은 화면보다 조금 작은 사이즈로 보입니다.

 

배경 탭의 이미지 편집창에서 거미줄을 클릭하면 파란색 테두리가 생기면서 줄이거나 늘리거나 회전하는 등의 편집이 가능한 상태가 됩니다. 이때 모서리들을 끌어당겨 화면에 꽉 차도록 확대시켜주기 바랍니다. 마우스로 거미줄을 이동시켜가며 가로와 세로 크기를 늘리며 조절해서 화면에 꽉 차도록 조정해주면 됩니다.

이제야 조금은 그럴싸한 배경과 거미가 생겼습니다. 

 

 

이제 배경과 스프라이트가 생겼으므로 상하로 키보드에 반응하게 만들고 스페이스키를 누르면 지정위치로 돌아가는 코드만 넣으면 되겠습니다.

 

우선 코드 탭을 눌러서 블록 편집할 수 있는 상태를 만들어 준 뒤 Ladybugs2라는 거미 이름을 거미로 바꾸어줍니다.

 

처음으로 만들 것은 위쪽 화살표 키를 눌렀을 경우 거미가 위로 올라가야 합니다.

- 코드 탭의 이벤트 팔레트를 누르고 '스페이스키를 눌렀을 때'를 가져온 뒤 '위쪽 화살표'로 바꾸어 줍니다.

- 코드탭의 동작 팔레트에서 '90도 방향 보기'를 가져와 위쪽으로 올라가야 하므로 '0도'로 바꾸어 줍니다.

- 코드탭의 동작 팔레트에서 '회전 방식을 회전으로 정하기' 블록을 가져와 '왼쪽-오른쪽'으로 바꾸어 줍니다.

여기서 이전에 배운 것과 다소 혼동이 올 수 있는데 거미 스프라이트의 움직임 특성이 상하인 점에서 혼동이 올 수 있습니다.

회전 방식을 상하를 하게 되면 거미가 좌우로 움직이게 되는 데 거미의 기본 이동방향이 다른 동물들처럼 좌우가 아니라 상하이기 때문입니다.

- 동작 팔레트에서 '10만큼 움직이기'를 가져온 뒤 10을 30으로 바꾸어 줍니다.

- 동작 팔레트에서 '벽에 닿으면 튕기기'를 넣어 줍니다. 이 블록을 넣지 않으면 화살표 키를 누를 때 영역 바깥쪽까지 나가게 됩니다.

 

 

아래쪽 키의 블록 설정은 위의 블록 군을 복사한 뒤 '아래쪽 화살표 키를 눌렀을 때', '180도 방향 보기'로 바꾸어 주면 됩니다.

 

마지막으로 스페이스키를 눌렀을 때 거미가 화면 중앙 지점으로 오도록 만들어야 합니다.

- 이벤트 팔레트에서 '스페이스키를 눌렀을 때'를 가져옵니다.

- 동작 팔레트에서 'x:0 y:0으로 이동하기' 블록을 가져옵니다.

- 동작 팔레트에서 '90도 방향 보기'를 추가합니다. 방향이 혼란스러울 때는 각도를 바꾸어가며 테스트해보면 됩니다. 거미의 이동방향이 상하인 관계로 각도에 다소 혼란이 올 수 있습니다.

모두 완성된 블록들의 이미지는 아래와 같습니다.

 

 

키보드의 상하 키와 스페이스키에 따라 거미의 반응이 이상이 없는지 확인하고 저장합니다.

수고하셨습니다.

링크 주소는 아래와 같습니다.