当記事はグリフパッチさんの動画を参考に、日本人向けに分かりやすく手直ししたものです。和訳解説は動画作者のグリフパッチさんご本人から許可をいただいて掲載しております。チャンネルはYOUTUBE ( by griffpatch )からどうぞ。
- ① 2Dマップを動き回れるようにしよう!
- ② さっそく3D化しちゃうぞ！
- ③ 壁にスキマがあって丸見えじゃん！敵にバレちゃう！
- ④ 部屋が不自然に明るすぎる！陰影を付けよう！
- ⑤ ズームすると空間がゆがんでグニャグニャになっちゃう！（いまここ）
- ⑥ 壁の衝突判定の基本を作ろう
- ⑦ 壁に触れてると進めない！？移動を改善しよう
- ⑧ ついに敵が現れた！距離感の計算ってどうやる！？
- ⑨ 奥行きを実装して真の三次元空間を創る
- ⑩ エンティティに陰影をつける
- ⑪ 敵がプレイヤーに襲いかかる
ゴンザレスからゲームクリエイターへの挑戦状
いよいよ3D迷宮に潜入したスクラッチキャット。あたりは暗くなるように実装したから、暗闇に隠れながら奥に進むことができる。でも、あれ？遠くを見ようとすると空間がゆがんで、しっかり距離感を把握できなくなってしまった！
それに、壁がトゲトゲだから顔に刺さって痛いｗ
これはなんとかしないとね！
今回の目標「ゆがみを補正してズームアウトも可能にする」
プレイヤーの角度や視野角、それに距離などの要素がからみあって、ズームアウトしても空間がゆがんで見えてしまったり、壁がやたらギザギザに見えてしまったり、細かい問題がまだまだ残っている。
BEFORE
現状だと、視野角を120にするとこんな感じに周辺がゆがんでみえる。
AFTER
↓補正後は周辺もまっすぐ見える。
↓さらに、ズームアウトもできるから遠くや近くを見るといった演出も可能になるぞ。
実装目標としては以下の通り！
- 壁のトゲトゲをスムーズにする
- 見た目に関する処理をプレイヤーを起点にまとめて、管理しやすくする
- ズームしても空間がゆがまないようにする
おっけぃ！
今回はこういった見た目のクオリティを洗練させることで、より美しい３D空間を実現していこう！またまた三角関数や逆三角関数なんていうブロックも使っていくけど、難しい計算はスクラッチがやってくれるから安心してね！
トゲトゲを滑らかにする
スプライト「レイキャスター」を開く。
定義「_シングル・レイ」の歩数を変更しよう。
こうすると壁がますますケバケバというかトゲトゲになる。
こっちの歩数も変える。
うん、ちょっとマシになったね。
とりあえず今の段階ではこのくらいでOKだ！
今回のチュートリアルでは、このトゲトゲみたいに見た目のクオリティを洗練させていくぞ。
視点をプレイヤーで一元管理する
今は色々実験しながら作ってきたので、プレイヤーとレイキャスターで処理が入り乱れている状態なんだ。
これからプロジェクトが複雑になるから、今のうちにもっとシステマティックな管理体制というか、強固な管理体制を作っておきたい。それが一元管理と呼ばれる管理体制で、カンタンに言うとゲームのメインループを1つのスプライトに集約しておくやり方なんだ。
今回はプレイヤーの「ずっとループ」から色んなメッセージを飛ばして、ゲームの主だった処理（3D化の処理）を実行されるようにしていきたい。こうしておくと、3D化にテコ入れしたいときはプレイヤーから調べればいい、っていうシンプルな原則が手に入る。デバッグしていると「どこから見たらいいんだっけ……」と途方に暮れることがあるけど、このシンプルな原則「プレイヤーから見始める」があれば、それだけデバッグが楽になるんだよ。
具体的には以下の点をスプライト「プレイヤー」が起点になるように修正していく。
- ★視野角と★解像度といった見た目に関する変数（今はレイキャスターで管理してる）
- どの方向を向いているか、という角度（今はレイキャスターで管理してる）
★視野角と★解像度を移動する
視野角と解像度の変数を、プレイヤーに移動しておいて。
レイキャスターの方は2つのブロックを消しておいて。
定義「_プレイヤーティック」を作る
スプライト「プレイヤー」を開こう。
定義「_プレイヤーティック」を作る。
ティックというのは日本語だと「秒針がチクタク」みたいな意味なんだけど、分かりやすい訳がないからティックって書く。ティックはゲームクリエイターにはメジャーな単語だからチクタクってニュアンスで覚えるのがいいよ。
ずっとループの中身をごっそり移すよ。
移動元には定義を代わりに置いておこう。
定義「_プレイヤーティック」の最後についてるメッセージ「レイキャストする」は取り外しておこう。
代わりに、もともとの「ずっとループ」の中でメッセージを送るようにするよ。戻すって感じかな。
定義「_レイキャスターを初期化する」を作る
ずっとループの中で呼び出そう。
カメラのゆがみを直してズームアウトできるようにする
レイキャスターで「角度」っていう変数を作ったけど、実はこのままだと視野角によっては３D化がうまくいかないことがある。
変数「★カメラの角度」を作って、変数「角度」と差し替える
このゆがみを直す最初の一歩として新しい変数を用意するよ。
レイキャスターを初期化するところで向きを割り当てる。
このカメラの角度（プレイヤーの向き）を、今までレイキャスターで使ってた「角度」という変数の代わりに使っていくよ。
スプライト「レイキャスター」
スプライト「レイキャスター」を開こう。
メッセージ「レイキャストする」を受け取ったタイミングで、プレイヤーの向きに向けていた部分を、★カメラの角度に差し替えよう。動きに違いはないよ。
そして定義「_レイキャストする」にて、角度という変数に向きを割り当ててたところは消してOK。
定義「_シングル・レイ」で使っていた角度も、★カメラの角度に差し替えよう。
うん、動きに違いがないはずだから念のためテストしておいてね。
どこを見ているかという角度や★視野角など見た目に関することをプレイヤーを起点に管理できるようになった
さて、このままだと視野角を変えたときに「ゆがみ」が発生してしまうって伝えていたね。↓このショート動画をチェックしてみて。
目の前の壁はまっすぐ見えるけど、周囲の壁がぐにょっと曲がって見えるよね。魚眼レンズみたいな状態。
これがなぜ発生するのかっていうと、実は陰影のところで実装した変数「距離」の計算が原因なんだ。目の前の壁よりも、斜め前にある壁のほうが暗く見えるように、三角関数を使って距離を再計算したところだよ。
↓これ。
これのせいで魚眼レンズ状態だけど、陰影には必要な処理だった。だから距離は変えずに、今度は★カメラの角度を再計算することでゆがみを直していく。
しかーし！ここで再び難解な数式を使うことになる。いやいや、安心してほしい。今回もスクラッチのブロックで用意されているものを使うだけだからね。使うのはアークタンジェント、いわゆる逆三角関数という計算だ。
逆三角関数がどんな内容なのか、それは。。。よく分からないからウィキペディアで調べたってグリフパッチさんも動画で言ってたｗ
丸投げじゃん
い、いま大切なのは、逆三角関数で魚眼レンズ状態が直せるっていうことさ！
プレイヤー
スプライト「プレイヤー」を開こう。
変数「★DV」を作る
DVっていうのは、無理やり和訳するなら方向性とか。でもピンとこないからDVにしておいた。スクショだと★つけてないけど、この後直したので付けておいてね！
よぉし、ちょっと複雑な演算を組むから注意深くマネしてくれ。矢印の通りにはめていってね。
tanはタンジェントって呼ばれてて、これは逆じゃなくて普通の三角関数。これも高校数学かな。まぁブロックを使うだけだから数学が苦手な人も、習ってない人も、問題なし。
最終的に↓こんな演算を組む。
これを先ほど作った定義「_レイキャスターを初期化する」で、★DVの値としてセットするよ。
レイキャスター
スプライト「レイキャスター」を開こう。
さっき置いたばかりだけど、メッセージ「レイキャストする」を受け取ったときに★カメラの角度に向けていたところは消そう。
さらに、定義「_レイキャストする」で使っている２つの角度を変えるブロックを消そう。
新しく★DVを使って角度の計算をしていく。ここで登場するのがatanだ。大丈夫、atanの計算自体はスクラッチがやってくれるから、僕らは正しい式を作ることに集中しよう。↓これらのブロックを用意して、矢印に沿ってブロックをはめていってほしい。
↓こういう演算ができるはずだ。
これをループの中で向きに割り当てよう。
CHECK! 魚眼レンズ状態が直ったかテストする
やったぜ！アークタンジェント様が魚眼レンズを直してくれたぜ。めちゃめちゃすっきりしたよね。数学の力ってスゲー！
カメラのゆがみが直った
ズームアウトを実現する
定義「_シングル・レイ」に行って。
変数「高さ」を設定しているところを見つけて、ここの適当な演算を修正しよう。4,000っていう数字を最初は適当に設定してあったよね。
この演算はいったん外して、新しい演算を作っていくよ。↓この演算を作って。
これを高さに割り当てよう。
CHECK ズームアウトされるようになったかテストする
ちょっとショート動画の画素が粗いけど、わかるかな。4000のときと改善した時を比較してる。
これでズームインもズームアウトも正しく描画されるようになった。たとえばスナイパーが敵を狙うときはズームインして視野角が狭くなる代わりに遠くまで見える、みたいな仕様を実装するときも安心して作れるようになったというわけだ。最高！
ズームアウトしたら距離も遠くなる演出が実現できた
まとめ
今回は見た目に関する改善ができた。ギザギザな３Dとはおさらばだぜ！って言っても、このあともっと改善していくから、今以上のもとを追求していこう。
今回は以下のことができるようになったぞ。
- 散らばっていた見た目に関する処理を、プレイヤーを起点にすることができた
- トゲトゲになっていた壁を滑らかにした
- ズームすると歪んでいた角度を自然に見えるよう補正できた
この処理によってよくあるスクラッチのレイキャスティングとは一線を画すクオリティになった。おめでとう！って、あれあれ、まだスクラッチキャットが進めずにいるぞ！次回もチェックしてみよう。
グリフパッチさんの動画を参考にしています
今回のチュートリアルは世界No.1スクラッチャーとして名高いグリフパッチさんの動画を参考にしているよ。ただし手順を一部変えているところもあるんだ。
- ① 2Dマップを動き回れるようにしよう!
- ② さっそく3D化しちゃうぞ！
- ③ 壁にスキマがあって丸見えじゃん！敵にバレちゃう！
- ④ 部屋が不自然に明るすぎる！陰影を付けよう！
- ⑤ ズームすると空間がゆがんでグニャグニャになっちゃう！（いまここ）
- ⑥ 壁の衝突判定の基本を作ろう
- ⑦ 壁に触れてると進めない！？移動を改善しよう
- ⑧ ついに敵が現れた！距離感の計算ってどうやる！？
- ⑨ 奥行きを実装して真の三次元空間を創る
- ⑩ エンティティに陰影をつける
- ⑪ 敵がプレイヤーに襲いかかる
