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

壁で立ち止まらないスムーズな動きを実現する(爆速オンライン3Dゲームの作り方 #07)
グリフパッチ(動画)
ok-scratch(執筆)

和訳解説は動画作者のグリフパッチさんご本人から許可をいただいて掲載しております。
チャンネルはYOUTUBE ( by griffpatch )からどうぞ。

壁に触れているときの移動を劇的に改善する!こういう細部への配慮がゲーム体験を向上させるんだ。
スターター
プロジェクト
リミックス用プロジェクトへ
難しさ

任意)自分の作業中のスクラッチ作品URLを記録しておこう!再開するときに便利だよ。

LOADING...

※ この記録は今使ってるPCに保存されます。別のPCで作業するときは表示されません。

スクラッチに挑戦している皆さん、どうも!スクラッチコーチです。

ゴンザレスからの挑戦状

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

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

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

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

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

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

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

今回も三角関数が出てくるけど、いつもどおり使うだけだから恐れずに進んでいこう。一緒にトライしていこうぜ!

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

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

完成像は↓こんな感じ。

これを実現する。

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

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

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

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

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

移動する距離を計算する

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

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

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

最終的にこうなる↓

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

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

ok-scratch ok-scratch

XとYでsinサインcosコサインを変えてる理由?そうだね、がっつり三角関数を説明しないとちゃんとは言えないけど、単純にsinサインcosコサインは似てるけど使いたい向きによって変えるっていうシンプルな回答にとどめておく。深く知りたい人は、学生なら数学が得意な先生に聞く、大人ならウィキペディアで調べる(グリフパッチさんと僕はこっちw)ことをオススメする!

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

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

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

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

壁につっかかるストレスを軽減したことで、ゲーム体験が向上した。

WASDでも動けるようにする

これはカンタン。

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

ok-scratch ok-scratch

↑スクショだとずっとループのオレンジの囲いが見えてるけど、気にしないで。みんなはもうプレイヤーティックに移動しているはずだから、ループがなくて正解だよ。
このあとのスクショでも同じです!

1つの動きに複数キーを割り当てることで、ユーザーが使いやすいキー操作で遊べるようになった

横にスライド(カニ歩き)できるようにする

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

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

左にカニ歩きする

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

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

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

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

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

右にカニ歩きする

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

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

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

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

カニカニぃ!

回転せずに左右にカニ歩きできるようになった

まとめ

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

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

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

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

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

完成サンプルがあるよ
おつかれさま!今回のチュートリアルには完成サンプルがあるから、作ってて分からなくなったり、 動作確認をしたいときはチェックしてみてね。
ブクマよろしくお願いします! ブクマよろしくお願いします!
どんどん追記・更新していくので、ブックマークやシェアよろしくお願いします!

スクラッチゲーム攻略

スクラッチゲーム

    • 厳選されたスクラッチ人気作品リストがレビュー付きで楽しめます
      趣味に関するスクラッチ作品例
      勉強になるスクラッチ作品