スクラッチコーチキャンプ ゲームクリエイターに、オレはなる!そんなキミを応援(子供も大人も)
  • ALL
  • はじめての方へ
  • 3Dゲームの作り方

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

    壁で立ち止まらないスムーズな動きを実現する(爆速オンライン3Dゲームの作り方 #07)
    スターター作品
    リミックスする作品
    今回の完成サンプル
    Scratchへ

    当記事はグリフパッチさんの動画を参考に、日本人向けに分かりやすく手直ししたものです。和訳解説は動画作者のグリフパッチさんご本人から許可をいただいて掲載しております。チャンネルはYOUTUBE ( by griffpatch )からどうぞ。

    ゴンザレスからゲームクリエイターへの挑戦状

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

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

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

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

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

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

    • 壁にあたっても斜めに進めるようにする
    • 矢印キーだけでなくWASDでも動けるようにする
    • 回転せずに真横にスライドできるようにする(カニ歩き)
    壁で立ち止まらないスムーズな動きを実現する(爆速オンライン3Dゲームの作り方 #07)を語るok-scratch ok-scratch

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

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

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

    完成像は↓こんな感じ。

    これを実現する。

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

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

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

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

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

    移動する距離を計算する

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

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

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

    最終的にこうなる↓

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

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

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

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

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

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

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

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

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

    WASDでも動けるようにする

    これはカンタン。

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

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

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

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

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

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

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

    左にカニ歩きする

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

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

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

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

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

    右にカニ歩きする

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

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

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

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

    カニカニぃ!

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

    まとめ

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

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

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

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

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

    この記事への質問やコメントをどうぞ

    ただいま実験的に質問を受け付けています。

    スパム防止のため、 質問をするにはログインが必要 です。ログインはスクラッチのアカウントがあれば誰でもできます。

    ブクマよろしくお願いします!という口コミを寄せてくれた方 ブクマよろしくお願いします!
    どんどん追記・更新していくので、ブックマークやシェアよろしくお願いします!