最終更新日 2025年4月27日 by toytune
スクラッチはアメリカの大学、MIT（マサチューセッツ工科大学）メディアラボで開発されたビジュアルプログラミング言語です。
もくじ
はじめに
「スクラッチでネコのスプライトが歩くアニメーションを作ってみる」でも触れていますが、スプライトにアニメーションをつけるとき、似たような動きを何度もくり返すことがあります。そのままだとブロックの数がどんどん増えて、プログラムが見づらくなってしまいます。
そんなときに便利なのが「ブロック定義」です。今回は、スプライトが歩くアニメーションを作りながら、ブロック定義の使い方を学んでいきましょう！
▼ 今回作成するプログラム（の旗をクリックして動作を確認することができます）
ネコのスプライトが歩くアニメーションを作ろう
まずはじめに「きっかけ」と「ネコ」のスプライトのはじめの位置を決めたいと思います。
ステージのとろこにあるをクリックすると、プログラムが始まり、「ネコ」のスプライトの位置をステージの中心にしたいと思うので、下記手順でブロックをドラッグしてください。画像も参照してください。
- 「イベント」から「旗が押されたとき」をドラッグ
- 「動き」から「x座標を0、y座標を0にする」をドラッグし、ドラッグした2つをくっつける
座標については、こちらで解説していますが、横がx座標（x軸）、縦がy座標（y軸）でどちらも0の場合、
ステージ上のスプライトの位置は中央になります。これが初期の状態ということにします。
アニメーションをずっと続けたいので、「制御」から「ずっと」のブロックをドラッグし下にくっつけます。
それぞれの処理になるように「制御」から「もし〜なら」のブロックをドラッグし「ずっと」の中に2つ入れます。
両方の「もし〜なら」の「〜」の六角形の部分に「調べる」から「スペースキーが押された」をドラッグで入れます。
これで右向き矢印が押された場合と、左向き矢印が押された場合の処理の準備ができました。
今度は、それぞれの矢印が押された場合の処理を作り込んでいきます。
どちらも「矢印キー」が押された場合、歩いてほしいので、「動き」から「10歩動かす」をドラッグし、
「もし右向き矢印キーが押されたなら」と「もし左向き矢印キーが押されたなら」の両方に入れます。
この段階でどのように動くか確かめてみます。
ステージのとろこにあるをクリックし、「右向き矢印キー」、「左向き矢印キー」を押してみましょう。
この段階では、「右向き矢印キー」を押すと右向きに動きますが、すべるように移動します。
「左向き矢印キー」を押した場合も、右向きにすべるように移動します。
これだけでは歩くというアニメーションはできていないので、修正が必要であることがわかりました。
ステージの赤い八角形のアイコンをクリックし、一旦プログラムを止めまます。
そして、「ネコ」のスプライトの向きを確認してみます。現在「90」となっているので、「90」の場合、「ネコ」のスプライトは右を向く状態であるということがわかりました。
左右の向きを修正しよう
「右向き矢印キーが押された」ときは右を向き、「左向き矢印キーが押された」ときは左を向くように修正していきましょう。
「動き」から「90度に向ける」をドラッグし、両方の「10歩動かす」の上にくっつけます。
「ネコ」のスプライトが右向きの場合は、「90」だったので、上側の方はこのままで大丈夫です。
但し、左向きの場合は「90」のままでは結局同じことになるので、その逆となる「-90」と入力します。
これで修正できたか確認してみます。
再びステージのとろこにあるをクリックし、「左向き矢印キー」を押してみます。
左に進みはしますが、「ネコ」のスプライトは逆さまになってしまいました。
再度修正します。
「動き」から「回転方向を左右のみにする」をドラッグします。これは、左右どちらも共通する処理になるので、「ずっと」の上にくっつけます。
修正したところの動作を確認してみよう
今の段階の動作を確認してみましょう。
ステージのとろこにあるをクリック、「右向き矢印キー」を押した場合は右に向いて進み、「左向き矢印キー」を押した場合は左向きに進むようになりました。
コスチュームが切り替わるアニメーションを作ろう
今の段階ではネコのスプライトは滑るように移動しています。今度はこれが歩いているようにアニメーションさせていきます。
画面左上にある「コスチューム」というタブをクリックし、「ネコ」のスプライトが持つ「コスチューム」が他にあるかを確認してみます。
「コスチューム」は2つあることがわかります。2つめの「コスチューム」をクリックし、どのようなものか確認してみます。
画面中央に2つめの「コスチューム」が表示されます。
下半身部分の手足が引いているデザインになっていることがわかりました。この2つ目の「コスチューム」を交互に切り替えて表示させることでパラパラ漫画のようにアニメーションさせられそうです。
再びプログラムをつくっていくので画面左上の「コード」のタブをクリックします。
「見た目」から「次のコスチュームにする」をドラッグし、両方の「10歩動かす」の下にくっつけます。
これでいけそうですが、「右向き矢印キーが押された」と「左向き矢印キーが押された」と同じ処理が重複してしまい、見通しが悪く、管理しづらいものになりそうです。
こういった場合は、1つのブロックとしてまとめることができるので、一旦両方の「10歩動かす」と「次のコスチュームにする」をドラッグして外します。
ブロック定義を使ってみよう
「ブロック定義」をクリックすると、「ブロックを作る」というボタンがあるので、クリックします。
「ブロックを作る」というモーダル画面に切り替わります。
「ブロック名」とあるところを選択し、名前を付けます。
何でもいいのですがここでは、「ネコが歩く」と入力します。
次にあとで、「10歩動かす」を「20歩動かす」に変更したくなる場合を想定し、一番左の「引数を追加 数値またはテキスト」を選択したいと思います。
この「引数」についてはあとで解説します。
できたら右下の「OK」をクリックします。
プログラム上に「定義 ネコが歩く number or text」という少し大きめのブロックができているかと思います。先ほど外に外したブロックをこれにまとめたいので、一番上にくっつけます。
くっつけたら、「定義 ネコが歩く numer or text」のところにある「number or text」をドラッグし、
「10歩動かす」の「10」のところに入れます。
これで、「10歩動かす」と「次のコスチュームにする」をひとまとめにすることができました。
もう一つの「10歩動かす」と「次のコスチュームにする」は必要なくなったので、右クリックなどでブロックを削除しておきます。
先ほど作った「ブロック定義」の「ネコが歩く」をプログラムに適応させていきます。
「ブロック定義」から「ネコが歩く」のブロックができているので、ドラッグし、「90度向ける」と「-90度向ける」の両方の下にくっつけます。
「ネコが歩く」のところにある入力には、両方とも「10」と入力します。
ここの入力が「引数」になります。
この「引数」として入力した「10」は「10歩動かす」の「10」を意味しています。
「定義 ネコが歩く number or text」の「number or text」のところになります。
今回の場合、「10」と入れたので「10」が渡っていき、結果として「10歩動かす」ということになります。
スピードを上げたい場合、「20」と入力すると「20歩動かす」になりますし、今回左右で分けたので、右に進む場合と左に進む場合の数値をそれぞれ変えて、左右の進むスピードを変えることができます。
動作確認をしてみます。ステージのとろこにあるをクリックし、「右向き矢印キー」「左向き矢印キー」をそれぞれ押してみてください。左右に動きアニメーションするかと思います。
定義したブロックを使ってみよう
「ブロック定義」としてアニメーションの部分をまとめたので、アニメーションを追加したくなった場合もわざわざ右と左で同じブロックを追加する必要がなくなりました。
「定義 ネコが歩く number of text」のブロックにアニメーションを追加するだけで大丈夫です。
わかりやすく「見た目」から「色の効果を25ずつ変える」をドラッグし、一番下にくっつけてみます。
ステージのとろこにあるをクリックし、左右の「矢印キー」を押してみてください。
左右に歩くアニメーションをしながら、「ネコ」のスプライトの色が変化しながら歩くアニメーションになっているかと思います。
歩くアニメーションに別の「動き」や「見た目」追加や変更したい場合は、この「定義 ネコが歩く number or text」だけを変えていけまば対応できるということがわかったかと思います。
まとめ
今回のポイントをふり返ってみましょう。
- スプライトの向きを変えるときは、「〜度に向ける」ブロックを使います。
- アニメーションには「次のコスチュームにする」ブロックが便利です。
- 同じ動作をくり返すときは、「ブロック定義」でまとめてスッキリさせましょう！
アニメーションを作る場合、「向き」や「見た目」を考えながらプログラムしていく必要がありますが、少し作ったら確認して進めていき、修正を繰り返しながら作り込んでいければ良いかと思います！
またアニメーションは、いろいろは処理を入れなくてはならないので、多くのブロックを使います。その中には同じブロックの組み合わせもあるので、そういったものは「ブロック定義」でまとめて「見やすいコード」に注意することも大切かと思います。「見やすコード」はプログラムを改修したい場合、拡張したい場合に重要で、ごちゃごちゃしていると、何がどうなっているのかわからなくなってしまうのを防止する役目をします。
スクラッチの「ブロック定義」は、一般的なプログラミング言語でいうと「関数」や「メソッド」と呼ばれるもので、頻繁に使うものです。まずは「これ同じ処理だな」と思ったら「ブロック定義」にまとめるということに慣れていきましょう！
