Boki Web Dev Engineer

스크래치 3강 - 페인트(그림그리기)

2020-10-19
boki

3강까지 왔어요 잘하고있어요 이제 스크래치가 뭔지, 뭘 할 수 있는지 감을 조금 잡았죠?

이번시간에는 아주간단한 2색 그림판을 만들어볼거에요. 그리고 방송, 호출 기능을 배워볼거에요

출처-이 강의들은 코드클럽SW교육기부단 자료를 토대로 재구성하였습니다.

완성사진

image

두가지 색으로 이용해서 간단하게 그림판을 만들어봅니다

그림 크기가 너무 작아서 안보인다하시는분들은 그림에 마우스 우측클릭->새 탭에서 이미지 열기를 눌러주시거나 맨 밑에 코드 완성본이 있습니다.

링크 : rpf.io/paint-box-on

시작 전에 위의 링크에 들어가줍니다. 그리고 영어들은 무시하고 우측 아래에 Pencil과 Eraser만 봐주세요.

각각 마우스 오른쪽 클릭을 눌러서 Export를 눌러준다음에 다른 이름으로 저장을 눌러서 자기가 원하는 경로에 2개 파일을 다운받아주세요.

image

그리고 스크래치를 켜줍니다!

우측 아래에 스프라이트 고르기->스프라이트 업로드를 눌러서 아까 다운받은 파일2개를 열어줍니다

image

원래 했던것처럼 첫번째 고양이 스프라이트1은 휴지통부분을 클릭해서 지워줍니다

그리고 왼쪽 아래 확장 기능 추가하기 클릭 후 펜을 클릭해주세요

그럼 왼쪽 메뉴에 펜을 쓸 수 있는 메뉴들이 생성됩니다.

image image image image

지우개 말고, 파란색 연필 pencil을 클릭해줍니다!!!

자 프로그램의 시작은 무엇? 클릭했을때~~ 이벤트-클릭했을 때를 끌어서 가운데다 둡니다

그리고 새로 생성된 펜 메뉴를 클릭해서 모두 지우기를 끌어서 밑에 붙여줍니다

밑에 무한 반복하기를 추가해줍니다. 그리고 동작-무작위 위치으(로) 이동하기를 끌어서 반복문 안에 놓아줄게요

그리고 무작위 위치를 클릭해서 마우스 포인터로 바꿔줍니다

image image image

  • 펜이 세워져있다거나 하는 경우는 방향을 90도로 바꿔주세요!!

image

실행해서 움직여보면 마우스포인터를 잘 따라가는걸 볼수있을거에요

만약 마우스포인터랑 위치가 안맞는다면… 모양을 눌러주세요.

저 십자 모양 점이랑 연필 모서리랑 똑같이 닿아있어야 정확하게 마우스포인터를 따라움직여요

그걸 맞춰주기 위해서… 연필 전체를 드래그해서 연필심 부분 +모양쪽으로 드래그해주세요!!

image image image

그리고 다시 실행을 해보면 정확히 마우스랑 연필심쪽이 닿아있는걸 볼수있을거에요!

image

자 빨간 버튼을 눌러서 중지시키고 다시 코드로돌아와서 마우스 포인터로 이동하기 밑에 제어-만약~라면, 아니면 2중블록을 붙여주세요

그리고 감지-마우스를 클릭했는가?를 끌어서 만약 ~라면 안에다 넣어줄게요

그리고 펜에 가서 펜 내리기를 움푹 패인곳 안에 넣어주세요. 이 블록은 조건이 참(진실)일때 수행하는 블록이에요

그리고 반대의미인 펜 올리기를 아니면 안쪽에 넣어주세요

image

이제 변수로 가서 변수 만들기를 눌러서 굵기라는 변수를 하나 만들어주세요

그리고 펜에 가서 펜 굵기를 1으(로) 정하기를 끌어서 만약 위에 둘게요

  • 펜 굵기를 1만큼 바꾸기가 아니에요!!! 정하기입니다

변수 탭에 가서 굵기 변수를 끌어서 숫자로 옮겨주세요

추가로 우측화면 위에 굵기 변수를 마우스 오른쪽클릭해서 슬라이더 사용하기를 눌러주세요

그럼 굵기 변수를 움직이는것만으로도 바꿀 수 있게됩니다

image image image

이제 실행을 해서 대충 그려볼까요? 굵기에 따라 파란색 선이 더 두껍고 얇게 그려지는것을 알 수 있습니다

이번엔 pencil을 선택한 채로 모양으로 가볼게요

그리고 pencil-a를 우클릭해서 복사를 해줍니다

image image

이런식으로 pencil-a / pencil-b가 되었을텐데, pencil-blue / pencil-green으로 이름을 바꿔줍니다.

image

왜 이름을 바꿨을까요? 네네 두번째 연필은 초록색이 나오도록 해줄거에요

