본문 바로가기
어린이 코딩/스크래치 기초

[스크래치-기초] 펜 기능을 이용한 그림 그리기 구현하기

by [바가지] 2017. 10. 23.
반응형

스크래치 기초 다지기

 펜 기능을 이용한 그림 그리기


'스크래치 기초 다지기편' 입니다.

이번 포스팅에서는 '펜' 스크립트 기능을 이용하여 그림 그리기 기능을 구현해 보고자 합니다.


■ 펜 스크립트 기능이란


화면에 펜처럼 그림을 그릴 수 있는 기능을 말합니다. 펜의 색깔, 명암, 굵기를 설정 할 수 있습니다.

또한 도장찍기 기능이 있어, 스프라이트의 이미지를 그대로 화면에 찍을 수도 있습니다.


■ 구상단계


펜 기능을 이용하여 간단하게 그림을 그리는 기능을 구현 하고자 합니다.

→ 펜 이미지를 하나 스프라이트 위에 올려 놓을 것입니다. 그리고 스페이스를 누를때마다 사용모드에서 미사용모드로, 미사용모드에서 사용모드로 변경 되도록 하겠습니다. 

사용모드에서 마우스를 움직이면 화면에 그림이 그대로 그려지게 될 것이고 미사용모드에서는 펜은 그자리 그대로 멈춰있고, 마우스만 움직이게 될 것입니다.

→ 'D' 키를 클릭 했을 경우는 화면을 깨끗하게 지우도록 기능을 추가 해 보도록 하겠습니다.


■ 구현단계


1. 먼저 스프라이트에 펜 이미지를 올려 놓도록 하겠습니다.

기본으로 제공되는 이미지들 중에 아래와 같은 펜 이미지가 있습니다. 스크립트 탭 옆에 있는 모양 탭을 클릭 해 줍니다.


구현화면



2. [저장소에서 모양 선택] 이미지 버튼을 클릭합니다.

그리고 알맞는 모양을 선택 해 줍니다. 저는 연필 모양의 이미지를 선택 하였습니다.


이미지 선택하기



3. 이미지 중심을 설정해 줍니다.

 1) [모양 중심 설정하기] 버튼을 클릭합니다.

 2) 중심이 될 부분을 클릭 해 줍니다. 저는 연필 끝 부분으로 설정하였습니다.


이미지 중심 설정하기



4. 데이터 스크립트에서 변수를 하나 만들어 줍니다.

이 변수는 펜을 사용할지, 사용하지 않을지 설정값을 가지고 있게 될 것입니다.

 

변수만들기



5. 이제 블록 코딩 부분입니다. 

1) 클릭했을 경우 일어나는 부분입니다.

- 미사용으로 초기 설정을 해 줍니다. 그리고 무한반복을 하게 하는데, 만약 사용모드일 경우 이미지(펜)가 마우스 포인터로 이동하도록 합니다. 

- 방향보기를 설정해 주는 이유는 사용일 경우와 미사용일 경우 펜의 각도를 변경 해 주기 위해서입니다.

 

클릭했을 경우 블록



2) 스페이스 키를 눌렀을 경우 사용모드와 미사용모드를 전환 하도록 해 줍니다.

사용일 경우는 미사용으로, 미사용일 경우는 사용모드로 전화하게 됩니다.

그리고 이때 [사용 모드] 일 경우는 [팬 올리기] 블록을 추가하여 그림이 그려지도록 하고, [미사용 모드] 일 경우는 [펜 내리기] 블록을 추가하여 그림이 그려지지 않도록 합니다.


스페이스 키 눌렀을때 블록 코딩



3) 마지막으로 d키를 눌렀을 때는 [지우기] 블록을 추가하여 화면이 깨끗하게 지워지도록 합니다.


D키를 눌렀을 경우 코딩 부분



■ 실행


그럼 한번 스크래치 코딩 한 것을 실행 해 보도록 하겠습니다.

스페이스 키를 누르면 사용(그림그리기) 모드가 됩니다. 한번 더 누르면 미사용 모드로 전환 됩니다.

d 키를 클릭 하면 모두 지워 집니다.



여기까지 펜 기능을 이용한 스크래치 그림 그리기 기능을 구현 해 보았습니다.

반응형