マリオっぽいダッシュとターンの作り方 スクラッチ小技

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

移動速度からアニメーションのテンポを毎フレーム計算するこの設計が効いている。速度が上がるほど脚の回転も速くなり、減速すると自然にゆっくりなる。固定テンポのコスチューム切り替えでは出せない、動きとアニメが一体になった手触りを実現している。加速・摩擦・方向転換検出を含むこの走りがどう組まれているのか、作り方を見ていこう。

動画で見てみよう

ok-scratch

チャンネル登録して応援よろしく！チャンネル登録する

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

スクラッチでプレイする ターボワープでプレイする

小技：ダッシュ & ターン

by ok-scratch

プレイしておこう

今回のスクラッチを作る参考作品です。

今回の目標

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

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

#1ネコの初期設定

ok-scratch

キーを押すと走り出すネコを作っていくよ。まずはダッシュキャットの初期設定からスタート。

準備

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

ダッシュキャット

スプライトについて
左右に走るネコキャラクター。キー入力に応じて走る・方向転換・減速などのアクションを切り替え、アニメーションを管理する
どんな役割か
キーを押すと走り出すネコを作るよ！左右の移動や方向転換、加速・減速をリアルに再現するんだ。走るコスチュームを速度に合わせて切り替えて、アニメーションっぽく動かすよ！

変数「横の速度」を追加

X方向の移動速度。正なら右、負なら左に移動する

メッセージ「スタート」を追加

ゲーム開始を合図するメッセージ

実装

イベント が押されたときで旗が押されたら、「横の速度」変数を0にして完全に止まった状態にする。回転方法を「左右のみ」にして座標(0, -85)に配置したら、イベント( ) を送るで「スタート」メッセージを送るよ。このメッセージを受け取った他のスプライトが、一斉に動き始めるしくみなんだ。

#2←→キー入力の読み取り

ok-scratch

ダッシュキャットの準備ができたから、次はコントローラースプライトでキーボード入力を読み取るしくみを作るよ。

準備

スプライト「コントローラー」を開く

コントローラー

スプライトについて
左右矢印キーとA・Dキーの入力を監視し、KEY_INPUT_Xグローバル変数に反映するスプライト
どんな役割か
キーボードの入力を読み取るしくみを作るよ！左右の矢印キーとA・Dキーに両対応してて、どっちが押されてるか常に監視してるんだ。

変数「■横キー入力」を追加

左右キー入力の合計値。右キーで+1、左キーで-1。Controllerスプライトが毎フレーム更新する

実装

「スタート」を受け取ったら制御ずっとでずっと監視開始。やってることは、右矢印キーが押されてるかどうか（1か0）から左矢印キー（1か0）を引き算してるだけなんだ。右を押してたら1、左なら-1、何も押してなければ0になるって感じ。

#3DとAキー入力の読み取り

ok-scratch

さらにDキーとAキーの分も同じように足すことで、WASDにも対応してるんだよね。

準備

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

変数「アクション状態」を追加

現在のアクション（走る・ターン等）を管理する文字列

実装

この値を「■横キー入力」グローバル変数に入れておけば、ダッシュキャットがいつでも読み取れるよね。入力の処理を専用スプライトに分離しておくと、キャラが増えても入力処理は1箇所で済むんだ。

#4メインループの設計

ok-scratch

コントローラーの準備ができたから、ダッシュキャットに戻ってメインループを組み立てていこう。

準備

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

変数「アクション状態」を追加

現在のアクション（走る・ターン等）を管理する文字列

実装

イベント( ) を受け取ったときで「スタート」を受け取ったら、制御ずっとループに入る。毎フレーム最初に「アクション状態」を「走る」にリセットして、「■横キー入力」が0かどうかで処理を分岐するよ。0ならキーが押されてない＝減速、0以外ならキーが押されてる＝走る、という判断だね。

ここではまだ分岐先の中身は空っぽ。「減速する」と「走る」のカスタムブロックを先に作ってから、後で組み込む流れになるよ。

#5減速の判定

ok-scratch

「減速する」カスタムブロックを定義するよ。キーを離したときにネコが急停止するんじゃなくて、スーッと滑るように減速する動きを作るんだ。

