- スターター作品
- なし
- 今回の完成サンプル
- なし
さぁ、スクラッチでナニ作る！？
チュートリアルの元になった作品
[prj-embed prj="remix-test" mini="1" title="プレイしておこう"]今回の[prj-link prj="remix-test"]スクラッチを作る参考作品[/prj-link]にさせていただきました、ありがとう！[/prj-embed]今回の目標
- 旗クリックで自動スタートし、キャットが左右に走り続ける
- 走るたびにランダムでジャンプ回避か横ステップ回避を行う
- 画面端に達したら自動で向きが変わって走り続ける
スターター作品をリミックスしよう
このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード
#1キャットの初期設定
準備
スプライト「キャット」を開く
キャット| スプライトについて |
|---|
| 走行アニメーションと回避動作を行うメインスプライト |
| どんな役割か |
| キャットが画面を走り続けるアニメーションを作るよ。ジャンプしたり横に避けたりする回避動作もプログラミングしていくね。 |
実装
まずはキャットの初期設定から始めよう。
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
x座標を ( ) 、y座標を ( ) にする で画面の下あたり（x:0, y:-50）にキャットを配置して、向きを90度に設定するんだ。回転方法を「左右のみ」にしておくと、キャットがひっくり返らなくなるよ。
最後に 表示する でキャットを表示すれば準備完了。
#2走りはじめの動き
初期設定ができたから、次はキャットを走らせてみよう。 ( ) 秒待つ で1秒だけ待ってから、 ずっと ループに入るんだ。
ループの中では3回繰り返しで「走る1」コスチュームに切り替えて、3歩ずつ動かしていくよ。0.03秒という短い待ち時間がなめらかさのカギで、これを入れないとパラパラ漫画みたいにカクカクした動きになってしまう。これがキャットの走りアニメーションの始まりだよ。
#3走りの完成とランダム分岐
走りの基本ができたから、もっとリアルなアニメーションにしていこう。 ( ) 回繰り返す で15回繰り返しながら、 次のコスチュームにする でコスチュームを次々に切り替えるんだ。
走り終わったら、ここがおもしろいところ。 もし ( ) ならでなければ と ( ) から ( ) までの乱数 を使って、ランダムに「ジャンプ」か「横よけ」のどちらかを選ぶ仕組みにするよ。1〜2のランダムな数が1ならジャンプ、そうでなければ横よけ。
[talk]コスチュームをパラパラ漫画みたいに切り替えることを「フレームアニメーション」と言うんだ。ゲームやアニメも同じ仕組みで、1秒間に何十枚もの絵を切り替えて動いているように見せているんだよ。[/talk]
#4ジャンプの上昇
[talk class="m-l-n"]ランダムで「ジャンプ」が選ばれたときの動きを作ろう。まず「ジャンプ1」コスチュームに切り替えて、上昇を始めるよ。[/talk]
最初は y座標を ( ) ずつ変える でyを12ずつ、4回変えて勢いよく上がるんだ。そのあと同じブロックでyを6ずつ、2回だけ変える。数値が小さくなっていくことで、だんだんスピードが落ちる「減速」を表現しているんだ。
#5ジャンプの着地
[talk class="m-l-n"]上昇の次は着地を作ろう。頂上でPopの音を鳴らしたら、コスチュームを「ジャンプ2」に切り替えるよ。[/talk]
下りは上りの逆。最初は y座標を ( ) ずつ変える でyを-6ずつゆっくり降りて、そのあと-12ずつ速く落ちていくんだ。上昇と合わせて見ると、ボールを投げ上げたときと同じ動きになるよね。
[talk]この「上がるときは減速、下がるときは加速」という動きは、物理学の「重力」そのもの。本格的なゲームでも同じ考え方で自然なジャンプを再現しているんだ。[/talk]
#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周するたびにスピード変数を少しずつ減らしていくと加速感が出るよ。 |
