壁をスキマなく描画して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スクラッチャーとして名高いグリフパッチさんの動画を参考にしているよ。ただし手順を一部変えているところもあるんだ。