準備

カスタム定義「減速する」を追加

speed_xが0.4未満なら0にし、それ以外は速度の方向に逆らう力を加えて徐々に減速する

実装

ブロック定義定義 ( )で「減速する」を定義（画面を再描画せずに実行はオフ）。最初にやるのは「横の速度」の絶対値が0.4より大きいかチェックすることだよ。

#6摩擦力で減速する

ok-scratch

「横の速度」が0.4を超えてる場合の減速処理を書いていくよ。速度を一気に0にするんじゃなく、毎フレーム少しずつ削っていくんだよね。

準備

カスタム定義「走る」を追加

KEY_INPUT_Xに応じてキャラの向きと速度を更新する。最大速度を超えている場合はスキップ

実装

具体的には変数( ) を ( ) ずつ変えるで「横の速度」を-0.4×（速度÷速度の絶対値）だけ変える。速度÷絶対値は、正なら1、負なら-1になるから、要するに移動方向と逆向きに0.4の力をかけてるんだよ。摩擦のイメージだね。そして制御　でこのスクリプトを止めて、0.4以下のときの処理（速度を0にセット）には行かないようにしてるんだ。

#7走る処理と速度制限

ok-scratch

次は「走る」カスタムブロック。キーが押されてるときの加速処理だよ。

準備

カスタム定義「走る」を追加

KEY_INPUT_Xに応じてキャラの向きと速度を更新する。最大速度を超えている場合はスキップ

実装

ブロック定義定義 ( )で「走る」を定義（画面を再描画せずに実行はオフ）。まず「横の速度」の絶対値が6を超えてたら、これ以上加速しないように制御　でスクリプトを止めるよ。これがスピードの上限。

#8ターンのアクションにする

ok-scratch

その次に、「■横キー入力」×「横の速度」が0より小さいかどうかをチェックしてるんだ。これが方向転換の検出。右に走ってるのに左キーを押すと、速度は正でキー入力は-1だから、掛け算すると負になるよね。逆も同じ。

ok-scratch

「2つの数を掛けて符号が負になったら方向転換」っていうこの判定、実はプログラミングではよく使うテクニックなんだ。普通は「前の向きを変数に記録して、今の向きと比べる」って方法を使うけど、この作品では掛け算一発で判定してるんだ。変数を1個節約できるし、コードもスッキリするっしょ。数学ってこういうところで効いてくるんよな。

方向転換が検出されたら「アクション状態」を「ターン」にセットするよ。このフラグは後でコスチューム切り替えのときに使うんだ。

#9方向転換と加速

準備

カスタム定義「アニメフレームを計算する」を追加

現在の速度からアニメーションのフレーム番号とテンポを計算する

変数「アニメフレーム」を追加

走りアニメーションの現在フレーム番号。速度に応じて進む

変数「フレーム速度」を追加

1ループごとにフレームが進む量。速度の絶対値÷6で計算する

実装

方向転換の有無にかかわらず、動き( ) 度に向けるでネコの向きを90×「■横キー入力」に合わせる。右キーなら90度（右向き）、左キーなら-90度（左向き）になるね。そして変数( ) を ( ) ずつ変えるで「横の速度」に0.4×「■横キー入力」を足して加速。キーを押し続けると毎フレーム0.4ずつ速くなって、最大6まで上がるよ。

#10減速と走りを組み込む

ok-scratch

ここまでで「減速する」と「走る」のカスタムブロックが完成したから、メインループの分岐に組み込もう。

「■横キー入力」が0のとき（キーを離してるとき）はブロック定義( )で「減速する」を呼び出し、0以外のとき（キーを押してるとき）は「走る」を呼び出す。これだけで、キーを押したら加速、離したら減速っていう基本の動きが完成するんだ。

#11アニメの速さを計算

ok-scratch

ネコが動くようになったから、次は走りアニメーションの仕組みを作るよ。普通はただコスチュームを順番に切り替えるけど、この作品ではネコのスピードに合わせてアニメの速さも変わるようにするんだ。

準備

カスタム定義「アニメフレームを計算する」を追加

