トゲトゲやユガミを補正してハイクオリティ3Dの一歩を踏み出そう（爆速オンライン3Dゲームの作り方 #05）

スクラッチプログラミングに挑戦している皆さん、どうも！スクラッチコーチです。

ゴンザレスからの挑戦状

いよいよ3D迷宮に潜入したスクラッチキャット。あたりは暗くなるように実装したから、暗闇に隠れながら奥に進むことができる。でも、あれ？遠くを見ようとすると空間がゆがんで、しっかり距離感を把握できなくなってしまった！

それに、壁がトゲトゲだから顔に刺さって痛いｗ

これはなんとかしないとね！

今回の目標「ゆがみを補正してズームアウトも可能にする」

プレイヤーの角度や視野角、それに距離などの要素がからみあって、ズームアウトしても空間がゆがんで見えてしまったり、壁がやたらギザギザに見えてしまったり、細かい問題がまだまだ残っている。

BEFORE

現状だと、視野角を120にするとこんな感じに周辺がゆがんでみえる。

AFTER

↓補正後は周辺もまっすぐ見える。

↓さらに、ズームアウトもできるから遠くや近くを見るといった演出も可能になるぞ。

実装目標としては以下の通り！

• 壁のトゲトゲをスムーズにする
• 見た目に関する処理をプレイヤーを起点にまとめて、管理しやすくする
• ズームしても空間がゆがまないようにする

おっけぃ！

トゲトゲを滑らかにする

スプライト「レイキャスター」を開く。

定義「_シングル・レイ」の歩数を変更しよう。

こうすると壁がますますケバケバというかトゲトゲになる。

こっちの歩数も変える。

うん、ちょっとマシになったね。

とりあえず今の段階ではこのくらいでOKだ！

今回のチュートリアルでは、このトゲトゲみたいに見た目のクオリティを洗練させていくぞ。

視点をプレイヤーで一元管理する

今は色々実験しながら作ってきたので、プレイヤーとレイキャスターで処理が入り乱れている状態なんだ。

これからプロジェクトが複雑になるから、今のうちにもっとシステマティックな管理体制というか、強固な管理体制を作っておきたい。それが一元管理と呼ばれる管理体制で、カンタンに言うとゲームのメインループを1つのスプライトに集約しておくやり方なんだ。

今回はプレイヤーの「ずっとループ」から色んなメッセージを飛ばして、ゲームの主だった処理（3D化の処理）を実行されるようにしていきたい。こうしておくと、3D化にテコ入れしたいときはプレイヤーから調べればいい、っていうシンプルな原則が手に入る。デバッグしていると「どこから見たらいいんだっけ……」と途方に暮れることがあるけど、このシンプルな原則「プレイヤーから見始める」があれば、それだけデバッグが楽になるんだよ。

具体的には以下の点をスプライト「プレイヤー」が起点になるように修正していく。

• ★視野角と★解像度といった見た目に関する変数（今はレイキャスターで管理してる）
• どの方向を向いているか、という角度（今はレイキャスターで管理してる）

★視野角と★解像度を移動する

視野角と解像度の変数を、プレイヤーに移動しておいて。

レイキャスターの方は2つのブロックを消しておいて。

定義「_プレイヤーティック」を作る

スプライト「プレイヤー」を開こう。

定義「_プレイヤーティック」を作る。

ずっとループの中身をごっそり移すよ。

移動元には定義を代わりに置いておこう。

定義「_プレイヤーティック」の最後についてるメッセージ「レイキャストする」は取り外しておこう。

代わりに、もともとの「ずっとループ」の中でメッセージを送るようにするよ。戻すって感じかな。

定義「_レイキャスターを初期化する」を作る

ずっとループの中で呼び出そう。

カメラのゆがみを直してズームアウトできるようにする

レイキャスターで「角度」っていう変数を作ったけど、実はこのままだと視野角によっては３D化がうまくいかないことがある。

変数「★カメラの角度」を作って、変数「角度」と差し替える

このゆがみを直す最初の一歩として新しい変数を用意するよ。

