壁で立ち止まらないスムーズな動きを実現する（爆速オンライン3Dゲームの作り方 #07）

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

ゴンザレスからの挑戦状

壁に張り付いてあたりを見回してたスクラッチキャット、遠くまでよく見えるようにはなったけど体が動かない？！一体何が……あぁそうか！壁に触れてると常に逆進する力が加わるから動けなくなっちゃうんだ。このままだとまずいね……。潜入捜査なのに移動しづらいなんて、厳しすぎるぅ！

今回の目標「移動のユーザビリティを高める」

壁に当たると動きが止まっちゃう、というルールがゲームに必要なら別だけど、そうじゃないなら壁にちょっと触れたくらいでイチイチ止まりたくない。

たとえばレースとか、たとえば鬼ごっこで鬼から逃げてるときとか、壁にあたって止まってたらスリリングなゲーム体験が損なわれてしまう。

こういった「使いやすさ」「プレイのストレスをなくす」みたいな修正を「ユーザビリティを高める」って表現したりする。今回は移動に関するユーザビリティを改善していくぜ。

具体的には以下のユーザビリティを改善する。

• 壁にあたっても斜めに進めるようにする
• 矢印キーだけでなくWASDでも動けるようにする
• 回転せずに真横にスライドできるようにする（カニ歩き）

壁にあたっても斜めに進めるようにする

壁に向かって垂直にあたったら止まるけど、斜めに進んでいる最中に壁にあたっても止まらないようにしたい。

完成像は↓こんな感じ。

これを実現する。

定義「_移動値を計算する」を作る

引数はX方向とY方向という2つだよ。

それぞれの引数を、X座標とY座標に加算しよう。

そしてここでも「レベルに触れたら」という条件ブロックを追加する。

壁に触れたら逆進するようにXとYにマイナス方向の力を加算するぞ。

移動する距離を計算する

定義「_移動する」に修正を加えるので、↓この部分で切り離しておいて。

そして↓このブロックを用意して演算を作る。

これと向きのsinサインを組み合わせる。sinサインは三角関数で、円状の動きの計算によく使われるんだ。ここでは向き（90度とか180度）っていう数字を0とか1とか0.45とかっていうある程度の範囲の数字に変換してくれてる。試しにクリックしてどんな数値が入っているか確かめてみるといいかも。

最終的にこうなる↓

これを定義「_移動値を計算する」のX方向に割り当てて、Y方向にはゼロを入れて実行する。

さらに！もう一回同じ定義を呼び出す。ただし引数に注意。今度はX方向がゼロで、Y方向に三角関数cosコサインに変えたものを使っている。

最後に切り離しておいたブロックをくっつけておこう。

CHECK! 壁にあたっても斜めに進んでくれるかテストする

最高にスムーズでストレスフリーじゃない？

壁に触れたら動けなくなる必要がないなら、こっちのほうが絶対ゲーム体験として良いよね。

WASDでも動けるようにする

これはカンタン。

「◯または◯」ブロックを組み込むだけ。

横にスライド（カニ歩き）できるようにする

さらに移動のユーザビリティを高めていこう。

今度は回転せずに横に移動する。前を向きながら横に移動する、カニ歩きみたいな機能を実現する。

左にカニ歩きする

定義「_プレイヤーティック」に新しい条件ブロックを追加しよう。

この条件ブロックには「aキーが押されたら」っていう条件式をはめておいてね。（スクショ忘れた）

そして大切なのはこの中身。次のとおりに実装する。

• いったん左に90度回す。
• そして定義「_移動する」を呼ぶ。
• そのあと右に90度回して戻す。

この3ステップでカニ歩きを実現できる。

右にカニ歩きする

もしブロックを複製しよう。

今度は左右が逆になるよ。

• いったん右に90度回す。
• そして定義「_移動する」を呼ぶ。
• そのあと左に90度回して戻す。

CHECK! カニ歩きできるかテストする

カニカニぃ！

まとめ

今回は以下のことができるようになったぞ。

• 壁にあたっても斜めに進めるようにする
• 矢印キーだけでなくWASDでも動けるようにする
• 回転せずに真横にスライドできるようにする（カニ歩き）

これでスムーズに移動できるようになったね。おめでとう！スクラッチキャットも自由にアジトを捜査できるはずって、あれあれ、まだスクラッチキャットが困っているぞ！次回もチェックしてみよう。

グリフパッチさんの動画を参考にしています

今回のチュートリアルは世界No.1スクラッチャーとして名高いグリフパッチさんの動画を参考にしているよ。ただし手順を一部変えているところもあるんだ。