4.3 [중급] 피아노 만들기

이번 장에서는 키보드로 연주할 수 있는 피아노를 만들어 보겠습니다. 악기와 볼륨을 선택할 수 있고 해당 건반이 선택되었을 때 음계를 보여 줍니다. 키보드는 a(도), s(레), d(미), f(파), g(솔), h(라), j(시), k(도)로 매치됩니다.

1. 스프라이트 생성

아래와 같이 피아노와 음계 스프라이트를 생성합니다. 이미지는 아래의 압축파일을 다운로드 받으신 후 사용하시면 됩니다.

invalid-file

각 음계 스프라이트들을 마우스로 드래그 하여 아래와 같이 해당 건반위에 위치하게 합니다.

 

2. 스크립트

1) 메시지 생성

이전 장에서 처럼 broadcast 블럭의 화살표를 클릭한 후, 'new..'를 선택하여 좌측과 같이 각 음계의 메시지를 생성합니다.

도는 높은 도와 낮은 도 두개가 있기 때문에 높은 도는 'do2'로 지정합니다.




2) 음계 스크립트
모든 음계 스크립트는 아래와 같이 동일합니다. 한가지 다른 점은  [when i receive [message]] 블럭의 메시지에 각 음계의 메시지(do, re, mi, pa...)가 들어 갑니다. 아래는 도 스크립트이며 각 음계마다 아래와 같이 스크립트를 작성하며 메시지(do, re, me..)를 음계에 맞게 수정합니다.

이 스크립트가 하는 일은 간단합니다. 시작되면 [hide]로 음계 이미지를 숨깁니다. 그런 후에 [when i receive [message]] 에서 각 건반의 메시지를 받을 경우에 0.5초간 보여 준 후 다시 숨깁니다. 위의 do 메시지는 사용자가 키보드에서 'a'를 눌렀을 경우에 발생 합니다.

3) 피아노 스크립트
a. 변수 생성
Varaibles의 [Make a variable]을 클릭하여 instrument, volume, oldInstrument, oldVolume 변수를 각각 생성합니다. instrument는 현재 선택된 악기를 저장하며, voloume은 말 그대로 현재 볼률을 저장합니다.

oldInstrument, oldVolume은 각각 이전의 볼륨과 악기를 저장합니다. 사용자에 의해 instrument, volume이 변경되었는지의 검사를 위해서 사용됩니다. 아래의 스크립트에서 forever 블럭 내부를 보시면 용도를 알 수 있습니다.

b. 시작시 초기화
[set volume to (50)] 현재 볼륨을 중간(50)으로 설정합니다.
[set instrument to (1)] 현재 악기를 1로 선택합니다.
[set oldVolume to (volume)] oldVolume을 Volume과 같게 만듭니다.
[set oldInstrument to (instrument)] oldInstrument를 Instrument와 같게 만듭니다.

[set instrument to [값]]의 입력창내의 화살표를 클릭하시면 좌측과 같이 128가지의 선택 가능한 악기들이 나옵니다. 이 악기중 하나를 선택할 수 있습니다.

이 프로그램에서는 1~100까지의 악기만 선택할 수 있습니다.


c. 무한루프
forever 내에서는 현재 볼륨(volume)과 악기(instrument)가 사용자에 의해서 변경되었을 경우 볼륨과 악기를 다시 설정합니다. 설정 후에는 변경된 값들을 다시 old 변수들에 저장하여 같은 값을 다시 지정하지 않도록 합니다.

d. 사용자 입력 처리
사용자가 건반에 해당되는 키를 눌렀을 때는 아래와 같은 명령이 실행됩니다.

[play note [값] for (0.3) beats] note 다음에 오는 값은 음의 높이를 설정합니다. 48(낮은 도)부터 반음을 포함하여 1씩 증가 됩니다. beats 앞의 값은 음의 길이를 설정합니다. 여기서는 0.3으로 설정했습니다. 더 짧게 끝낼려면 0.3보다 작은 값을 입력합니다.

그후에 [broadcast [메시지]]를 이용하여 각각의 메시지를 보냅니다. 이 메시지를 받은 각 음계의 스프라이트들은 잠시 나타났다 사라지게 됩니다.

이제 완료되었습니다. 시작버튼을 클릭하여 테스트를 하여 봅니다.

캔버스 내의 instrument와 volume값을 변경하여 실행해 봅니다. 좌측 하단의 동그란 버튼을 드래그 하면 값들이 변경됩니다.

변수를 더블클릭하면 좌측과 같이 모양이 차례대로 변경됩니다.

invalid-file