Scratchでプログラミング

誰かしらに何気ない気づきを!

Scratchでピアノをつくろう!part1

f:id:kobayashinitya:20211220141505p:plain

今日は、ピアノゲームを作っていきます。

今回初めてのScratchの「拡張機能」を使ったゲームです。

実際のピアノみたいに、クリックすると音が鳴る感じをイメージしています。

https://scratch.mit.edu/projects/619282683

今回習う単元は、

  • Scratchの拡張機能(かくちょうきのう)(音楽)
  • 別解も考える(鍵盤を押すと音が鳴るコード)
  • 「マウスのポインターに触れた」と「マウスが押された」(クリックのコード)
  • コスチューム変更(鍵盤をたたくと色が変わる)

 

鍵盤をつくろう

まずは、ピアノに不可欠な鍵盤をつくります。新しくページを開いてね。

f:id:kobayashinitya:20211213232323p:plain

いつものとおり、ねこちゃん出現!ゴミ箱で削除!

f:id:kobayashinitya:20211214012646p:plain

右下のねこのマークから「描く」をクリック!

f:id:kobayashinitya:20211222001433p:plain

こんな感じで鍵盤を描こう!

ここでのオススメは、背景が白でも鍵盤に色を塗ってね(クリックが反応しにくくなります。)

あとで複製してもいいし、先に全部の鍵盤をつくっておいても大丈夫!

今回は、「ド」だけを解説するよ。

 

つくれたらコードに戻ろう!

 

拡張機能「音楽」を使おう!

今回のピアノの醍醐味「拡張機能」をつくるよ。

左下のファイルのマークをクリック!

f:id:kobayashinitya:20211222001837p:plain

そうすると、、

f:id:kobayashinitya:20211222001909p:plain

こんな画像が出てきたかな?

これが、拡張機能の一覧だよ。今回はこの中での「音楽(一番左)」を使うよ。

f:id:kobayashinitya:20211222002043p:plain

これをクリックだぜ!

そうするとさっきと何か変わった部分があるかな?

f:id:kobayashinitya:20211215173411p:plain

あっ!いつも使っている左のバーに何か「音楽」と書かれたメニューが増えたね!

f:id:kobayashinitya:20211222002146p:plain

これこれ!先ほど入れた拡張機能だよ!

今回はこれを使っていくよ!

今回は、「今回の単元」でも少し触れたように

f:id:kobayashinitya:20211222002745p:plain

別解も考えることをテーマにしてます!

今回は、私が思いついたコードを3種類紹介します。

 

鍵盤がクリックされたら音が鳴るコード

先ほど無事に拡張機能を追加できたところで、実際にコードを組み立てて行きます。

今回もまずはヒントから!

もし、クリックされたらピアノの音で鍵盤に書かれている音を鳴らす

f:id:kobayashinitya:20211215173411p:plain

ちなみにわたしは・・・f:id:kobayashinitya:20211215172819p:plain

その①

f:id:kobayashinitya:20211222003142p:plain

これが一番ブロックが少ないかな?シンプルだね。

念のため一回繰り返すを入れたけど、なくても大丈夫!

その②

f:id:kobayashinitya:20211222003323p:plain

これが、前回のかるたゲームでかるたがクリックされたときにするコードを参考にした感じだね。

kobayashinitya.hatenadiary.jp

基本のブロックも使っているし、一番安心感のある仕上がりですな!

その③

f:id:kobayashinitya:20211222003937p:plain

これは、その②のちょっと複雑バージョンですな。応用編といってもいいかもしれない。

いつも「もし・・なら」を使っていたけど、

今回はその下にある「もし・・なら、でなければ・・」を使ってみたよ!

「でなければ」つまり、今回だったら鍵盤がクリックされていない時の処理も付け加えることができるよ。

ちなみに、鍵盤がクリックされていない時は、ちょっと休むのを意味する「0.25拍休む」を入れてみたよ!

 

一見、難しそうだけど次にやるコスチュームを変更する編では一番シンプルに追記することができるからオススメ!

f:id:kobayashinitya:20211215173409p:plain

音がなったかな?

あれ?鍵盤は「ド」の音なのにちょっと違う音がなっているぞ?

どうやったら変えられるんだろう・・

f:id:kobayashinitya:20211215173411p:plain

f:id:kobayashinitya:20211222111057p:plain

「〇〇の音符を〇〇秒鳴らす」の「〇〇の音符」を変えると鳴らしたい音を選択できるよ。

60の部分をクリックすると、ピアノの鍵盤が出てきたね!

一番左が「ド」だからそれをクリック!

f:id:kobayashinitya:20211215173409p:plain

実際に「ド」の音がなったかな?

鳴ったら、次に進もう

 

鍵盤をクリックしたら色が変わる

これも同様に、、

f:id:kobayashinitya:20211222002745p:plain

という流れでございます。

ということで、いつも通りヒントから。

コスチュームを変えようぜ!

ヒントというほどのものでもないですが、これ以上言うと答えに直結するんでやめときます。

f:id:kobayashinitya:20211222142251p:plain

今回は、コスチュームを変更する形で色を変える方法をお伝えします。

とりあえず鍵盤が押されたとき、クリックされたときのコスチュームを作るか!

f:id:kobayashinitya:20211222143358p:plain

私の好きな色の1つである黄色にしてみたぜ!

f:id:kobayashinitya:20211215172819p:plain

その①

f:id:kobayashinitya:20211222142536p:plain

まずは、旗が押されたときに白色の鍵盤であるコスチューム1にします。

また、クリックされたときに色が変わる、つまりコスチュームを変えるためコスチューム2にします。

また、1秒後は白色の鍵盤であるコスチューム1に戻します。

こんな感じですかね?

 

その②

f:id:kobayashinitya:20211222142919p:plain

これも、先ほどと考え方は一緒ですな。

クリックされたときにコスチュームを変えて1秒経ったら元に戻す感じです。

 

その③

f:id:kobayashinitya:20211222143135p:plain

これが一番オススメです。「もし・・・なら、〜でなければ・・・」

を使うことによって「鍵盤が押されていない」状態もコードで追記することが出来るからです。


つまり、鍵盤が押されていないときは、いつも通りの白色の鍵盤を表示させるコードを加えることができますな。

f:id:kobayashinitya:20211215173409p:plain

「ド」をクリックすると色が変わって音がなったかいな?

f:id:kobayashinitya:20211222143856p:plain

f:id:kobayashinitya:20211222143914p:plain

完成形の一例はこんな感じかな?

上に「がくふ」の文字も追加しておいたけど、必要なかったな。。

 

チャレンジ

みんなも色々とデザインを作ったり、機能を追加してみたりしてね!

Levelを5段階で分けてます。もし良かったらチャレンジしてね!

  • 黒鍵を増やす(Level1)
  • 楽譜の追記ex.ランダムに選べるようになる(Level2)
  • 音ゲーを作る(Level5++)

音ゲーはマジでムズいと思う。もし機会があれば紹介します。