レイキャスターを初期化するところで向きを割り当てる。

スプライト「レイキャスター」

スプライト「レイキャスター」を開こう。

メッセージ「レイキャストする」を受け取ったタイミングで、プレイヤーの向きに向けていた部分を、★カメラの角度に差し替えよう。動きに違いはないよ。

そして定義「_レイキャストする」にて、角度という変数に向きを割り当ててたところは消してOK。

定義「_シングル・レイ」で使っていた角度も、★カメラの角度に差し替えよう。

うん、動きに違いがないはずだから念のためテストしておいてね。

さて、このままだと視野角を変えたときに「ゆがみ」が発生してしまうって伝えていたね。↓このショート動画をチェックしてみて。

目の前の壁はまっすぐ見えるけど、周囲の壁がぐにょっと曲がって見えるよね。魚眼レンズみたいな状態。

これがなぜ発生するのかっていうと、実は陰影のところで実装した変数「距離」の計算が原因なんだ。目の前の壁よりも、斜め前にある壁のほうが暗く見えるように、三角関数を使って距離を再計算したところだよ。

↓これ。

これのせいで魚眼レンズ状態だけど、陰影には必要な処理だった。だから距離は変えずに、今度は★カメラの角度を再計算することでゆがみを直していく。

しかーし！ここで再び難解な数式を使うことになる。いやいや、安心してほしい。今回もスクラッチのブロックで用意されているものを使うだけだからね。使うのはアークタンジェント、いわゆる逆三角関数という計算だ。

プレイヤー

スプライト「プレイヤー」を開こう。

変数「★DV」を作る

DVっていうのは、無理やり和訳するなら方向性とか。でもピンとこないからDVにしておいた。スクショだと★つけてないけど、この後直したので付けておいてね！

よぉし、ちょっと複雑な演算を組むから注意深くマネしてくれ。矢印の通りにはめていってね。

最終的に↓こんな演算を組む。

これを先ほど作った定義「_レイキャスターを初期化する」で、★DVの値としてセットするよ。

レイキャスター

スプライト「レイキャスター」を開こう。

さっき置いたばかりだけど、メッセージ「レイキャストする」を受け取ったときに★カメラの角度に向けていたところは消そう。

さらに、定義「_レイキャストする」で使っている２つの角度を変えるブロックを消そう。

新しく★DVを使って角度の計算をしていく。ここで登場するのがatanアークタンジェントだ。大丈夫、atanの計算自体はスクラッチがやってくれるから、僕らは正しい式を作ることに集中しよう。↓これらのブロックを用意して、矢印に沿ってブロックをはめていってほしい。

↓こういう演算ができるはずだ。

これをループの中で向きに割り当てよう。

CHECK! 魚眼レンズ状態が直ったかテストする

やったぜ！アークタンジェント様が魚眼レンズを直してくれたぜ。めちゃめちゃすっきりしたよね。数学の力ってスゲー！

ズームアウトを実現する

定義「_シングル・レイ」に行って。

変数「高さ」を設定しているところを見つけて、ここの適当な演算を修正しよう。4,000っていう数字を最初は適当に設定してあったよね。

この演算はいったん外して、新しい演算を作っていくよ。↓この演算を作って。

これを高さに割り当てよう。

CHECK ズームアウトされるようになったかテストする

ちょっとショート動画の画素が粗いけど、わかるかな。4000のときと改善した時を比較してる。

まとめ

今回は見た目に関する改善ができた。ギザギザな３Dとはおさらばだぜ！って言っても、このあともっと改善していくから、今以上のもとを追求していこう。

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

• 散らばっていた見た目に関する処理を、プレイヤーを起点にすることができた
• トゲトゲになっていた壁を滑らかにした
• ズームすると歪んでいた角度を自然に見えるよう補正できた

この処理によってよくあるスクラッチのレイキャスティングとは一線を画すクオリティになった。おめでとう！って、あれあれ、まだスクラッチキャットが進めずにいるぞ！次回もチェックしてみよう。

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

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