スクラッチコーチキャンプ ゲームクリエイターに、オレはなる!そんなキミを応援(子供も大人も)
  • ALL
  • はじめての方へ
  • 3Dゲームの作り方

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

    壁をスキマなく描画して3D感を高めよう!(爆速オンライン3Dゲームの作り方 #03)
    スターター作品
    リミックスする作品
    今回の完成サンプル
    Scratchへ

    当記事はグリフパッチさんの動画を参考に、日本人向けに分かりやすく手直ししたものです。和訳解説は動画作者のグリフパッチさんご本人から許可をいただいて掲載しております。チャンネルはYOUTUBE ( by griffpatch )からどうぞ。

    ゴンザレスからゲームクリエイターへの挑戦状

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

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

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

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

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

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

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

    やってみよう!

    解像度を設定する

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

    変数「★解像度」を作る

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

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

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

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

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

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

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

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

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

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

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

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

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

    ここは直しておこう。

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

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

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

    変数「描画回数」を作る

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

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

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

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

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

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

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

    うーん、まぁまぁ😅

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

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

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

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

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

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

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

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

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

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

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

    まとめ

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

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

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

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

    この記事への質問やコメントをどうぞ

    ただいま実験的に質問を受け付けています。

    スパム防止のため、 質問をするにはログインが必要 です。ログインはスクラッチのアカウントがあれば誰でもできます。

    ブクマよろしくお願いします!という口コミを寄せてくれた方 ブクマよろしくお願いします!
    どんどん追記・更新していくので、ブックマークやシェアよろしくお願いします!