불꽃처럼님의 블로그 강좌를 게시하였습니다.
[출처] http://blog.naver.com/mr_crazy

엔트리 강좌 5강. 낙서장 만들기 2장

헬로스크래치 | 2016-03-03 13:59:18

안녕하세요? 지난 장 에서 연필이 마우스를 따라 움직이고, 클릭하면 그림이 그려지는 코드를 살펴 보았습니다. 이번 장 에서는 색상의 변화와 굵기의 변화에 대해 설명해 드리겠습니다.

 

 

우선 팔레트를 만들어 팔레트를 클릭하면 연필의 색깔이 바뀌도록 해보겠습니다.

팔레트 역할을 할 색깔상자 오브젝트를 추가 하겠습니다. 


 

색깔상자 오브젝트를 2개 더 복제하고 모양 탭에서 각기 다른 색깔의로 배치 시킵니다.



색상을 변화 시키기 위해 속성 탭에서 색상변수를 생성합니다.

변수의 속성은 기본설정 그대로 둡니다. (변수에 대한 자세한 설명은 다음 장에서 다루겠습니다.)


 


3개의 색깔상자 오브젝트에 각기 다른 코딩을 해 줍니다.

 

 

갈색의 색깔상자는 오브젝트를 클릭 했을 때 색상변수를 1로 정하기로 코딩합니다.

   

 

분홍색의 색깔상자는 오브젝트를 클릭 했을 때 색상변수를 2로 정하기로 코딩합니다.

  

 

파란색의 색깔상자는 오브젝트를 클릭 했을 때 색상변수를 3로 정하기로 코딩합니다.

  

 

이것은 각 색깔상자를 선택했을때 색상변수의 숫자를 바꾸어 색상이 변했다는 것을 확인하기 위함입니다.

 

자 이제 다시 연필 오브젝트로 돌아오겠습니다. 


현재 연필 오브젝트는 클릭하면 마우스 포인터 위치로 이동 하기가 계속 반복되는 코드가 작성되어 있습니다.


 


 여기에 색상변수를 확인해서 붓의 색상을 바꾸는 코딩을 추가해야 합니다.



추가된 코딩에 대해 설명드리겠습니다.

계속 반복되기가 시작되기 전에 색상변수를 1로 정하기가 추가되어 있습니다.

이는 초기화의 개념으로 시작하기를 누르면 특정한 색깔로 그려지라는 의미입니다.

 

 

계속 반복하기의 안에는

만일 색상변수의 값=1 이라면 붓의색을 (갈색)로 정하기.

만일 색상변수의 값=2 이라면 붓의색을 (분홍색)로 정하기.

만일 색상변수의 값=3 이라면 붓의색을 (파란색)로 정하기.

를 코딩하였습니다.


 

사실 색깔상자의 색상변수가 바뀌더라도 계속 반복하며 확인하지 않는다면 변수가 변했다는것을 알 수 없습니다. 그래서 계속 반복하기 안에 넣어서 색상변수의 변화를 감지하고 그에 맞는 색상으로 붓의 색깔을 바꾸는 것입니다.


여기까지 코딩한 전체 코드는 그림과 같습니다.


 

그럼 여기까지 작성한 코드를 동영상으로 확인해 보겠습니다. 



어떤가요? 색깔상자를 클릭할때마다 색상변수의 값이 변하고 클릭해서 그림을 그리게 되면 색깔이 변하는것을 볼수 있죠? 제대로 실행되는 모습이네요..


그럼 이제 마지막 기능인 연필의 굵기를 바꿀수 있도록 하겠습니다.

 

연필의 굵기는 숫자키를 이용해서 바꾸도록 하겠습니다.

 


연필 오브젝트에 숫자키를 입력하고 붓의 굵기를 그 숫자값으로 변하도록 코딩합니다. 


 


저는 1을 눌렀을때 붓의 굵기를 1로 정했습니다.

그리고 1~9까지의 숫자키를 모두 코딩해서 굵기도 1~9까지 변할 수 있도록 했습니다.

 

 

그리고 자꾸 그림만 그리다 보면 지울수도 있어야 겠습니다.

스페이스바 키를 눌렀을때 모든 붓 지우기를 코딩하면 그려졌던 그림들을 모두 지울 수 있습니다. 


 


이렇게 완성된 연필 오브젝트의 전체 코드는 아래 그림과 같습니다.




그럼 완성된 낙서장 코드를 동영상으로 확인해 보겠습니다.

어떻습니까? 처음에 기획한 대로 마우스를 따라 연필이 움직이고, 팔레트를 클릭하면 색깔이 변하고, 숫자키를 누르면 굵기가 변하는 것을 확인 할 수 있습니다.아주 성공적이네요 ㅋㅋ

 

그럼 다음장에 더 재밌는 강의 로 찾아 오겠습니다.

댓글
등록된 댓글이 없습니다.