스크래치 기초 7-1 : 피아노 연주하기

이번 포스팅에서는 피아노 건반을 직접 백터 포맷 형식으로 그린 뒤 건반을 누르면 음이 나오도록 만들어 보겠습니다.

백터 포맷은 흔히 사용하는 bmp, jpg, png 등의 비트맵 형식 파일과는 다르게 확대해도 이미지 손실이 일어나지 않는 그래픽 형식을 말합니다. 백터 포맷 방식의 확장자들로는 svg, ai, cdr, vml, wmf 등이 있습니다.

 

에디터에서 모양탭을 클릭하고 아래쪽의 백터로 바꾸기 버튼을 클릭합니다.

배경이 아닌 스프라이트가 선택된 상태에서 모든 그려진 대상물들이 마우스로 선택한 뒤 삭제된 백색 바탕이 되어야 합니다. 

사각형 툴을 아래로 길게 드래그하여 피아노 건반 모양의 직사각형을 만듭니다. 채우기 색은 건반의 색인 흰색입니다.

 

 

건반이 눌렸을 때 반응하는 건반이 어느것인지 알아볼 수 있도록 효과를 줘야 합니다.

코드 탭을 클릭하고 이벤트 팔레트에서 '이 스프라이트를 클릭했을 때'를 가져옵니다.

형태 팔레트에서 '크기를 100%로 정하기'를 가져와 105%로 변경합니다.

제어 팔레트에서 '1초 기다리기' 블록을 가져온 뒤 0.1초로 변경합니다.

누른 뒤 다시 원래대로 돌아가야 하므로 형태 팔레트에서 '크기를 100%로 정하기' 블록을 넣어줍니다.

여기까지의 블록 상태는 아래와 같으며 오른쪽 미리 보기창에서 건반을 클릭하여 미세한 변화가 잘 작동되는지 테스트해보시기 바랍니다.

 

이제 건반에 소리를 연결하려고 합니다.

악기의 경우에는 스크래치 확장기능을 사용하여야 하는 데 좌측 하단의 확장 기능 추가하기 버튼을 누릅니다.

 

확장 기능 추가하기를 누른 다음 음악기능을 추가합니다. 그러면 코드탭에 초록색 블록으로 이루어진 음악 팔레트가 생성됩니다.

 

 

음악 팔레트에서 '60번음을 0.25박자로 연주하기' 블록을 가져옵니다. 60을 눌러보면 건반 모양에서 60번 음이 나오는 곳을 보여주고 있는 데 그 건반이 '도레미파솔라시도'에서 도에 해당하므로 그대로 하면 됩니다.

 

여기서 첫번째 흰색 건반을 좌측으로 고정시켜 두려고 합니다.

클릭하다 보면 건반이 여기저기 옮겨 다니는 경우가 발생하는 것을 방지하기 위함입니다.

위치고정을 위해서는 먼저 이벤트 팔레트에서 초록색 깃발의 클릭했을 때를 하나 가져옵니다. 

동작 팔레트에서 x, y축으로 가져오기 블록을 가져옵니다. 좌표값은 첫 번째 건반의 적당한 위치 좌표를 그대로 사용하면 됩니다.

제어에서 무한 반복하기 블록을 가져와 좀전의 좌표 블록을 감싸줍니다. 이렇게 하면 건반이 화면의 다른 위치로 밀리더라도 바로 제자리로 찾아가게 됩니다. 그리고 첫 번째 흰색 건반의 이름을 '도'라고 바꾸어 줍니다.

 

 

위의 이미지는 위치고정을 위해 무한반복을 가져와 사용한 사례인데 위에서 구현했던 피아노 건반 크기 컷졌다 작아지기도 100% 크기를 무한 반복에 묶어두고 소리 블록 군에서는 클릭했을 때 10 증가하기를 넣어두면 똑같은 효과를 볼 수 있습니다.

 

자, 다시 소리설정을 이어하겠습니다.

흰색건반을 우클릭하여 스프라이트 복사해주고 이름을 '레'로 설정한 뒤 자리를 잡아줍니다. 레의 x좌표값을 적당히 수정해주시고 60번을을 클릭하여 레에 해당하는 62번음으로 설정해 주시면 됩니다. 건반 맞추기 할 때 자꾸 붙으려고 하면 위의 빨간색  동그라미 멈추기를 눌러주시고 작업하면 됩니다.

 

이런 식으로 '레' 이후의 '미파솔라시도'까지 마저 설정해 줍니다. 

y축은 고정으로 수정할 필요가 없으며, x축만 일정 값을 더해줘 가면 됩니다. 더불어 "00번 음을"을 클릭해주고 한 단계씩 높은음 번호를 선택해 주면 됩니다.

흰건반이 모두 완성되면 아래와 같이 8개의 스프라이트가 생깁니다.

 

이제 검은 건반을 붙일 차례입니다. 완성한 흰색 건반 중 하나를 우클릭하여 스프라이트 복사하고 이름을 '#도'라고 해줍니다.

좌측의 모양탭을 클릭한뒤 적당한 크기로 줄여주고 바탕을 검은색으로 채워줍니다.

#도 역시 새로운 위치를 무한반복 안에 있는 동작 코드에서 지정해 주고, "00번 음을.."을 클릭해 주면 건반이 팝업 되는데 여기서 해당 검은 음반을 두드리면 자동으로 73번이 들어가게 됩니다.

 

나머지 검은 건반들 4개도 위의 이미지를 참조하여 해당 위치에 복사해서 동일한 방식으로 만들어 줍니다.

이제 건반을 모두 완성하셨으면 적당한 배경을 선택하여 넣어주면 됩니다.

배경까지 넣으면 대략 아래와 같은 이미지로 보이게 됩니다.

 

 

수고하셨습니다.

다음 포스팅에서 이번 결과물을 바탕으로 조금더 기능을 추가해볼까 합니다. 반드시 저장 또는 공유를 해 주시기 바랍니다.