スクラッチでマリオっぽいスクロールゲームを作る上級技⑨　キュキュッとターンでケムリぶわぁ！

スクラッチプログラミングに挑戦している皆さん、どうも！スクラッチコーチです。

前回はコマの概念を導入してヌルヌル動く走るアニメーションを実装したね。今回はアニメーションをさらに進めていくよ。さらにパーティクルという演出効果の実装も行って、ゲームを別次元にレベルアップさせるぞ！パーティクルとか実装しだすと「え？これスクラッチで作られてるゲームなの！？」って驚かれるくらいにハイクオリティな印象を与えやすいから、ぜひともマスターしてほしいテクニックなんだ。

スクロールゲームの作り方（上級者向けマップチップ法）

今回の目標「ターンのコスチュームや演出を実装する」

ターン、それはマリオゲームでは別になくても成立する要素ではあるけど無いと大きな違和感を生む存在。分かりにくく（？）例えるならブタのシッポみたいな。いや違うかｗ

ターンはもっと必要だな……そう、分かりにくく（？？）例えるなら、パソコンを立ち上げるときの起動音とか……分かりにくいｗ

と、とにかくターン自体はマリオのゲーム性には影響はないかも知れないけど間違いなく無いと「コレじゃない感」が生まれてしまう要素の１つだと思ってる。いわば魂。そんな魂のターンを鮮やかに決める、それが今回。

ok-scratch

ブタのシッポって飼育過程で切っちゃうらしいよ。なんでも、ブタって好奇心旺盛だからお互いのシッポをかじって、そこからバイキンが入っちゃうから、なら先に切っておこうぜ使わないしっていう合理的な判断らしい。ブタを一匹しか飼ってないなら切らなくてもいいってことかもね。

ターンのアニメーションを作る

よし、今回もどんどん行ってまうで！

ok-scratch

疲れたら無理せず休憩してね。日にちを分けて取り組めるように「ここまで終わった」ボタンもあるわけだし。僕も何日かかけて書いてるよ。

変数「アクション」を作る

ブロック定義「_外見を管理する」を改修する

この変数を使うところから先に作ろうか。

ちょうど直前で作業してたブロック定義のココ↓に条件ブロックを追加してみて。

条件式は変数「アクション」がターンかどうか調べる演算だ。

この中でコスチュームをターンに着替え……あれ！？ターンのコスチュームないじゃんｗ

ターンのコスチュームをアップロードする

ごめん、改めてコスチュームをここ↓からダウンロードしてね。

ダウンロードする

ダウンロードできたらコスチュームからアップロードしてほしい↓

そしてコスチューム名を「ターン」にしておいてね。

ありがとう😅

ターンに着替える

それで条件ブロックに戻って、この中でコスチュームを着替えよう！

ここで処理が止まるようにすればココは完成。

これを忘れるとターンしないから注意。

アクションをセットする

ではこのアクションに値をセットしてみよう。

ターンだけではなくて走るもセットしていくよ。

走る

まずは走るから。これは左右のキー操作に対応する最初でセットしていこう。

ターン

少し下に下がって、「もし〜でなければ」ブロックの「でなければ」で定義したターンのキュキュッと減速するとこでアクションをセットしよう。

アクションが反映されているかテストする

おお！急ブレーキしてターンしてるっぽいよね！マリオかよっ！マリオだよっ！

パーティクルを生成する

ゲームではパーティクルという用語がよく使われる。これはエフェクトみたいなもの。

たとえば魔法を使ったら炎の柱がブワッと立ち上がって火の粉がハラハラと舞う、みたいな演出があったりするよね。この火の粉をパーティクルと呼んだりしてる。小さい演出効果みたいなものをパーティクルと呼んでる。

小さいのは見た目のことで、効果自体は大きい。めっちゃ雰囲気出る。

試しに僕らのマリオにもパーティクルを実装してみよう。

ターンをしたときに足元に土ケムリが出るようなパーティクルを生成してみたい。

スプライトをアップロードする

まずはコスチュームが入ったこちら↓のスプライトをダウンロードしてほしい。

ダウンロードする

これをスプライトのところからアップロードしてほしい。

パーティクルというスプライトが追加されたことを確認してね。

変数「コマ」を作る

ではさっそくパーティクルを実装していこう。手始めに変数「コマ」を作るよ。マリオで作ったのと同じやつだ。でもテンポは（一定だから）いらないよ。

初期値をセットする

まずはコマを空白で初期化するよ。初期化ついでに緑の旗ブロックも置こうか。

そのあとに大きさを２００％にしておこう。

そしてこれはクローンとして使う予定だから、本体は隠してしまおう。

クローンされたとき

クローンされたときの処理を作ろう。とりあえずコマを１にセットすることで本体との明確な差別化を行おう。

仮想座標を作る

マリオの足元に出したいからパーティクルも座標情報を保つ必要がある。これは青いx座標ブロックとy座標ブロックではなくて変数で作るよ。

なぜならパーティクルもマリオと同じようにカメラの影響を受けて移動するからなんだ。

マリオと同じ値をセットする

マリオの足元に出したいから、マリオの座標をいったんコピーすると楽なんだ。

仮想X座標

そのためにまずコレ↓をブロックパレットの「調べる」にある一覧から見つけてみて。

