最終更新日 2025年4月20日 by toytune
スクラッチはアメリカの大学、MIT(マサチューセッツ工科大学)メディアラボで開発されたビジュアルプログラミング言語です。
もくじ
はじめに
前回までで作ってきたプログラムに追加していきます。
これまで作ってきたプログラムに、今回はさらにいくつかの要素を追加していきます。
具体的には、ネコのスプライトがキー操作でジャンプできるようにしたり、ジャンプ時に音を鳴らしたり、吹き出しを表示させたりして、よりゲームらしい動きを作っていきます。
また、スクラッチに用意された音だけでなく、自分の声を録音して使う方法もご紹介します。
▼ 今回作成するプログラム(の旗をクリックして動作を確認することができます)
ネコのスプライトの初期位置を設定しよう
まずはネコのスプライトのプログラムを追加するので、ネコのスプライトをクリックしておきます。すでにネコのスプライトが選択されている状態であればこの操作は不要です。

現在はこのような状態になっています。
この状態から今回のコードブロックを追加していきます。

最初にプログラムがスタートしたら、ネコの「スプライト」の縦位置をリセットするようにしたいと思います。
ネコの「スプライト」が選択されていることを確認し、「動き」のところから「y座標を〜にする」をドラッグし、「の旗が押されたとき」の下に挿入します。
これで、の旗を押した時、つまりゲームスタート時は、ネコの「スプライト」の縦位置は「0」になりました。

なめらかなジャンプのアニメーションを作ろう
次に、ジャンプの動きをプログラムしていきます。
「y座標を一気に変える」といった単純な方法ではなく、少しずつ変化させることで、自然なジャンプに見せることができます。
まず、前回までのカーソルで左右に動くブロックをプログラムしましたが、その中の「ずっと」のブロックの中に「もし〜なら」のブロックを挿入します。

次に「もし〜なら」の中に「〜キーが押された」をいれ、「上向き矢印」に変更します。
ここでは、「上向き矢印」としています。スペースキーなどでも大丈夫ですが、こちらの内容と同じように進めるには、「上向き矢印」と変更してください。

「〜回繰り返す」のブロックを「もし上向矢印キーが押されたなら」の中に入れます。
そして繰り返しの回数を「10」に変更します。
あとで、違和感などあれば数値を変更してみてください。

「〜秒待つ」を「10回繰り返す」の中にドラッグしてください。ドラッグできたら、「〜」を「0.01」に変更してください。

次にジャンプの高さの部分を設定していきます。「y座標を〜ずつ変える」をさきほど設定した「0.01秒待つ」の中にドラッグします。ドラッグできたら、「y座標を〜ずつ変える」の「〜」には、「10」に変更してください。

ここまでがネコのスプライトが、「飛び上がる」ところまでのプログラムになります。
今度は、これを複製して、ジャンプしたあとの「地面に戻る」プログラムを作ります。
複製するには、「10回繰り返す」のところで右クリックしてメニューを表示させます。
この中で一番上にある「複製」をクリックします。

3つのブロックが複製されたと思います。

複製ができたら、複製元の「10回繰り返す」の直下にドラッグで入れます。
地面に向かっていくので、「y座標を10ずつ変える」のところを「-10」に変更します。単に「-」を10の前に入れるだけで大丈夫です。

一旦これでジャンプの動作を確認します。
の旗をクリックしたあと、ジャンプで設定したキー(ここでは上向き矢印)を押すとジャンプします。できていない場合は見直してみてください。
ジャンプと同時に音を鳴らしてみよう
ジャンプのタイミングで「ニャー」と鳴くようにしてみましょう。
また、蝶のスプライトに当たったときには「捕まえた!」と鳴るようにもしてみたいと思います。
「音」のブロックの中から、「ニャーの音を鳴らす」のブロックをドラッグし、「もし上向き矢印キーが押されたら」の中の先頭に入れます。
これだけで、上向き矢印が押されたタイミングで音が鳴ります。

