スクラッチでカーソルキーを使って「ネコ」のスプライトのアニメーションを作る

Scratchはアメリカの大学、MIT（マサチューセッツ工科大学）メディアラボで開発されたビジュアルプログラミング言語です。

1 はじめに
2 基本のプログラムを作っていく
3 「右向き矢印キー」で右に動くようにする
4 歩くアニメーションを追加する
5 「左向き矢印キー」にして左に動くようにする
6 「ブロック定義」で上下左右のブロックをまとめる
7 上下左右にアニメーションできるようにする
8 まとめ

はじめに

パソコンのキーボードのカーソルキー（矢印キー）を使って、「ネコ」のスプライトが上下左右に動くアニメーションを作っていきたいと思います。

今後このアニメーションを使った追加のプログラムを紹介していきたいと思っています。

このサイトでは、これまでにも「ネコ」のスプライトをアニメーションするものについて過去にも紹介しているのであわせてご確認いただくとより理解が深まるかと思います。

今回作成するプログラム（の旗をクリックして動作を確認することができます）

基本のプログラムを作っていく

まずは、新規でプロジェクトを作り、続けて基本のプログラムを作っていきます。

このネコの「スプライト」に対してアニメーションを作成していきたいので、
ネコの「スプライト」をクリックしておきます。

プログラムが動く合図となるブロックをまずは入れていきたいので、
「が押されたとき」のブロックをドラッグします。

最初の「ネコ」のスプライトの状態は、ステージ中央にしたいので、
「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つでアニメーションできるものになっているので、
「もし〜向き矢印キーが押されたらなら」のブロックの中にそれぞれ入れていきます。