最終更新日 2025年5月6日 by toytune
スクラッチはアメリカの大学、MIT（マサチューセッツ工科大学）メディアラボで開発されたビジュアルプログラミング言語です。
もくじ
はじめに
今回は、パソコンのカーソルキー（矢印キー）を使って、スクラッチの「ネコ」スプライトが上下左右に動くアニメーションを作っていきます。
このアニメーションは、今後さまざまなプログラムに発展させていく予定です。
このサイトではこれまでにも「ネコ」のスプライトを使ったアニメーションをいくつか紹介していますので、あわせてチェックしてみてください。
今回作成するプログラム（の旗をクリックして動作を確認することができます）
まずは基本のプログラムを作ろう
まずは、新規でプロジェクトを作り、続けて基本のプログラムを作っていきます。
このネコの「スプライト」に対してアニメーションを作成していきたいので、
ネコの「スプライト」をクリックしておきます。
プログラムが動く合図となるブロックをまずは入れていきたいので、
「が押されたとき」のブロックをドラッグします。
最初の「ネコ」のスプライトの状態は、ステージ中央にしたいので、
「x座標を0、y座標を0にする」をドラッグして、「が押されたとき」のブロックの下にくっつけます。
今回作りたいプログラムは、カーソルキーでアニメーションは継続的におこないたいものになるので、「ずっと」のブロックをドラッグして続けてくっつけます。
このあとのアニメーションで使うブロックは、この「ずっと」の中にドラッグしていくことになります。
「右向き矢印キー」でネコを右に動かそう
次に「どのカーソルキーが押されたか」を判定するのに使う「もし〜なら」のブロックをドラッグし、先ほどの「ずっと」のブロックの中に入れます。
「もし〜なら」の中に条件を入れます。
ここではどのカーソルキーを押されたかを判定したいので、
「スペースキーが押された」をドラッグして、「もし〜なら」の「〜」のところに入れます。
今回は「スペース」は使わないので、クリックしてドロップダウンメニューを開き、
「右向き矢印」をクリックで選択します。
右に動かす場合、「ネコ」のスプライトを右に向けたいので、
「90度に向ける」のブロックを「もし右向き矢印キーが押されたなら」の中にドラッグします。
今度はいよいよスプライトを動かすブロックを入れていきます。
「10歩動かす」のブロックをドラッグして、「90度に向ける」のブロックの下にドラッグします。
もっと早く動かしたいなら「10」の部分の数値を「20」とか大きいものに変更してみてください。ここでは「10」のままで進めます。
これでカーソルキーで「ネコ」のスプライトが右に動くかを試してみます。
をクリックしてから、パソコンの「右向き矢印キー」を押してみます。
押している間、すべるように「ネコ」のスプライトが右に動いたら成功です。
アニメーションはまだ作ってないので、今のところはこれで成功になります。
歩いているようなアニメーションを追加しよう
ネコが動いているときに、パラパラ漫画のようにアニメーションさせるには、「コスチューム」を切り替えるのがポイントです。
「見た目」のところから「次のコスチュームにする」をドラッグし、
「90度に向ける」の上にくっつけます。
このままでも良いのですが、「コスチューム」の切り替えが早すぎるので、「1秒」待つをドラッグして、「10歩動かす」の下にドラッグします。
できたら今度は「1」のままでは遅いので、「0.08」へ変更しておきます。
できているか動作確認していきます。
をクリックしてから、パソコンの「右向き矢印キー」を押してみます。
歩くように「ネコ」のスプライトが右に動いたら成功です。
左に動かしてみよう
ここまで作ってきたものを変更して、左にも動くかを試してみます。
どのキーを押したかの条件となる「右向き矢印キーが押されたら」の「右向き矢印」のところをクリックして、ドロップダウンメニューを開きます。
左へ動くことを試したいので、「左向き矢印」を見つけクリックで選択します。
「ネコ」のスプライトの向きも左向きにしたいので、「90度に向ける」の「90」のところをクリックして、「-90」に変更し座標の向きを変更します。
「左向き矢印キー」を押すと左に動くか動作確認していきます。
をクリックしてから、パソコンの「左向き矢印キー」を押してみます。
左に歩くように「ネコ」のスプライトが動くとは思いますが、残念なことに「ネコ」のスプライトが逆さまになると思います。
今度は逆さまにならないように修正していきます。
ネコが逆さまにならないようにする
修正といっても簡単で、ブロックを1つ追加するだけです。
「x座標を0、y座標を0にする」のブロックの下に「回転方法を左右のみにする」ドラッグしてくっつけます。これだけでOKです。
できているか動作確認していきます。
をクリックしてから、パソコンの「左向き矢印キー」を押してみます。
逆さまにならず、歩くように「ネコ」のスプライトが左に動いたら成功です。
「ブロック定義」で処理をまとめてスッキリさせよう
条件のところの「〜向き矢印キーが押された」と「〜度に向ける」の部分を変更すると、
押したカーソルキーと進行方向を設定できることがわかりました。
上下左右それぞれを設定すると、同じようなものを4つ作ればよいのですが、非常に長いブロックになってしまいます。この時に便利なのが「ブロック定義」です。
数字を変えるだけであとの処理は同じものは、この「ブロック定義」にまとめてしまって、使い回しできるようにします。
「次のコスチュームにする」の部分をドラッグすると、その下に続くブロックもくっついた状態でドラッグできるので、一旦外に出します。
この一旦外に出したブロックを「ブロック定義」にまとめて使いまわせる状態にしていきたいと思います。
ブロックを使い回すようにしていくには、「ブロック定義」のところで「ブロックを作る」のボタンをクリックします。
「ブロックを作る」のモーダル画面に切り替わります。
何でも良いのですが、「ブロック名」となっているところをわかりやすく「アニメーション」という名前に変更しておきます。（わかりやすいものであれば何でもいいです）
次に「引数」というものを使って、進行方向を変えていきたいので、「引数を追加」というところをクリックします。
クリックすると「number or text」というものが追加されます。
この「number or text」というところをわかりやすいものへ変更できますが、今回はこのままでいきます。
右下の「OK」をクリックして、元の画面に戻ります。
元の画面に戻ると、「定義アニメーションnumber or text」という赤いブロックが表示されています。
この赤いブロックと、外に出したブロックをドラッグしてくっつけます。
くっつけたあと、赤いブロックの中にある「number or text」の部分をドラッグして、
「-90」のところに入れます。
これで任意の数字を入れることで進行方向を決まるブロックができあがりです。
一旦外に出したブロックを使いまわせる状態になりました。
上下左右すべてに対応させよう
カーソルキーの条件を決めるブロックを4つ作りたいので、「複製」の機能を使います。
「もし左向き矢印キーが押されたなら」の「なら」の辺りを右クリックすると「複製」が表示されるのでクリックします。
複製されたブロックを「ずっと」のブロックの中に入れていきます。
あと2回この作業を繰り返して、合計4つにします。
下記画像の左側のように、4つ「もし左向き矢印キーが押されたなら」のブロックができたら、矢印キーをそれぞれ変更していきます。
ここでは上から、下記の矢印キーに変更していきます
- 「上向き矢印」キーが押された
- 「下向き矢印」キーが押された
- 「右向き矢印」キーが押された
- 「左向き矢印」キーが押された
矢印キーがすべて変更できたら、それぞれブロックを追加していきます。
「ブロック定義」のところを確認すると、「アニメーション」というブロックが追加されています。これは先ほど「ブロック定義」で作成した「アニメーション」のブロックです。
このブロック1つでアニメーションできるものになっているので、
「もし〜向き矢印キーが押されたらなら」のブロックの中にそれぞれ入れていきます。
「アニメーション」の横の空白箇所に対応する進行方向の数字を入れていきます。
この空白の部分は「引数」のところになり「number or text」のところにあたります。
「引数」は進行方向の座標の数値を入れていくことになりますが、
ここでは上から次の数値を入れていきます。
- 0
- 180
- 90
- -90
できているか動作確認していきます。
をクリックしてから、パソコンの矢印キーを上下左右いろいろ押してみます。
上下左右、矢印キーの方向に「ネコ」のスプライトがアニメーションしながら動いたら成功です。
今回作った全体のブロックは下記の画像になります。
ブロック定義を使うことでスッキリ作ることができています。
まとめ
- 「x座標を0、y座標を0にする」で初期位置をリセット
- カーソルキーの向きに合わせてスプライトの向きを変える
- 「回転方法を左右のみにする」でネコの上下反転を防ぐ
- 「次のコスチュームにする」で歩くアニメーションを実現
- 「ブロック定義」と「引数」を使って、共通処理をスッキリまとめる
一見シンプルなアニメーションでも、いろいろな工夫が必要でしたね。
同じような処理はブロック定義でまとめることで、わかりやすくて読みやすいプログラムにすることができます。
今後はこのアニメーションを使った、さらに楽しいプログラムも紹介していく予定です。お楽しみに！
