- スターター作品
- なし
- 今回の完成サンプル
- なし
さぁ、スクラッチでナニ作る！？
移動速度からアニメーションのテンポを毎フレーム計算するこの設計が効いている。速度が上がるほど脚の回転も速くなり、減速すると自然にゆっくりなる。固定テンポのコスチューム切り替えでは出せない、動きとアニメが一体になった手触りを実現している。加速・摩擦・方向転換検出を含むこの走りがどう組まれているのか、作り方を見ていこう。
動画で見てみよう
[talk]チャンネル登録して応援よろしく！チャンネル登録する[/talk]チュートリアルの元になった作品
[prj-embed prj="1311034682" mini="1" title="プレイしておこう" prj-title="小技：ダッシュ & ターン" prj-author="ok-scratch"]今回の[prj-link prj="1311034682" title="小技：ダッシュ & ターン" author="ok-scratch"]スクラッチを作る参考作品[/prj-link]です。[/prj-embed]今回の目標
- 矢印キー・WASDで左右に走るネコを作る
- 加速・摩擦の物理演算でリアルな動きを実現する
- 速度に連動した走りアニメーションを実装する
スターター作品をリミックスしよう
このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード
#1ネコの初期設定
[talk class="m-l-n"]キーを押すと走り出すネコを作っていくよ。まずはダッシュキャットの初期設定からスタート。[/talk]準備
スプライト「ダッシュキャット」を開く
ダッシュキャット| スプライトについて |
|---|
| 左右に走るネコキャラクター。キー入力に応じて走る・方向転換・減速などのアクションを切り替え、アニメーションを管理する |
| どんな役割か |
| キーを押すと走り出すネコを作るよ！左右の移動や方向転換、加速・減速をリアルに再現するんだ。走るコスチュームを速度に合わせて切り替えて、アニメーションっぽく動かすよ！ |
変数「横の速度」を追加
X方向の移動速度。正なら右、負なら左に移動する
メッセージ「スタート」を追加
ゲーム開始を合図するメッセージ
実装
#2←→キー入力の読み取り
[talk class="m-l-n"]ダッシュキャットの準備ができたから、次はコントローラースプライトでキーボード入力を読み取るしくみを作るよ。[/talk]準備
スプライト「コントローラー」を開く
コントローラー| スプライトについて |
|---|
| 左右矢印キーとA・Dキーの入力を監視し、KEY_INPUT_Xグローバル変数に反映するスプライト |
| どんな役割か |
| キーボードの入力を読み取るしくみを作るよ！左右の矢印キーとA・Dキーに両対応してて、どっちが押されてるか常に監視してるんだ。 |
変数「■横キー入力」を追加
左右キー入力の合計値。右キーで+1、左キーで-1。Controllerスプライトが毎フレーム更新する
実装
「スタート」を受け取ったらずっとでずっと監視開始。やってることは、右矢印キーが押されてるかどうか（1か0）から左矢印キー（1か0）を引き算してるだけなんだ。右を押してたら1、左なら-1、何も押してなければ0になるって感じ。
#3DとAキー入力の読み取り
[talk class="m-l-n"]さらにDキーとAキーの分も同じように足すことで、WASDにも対応してるんだよね。[/talk]準備
スプライト「ダッシュキャット」を開く
変数「アクション状態」を追加
現在のアクション（走る・ターン等）を管理する文字列
実装
この値を「■横キー入力」グローバル変数に入れておけば、ダッシュキャットがいつでも読み取れるよね。入力の処理を専用スプライトに分離しておくと、キャラが増えても入力処理は1箇所で済むんだ。
#4メインループの設計
[talk class="m-l-n"]コントローラーの準備ができたから、ダッシュキャットに戻ってメインループを組み立てていこう。[/talk]準備
スプライト「ダッシュキャット」を開く
変数「アクション状態」を追加
現在のアクション（走る・ターン等）を管理する文字列
実装
( ) を受け取ったときで「スタート」を受け取ったら、ずっとループに入る。毎フレーム最初に「アクション状態」を「走る」にリセットして、「■横キー入力」が0かどうかで処理を分岐するよ。0ならキーが押されてない＝減速、0以外ならキーが押されてる＝走る、という判断だね。
ここではまだ分岐先の中身は空っぽ。「減速する」と「走る」のカスタムブロックを先に作ってから、後で組み込む流れになるよ。
#5減速の判定
[talk class="m-l-n"]「減速する」カスタムブロックを定義するよ。キーを離したときにネコが急停止するんじゃなくて、スーッと滑るように減速する動きを作るんだ。[/talk]準備
カスタム定義「減速する」を追加
speed_xが0.4未満なら0にし、それ以外は速度の方向に逆らう力を加えて徐々に減速する
実装
定義 ( )で「減速する」を定義（画面を再描画せずに実行はオフ）。最初にやるのは「横の速度」の絶対値が0.4より大きいかチェックすることだよ。
#6摩擦力で減速する
[talk class="m-l-n"]「横の速度」が0.4を超えてる場合の減速処理を書いていくよ。速度を一気に0にするんじゃなく、毎フレーム少しずつ削っていくんだよね。[/talk]準備
カスタム定義「走る」を追加
KEY_INPUT_Xに応じてキャラの向きと速度を更新する。最大速度を超えている場合はスキップ
実装
具体的には( ) を ( ) ずつ変えるで「横の速度」を-0.4×（速度÷速度の絶対値）だけ変える。速度÷絶対値は、正なら1、負なら-1になるから、要するに移動方向と逆向きに0.4の力をかけてるんだよ。摩擦のイメージだね。そして でこのスクリプトを止めて、0.4以下のときの処理（速度を0にセット）には行かないようにしてるんだ。
#7走る処理と速度制限
[talk class="m-l-n"]次は「走る」カスタムブロック。キーが押されてるときの加速処理だよ。[/talk]準備
カスタム定義「走る」を追加
KEY_INPUT_Xに応じてキャラの向きと速度を更新する。最大速度を超えている場合はスキップ
実装
定義 ( )で「走る」を定義（画面を再描画せずに実行はオフ）。まず「横の速度」の絶対値が6を超えてたら、これ以上加速しないように でスクリプトを止めるよ。これがスピードの上限。
#8ターンのアクションにする
[talk class="m-l-n"]その次に、「■横キー入力」×「横の速度」が0より小さいかどうかをチェックしてるんだ。これが方向転換の検出。右に走ってるのに左キーを押すと、速度は正でキー入力は-1だから、掛け算すると負になるよね。逆も同じ。[talk]「2つの数を掛けて符号が負になったら方向転換」っていうこの判定、実はプログラミングではよく使うテクニックなんだ。普通は「前の向きを変数に記録して、今の向きと比べる」って方法を使うけど、この作品では掛け算一発で判定してるんだ。変数を1個節約できるし、コードもスッキリするっしょ。数学ってこういうところで効いてくるんよな。[/talk][/talk]
方向転換が検出されたら「アクション状態」を「ターン」にセットするよ。このフラグは後でコスチューム切り替えのときに使うんだ。
#9方向転換と加速
準備
カスタム定義「アニメフレームを計算する」を追加
現在の速度からアニメーションのフレーム番号とテンポを計算する
変数「アニメフレーム」を追加
走りアニメーションの現在フレーム番号。速度に応じて進む
変数「フレーム速度」を追加
1ループごとにフレームが進む量。速度の絶対値÷6で計算する
実装
方向転換の有無にかかわらず、( ) 度に向けるでネコの向きを90×「■横キー入力」に合わせる。右キーなら90度（右向き）、左キーなら-90度（左向き）になるね。そして( ) を ( ) ずつ変えるで「横の速度」に0.4×「■横キー入力」を足して加速。キーを押し続けると毎フレーム0.4ずつ速くなって、最大6まで上がるよ。
#10減速と走りを組み込む
[talk class="m-l-n"]ここまでで「減速する」と「走る」のカスタムブロックが完成したから、メインループの分岐に組み込もう。[/talk]
「■横キー入力」が0のとき（キーを離してるとき）は( )で「減速する」を呼び出し、0以外のとき（キーを押してるとき）は「走る」を呼び出す。これだけで、キーを押したら加速、離したら減速っていう基本の動きが完成するんだ。
#11アニメの速さを計算
[talk class="m-l-n"]ネコが動くようになったから、次は走りアニメーションの仕組みを作るよ。普通はただコスチュームを順番に切り替えるけど、この作品ではネコのスピードに合わせてアニメの速さも変わるようにするんだ。[/talk]準備
カスタム定義「アニメフレームを計算する」を追加
現在の速度からアニメーションのフレーム番号とテンポを計算する
変数「アニメフレーム」を追加
走りアニメーションの現在フレーム番号。速度に応じて進む
変数「フレーム速度」を追加
1ループごとにフレームが進む量。速度の絶対値÷6で計算する
実装
定義 ( )で「アニメフレームを計算する」を定義（画面を再描画せずに実行はオン）。「横の速度」が0なら「アニメフレーム」を0にリセット。0じゃなければ、「フレーム速度」に速度の絶対値÷6をセットするよ。たとえば速度が3なら0.5、速度が6なら1.0になる。速いほどアニメも速く進むってこと。
#12フレームを進める
[talk class="m-l-n"]「フレーム速度」が計算できたら、実際に「アニメフレーム」を進めていくよ。[/talk]
ただし「フレーム速度」が0.1未満のときは、速度がほぼゼロに近いってことだから「アニメフレーム」を0に戻す。超低速のときにアニメがカクカクしないための安全装置みたいなもの。0.1以上なら( ) を ( ) ずつ変えるで「アニメフレーム」に「フレーム速度」を足して、フレームを進めるんだ。
#13方向転換の演出
[talk class="m-l-n"]アニメフレームの計算ができたから、次はそのフレーム情報を使ってコスチュームを切り替える「コスチュームを管理する」カスタムブロックを作るよ。[/talk]準備
カスタム定義「コスチュームを管理する」を追加
アクション状態とフレーム番号に応じてコスチュームを切り替える
実装
定義 ( )で定義（画面を再描画せずに実行はオン）。まず「アクション状態」が「ターン」かどうかチェックするよ。方向転換中で、今のコスチュームがまだ「ターン」じゃないときだけ( ) の音を鳴らすで「ブレーキ」の音を鳴らす。キュッと止まる感じが出てリアルなんだよね。
#14待機とターンの表示
方向転換中ならコスチュームを「ターン」に切り替えて、 でスクリプトを止める。ターンの処理はこれで完了。
ターンじゃない場合は、「アニメフレーム」が0かどうかで分岐するよ。0なら完全に停止してるってことだから「待機」コスチュームを表示。0以外のとき、つまり走ってるときのコスチュームは次のステップで設定するんだ。
#15走りアニメーション
ここが走りアニメーションの本体。コスチュームを ( ) にするで「走る」＋(1 + floor(「アニメフレーム」) mod 16) のコスチュームに切り替えるよ。
floorでフレームの小数部分を切り捨てて、mod 16で0〜15の範囲をぐるぐるループさせる。それに1を足して「走る1」〜「走る16」に対応させてるんだ。16コマの走りアニメーションが無限にループする仕組みだよ。
[talk]普通のScratch作品だと「次のコスチューム」ブロックで一定速度のアニメーションにすることが多いけど、この作品ではネコの移動速度からアニメの速さを計算してる。低速だとゆっくり足が動いて、全速力だと素早く脚が回る。これってプロのゲームでいう「速度連動アニメーション」ってやつで、キャラクターの動きがめちゃくちゃ自然に見えるようになるんだ。速度とアニメが噛み合ってないと、足が滑ってるみたいで違和感がすごいからね。[/talk]
#16すべてを接続する
[talk class="m-l-n"]最後に、メインループの中でアニメーション計算と実際の移動をつなぎ合わせるよ。[/talk]毎フレーム、減速or走るの処理が終わった後に( )で「アニメフレームを計算する」→「コスチュームを管理する」の順で呼び出す。そしてx座標を ( ) ずつ変えるで「横の速度」ぶんだけX座標を動かす。これでキー入力→加速・減速→アニメーション→移動という一連の流れがすべて毎フレーム実行されるようになったんだ。
加速・減速の物理演算、方向転換検出、速度連動アニメーション。このネコ、見た目以上にちゃんとしたゲームキャラクターの動きをしてるよ。
まとめ
加速・摩擦・方向転換、そして速度連動アニメーション。これだけのしくみが2スプライトだけでシンプルに組まれているのが面白いよな。物理演算っぽい動きも、計算式さえ理解すればScratchで全部作れるんだ。自分だけのキャラクターに応用してみてね！
