今回つくるピアノ
難易度
今回はスクラッチでピアノを作っていきます。パソコンのキーボードを鍵盤に見立てて実際に演奏ができるようにします。さらにキーボードを押すと画面の鍵盤が反応して光り、スペースキーを押すとことで楽器が変わるようにします。音楽ゲームを作る第一歩として習得してください。
まずは実際にピアノを弾いてみてください。キーボードと音の対応は以下の通りです。またスペースキーで楽器がチェンジできることも確認してください。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-17.33.56-1024x289.png?resize=1024%2C289&ssl=1)
はじめに
まず、以下をリミックスしてください
こちらにはゲームを作るのに必要な素材が揃っています。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-17.41.06-1-1024x563.png?resize=1024%2C563&ssl=1)
ピアノの音を鳴らしてみる
拡張機能を使う
音を鳴らせるようにするためには、「音楽」という拡張機能を使う必要があります。左下にある拡張器機能ボタンを押します。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-18.28.03.png?resize=452%2C367&ssl=1)
拡張機能一覧が表示されますのでその中から音楽を選びます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-17.41.43-1024x563.png?resize=1024%2C563&ssl=1)
これで音楽の拡張機能が使えるようになりました。以下のように左下に音楽マークがついていると思います。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-17.42.08.png?resize=308%2C613&ssl=1)
ドの音を出す
まずはドの音から出していきます。演奏のスプライトに以下のコードを書いてください。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-17.46.10.png?resize=604%2C188&ssl=1)
60の部分をクリックすると以下のように鍵盤が出てきますので、これで数字が何の音に対応しているかわかります。60=ド、61=ド♯、62=レ・・・というようになっています。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-17.48.27.png?resize=849%2C287&ssl=1)
では、キーボードの”a”を押してみてください。ドの音がなれば成功です。ただこのままだと”a”を押し続けるとドドドド・・と連続して音が出てしまいます。そうならないために、以下のようにコードを修正します。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-17.46.33.png?resize=637%2C225&ssl=1)
さらに、aが押されている最中なのかそうでないのかを判定できるようにするために。以下のようにコードを追加します。”a押し中”の変数は後で使います
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-17.47.04.png?resize=604%2C261&ssl=1)
すべての音を出せるようにする
”ド”の音が出せるようになったらすべての音を出せるようにしていきます。先ほど作ったコードをどんどん複製して以下のようにコードを追加します。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-17.48.55-1.png?resize=849%2C645&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-17.50.40-1.png?resize=849%2C645&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-17.50.57-1.png?resize=849%2C310&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-17.51.12-1.png?resize=849%2C549&ssl=1)
コードがかけたらすべてのキーを押して、ちゃんと正しい音が出るか確認してみてください。
楽器をチェンジする
次に楽器をチェンジできるようにします。楽器を○○にするのブロックを見てください。(1)ピアノ〜(21)シンセパッドまで21個の楽器が用意されています。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-17.57.37.png?resize=849%2C466&ssl=1)
スペースキーを押すことでこれらの楽器を順番にチェンジしていけるようにしましょう。
先ほど書いたプログラムに以下のコードを追加します。
”楽器番号”という変数を作りスペースを押すごとに1〜21の順番で変化させていきます。21の次は1に戻るようにします。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-17.58.34.png?resize=829%2C328&ssl=1)
実際にスペースキーを押して楽器をチェンジしてみてください。音色が変わるのがわかります。
ただ、これだと何の楽器の音かわからないので、ネコに楽器の名前を言わせるようにしましょう。
”楽器リスト”というリストを用意しています。リストにチェックを入れると以下のように画面にリストが表示され、(1)ピアノ〜(21)シンセパッドまで21個が登録されているのがわかります。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-17.59.56.png?resize=241%2C573&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-17.59.34.png?resize=486%2C411&ssl=1)
確認できたら先ほど書いたコードを少し変更します。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-20.19.21.png?resize=850%2C356&ssl=1)
実際にを押してからスペースキーを押してみましょう。以下のようにネコが楽器の名前を言ってくれます。
鍵盤を作る
ここまででも演奏はできますが、鍵盤を用意して画面をピアノっぽくしていきましょう。
白鍵盤を並べる
まずは白鍵盤を並べていきます。白鍵盤のスプライトに移動して、以下のようにコードを書きます。これは同じコスチュームを順番に並べる定番コードなので覚えてしまいましょう。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-18.03.31.png?resize=832%2C514&ssl=1)
2つ注意点があります。まず”i”の変数を作るときは「このスプライトのみ」にチェックを入れます。クローンを1つづつ管理するためです。2つ目は”白鍵盤を並べる”のブロックを作るときに「画面を再描画せずに実行する」チェックを入れます。これをすることで描画が早くなります。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-20.29.07.png?resize=374%2C395&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-20.28.37.png?resize=719%2C563&ssl=1)
ではを押してみてください。白い鍵盤が以下のように並べば成功です。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-20.32.10-1024x849.png?resize=1024%2C849&ssl=1)
黒鍵盤を並べる
次は黒鍵盤を並べていきます。考え方は同じですが、ミとシの♯はないのでその部分は表示させないようにしなければなりません。
黒鍵盤のスプライトに移動して以下のようにコードを書きます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-18.07.54.png?resize=850%2C589&ssl=1)
を押したときに以下のように鍵盤が並べば成功です。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-20.38.41-1024x849.png?resize=1024%2C849&ssl=1)
鍵盤を光らせる
では、最後に押した鍵盤が光るようにします。これが今回のプログラムの最難関です。
白鍵盤のスプライトに移動して以下のようにコードを追加します。例えば一番左の”ド”の音(i=1)の場合、aが押されている(a押し中=1)ときだけ光る(コスチューム2になる)ようにします。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-18.09.08.png?resize=827%2C634&ssl=1)
これは、ブロック定義で引数を使いコードを簡単にしていく技を使っています。同じようなコードをたくさんかくのが大変なときに、ブロック定義をつかってまとめていきます。
似たコードが並んでプログラムがとても長くなるのを避けるためにブロック定義を使います。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-21.38.41-1.png?resize=818%2C646&ssl=1)
同様に黒鍵盤にもコードを追加します。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-18.09.39.png?resize=833%2C634&ssl=1)
実際にピアノを弾いてみてください。押したキーボードにあわせて鍵盤が光れば成功です。
すべてのコード
これでピアノは完成です。すべてのコードはこちらから確認できます。