スクラッチでキャットが走る・回避するフレームアニメーションの作り方

さぁ、スクラッチでナニ作る！？

チュートリアルの元になった作品

スクラッチ作品

by Scratcher

プレイしておこう

今回のスクラッチを作る参考作品にさせていただきました、ありがとう！

今回の目標

旗クリックで自動スタートし、キャットが左右に走り続ける
走るたびにランダムでジャンプ回避か横ステップ回避を行う
画面端に達したら自動で向きが変わって走り続ける

スターター作品をリミックスしよう

このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード

このチュートリアルでは作者さんの実装方法を尊重して作ってますが、最低限の改善をしてます。（参考作品と同じものが完成するわけではない点はご注意）

#1キャットの初期設定

準備

スプライト「キャット」を開く

キャット

スプライトについて
走行アニメーションと回避動作を行うメインスプライト
どんな役割か
キャットが画面を走り続けるアニメーションを作るよ。ジャンプしたり横に避けたりする回避動作もプログラミングしていくね。

実装

まずはキャットの初期設定から始めよう。イベントが押されたときで旗が押されたら、コスチュームを「待機」に切り替えて準備するよ。

動き x座標を ( ) 、y座標を ( ) にするで画面の下あたり（x:0, y:-50）にキャットを配置して、向きを90度に設定するんだ。回転方法を「左右のみ」にしておくと、キャットがひっくり返らなくなるよ。

最後に見た目表示するでキャットを表示すれば準備完了。

#2走りはじめの動き

初期設定ができたから、次はキャットを走らせてみよう。制御 ( ) 秒待つで1秒だけ待ってから、制御ずっとループに入るんだ。

ループの中では3回繰り返しで「走る1」コスチュームに切り替えて、3歩ずつ動かしていくよ。0.03秒という短い待ち時間がなめらかさのカギで、これを入れないとパラパラ漫画みたいにカクカクした動きになってしまう。これがキャットの走りアニメーションの始まりだよ。

#3走りの完成とランダム分岐

走りの基本ができたから、もっとリアルなアニメーションにしていこう。制御 ( ) 回繰り返すで15回繰り返しながら、見た目次のコスチュームにするでコスチュームを次々に切り替えるんだ。

走り終わったら、ここがおもしろいところ。制御もし ( ) ならでなければと演算 ( ) から ( ) までの乱数を使って、ランダムに「ジャンプ」か「横よけ」のどちらかを選ぶ仕組みにするよ。1〜2のランダムな数が1ならジャンプ、そうでなければ横よけ。

ok-scratch

コスチュームをパラパラ漫画みたいに切り替えることを「フレームアニメーション」と言うんだ。ゲームやアニメも同じ仕組みで、1秒間に何十枚もの絵を切り替えて動いているように見せているんだよ。

#4ジャンプの上昇

ok-scratch

ランダムで「ジャンプ」が選ばれたときの動きを作ろう。まず「ジャンプ1」コスチュームに切り替えて、上昇を始めるよ。

最初は動き y座標を ( ) ずつ変えるでyを12ずつ、4回変えて勢いよく上がるんだ。そのあと同じブロックでyを6ずつ、2回だけ変える。数値が小さくなっていくことで、だんだんスピードが落ちる「減速」を表現しているんだ。

#5ジャンプの着地

ok-scratch

上昇の次は着地を作ろう。頂上でPopの音を鳴らしたら、コスチュームを「ジャンプ2」に切り替えるよ。

下りは上りの逆。最初は動き y座標を ( ) ずつ変えるでyを-6ずつゆっくり降りて、そのあと-12ずつ速く落ちていくんだ。上昇と合わせて見ると、ボールを投げ上げたときと同じ動きになるよね。

ok-scratch

この「上がるときは減速、下がるときは加速」という動きは、物理学の「重力」そのもの。本格的なゲームでも同じ考え方で自然なジャンプを再現しているんだ。

#6横への回避動作

最後に、ランダムでジャンプが選ばれなかったときの「横よけ」を作ろう。こちらは動き ( ) 秒でx座標を ( ) に、y座標を ( ) に変えるを使ったなめらかな移動が特徴。

まずは0.3秒かけて今の位置から少し上（yを40プラス）にスライドして、次に0.3秒で元のy:-50に戻る。上下にフワッと浮く回避動作になるんだ。

最後に動きもし端に着いたら、跳ね返るを入れておくと、キャットが画面の端に行っても折り返してくれるから安心。これで走って、ジャンプして、横によけるキャットの完成！

まとめ

これでキャットが自動で走り、ジャンプしたり横によけたりするアニメーションが完成したね。16フレームのコスチューム切り替えでスムーズな動きを作る「フレームアニメーション」の仕組みは、本物のゲームやアニメでも使われている大事なテクニックだよ。y座標を少しずつ変えて重力のような動きを表現する方法も、プログラミングならではの考え方で面白いね。乱数と条件分岐を組み合わせれば毎回違う動きが楽しめるから、ぜひ自分なりにアレンジして遊んでみよう！

リミックスアイデア

このチュートリアルをベースにして、自分だけのオリジナル作品にアレンジしてみよう！

アイデア	くわしく	実装ヒント
スピン動作を追加しよう	回避パターンにスピン（回転）動作を加えてみよう。今は「ジャンプ」か「横よけ」の2択だけど、3択目としてくるくる回るスピン回避を追加するよ。	「1から3までの乱数」に変えて、if-elseをネストしよう。「向きを○ずつ変える」ブロックをrepeatの中に入れると回転できるよ。スピン後は向きを90度に戻すのも忘れずに。
メテオ（急降下）を追加しよう	ジャンプの発展として、上昇してから一気に急降下するメテオ攻撃アニメーションを追加してみよう。ジャンプの下降部分の速度を一気に上げるだけで迫力ある動きになるよ。	下降時の「○ずつ変える」の値を大きくして（例: -30）、ループ回数を減らすと急降下感が出るよ。専用のメテオコスチュームがあればさらにかっこよくなるね。
キーボードで操作できるようにしよう	今は全部自動だけど、スペースキーを押したときにジャンプさせるなど、プレイヤーが操作できるゲームに改造してみよう。	「○キーが押された」ブロックを使って条件分岐を追加するよ。自動ループはそのままにして、キー入力があったときだけ回避動作を実行するように組み合わせてみよう。
走るスピードをだんだん速くしよう	最初はゆっくりで、時間が経つにつれてどんどん速くなるように改造しよう。スピードが上がるほど緊張感のある演出になるよ。	変数「スピード」を作って、待ち時間の「0.03」をスピード変数に置き換えよう。ずっとループが1周するたびにスピード変数を少しずつ減らしていくと加速感が出るよ。