壁をスキマなく描画して3D感を高めよう！（爆速オンライン3Dゲームの作り方 #03）

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

ゴンザレスからゲームクリエイターへの挑戦(ちょうせん)状(じょう)

いよいよ3D迷宮(めいきゅう)に乗(の)り込(こ)んでゴンザレスを探(さが)す！ッと思(おも)いきや入口(いりぐち)のところでピコが「スキマが……」と指摘(してき)！たしかにこれじゃあ敵(てき)から丸見(まるみ)え。とてもゴンザレスまで到達(とうたつ)できる気(き)がしないぞ……。

今回(こんかい)の目標(もくひょう)「壁(かべ)のスキマをなくす」

今(いま)のままだと3Dにスキマができてしまい壁(かべ)の向(む)こうからバレバレになってしまうので、ちょっと今回(こんかい)は都合(つごう)が悪(わる)いね！これを解消(かいしょう)するために今回(こんかい)は次(つぎ)のことを実装(じっそう)するよ。

• 解像(かいぞう)度(ど)を作(つく)って、ペンの太(ふと)さをコントロールできるようにする
• 扇(おうぎ)《おうぎ》状(さま)にビームが広(ひろ)がるロジックを修正(しゅうせい)して、ペンの太(ふと)さに合(あ)った扇(おうぎ)を描(えが)く

やってみよう！

解像(かいぞう)度(ど)を設定(せってい)する

ペンの太(ふと)さをコントロールして、壁(かべ)を隙間(すきま)なくレンダリングしていく。そのための1歩(ほ)としてまず解像(かいぞう)度(ど)という変数(へんすう)を作(つく)ろう。

変数(へんすう)「★解像(かいぞう)度(ど)」を作(つく)る

スプライト「レイキャスター」を開(ひら)こう

緑(みどり)の旗(はた)がおされたとき、解像(かいぞう)度(ど)を8に設定(せってい)しよう。

デバッグ表示(ひょうじ)の変数(へんすう)を右(みぎ)クリックして、スライダーを選(えら)ぶ。

もう一度(いちど)右(みぎ)クリックして、指定(してい)範囲(はんい)を変更(へんこう)する。

4から16が選(えら)べるようにしておこう。

「レイキャストする」でペンの太(ふと)さに★解像(かいぞう)度(ど)を割(わ)り当(あ)てよう。

CHECK) 壁(かべ)のスキマがなくなるかテストする

これでペンの太(ふと)さが2倍(ばい)になったからスキマが埋(う)まったはずだ。

OK！スキマはなくなったね。でも解像(かいぞう)度(ど)を4にするとまたスキマが空(あ)いてしまう様子(ようす)が見(み)て取(と)れるね。この作品(さくひん)では解像(かいぞう)度(ど)の値(ね)は低(ひく)ければ低(ひく)いほど描画(びょうが)がきれいになるんだ。だから「きれいに描画(びょうが)したらスキマが空(あ)いちゃう」っていうのは残念(ざんねん)だよね。ここは直(なお)しておこう。

扇(おうぎ)《おうぎ》状(さま)に広(ひろ)がるロジックを変(か)える

いまは視野(しや)角(かく)に数(かず)だけループを回(まわ)して、1度(ど)ずつ右(みぎ)に回(まわ)すことで扇状(せんじょう)にビームを発射(はっしゃ)しているよね。最初(さいしょ)はこれでわかりやすかったけど、今(いま)見(み)たように、ペンの太(ふと)さが変(か)わるとスキマが空(あ)いてしまう。そこで扇状(せんじょう)に広(ひろ)がるロジックを変(か)えていこうとおもう！

変数(へんすう)「描画(びょうが)回数(かいすう)」を作(つく)る

描画(びょうが)回数(かいすう)の値(ね)に「480 / ★解像(かいぞう)度(ど)」を割(わ)り当(あ)てよう。解像(かいぞう)度(ど)が8なら描画(びょうが)回数(かいすう)は60回(かい)ということだね。

この描画(びょうが)回数(かいすう)をループの条件(じょうけん)式(しき)に当(あ)てはめる。もともとは★視野(しや)角(かど)だったところだよ。置(お)き換(か)えよう。

そして1度(ど)右回(みぎまわり)していたとこも、しっかり演算(えんざん)を組(く)んでいく。「★視野(しや)角(かく) / 描画(びょうが)回数(かいすう)」だ。

さらに、変数(へんすう)「x座標(ざひょう)」の値(ね)には★解像(かいぞう)度(ど)を割(わ)り当(あ)てておこう。

CHECK) 解像(かいぞう)度(ど)を4にしてもスキマがなくなったかテストする

うーん、まぁまぁ😅ちょっとスキマが残(のこ)ってるけど、改善(かいぜん)はされたね！でももうちょっと直(なお)したい。

x座標(ざひょう)の初期(しょき)値(ち)を修正(しゅうせい)する

スキマと言(い)っても大(おお)きなスキマではなく、ほんのちょっとだけスキマがある感(かん)じだよね。だから修正(しゅうせい)値(ち)も小(ちい)さいよ。まず↓このブロックを用意(ようい)して。「(★解像(かいぞう)度(ど) / 2) - 240」という式(しき)をつくるよ。

これをx座標(ざひょう)の初期(しょき)値(ち)に割(わ)り当(あ)てよう。

CHECK) スキマが改善(かいぜん)されたかテストする

これでさらにギュッと描画(びょうが)されるようになったかチェックだ。

おっけい！スキマが消(き)えた！

まとめ

今回(こんかい)は次(つぎ)のことを実装(じっそう)したよ。

• 解像(かいぞう)度(ど)を作(つく)って、ペンの太(ふと)さをコントロールできるようにした
• 扇(おうぎ)《おうぎ》状(さま)にビームが広(ひろ)がるロジックを修正(しゅうせい)して、ペンの太(ふと)さに合(あ)った扇(おうぎ)を描(えが)けるようになった

これによってスキマがないキレイな壁(かべ)を描画(びょうが)することに成功(せいこう)したね！ふぅ、これで敵(てき)にバレずに進(すす)む(む)ことができそうだ……ん？まだ問題(もんだい)があるのか、スクラッチキャット達(たち)が困(こま)っているみたいだ。次回(じかい)もチェックしてみよう！今回(こんかい)のチュートリアルは世界(せかい)No.1スクラッチャーとして名高(なだか)いグリフパッチさんの動画(どうが)を参考(さんこう)にしているよ。ただし手順(てじゅん)を一部(いちぶ)変(か)えているところもあるんだ。