クエストE-3:アニメーションをつけよう – はじめてプログラミング塾 専属サポート会員専用ページ
はじめてプログラミング塾 ロゴ

クエストE-3:アニメーションをつけよう

スプライトが歩くアニメーションを作ろう!

ここでは

 ・スプライトの「見た目(コスチューム)」を変える

 ・スプライトの「見た目(コスチューム)」を追加する方法

について学びます。

まずは見本を確認してね!

プログラムの特徴

 ・1秒ごとに見た目が変わって、歩いているように見えます

やってみよう!

今回は、一からプログラムをつくりましょう。

スクラッチのスタート方法はこちらから

まずは【ロジカル思考】から!

どうやってスプライト(ネコ)がアニメーションしているのでしょうか?

やり方は紙芝居やペラペラまんがと同じです。

 ・ネコの見た目が「次のコスチューム」になるを繰り返す

しかし、とても早いスピードでコスチュームを切り替えてしまいます

・アニメーションのスピードをコントロールするには「○秒待つ」を使う

スプライトのアニメーションのスピードをコントロールするために、コスチュームを切り替えるまで少しだけ休けいさせる必要があります。

「制御(せいぎょ)」の命令の中に「○秒待つ」がある

次のコスチュームに切り替える時、少しだけ待たせる命令をつけ足してみましょう。

秒数を変えると、アニメーションのスピードも変わります。

ここまでの事がうまくいけば、見本通りのプログラムが出来上がります♪

チャレンジクエスト!

①もう一つコスチュームを追加しよう

ネコのコスチュームは「コスチューム1」と「コスチューム2」になっています。

ここに「Cat Flying-b」という飛ぶ姿のコスチュームをつけ足してみましょう。

1.左上の「コスチューム」をクリック

2.左下のマークをクリック

3.「コスチュームを選ぶ」ボタンをクリック

4.「動物」をクリック

5.「Cat Flying-b」を探してクリック

コスチュームが増えていればOK!

②アニメーションの前に、「Cat Flying-b」の見た目で「はじめるよ」と2秒言うプログラムにしよう

ヒント:決まったコスチュームにしておく命令があるよ

ここで【プログラミング的思考】!

・動くアニメーションを「コスチューム1」「コスチューム2」だけにしよう

 「次のコスチュームにする」の命令では、アニメーションに「Cat Flying-b」が混ざってしまいます。

 最初のあいさつは「Cat Flying-b」、そのあとは「コスチューム1」と「コスチューム2」だけが繰り返されるようにするにはどうすれば良いでしょう?

アレンジ作品の例はこちら!


うまくできましたか?
学習が終わったら、できた作品を先生に送りましょう。

(トップページ、または下のアップロードから送りましょう!)

ファイル:


【今回のクエストのヒントになる解説動画はこちら】