続いて、ジャンプしたときに蝶のスプライトに触れた場合も音が鳴るようにしたいと思います。ここまで作ってきた「左右とジャンプのブロック」の中に仕込むとうまく動作しないので、別のプログラムとして組んでいきます。

「左右とジャンプ」と同じく緑旗がクリックされたら、これも開始としたいので、「緑旗が押されたら」をドラッグします。次に「ずっと」のブロックもドラッグし、「の旗が押されたら」の直下にくっつけます。

続いて、「もし〜なら」のブロックを「ずっと」の中にドラッグでいれます。

ドラッグできたら、「もし〜なら」の「〜」に「〜に触れた」を入れます。
その次に触れる対象を「Butterfly2」に変更します。
蝶のスプライトの名前は、お使いの環境によって異なったり、任意の名前に変更されている場合がありますが、ここでは「Butterfly 2」がそれに該当するので、そちらに変更しています。

今度は、いよいよ音の設定していきます。「ニャーの音を鳴らす」と同じブロックを「もし〜」の中にドラッグで入れます。

「ニャー」の箇所をクリックすると、「録音」というものが選べるようになっています。
せっかくですので、PCのマイクなどを使い、録音した音を使っていきます。もし録音がうまくいかない場合は、「ニャー」のままでも構いません。

「録音」を選択すると、ブラウザがChromeの場合、初回はマイクを許可するかのダイアログが出ますので、「許可」をクリックします。他のブラウザでも同じように許可してください。

録音の画面がでるので、中央の赤いボタンをクリックして録音を開始します。
クリックしたあと、「捕まえた!」と言って録音してください。終われば再度赤いボタンをクリックします。

前後に余分な録音が入るので、ドラッグで不要部分を指定し、再生ボタンで録音を確認してください。録り直しの場合は、左下の「再録音」のボタンで再度録音することができます。

波形を見ながら、録音の前後の部分をドラッグで縮めます。
問題なければ、右下の「保存」をクリックしてください。

「保存」されると音のを管理する画面に遷移します。

音を管理したり、加工する画面に遷移します。左上くらいに名前を変更するところがあるので、わかりやすい名前をつけます。ここでは、「捕まえた!」と録音した内容と同じ名前にしました。
変更できたら、さらに左上の「コード」のタブをクリックし、ブロックの画面に戻ります。

先ほど録音した「ニャーの音を鳴らす」のところが「捕まえた!」になっていなければ、OKです。もしなっていなければ変更してください。

蝶のスプライトに触れたとき、録音した音を再生してみよう
続いて、ジャンプ中に蝶のスプライト(Butterfly2)に触れたときに、自分の声で「捕まえた!」と鳴らすようにしてみます。
録音音声と同様の内容の吹き出しを入れたいので、「見た目」から「〜と〜秒言う」のブロックをすぐ下に入れます。
できたら、「〜と〜秒言う」を「捕まえた!と1秒言う」に変更してください。あとでここも変えられますので、お好みの吹き出し、秒数に変更してみてください。

これで、一通りジャンプと、ジャンプしたときに音がなる、蝶のスプライトに触れた時は別の音がなり、その音と同じ吹き出しがでるプログラミングができました。
の旗をクリックし、ジャンプで蝶を捕まえてみてください。

まとめ
- ジャンプの動きは「y座標を少しずつ変える」と自然になる
- 音を鳴らすには、ブロックをそのタイミングに入れるだけ
- 自分の声を録音して使うことも可能
- 吹き出しもタイミングに合わせてブロックを追加するだけ
ジャンプや音、吹き出しを加えることで、単純な動きでも一気に「ゲームっぽさ」が出てきましたね!
次回は、さらに機能を追加して、より本格的なゲームに近づけていきます。
次の記事:スクラッチでスコア表示と難易度アップ!変数とメッセージを使ってゲームを進化させよう




