この記事のポイント
スプライト(キャラクター)を歩かせる方法を説明します。
はじめに
前回の記事までで、スプライト(キャラクター)の位置を移動させることができるようになったとは思いますが、左から右にスッと動いているだけでどうにもスプライト(キャラクター)が歩いているようには見えないと思います。

このままだとスケートで滑っているような感じですよね。。。
この記事ではスプライト(キャラクター)がしっかり手と足を動かして歩いているように移動させる方法を解説します。
前回の記事 背景を変更する。
前回の記事では、背景の変え方を説明しました。
スクラッチは以下リンクから始めることができます。完全無料です!


完成作品
ちゃんとスクラッチキャット君が歩いているように見えますね!
完成プログラム
完成プログラムはこのようになります。





今回のプログラムは結構長くて難しいように見えますが、同じ単純な内容を繰り返しているだけですのでご安心ください。
歩いているように「見せる」ためには?
【答え】アニメ(パラパラマンガ)と同じやり方をします。
スプライトを歩いているように見せるためには、アニメと同じやり方を使います。
アニメでキャラクタが動くカラクリは、キャラクタの動きをちょっとづつ変えた絵をたくさん用意して、それをパラパラと速く続けて見せているのです。いわゆるパラパラマンガというものです。
ちなみにアニメ限らず、実写の動画やパソコンのゲームなどもすべてこのカラクリでキャラクタや背景が動ているように見えているのです。
少し例を見てみましょう。
ろぼてくを走っているように見せようとすると、以下のようなちょっとづつ動いている絵を複数用意します。


これを連続して早く動かすと、ろぼてくが走っている「ように見えます」。この絵を少しづつ変えていくということをプログラミングで行っていきます。
プログラミング
では実際にプログラミングをしていきます。
スプライトの絵を変える = コスチューム変更をする。
スプライトに動きを与えるためには、スプライトの絵を変えていけばいいことがわかりました。
では実際にはどのように絵を変えるかというと「コスチュームを〇〇にする」ブロックを使用します。
実は1つのスプライトには、複数のコスチューム(絵)が用意されていて、そのコスチューム(絵)を変更させることができます。
スプライトのコスチュームの確認の仕方
画面左上の「コスチューム」タブをクリックします。


すると、スプライトが大きく表示された画面が現れます。その画面左に「コスチューム1」と「コスチューム2」があることがわかります。この2つがこのスクラッチキャット君のスプライトに用意されたコスチュームになります。


ちょうど、歩くための「右足を前にまっすぐだしている」コスチューム1と「右足を曲げている」コスチューム2の2つのコスチュームが用意されていますので、これをうまく活用します。
ちなみにコスチュームは自分で作ることもできますので、さらに細かい動きを追加させたいという方や、他の動きを追加させたい方はトライしてみてください。
【事前準備】スタート位置にスプライトを配置させる。
プログラムを毎回同じスタートをさせるために、スタート位置にスプライトを配置させます。前回までで習いましたが「初期化」という処理ですね。(忘れていても全然大丈夫です。)
今回プログラムでは、スプライトの位置だけでなく、スプライトのコスチュームも最初にいったん決めましょう。
プログラムは、このようになります。
- 旗が押されたとき
- x座標を「-130」、y座標を「-110」にする
- コスチュームを「コスチューム1」にする
- 「1」秒待つ


座標はどこでもよいですが、地面を歩いているように見せたいので、上記のようにします。
最初のコスチュームはどちらでもよいです。紫色の「コスチュームを〇〇にする」ブロックは、画面左の紫色の「見た目」をクリックすると、その右の列に出てきます。


そして1秒も目安ですので、1秒くらいであれば好きな数字で大丈夫です。
コスチューム変更して動かす。
次に歩いているように見せるために、スプライトの絵を変えて、さらにスプライトを移動させます。プログラムは先ほどのものにこのように追加してください。
- コスチュームを「コスチューム2」にする
- 「50」歩動かす
- 「1」秒待つ


これで一度プログラムを動かしてみてください。スクラッチキャット君が偉大なる一歩を踏み出したように見えるはずです!
繰り返す!
後はひたすらこのプログラムをコスチュームを変更しながら繰り返し追加します。


これでようやくスクラッチキャット君が手足を動かしながら歩くように見えました!
お疲れ様です!
【小ネタ】アニメーション的な考え方は実際のプログラミングで役に立つの?
【答え】役に立ちます!実際の現実世界のロボットの動きのプログラミングもまったく同じ考え方を使っています。
プログラミングで画面上でスプライト(キャラクタ)を動かす方法がわかりましたが、現実の世界でもこれは役に立つのか?アニメやゲームの中だけの話ではないの?と思った方もいるかもしれません。
しかし、現実世界のロボットの動きをプログラミングする場合も、実はまったく同じ考え方を使っています。
例えば、工場でロボットアームを使って、ものを移動させるという動きをプログラミングする場合、以下のようなプログラムを組むことになります。
- ロボットアームを移動させたいものがある場所まで移動させる。
- ロボットアームのハンドの指を開く。
- ロボットアームのハンドを移動させたいものまで下す。
- 指を閉じて、ものを掴む。
- ロボットアームを移動させたい場所まで移動させる。
- 指を開いて、ものを離す。
このようにスクラッチで学ぶ「考え方」は、現実でのプログラミングの考え方にも応用が効きます。なので、子どもの学習用と侮らずに学習を続けてもらえれば、将来的にとても役に立つことは間違いありません。
次回 繰り返しプログラムをもっと楽につくる!
次回は、プログラミングが現実世界で最も役に立つ理由の一つである「繰り返し」を説明します。この「繰り返し」をマスターしてプログラミングをさらに楽しくしていきましょう。
重要な考え方ではありますが、決して難しいことはないのでご安心ください!


コメント