スクラッチで簡単ピアノの作り方

中級

今回つくるピアノ

難易度3 out of 5 stars

今回はスクラッチでピアノを作っていきます。パソコンのキーボードを鍵盤に見立てて実際に演奏ができるようにします。さらにキーボードを押すと画面の鍵盤が反応して光り、スペースキーを押すとことで楽器が変わるようにします。音楽ゲームを作る第一歩として習得してください。

まずは実際にピアノを弾いてみてください。キーボードと音の対応は以下の通りです。またスペースキーで楽器がチェンジできることも確認してください。

スクラッチで簡単ピアノの作り方

はじめに

まず、以下をリミックスしてください

素材_簡単ピアノ

こちらにはゲームを作るのに必要な素材が揃っています。

スクラッチで簡単ピアノの作り方

ピアノの音を鳴らしてみる

拡張機能を使う

音を鳴らせるようにするためには、「音楽」という拡張機能を使う必要があります。左下にある拡張器機能ボタンを押します。

スクラッチで簡単ピアノの作り方

拡張機能一覧が表示されますのでその中から音楽を選びます。

スクラッチで簡単ピアノの作り方

これで音楽の拡張機能が使えるようになりました。以下のように左下に音楽マークがついていると思います。

スクラッチで簡単ピアノの作り方

ドの音を出す

まずはドの音から出していきます。演奏のスプライトに以下のコードを書いてください。

スクラッチで簡単ピアノの作り方

60の部分をクリックすると以下のように鍵盤が出てきますので、これで数字が何の音に対応しているかわかります。60=ド、61=ド♯、62=レ・・・というようになっています。

スクラッチで簡単ピアノの作り方

では、キーボードの”a”を押してみてください。ドの音がなれば成功です。ただこのままだと”a”を押し続けるとドドドド・・と連続して音が出てしまいます。そうならないために、以下のようにコードを修正します。

スクラッチで簡単ピアノの作り方

さらに、aが押されている最中なのかそうでないのかを判定できるようにするために。以下のようにコードを追加します。”a押し中”の変数は後で使います

スクラッチで簡単ピアノの作り方

すべての音を出せるようにする

”ド”の音が出せるようになったらすべての音を出せるようにしていきます。先ほど作ったコードをどんどん複製して以下のようにコードを追加します。

スクラッチで簡単ピアノの作り方
スクラッチで簡単ピアノの作り方
スクラッチで簡単ピアノの作り方
スクラッチで簡単ピアノの作り方

コードがかけたらすべてのキーを押して、ちゃんと正しい音が出るか確認してみてください。

楽器をチェンジする

次に楽器をチェンジできるようにします。楽器を○○にするのブロックを見てください。(1)ピアノ〜(21)シンセパッドまで21個の楽器が用意されています。

スクラッチで簡単ピアノの作り方

スペースキーを押すことでこれらの楽器を順番にチェンジしていけるようにしましょう。

先ほど書いたプログラムに以下のコードを追加します。

”楽器番号”という変数を作りスペースを押すごとに1〜21の順番で変化させていきます。21の次は1に戻るようにします。

スクラッチで簡単ピアノの作り方

実際にスペースキーを押して楽器をチェンジしてみてください。音色が変わるのがわかります。
ただ、これだと何の楽器の音かわからないので、ネコに楽器の名前を言わせるようにしましょう。
”楽器リスト”というリストを用意しています。リストにチェックを入れると以下のように画面にリストが表示され、(1)ピアノ〜(21)シンセパッドまで21個が登録されているのがわかります。

スクラッチで簡単ピアノの作り方
スクラッチで簡単ピアノの作り方

確認できたら先ほど書いたコードを少し変更します。

スクラッチで簡単ピアノの作り方

実際に🏴を押してからスペースキーを押してみましょう。以下のようにネコが楽器の名前を言ってくれます。

鍵盤を作る

ここまででも演奏はできますが、鍵盤を用意して画面をピアノっぽくしていきましょう。

白鍵盤を並べる

まずは白鍵盤を並べていきます。白鍵盤のスプライトに移動して、以下のようにコードを書きます。これは同じコスチュームを順番に並べる定番コードなので覚えてしまいましょう。

スクラッチで簡単ピアノの作り方

2つ注意点があります。まず”i”の変数を作るときは「このスプライトのみ」にチェックを入れます。クローンを1つづつ管理するためです。2つ目は”白鍵盤を並べる”のブロックを作るときに「画面を再描画せずに実行する」チェックを入れます。これをすることで描画が早くなります。

スクラッチで簡単ピアノの作り方
スクラッチで簡単ピアノの作り方

では🏴を押してみてください。白い鍵盤が以下のように並べば成功です。

スクラッチで簡単ピアノの作り方

黒鍵盤を並べる

次は黒鍵盤を並べていきます。考え方は同じですが、ミとシの♯はないのでその部分は表示させないようにしなければなりません。

黒鍵盤のスプライトに移動して以下のようにコードを書きます。

スクラッチで簡単ピアノの作り方

🏴を押したときに以下のように鍵盤が並べば成功です。

スクラッチで簡単ピアノの作り方

鍵盤を光らせる

では、最後に押した鍵盤が光るようにします。これが今回のプログラムの最難関です。

白鍵盤のスプライトに移動して以下のようにコードを追加します。例えば一番左の”ド”の音(i=1)の場合、aが押されている(a押し中=1)ときだけ光る(コスチューム2になる)ようにします。

スクラッチで簡単ピアノの作り方

これは、ブロック定義で引数を使いコードを簡単にしていく技を使っています。同じようなコードをたくさんかくのが大変なときに、ブロック定義をつかってまとめていきます。

似たコードが並んでプログラムがとても長くなるのを避けるためにブロック定義を使います。

スクラッチで簡単ピアノの作り方

同様に黒鍵盤にもコードを追加します。

スクラッチで簡単ピアノの作り方

実際にピアノを弾いてみてください。押したキーボードにあわせて鍵盤が光れば成功です。

すべてのコード

これでピアノは完成です。すべてのコードはこちらから確認できます。

【簡単】ピアノ