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

壁をスキマなく描画して3D感を高めよう!(爆速オンライン3Dゲームの作り方 #03)
グリフパッチ(動画)
ok-scratch(執筆)

和訳解説は動画作者のグリフパッチさんご本人から許可をいただいて掲載しております。
チャンネルはYOUTUBE ( by griffpatch )からどうぞ。

3D化はしたけどスキマが空いてて、ちょっと都合が悪い。これを解像度という変数を用意して直していくぞ!
スターター
プロジェクト
リミックス用プロジェクトへ
難しさ

任意)自分の作業中のスクラッチ作品URLを記録しておこう!再開するときに便利だよ。

LOADING...

※ この記録は今使ってるPCに保存されます。別のPCで作業するときは表示されません。

スクラッチに挑戦している皆さん、どうも!スクラッチコーチです。

ゴンザレスからの挑戦状

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

今回の目標「壁のスキマをなくす」

今のままだと3Dにスキマができてしまい壁の向こうからバレバレになってしまうので、ちょっと今回は都合が悪いね!

ok-scratch ok-scratch

逆に、鉄格子とかおりを作りたいときはいいかもね。

これを解消するために今回は次のことを実装するよ。

  • 解像度を作って、ペンの太さをコントロールできるようにする
  • おうぎ状にビームが広がるロジックを修正して、ペンの太さに合った扇を描く

やってみよう!

解像度を設定する

ペンの太さをコントロールして、壁を隙間なくレンダリングしていく。そのための1歩としてまず解像度という変数を作ろう。

変数「★解像度」を作る

ok-scratch ok-scratch

スクショだと★がついてないけど、すべてのスプライト用だから「★解像度」にしておいて〜。僕もあとで直してる。

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

緑の旗がおされたとき、解像度を8に設定しよう。

デバッグ表示の変数を右クリックして、スライダーを選ぶ。

もう一度右クリックして、指定範囲を変更する。

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

「レイキャストする」でペンの太さに★解像度を割り当てよう。

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

これでペンの太さが2倍になったからスキマが埋まったはずだ。

OK!スキマはなくなったね。

でも解像度を4にするとまたスキマが空いてしまう様子が見て取れるね。

この作品では解像度の値は低ければ低いほど描画がきれいになるんだ。だから「きれいに描画したらスキマが空いちゃう」っていうのは残念だよね。

ここは直しておこう。

★解像度を使って、ペンの太さをコントロールすることができるようになった

おうぎ状に広がるロジックを変える

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

変数「描画回数」を作る

描画回数の値に「480 / ★解像度」を割り当てよう。解像度が8なら描画回数は60回ということだね。

この描画回数をループの条件式に当てはめる。もともとは★視野角だったところだよ。置き換えよう。

そして1度右回していたとこも、しっかり演算を組んでいく。「★視野角 / 描画回数」だ。

ok-scratch ok-scratch

視野角が60で描画回数も60なら今まで通り1度だけど、仮に解像度が8ではなく4ならどうなるだろう。描画回数は「480 / 4 = 120」になる。すると視野角60 / 120だから、0.5度ずつ右に回すことになる。ペンが細くなった分だけ右に回す角度も減るから、ギュッと詰めて描画できるはずだね。

さらに、変数「x座標」の値には★解像度を割り当てておこう。

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

うーん、まぁまぁ😅

ちょっとスキマが残ってるけど、改善はされたね!でももうちょっと直したい。

x座標の初期値を修正する

スキマと言っても大きなスキマではなく、ほんのちょっとだけスキマがある感じだよね。だから修正値も小さいよ。

まず↓このブロックを用意して。「(★解像度 / 2) - 240」という式をつくるよ。

これをx座標の初期値に割り当てよう。

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

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

おっけい!スキマが消えた!

ok-scratch ok-scratch

何をしたかって言うのを説明するよ。最初はマイナス240をx座標に割り当ててたんだよね。それを「(★解像度 / 2) - 240」に変えたよね。解像度が4なら「4 / 2 - 240 = -238」になって、x座標の初期値を-238に設定した。これでわずかに生じていたスキマが消えたんだ。すっごいちょっとしか修正してないけど、大きな変化だよね!

描画回数や★解像度などを使って、扇の広がりをより正確に管理できるようになった。

まとめ

今回は次のことを実装したよ。

  • 解像度を作って、ペンの太さをコントロールできるようにした
  • おうぎ状にビームが広がるロジックを修正して、ペンの太さに合った扇を描けるようになった

これによってスキマがないキレイな壁を描画することに成功したね!ふぅ、これで敵にバレずに進むことができそうだ……ん?まだ問題があるのか、スクラッチキャット達が困っているみたいだ。次回もチェックしてみよう!

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

完成サンプルがあるよ
おつかれさま!今回のチュートリアルには完成サンプルがあるから、作ってて分からなくなったり、 動作確認をしたいときはチェックしてみてね。
ブクマよろしくお願いします! ブクマよろしくお願いします!
どんどん追記・更新していくので、ブックマークやシェアよろしくお願いします!

スクラッチゲーム攻略

スクラッチゲーム

    • 厳選されたスクラッチ人気作品リストがレビュー付きで楽しめます
      趣味に関するスクラッチ作品例
      勉強になるスクラッチ作品