最終更新日 2025年4月20日 by toytune
スクラッチはアメリカの、MIT（マサチューセッツ工科大学）メディアラボで開発されたビジュアルプログラミング言語です。
はじめに
前回作成した、カーソルキーでネコのスプライトを左右に動かすプログラムを活用し、今回は歩いているように見えるアニメーションを追加していきます。
アニメーションを作る方法はいくつかありますが、今回は「スプライト」が持つ「コスチューム」を切り替えることで、パラパラ漫画のような動きを実現します。
前回のプログラムがまだできていない場合は、前の記事をご覧いただき、そちらを作成してから進めることをおすすめします。
また、アニメーションに関する詳しい解説は別の記事にも掲載していますので、ぜひ参考にしてください。
アニメーションに関しては別の記事でも紹介しています。
▼ ひとつ前の記事
スクラッチの基本操作でネコを動かしてみよう
▼ 今回作成するプログラム（の旗をクリックして動作を確認することができます）
コスチュームを確認しよう
スクラッチでは、スプライトが複数の「コスチューム」を持つことができ、それを切り替えることでアニメーションを表現できます。まずは、ネコのスプライトがどのようなコスチュームを持っているのかを確認してみましょう。
左上にある「コスチューム」というタブがあるので、クリックしてください。
画面が切り替わり、ネコの画像を編集できる画面になります。
「コスチューム1」と「コスチューム2」との2つのネコの画像があることがわかります。
「コスチューム1」は現在表示されているものということがわかります。
では、「コスチューム2」がどのようになっているかクリックしてみましょう。
同じネコの「コスチューム」ですが、足のデザインが違います。
この「コスチューム1」と「コスチューム2」を切り替えて表示させることで、歩いているように見えるアニメーションを作っていきたいと思います。
ここで注意が必要なのは、ゴミ箱マークをクリックしてしまうと、そのコスチュームが消えてしまいます。
もし消した場合は、上部メニューの「編集」をクリックし、「削除の取り消し（コスチューム）」と表示されるので、クリックし元に戻せば大丈夫です。
右方向のアニメーションを作ろう
先ず右方向に進む場合のアニメーションを作ります。作り方は前回と同じく、左のブロックからドラッグしてつなぎ合わせて作ります。
先ず、先ほどの「コスチューム」の画面からコードブロックの画面に戻してたいのので、左上の「コード」のタブをクリックし画面を戻します。
次に「次のコスチュームにする」をドラッグし、「10歩動かす」の下にくっつけてください。
実は右だけならこで完成です。
の旗をクリックし、右矢印をおしてみてください。歩いているようにアニメーションします。ただこれだけだと左向きから右向きに変えたときにおかしなことになります。
そのため、右方向のときの向きもここで入れておおきます。「90度に向ける」のブロックを「10歩動かす」の上にくっつけてください。これで、向きのことも調節した右向き方向のアニメーションの完成です。
左方向のアニメーションを作ろう
今度は、左側です。右と同じようなプログラミングをしたいので、「90度に向ける」をドラッグし、「-10歩動かす」の上にくっつけます。続けて「次のコスチュームにする」をドラッグし「-10歩動かす」の下にくっつけてください。
次に向きを左側にしたいので、「90度に向ける」の「90」のところをクリックし、「-90」に変更してください。
そして「-10歩動かす」も修正します。このままなら、逆向きで-10動くことになるので、右にいってしましいます。。。。「-10」を「10」に変更してください。
次の「コスチューム」も忘れず、右側のアニメーションと同様に入れます。
これで一旦、動作を確認してみます。ステージのの旗をクリックし、左右のカーソルを押してみましょう。
左右にアニメーションされ動きますが、左の場合、ネコが逆さまになります。最後にこれを修正していきます。
逆さまに回転しないよう修正しよう
回転の初期設定は、このように上下が逆さまになります。これを修正するには、「回転方向を自由に回転する」のブロックをドラッグし、「ずっと」のブロックの一番上に入れます。そして「左右のみ」になっていない場合は、そのように変更します。
動作を確認してみましょう。緑の旗をクリックし、左右のカーソルを押してください。押した方向に向いて、ネコが歩くようなアニメーションができたと思います。
まとめ
- 「コスチューム」タブ でスプライトのコスチュームを確認できる。
- 「次のコスチュームにする」ブロック でアニメーションを作成できる。
- 「90度に向ける」ブロック でスプライトの向きを調整できる。
- 「回転方向を左右のみ」に設定 することで、逆さまになる問題を防げる。
これで、ネコのスプライトが歩くアニメーションを作成することができました。
「コスチューム」は自由に編集できるため、自分だけのオリジナルアニメーションを作ることも可能です。次回は、コスチュームの編集方法について詳しく紹介したいと思います！
次の記事：スクラッチでアニメーションを追加し、背景を変更しよう
