Scratchでフレームアニメーションを作る方法【コスチュームとメッセージ機能の解説】
Scratch（スクラッチ）では「コスチューム」を順番に切り替えることで、フレームアニメーションを実現できます。フレームアニメーションとは、わずかに異なる静止画を高速で切り替えることで動きを表現する技法で、映画やアニメと同じ仕組みです。
この記事では、カエルがハエを捕食する場面を題材にしたサンプルを例に、Scratchでフレームアニメーションを作る手順を1ステップずつ解説します。
【サンプルプロジェクト：カエルの食事 Frog meal】
フレームアニメーションの仕組み
パラパラ漫画を想像するとわかりやすいでしょう。1秒間に複数枚の絵を次々と切り替えることで、見た目上の動きを作り出す手法がフレームアニメーションです。Scratchでも同様の原理でアニメーションを作れます。
Scratchではコスチュームがフレームの役割を果たす
各スプライトに設定した「コスチューム」がフレームに相当します。スプライトに何枚でもコスチュームを用意でき、それを順番に切り替えることで動きを表現する仕組みです。
複数スプライトの同期にはメッセージを活用する
Scratchでは複数のスプライトを同時に動かすことができます。スプライト同士の動作を合わせるために使うのが「メッセージ」機能です。あるスプライトがメッセージを送信すると、それを受け取ったスプライトが対応する処理を実行します。このサンプルでは、ステージから複数のスプライトに向けてメッセージを一斉送信し、コスチュームを同タイミングで切り替えます。
「カエルの食事」の作り方：全手順
ここからはScratch 3の標準機能だけを使ったフレームアニメーションの作り方を、実際の手順に沿って紹介します。実際に操作しながら読み進めると理解しやすくなります。
手順1：ステージの背景を設定する
「背景を選ぶ」ボタンから湿地帯の背景「Wetland」を選択します。
手順2：ステージのスクリプトを作成する
選択した背景「Wetland」にスクリプトを記述します。ステージのスクリプトはプロジェクト全体の進行を制御する指揮役です。
2-1：初期化用リセットメッセージを用意する
緑の旗がクリックされた際に各スプライトを初期状態へ戻すための仕組みを作ります。イベントブロックの「（メッセージ1）を送って待つ」でメッセージ名を「リセット」に書き換え、その上に「（緑の旗）が押されたとき」ブロックをつなぎます。
2-2：フレーム切り替えメッセージを設定する
次にフレームを進めるためのメッセージを設定します。メッセージ名は「次のフレーム」とします。このメッセージを受け取ったスプライトが、コスチュームを1枚前進させる処理を実行します。
2-3：フレーム数分だけ繰り返す処理を設定する
このサンプルではフレームを5回切り替えます。制御ブロックの「（5）回繰り返す」の中に「（次のフレーム）を送って待つ」を入れます。繰り返し回数はフレーム枚数に応じて調整してください。
手順3：カエルのスプライトを追加する
「スプライトを選ぶ」から「Frog 2」を選択してプロジェクトに追加します。
3-1：コスチュームを6枚に増やす
「Frog 2」にはデフォルトで3枚のコスチュームが入っています。動きに余裕を持たせるため、合計6枚に増やします。コスチュームタブを開いて「Frog 2-a」を右クリックし「複製」を繰り返して枚数を増やします。コスチュームは一覧の上から順番に切り替わります。
3-2：最後のコスチュームを編集する
一番下のコスチュームを選択し、カエルと一緒に描かれているハエをクリックしてDeleteキーで削除します。これでカエルがハエを食べ終えた状態のコスチュームが完成します。コスチュームには通し番号を含む分かりやすい名前をつけておくと管理しやすくなります（同じ名前は使用不可）。
手順4：カエルのスクリプトを書く
カエルのスプライトに2本のスクリプトを用意します。①初期化（リセット）処理と②フレームを1枚進める処理です。
4-1：「リセット」メッセージを受け取る処理
イベントブロックの「（リセット）を受け取ったとき」を配置し、見た目ブロックの「コスチュームを（01_エサ発見）にする」をつなぎます。コスチューム名は先ほど設定した最初のコスチューム名に合わせてください。
4-2：「次のフレーム」メッセージを受け取る処理
イベントブロックの「（次のフレーム）を受け取ったとき」を選び、見た目ブロックの「次のコスチュームにする」をつなぎます。このままではコスチュームの切り替えが瞬時に終わってしまうため、制御ブロックの「（1）秒待つ」を間に挿入してフレーム間に間隔を設けます。
ステージ側の5回繰り返し処理によって、コスチュームが1枚ずつ順番に切り替わり、フレームアニメーションが完成します。
手順5：コメント表示用スプライトを作る
コメントのスプライトはオリジナルで制作します。猫スプライトをベースにして改造して使います。
5-1：猫スプライトをコメント用に改造する
猫スプライトを選びコスチューム画面を開いて、コスチュームを1枚だけ残し猫の絵を消去します。楕円形を描いてテキストを入力し、コメントの見た目を作ります。カエルと同じ枚数の6枚のコスチュームを用意します。各コスチュームに設定するテキストは次のとおりです。
- 1枚目：エサ発見
- 2枚目：じーーー
- 3枚目：じーーー（同じ内容で間を演出）
- 4枚目：ベロでとらえる
- 5枚目：パックン！（背景：赤丸）
- 6枚目：まんぷく♪
手順6：コメントのスクリプトを書く
コメントスプライトのスクリプトはカエルとほぼ同じ構造です。カエルのスクリプトブロックをコメントスプライトのサムネールにドラッグ＆ドロップしてコピーし、コスチューム名の部分だけコメント用の名前に書き換えます。
完成したスクリプトの全体確認
まとめ：コスチュームとメッセージでアニメーションを作ろう
フレームアニメーションはコスチュームとメッセージの使い方を押さえれば、Scratchで手軽に実現できます。このサンプルをひな型に、フレーム枚数・待機時間・コスチュームのデザインを自由に変えてオリジナル作品を作ってみましょう。アイデアひとつでプロジェクトの表現は無限に広がります。
