スクラッチに挑戦している皆さん、どうも!スクラッチコーチです。
- ① まず2Dマップを動き回れるようにしよう!
- ② さっそく3D化しちゃおうぜ!
- ③ 壁にスキマがあって敵から丸見え!?やっば
- ④ 陰影をつけて立体感マシマシにしよう
- ⑤ トゲトゲやユガミを補正してハイクオリティ3Dの一歩を踏み出そう(爆速オンライン3Dゲームの作り方 #05)
- ⑥ 壁の衝突判定の基本を作ろう
- ⑦ 壁に触れてると進めない!?移動を改善しよう(いまここ)
- ⑧ ついに敵が現れた!距離感の計算ってどうやる?
- ⑨ 奥行きを実装して壁の後ろに隠れられるようにする
- ⑩ エンティティに陰影をつける
- ⑪ 敵がプレイヤーに向かって迫ってくるように実装する
- ⑫ スターを実装しよう!
- ⑬ 爆速3D爆誕
- ⑭ 壁に画像(テクスチャ)を貼り付けてリッチな3D空間を演出する
- ⑮ テクスチャの壁を洗練させて本格3D完成!
- ⑯ シメだ!モバイル & オンライン化をするぞ
- ⑰ 【おまけ】敵がプレイヤーを見つけたら追いかけるロジック
ゴンザレスからの挑戦状
![](https://ok-scratch.io/wp-content/uploads/2024/03/6cba63aa5853706702f0785ba18a588a.png)
壁に張り付いてあたりを見回してたスクラッチキャット、遠くまでよく見えるようにはなったけど体が動かない?!一体何が……あぁそうか!壁に触れてると常に逆進する力が加わるから動けなくなっちゃうんだ。このままだとまずいね……。潜入捜査なのに移動しづらいなんて、厳しすぎるぅ!
今回の目標「移動のユーザビリティを高める」
壁に当たると動きが止まっちゃう、というルールがゲームに必要なら別だけど、そうじゃないなら壁にちょっと触れたくらいでイチイチ止まりたくない。
たとえばレースとか、たとえば鬼ごっこで鬼から逃げてるときとか、壁にあたって止まってたらスリリングなゲーム体験が損なわれてしまう。
こういった「使いやすさ」「プレイのストレスをなくす」みたいな修正を「ユーザビリティを高める」って表現したりする。今回は移動に関するユーザビリティを改善していくぜ。
具体的には以下のユーザビリティを改善する。
- 壁にあたっても斜めに進めるようにする
- 矢印キーだけでなくWASDでも動けるようにする
- 回転せずに真横にスライドできるようにする(カニ歩き)
![ok-scratch](https://scratch.coach/wp-content/uploads/2022/12/soylatte-e1717210866337.png)
今回も三角関数が出てくるけど、いつもどおり使うだけだから恐れずに進んでいこう。一緒にトライしていこうぜ!
壁にあたっても斜めに進めるようにする
壁に向かって垂直にあたったら止まるけど、斜めに進んでいる最中に壁にあたっても止まらないようにしたい。
完成像は↓こんな感じ。
これを実現する。
定義「_移動値を計算する」を作る
引数はX方向とY方向という2つだよ。
![](https://ok-scratch.io/wp-content/uploads/2024/03/371a1c7cde1a6ff823f98b53e6abbc75-1024x803.png)
それぞれの引数を、X座標とY座標に加算しよう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/c0c613c07e564ccc921c8823e485d6e6-1024x435.png)
そしてここでも「レベルに触れたら」という条件ブロックを追加する。
![](https://ok-scratch.io/wp-content/uploads/2024/03/389611e15659a06956e1380a526dfc73.png)
壁に触れたら逆進するようにXとYにマイナス方向の力を加算するぞ。
![](https://ok-scratch.io/wp-content/uploads/2024/03/12efa021ee40a59de8e96231433df6c7.png)
移動する距離を計算する
定義「_移動する」に修正を加えるので、↓この部分で切り離しておいて。
![](https://ok-scratch.io/wp-content/uploads/2024/03/79b89689053347974bf546f5a7231791-888x1024.png)
そして↓このブロックを用意して演算を作る。
![](https://ok-scratch.io/wp-content/uploads/2024/03/cc2309c19fc5a3c2d46dd65dc932c589.png)
これと向きのsinを組み合わせる。sinは三角関数で、円状の動きの計算によく使われるんだ。ここでは向き(90度とか180度)っていう数字を0とか1とか0.45とかっていうある程度の範囲の数字に変換してくれてる。試しにクリックしてどんな数値が入っているか確かめてみるといいかも。
![](https://ok-scratch.io/wp-content/uploads/2024/03/a70a16990caf42fa5d48741f6d4a1e2a.png)
最終的にこうなる↓
![](https://ok-scratch.io/wp-content/uploads/2024/03/8ce8b3d0e30fcd8748b18d7c30713f76.png)
これを定義「_移動値を計算する」のX方向に割り当てて、Y方向にはゼロを入れて実行する。
![](https://ok-scratch.io/wp-content/uploads/2024/03/c9033b89ad7ff2f8c3e4aeecfe6095ef-1024x450.png)
さらに!もう一回同じ定義を呼び出す。ただし引数に注意。今度はX方向がゼロで、Y方向に三角関数cosに変えたものを使っている。
![](https://ok-scratch.io/wp-content/uploads/2024/03/64a599fa177d90eb2350669661f403de-1024x246.png)
![ok-scratch](https://scratch.coach/wp-content/uploads/2022/12/soylatte-e1717210866337.png)
XとYでsinとcosを変えてる理由?そうだね、がっつり三角関数を説明しないとちゃんとは言えないけど、単純にsinとcosは似てるけど使いたい向きによって変えるっていうシンプルな回答にとどめておく。深く知りたい人は、学生なら数学が得意な先生に聞く、大人ならウィキペディアで調べる(グリフパッチさんと僕はこっちw)ことをオススメする!
最後に切り離しておいたブロックをくっつけておこう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/40008edf4c3c4ef7c8d1e94ec01ad39b.png)
CHECK! 壁にあたっても斜めに進んでくれるかテストする
最高にスムーズでストレスフリーじゃない?
壁に触れたら動けなくなる必要がないなら、こっちのほうが絶対ゲーム体験として良いよね。
壁につっかかるストレスを軽減したことで、ゲーム体験が向上した。
WASDでも動けるようにする
これはカンタン。
「◯または◯」ブロックを組み込むだけ。
![](https://ok-scratch.io/wp-content/uploads/2024/03/da48e3d8f091afb091662cfed6b6cf7c-1024x645.png)
![ok-scratch](https://scratch.coach/wp-content/uploads/2022/12/soylatte-e1717210866337.png)
↑スクショだとずっとループのオレンジの囲いが見えてるけど、気にしないで。みんなはもうプレイヤーティックに移動しているはずだから、ループがなくて正解だよ。
このあとのスクショでも同じです!
1つの動きに複数キーを割り当てることで、ユーザーが使いやすいキー操作で遊べるようになった
横にスライド(カニ歩き)できるようにする
さらに移動のユーザビリティを高めていこう。
今度は回転せずに横に移動する。前を向きながら横に移動する、カニ歩きみたいな機能を実現する。
左にカニ歩きする
定義「_プレイヤーティック」に新しい条件ブロックを追加しよう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/11aede926cd551eaec355172cac8c3b0.png)
この条件ブロックには「aキーが押されたら」っていう条件式をはめておいてね。(スクショ忘れた)
そして大切なのはこの中身。次のとおりに実装する。
- いったん左に90度回す。
- そして定義「_移動する」を呼ぶ。
- そのあと右に90度回して戻す。
この3ステップでカニ歩きを実現できる。
![](https://ok-scratch.io/wp-content/uploads/2024/03/60ab8a91130fa1cdb45d243a1789b249.png)
右にカニ歩きする
もしブロックを複製しよう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/983a85b16a4caa24439111935dbc298c.png)
今度は左右が逆になるよ。
- いったん右に90度回す。
- そして定義「_移動する」を呼ぶ。
- そのあと左に90度回して戻す。
![](https://ok-scratch.io/wp-content/uploads/2024/03/ef98e4be7d086c375d038c0a6be7e3e6-821x1024.png)
CHECK! カニ歩きできるかテストする
カニカニぃ!
回転せずに左右にカニ歩きできるようになった
まとめ
今回は以下のことができるようになったぞ。
- 壁にあたっても斜めに進めるようにする
- 矢印キーだけでなくWASDでも動けるようにする
- 回転せずに真横にスライドできるようにする(カニ歩き)
これでスムーズに移動できるようになったね。おめでとう!スクラッチキャットも自由にアジトを捜査できるはずって、あれあれ、まだスクラッチキャットが困っているぞ!次回もチェックしてみよう。
グリフパッチさんの動画を参考にしています
今回のチュートリアルは世界No.1スクラッチャーとして名高いグリフパッチさんの動画を参考にしているよ。ただし手順を一部変えているところもあるんだ。
- ① まず2Dマップを動き回れるようにしよう!
- ② さっそく3D化しちゃおうぜ!
- ③ 壁にスキマがあって敵から丸見え!?やっば
- ④ 陰影をつけて立体感マシマシにしよう
- ⑤ トゲトゲやユガミを補正してハイクオリティ3Dの一歩を踏み出そう(爆速オンライン3Dゲームの作り方 #05)
- ⑥ 壁の衝突判定の基本を作ろう
- ⑦ 壁に触れてると進めない!?移動を改善しよう(いまここ)
- ⑧ ついに敵が現れた!距離感の計算ってどうやる?
- ⑨ 奥行きを実装して壁の後ろに隠れられるようにする
- ⑩ エンティティに陰影をつける
- ⑪ 敵がプレイヤーに向かって迫ってくるように実装する
- ⑫ スターを実装しよう!
- ⑬ 爆速3D爆誕
- ⑭ 壁に画像(テクスチャ)を貼り付けてリッチな3D空間を演出する
- ⑮ テクスチャの壁を洗練させて本格3D完成!
- ⑯ シメだ!モバイル & オンライン化をするぞ
- ⑰ 【おまけ】敵がプレイヤーを見つけたら追いかけるロジック