2019.02.11スクラッチ(Scratch)ではフレームアニメーションをプログラミングできます。フレームアニメーションとは、時間経過とともに絵が切り替わり、あたかも動いているように見せる手法のことです。今回は、カエルがハエを食べる瞬間のフレームアニメーションをプログラミングの例として解説します。手順3_カエルのスプライトを追加する3-1_コスチュームを増やす3-2_コスチュームを編集する手順4_カエルのスクリプトを書く4-1_「リセット」メッセージに応える4-2_「次のフレーム」メッセージに応える手順5_コメントのスプライトを追加する5-1_コメントにカスタマイズ手順6_コメントのスクリプトを書く6-1_スクリプトのコピーすべてのスクリプト想像力で広がるフレームアニメーションフレームアニメーションとはフレームアニメーションは、映画やアニメが動いているように見える仕組みのことです。1秒間に24枚(24fpsといいます)のフレームをパラパラ漫画のように見せると考えてください。ノートの切れ端でも映写機でも原理は同じです。プログラミング学習環境のスクラッチ(Scratch)でも、簡単なフレームアニメーションを作ることができます。コスチュームがフレームスクラッチ(Scratch)では、ノートの切れ端や映写フィルムの代わりにコスチュームを利用します。コスチュームは、スプライト一つ一つに設定できる静止画のこと。動く様子を連続して見せて動きを表現します。スクラッチ(Scratch)では、ひとつのスプライトに何枚でもコスチューム(静止画)を設定できます。スプライト自体、ひとつのプロジェクトにいくつでも設定できるのです。複数のスプライトをシンクロ(同期)いくつかのコスチュームをふくんだスプライトは、複数を同時に動かすことができます。これをシンクロ(同期)というのです。スプライト同士をシンクロさせるには、メッセージを活用します。「A」というスプライトから「B」というスプライトにメッセージが送られることで、「B」のコスチュームが変化する動きを作れるのです。今回のプログラミング例では、ステージから、複数のスプライトに対し、同じメッセージを同時に送ります。スポンサードリンクスクラッチ(Scratch)でプログラミング例-「カエルの食事」のタスク解説ここからは、スクラッチ(Scratch)でフレームアニメーションのプログラミング例を解説します。プロジェクト名は「カエルの食事」です。Scratch3のデフォルト機能のみを使って作成したプロジェクトなので、誰でも同じように作ることができます。実際に手を動かしてプログラミングすることで理解も深まるでしょう。スポンサードリンクスポンサードリンク手順1_ステージを選択するまずステージを選択します。「背景を選ぶ」から湿地帯を示す「Wetland」を選んでください。手順2_ステージのスクリプトを書く今選択したステージ「Wetland」にスクリプトを書きます。「Wetland」をクリックして選択してください。2-1_リセットのメッセージすべてのスクリプトをリセットさせる処理を書きます。そのためには、まずフレームアニメーションを始める前に同期(シンクロ)させる必要があるのです。仕組みは、「緑の旗」がクリックされたら、全てステージとスプライトがリセットされるというものです。メッセージを送る必要がありますが、名前は任意でつけます。わかりやすく「リセット」とつけましょう。イベントブロックの「(メッセージ1)を送って待つ」を選び、(メッセージ1)をリセットに変更します。次に同じくイベントブロックの「(緑の旗)が押されたとき」を選び、先程のブロックの上にくっつけます。2-2_各スクリプトに一斉に送るメッセージ先程のリセットメッセージと同様に、各スクリプトに一斉にメッセージを送ります。今回のメッセージをきっかけにして、各スクリプトがコスチューム(=フレーム)を切り替えることになるので、名前を「次のフレーム」としましょう。今回の例では、5回フレームを切り替えるので、「(次のフレーム)を送って待つ」を制御ブロックの「(5)回繰り返す」で囲みます。繰り返す回数は、フレームの数によって変化するのです。手順3_カエルのスプライトを追加する今回のプログラミング例でメインとなるカエルのスプライトを用意します。2」選択してください。2」という名前のスプライトには、3枚のコスチュームが含まれています。今回のプログラミング例では動きに間を持たせるため、3枚のコスチュームをプラスしました。合計で6枚のコスチュームです。コスチュームは簡単に増やせます。カエルのスプライトを選択してください。その上で「コスチューム」タブをクリックします。画面左にサムネールがコスチュームの枚数です。ひとつずつクリックすると右側に表示される静止画が異なることがわかります。コスチューム(=フレーム)が切り替わりアニメーションのように見えるのです。ちなみにコスチュームは上から順番に切り替わる決まりです。2-a」というコスチュームを右クリックして「複製」をクリックします。するとスグ下にコピーしたコスチュームが表示されます。2-a」をもう2つコピーします。そのうちのひとつを一番下に移動してください。移動はドラッグ・アンド・ドロップで簡単に行なえます。3-2_コスチュームを編集するコスチュームは編集も簡単です。下に移動したコスチュームを選択してください。カエルと一緒に映っている「ハエ」を削除します。ハエを選択してDeleteキーを押せば完了です。これでカエルがハエを食べた後のコスチュームが完了しました。コスチュームはひとつずつ名前を変更することができます。通し番号をふるなどしてわかりやすくすると良いでしょう。同じ名前は設定できませんので注意してください。スポンサードリンク手順4_カエルのスクリプトを書くカエルのスプライトには、2つのスクリプトを書きます。ひとつは「リセット処理」。一つは「フレーム(コスチューム)を1枚変化させる」です。4-1_「リセット」メッセージに応えるステージからリセット「リセット」メッセージが送られています。応えるためにイベントブロックから「(リセット)を受け取ったとき」を用意してください。「見た目」ブロックの「コスチュームを(01_エサ発見)にする」を設定します。※「01_エサ発見」という名称は任意ですが、スクリプトの最初のコスチュームを選んでください。4-2_「次のフレーム」メッセージに応えるステージからの「次のフレーム」メッセージに応える処理を書きます。イベントブロックから「(次のフレーム)を受け取ったとき」を選び、下に見た目ブロックの「次のコスチュームにする」をくっつけます。ステージ側でメッセージを5回繰り返す処理がされているので、5回同じ処理が行われます。「5枚目のコスチューム→6枚目のコスチューム」しかし、このままだと上記の処理が一瞬で行われるためなにがなんだかわかりません。そこで「1秒待つ」という制御ブロックをはさみます。「1枚目のコスチューム→2枚目のコスチューム」(1秒待つ)「2枚目のコスチューム→3枚目のコスチューム」(1秒待つ)「3枚目のコスチューム→4枚目のコスチューム」(1秒待つ)「4枚目のコスチューム→5枚目のコスチューム」(1秒待つ)「5枚目のコスチューム→6枚目のコスチューム」(1秒待つ)上記になり、アニメーションの動きとなります。手順5_コメントのスプライトを追加するコメントのスプライトはオリジナルです。今回のプロジェクト例では、猫のスプライトをカスタマイズして追加します。5-1_コメントにカスタマイズ猫のスプライトを選んで、コスチューム画面を開いてください。コスチュームを1枚に減らして、猫も削除します。わかりやすくするため、コスチュームの名前を「001」にして楕円を描き、その中にテキストで「エサ発見」と表記します。コメントのコスチュームは、カエルのコスチュームと同じ数必要なので6枚用意してください。それぞれ、コメントのテキストは以下です。まんぷく♪2と3のコスチュームは全く同じものです。重複することで、時間的な間をとる演出をしています。手順6_コメントのスクリプトを書くコメントのスクリプトは、カエルのスクリプトとほとんど同じです。そのため、カエルのスクリプトをコピーすると効率良いでしょう。6-1_スクリプトのコピースクリプトのコピーは簡単です。コピー元のスクリプトブロックを選択して、コピー先のスクリプトのサムネールに、ドラッグ・アンド・ドロップしてください。今回のプログラミング例では、カエルのスクリプトから2つのブロック群を、コメントのスクリプトのサムネールにドラッグ・アンド・ドロップします。一箇所だけ変更が必要です。それはスクリプトブロックのコスチュームの名前をコメントのものに変更してください。すべてのスクリプト今回のプログラミング例のスクリプトを以下に表示します。ステージのスクリプトカエルのスクリプトコメントのスクリプト想像力で広がるフレームアニメーションフレーム処理はアニメーションの基本です。工夫次第で、プロジェクトの可能性が広がります。想像力を膨らませて、ぜひオリジナルのフレームアニメーションをプログラミングしてください。今回のプログラミング例を参考にして、スクラッチ(Scratch)で魅力的なフレームアニメーションを作ってみましょう。)トラックバックは利用できません。この記事へのコメントはありません。返信をキャンセルする。