トゲトゲやユガミを補正してハイクオリティ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スクラッチャーとして名高(なだか)いグリフパッチさんの動画(どうが)を参考(さんこう)にしているよ。ただし手順(てじゅん)を一部(いちぶ)変(か)えているところもあるんだ。