壁で立ち止まらないスムーズな動きを実現する（爆速オンライン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スクラッチャーとして名高(なだか)いグリフパッチさんの動画(どうが)を参考(さんこう)にしているよ。ただし手順(てじゅん)を一部(いちぶ)変(か)えているところもあるんだ。