現在の速度からアニメーションのフレーム番号とテンポを計算する

変数「アニメフレーム」を追加

走りアニメーションの現在フレーム番号。速度に応じて進む

変数「フレーム速度」を追加

1ループごとにフレームが進む量。速度の絶対値÷6で計算する

実装

ブロック定義定義 ( )で「アニメフレームを計算する」を定義（画面を再描画せずに実行はオン）。「横の速度」が0なら「アニメフレーム」を0にリセット。0じゃなければ、「フレーム速度」に速度の絶対値÷6をセットするよ。たとえば速度が3なら0.5、速度が6なら1.0になる。速いほどアニメも速く進むってこと。

#12フレームを進める

ok-scratch

「フレーム速度」が計算できたら、実際に「アニメフレーム」を進めていくよ。

ただし「フレーム速度」が0.1未満のときは、速度がほぼゼロに近いってことだから「アニメフレーム」を0に戻す。超低速のときにアニメがカクカクしないための安全装置みたいなもの。0.1以上なら変数( ) を ( ) ずつ変えるで「アニメフレーム」に「フレーム速度」を足して、フレームを進めるんだ。

#13方向転換の演出

ok-scratch

アニメフレームの計算ができたから、次はそのフレーム情報を使ってコスチュームを切り替える「コスチュームを管理する」カスタムブロックを作るよ。

準備

カスタム定義「コスチュームを管理する」を追加

アクション状態とフレーム番号に応じてコスチュームを切り替える

実装

ブロック定義定義 ( )で定義（画面を再描画せずに実行はオン）。まず「アクション状態」が「ターン」かどうかチェックするよ。方向転換中で、今のコスチュームがまだ「ターン」じゃないときだけ音( ) の音を鳴らすで「ブレーキ」の音を鳴らす。キュッと止まる感じが出てリアルなんだよね。

#14待機とターンの表示

方向転換中ならコスチュームを「ターン」に切り替えて、制御　でスクリプトを止める。ターンの処理はこれで完了。

ターンじゃない場合は、「アニメフレーム」が0かどうかで分岐するよ。0なら完全に停止してるってことだから「待機」コスチュームを表示。0以外のとき、つまり走ってるときのコスチュームは次のステップで設定するんだ。

#15走りアニメーション

ここが走りアニメーションの本体。見た目コスチュームを ( ) にするで「走る」＋(1 + floor(「アニメフレーム」) mod 16) のコスチュームに切り替えるよ。

floorでフレームの小数部分を切り捨てて、mod 16で0〜15の範囲をぐるぐるループさせる。それに1を足して「走る1」〜「走る16」に対応させてるんだ。16コマの走りアニメーションが無限にループする仕組みだよ。

ok-scratch

普通のScratch作品だと「次のコスチューム」ブロックで一定速度のアニメーションにすることが多いけど、この作品ではネコの移動速度からアニメの速さを計算してる。低速だとゆっくり足が動いて、全速力だと素早く脚が回る。これってプロのゲームでいう「速度連動アニメーション」ってやつで、キャラクターの動きがめちゃくちゃ自然に見えるようになるんだ。速度とアニメが噛み合ってないと、足が滑ってるみたいで違和感がすごいからね。

#16すべてを接続する

ok-scratch

最後に、メインループの中でアニメーション計算と実際の移動をつなぎ合わせるよ。

毎フレーム、減速or走るの処理が終わった後にブロック定義( )で「アニメフレームを計算する」→「コスチュームを管理する」の順で呼び出す。そして動きx座標を ( ) ずつ変えるで「横の速度」ぶんだけX座標を動かす。これでキー入力→加速・減速→アニメーション→移動という一連の流れがすべて毎フレーム実行されるようになったんだ。

加速・減速の物理演算、方向転換検出、速度連動アニメーション。このネコ、見た目以上にちゃんとしたゲームキャラクターの動きをしてるよ。

まとめ

加速・摩擦・方向転換、そして速度連動アニメーション。これだけのしくみが2スプライトだけでシンプルに組まれているのが面白いよな。物理演算っぽい動きも、計算式さえ理解すればScratchで全部作れるんだ。自分だけのキャラクターに応用してみてね！