세번째 페인트 통을 클릭하고 채우기색을 클릭해서 적당히 초록색을 찾아줍니다

  • 이 작업은 pencil-green에서 하고있어야됩니다. pencil-blue는 바뀌는게없습니다.

그리고 연필 몸을 클릭해서 초록색으로 바꿔주세요

image image image

자 이제 다시 코드로 눌러서 돌아와주세요

그리고 형태로 가서 모양을 ~로 바꾸기를 끌어서 클릭했을때~ 모두 지우기 사이에 넣어주고 pencil-blue로 바꿔줄게요

  • 처음 색은 파란색으로 하겠다는 뜻!

image

스프라이트 그리기->그리기를 눌러주세요

왼쪽 맨 아래의 직사각형을 누르고 가운데 +에 맞춰서 직사각형을 그려주세요

  • 안그려지시는 분들은 아마 비트맵일거에요. 벡터로 바꾸기를 눌러서 작업해주세요

오른쪽 실행창에 엄청 크게 혹은 작게 사각형이 생겼을거에요 이거를 크기를 바꿔줘서 왼쪽 아래로 이쁘게 옮겨놓을게요

이 스프라이트에서 마우스 우클릭을 해서 복사를 해줍니다.

새로 생긴 스프라이트2도 1처럼 왼쪽아래에 놓아주세요(1번 오른쪽에)

image image image image image image image

스프라이트 1을 클릭하고 모양에 가서 채우기 색을 파란색으로 바꿔줍니다

그리고 아까 썼던 물통 버튼을 클릭하고 상자를 눌러서 파란색 상자로 만들어줍니다

추가로 스프라이트1 이름은 blue, 스프라이트2 이름은 green으로 바꿔줍니다

image image image image image

거의 다왔어요 조금만 더 힘냅시다!!

이번엔 스프라이트 고르기를 눌러서 X라고 검색해서 Block-X를 추가해줄게요

그리고 Block-X의 주황색을 빨간색으로 바꿔줄거에요 앞에서했던 것처럼 하면돼요

왼쪽 아래에 이쁘게 X자도 정렬해줄게요 옮겨서

image image image image image image

이제 코드로 돌아가볼게요. 코드가 없네요!!? 당황하지 마시고 pencil을 눌러주세요

  • 첫날에 제가말했죠? 각 스프라이트마다 동작하는 코드가 다 다르답니다^^

이번엔 eraser라는 스프라이트를 클릭하고 보이기(눈) 모양을 클릭해줘서 X자 옆으로 옮길거에요

실행 화면에 나타난 지우개 모양도 왼쪽 아래 가지란히 정렬시켜주세요

image image

스프라이트 중에서 blue를 클릭해주세요

이벤트-이 스프라이트를 클릭했을 때를 끌어다 놓아주세요

그 밑에 이벤트-메시지1 신호 보내기를 끌어다 밑에 붙여주세요

그리고 메시지1을 클릭해서 새로운 메시지를 눌러서 blue라고 이름만들어줄게요

똑같이 green도 해줄게요 스프라이트 green을 눌러서 green 신호를 보내야하는거에요! blue가 아니에요

이번엔 eraser 스프라이트를 클릭해서 이 스프라이트를 클릭했을 때->erase라는 새로운 메세지를 보내는걸 만들어주세요

image image image image image

마지막으로 block-X 스프라이트를 클릭해서 이 스프라이트를 클릭했을 때 밑에

펜 탭에가서 모두 지우기를 밑에붙여줍니다

image

다시 pensil 스프라이트클 클릭해주세요

이벤트-~~신호를 받았을때를 새로운 블럭으로 만들게요 그리고 그 신호는 blue 신호로 바꿔주세요

형태-모양을 pencile-blue로 바꾸기로 바꿔서 밑에 붙여주세요

그리고 펜 탭에 가서 펜 색깔을 ~으로 정하기를 밑에 붙여주세요

이제 다 아시죠? 스포이드 모양 클릭해서 실행창에 파란색 상자를 찝어주세요

image image

이제 blue 했으니 green과 erase도 같은 작업을 해줍니다

green과 erase에는 모양과 색깔도 각각 달라야합니다!!!

erase의 경우에는 색깔을 배경인 하얀색으로 찍으시면됩니다

image

이제 자기가 그리고싶은거를 그리고 지우고 하면 됩니다!!

드디어 끝났어요! 오류가 있다면 이 완성본을 보기전에 자기힘으로 먼저 에러를 찾아보는것을 권장합니다!

모두 고생많았어요. 여기까지 마무리해볼게요!! 이 파일은 자기 컴퓨터에 저장해서 스크래치 홈페이지에 로그인하고 파일 올려서 자기만의 작업실에 업데이트하는거를 추천합니다!

코드 완성본

image image image image image

영상입니다.

유튜브


Similar Posts

Comments