ドロップダウンを開いて次のように選択しよう。

これをセットするよ。完成形はこちら↓

仮想Y座標

Y軸は足元にしたいからマイナス２０しておく。

クローンされたときの処理はこれでOK！

メッセージ「タイルを配置します」を受け取ったとき

今度はコレを実装していくよ。

このメッセージはゲームのメインループ内で常に呼ばれているから実質は「ずっとループ」と同じような効果を発揮するよ。復習がてら、マリオのこちらね↓

位置を更新する

そしてX座標とY座標をカメラを加味した値にセットする。これはマリオのときにすでにやったね。

本体なら処理を止める

ただしこの処理はクローンだけ実行すればいいので、本体なら止めるようにしておこう。

本体かクローンかはコマの値を見れば分かるようになってるね。

表示する

これでいったん表示されるようにしてみようか。

マリオからパーティクルのクローンを作る

パーティクルのクローンが生成されるタイミングを決めるのはマリオがターンしたタイミングだから、マリオに決めてもらうのがいいね。

マリオを開こう。

ブロック定義「_土ケムリを立てる」を作る

実行する

ターンしてるところで実行しよう。

パーティクルのクローンを作る

シンプルに１つブロックを置いておこう。

パーティクルが表示されるかテストする

うん、変ｗ

土ケムリが消えるようにする

改善の余地は大いにある、そんな印象だね。よし、パーティクルのコスチュームをチェックしてみよう。

この２つがあるよね。大小２つのコスチュームになってる。

この２つを切り替えることでもっと土ケムリらしさを出すことができる。やってみよう。

コマを加算する

今はコマを本体とクローンの差別化にしか使ってないので、これをコスチュームの切り替えにも使うようにしたい。

そこで表示した後にコマを0.4ずつ加算していこう。

コスチュームを着替える

コマの値を切り下げて整数にしてからコスチュームに割り当てよう。

土ケムリを消す

さらに、今はクローンが消えないせいでずっとケムリがモクモクしている。これではおかしいのでしっかりクローンを消すようにしたい。

タイミングはここ↓

コマが３以上になったら消したいから条件式はこうかな↓

どうして「ではない」を使ってるの？

そうだね、「コマ > 3」っていう演算でもほとんど一緒だよね。理由があるから書くね。
まず前提としてコスチュームは２つあったよね。スモーク１とスモーク２。
そしてコマの値を切り下げた結果を使ってコスチュームを切り下げてる。つまり、コスチュームを切り替えるために必要な数字は１と２だけなんだ。
でも「コマ > 3」でクローンが消えるようにしてしまうと、一瞬だけコマを切り下げた結果が３になってしまって、コスチュームの３番目（今はないけど）を指定してしまうことになる。
仮に３番目に全然関係ないコスチュームを後日作ったら……これはバグの温床になるよね。
そこでコマの値は2.999...までにしておきたいから「コマ < 3、ではなくなったら」なんていう遠回しな条件を作っているんだよ。

クローンを消す

土ケムリが消えるかテストする

ヒュ〜！いい感じぃ！

土ケムリの量を減らす

さらに改善しよう。今はちょっと量が多い。どんだけ土舞ってんねんってなるからもっと減らそう。

マリオを開いてね。

マリオのコマを利用する

マリオにもコマっていう変数があるよね。これを使っていく。

ブロック定義「_土ケムリを立てる」でコマを１ずつ加算しようか。

３回に１回しかパーティクルを生成しない

クローンを作るタイミングをコマを使ってコントロールする。具体的にはクローンを作る量を３分の１に減らす。

とりあえず条件ブロックでクローンを作るブロックを囲おう。

そしてコマを３で割った余りが１より小さいか調べる演算を条件式に当てはめよう。

土ケムリの量が減ったかテストする

ちょうどいいんじゃない！？よしよし！

でもちょっと待って……。なんか空中でも土ケムリが立ってるｗ濃密な光化学スモッグじゃあるまいしｗこわいこわいｗ

空中では土ケムリが立たないようにする

そもそも空中でターンのコスチュームもいらないので、そこもいっぺんに修正しよう。

ブロック定義「_キー操作[←→]に対応する」のところにあるターンの実装を条件ブロックで囲おう。

そして空中にいるか調べて、地面にいるなら処理が通るようにしよう。

これで空中ではターン自体が行われなくなったね！よかった。

さぁリファクタリングのお時間です

ネスト恐怖症(笑)のワタクシ、もうコレ以上のネストには精神が耐えられませんｗ

一区切り付いたこのタイミングでガラッとコードをリファクタリングしちゃいます。

ただ言っておきたいのは、グリフパッチさんのコードがダメだからやるわけではないよ。グリフパッチさんはやろうと思えばどこまでも美しいコーディングが出来る人だよ。でも動画の尺を意識しつつ専門性・複雑性をできるだけ抑えたコードを保って難易度の高いことを実装してくれているというスーパープレイであることは伝えておきたい。

ok-scratch

このリファクタリングで動画とはコーディングの構造がガラリと変わります！動画に準拠したい方はご注意ください〜。

すごくダイナミックに変更していくから、壊れないように要注意が必要な作業だよ。心配ならプロジェクトを別途保存してから取り組もう。