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

    トゲトゲやユガミを補正してハイクオリティ3Dの一歩を踏み出そう(爆速オンライン3Dゲームの作り方 #05)(2024年3月更新)

    トゲトゲやユガミを補正してハイクオリティ3Dの一歩を踏み出そう(爆速オンライン3Dゲームの作り方 #05)
    スターター作品
    リミックスする作品
    今回の完成サンプル
    Scratchへ

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

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

    いよいよ3D迷宮に潜入したスクラッチキャット。あたりは暗くなるように実装したから、暗闇に隠れながら奥に進むことができる。でも、あれ?遠くを見ようとすると空間がゆがんで、しっかり距離感を把握できなくなってしまった!

    それに、壁がトゲトゲだから顔に刺さって痛いw

    これはなんとかしないとね!

    今回の目標「ゆがみを補正してズームアウトも可能にする」

    プレイヤーの角度や視野角、それに距離などの要素がからみあって、ズームアウトしても空間がゆがんで見えてしまったり、壁がやたらギザギザに見えてしまったり、細かい問題がまだまだ残っている。

    BEFORE

    現状だと、視野角を120にするとこんな感じに周辺がゆがんでみえる。

    AFTER

    ↓補正後は周辺もまっすぐ見える。

    ↓さらに、ズームアウトもできるから遠くや近くを見るといった演出も可能になるぞ。

    実装目標としては以下の通り!

    • 壁のトゲトゲをスムーズにする
    • 見た目に関する処理をプレイヤーを起点にまとめて、管理しやすくする
    • ズームしても空間がゆがまないようにする

    おっけぃ!

    トゲトゲやユガミを補正してハイクオリティ3Dの一歩を踏み出そう(爆速オンライン3Dゲームの作り方 #05)を語るok-scratch ok-scratch

    今回はこういった見た目のクオリティを洗練させることで、より美しい3D空間を実現していこう!またまた三角関数や逆三角関数なんていうブロックも使っていくけど、難しい計算はスクラッチがやってくれるから安心してね!

    トゲトゲを滑らかにする

    スプライト「レイキャスター」を開く。

    定義「_シングル・レイ」の歩数を変更しよう。

    こうすると壁がますますケバケバというかトゲトゲになる。

    こっちの歩数も変える。

    うん、ちょっとマシになったね。

    とりあえず今の段階ではこのくらいでOKだ!

    今回のチュートリアルでは、このトゲトゲみたいに見た目のクオリティを洗練させていくぞ。

    視点をプレイヤーで一元管理する

    今は色々実験しながら作ってきたので、プレイヤーとレイキャスターで処理が入り乱れている状態なんだ。

    これからプロジェクトが複雑になるから、今のうちにもっとシステマティックな管理体制というか、強固な管理体制を作っておきたい。それが一元管理と呼ばれる管理体制で、カンタンに言うとゲームのメインループを1つのスプライトに集約しておくやり方なんだ。

    今回はプレイヤーの「ずっとループ」から色んなメッセージを飛ばして、ゲームの主だった処理(3D化の処理)を実行されるようにしていきたい。こうしておくと、3D化にテコ入れしたいときはプレイヤーから調べればいい、っていうシンプルな原則が手に入る。デバッグしていると「どこから見たらいいんだっけ……」と途方に暮れることがあるけど、このシンプルな原則「プレイヤーから見始める」があれば、それだけデバッグが楽になるんだよ。

    具体的には以下の点をスプライト「プレイヤー」が起点になるように修正していく。

    • ★視野角と★解像度といった見た目に関する変数(今はレイキャスターで管理してる)
    • どの方向を向いているか、という角度(今はレイキャスターで管理してる)

    ★視野角と★解像度を移動する

    視野角と解像度の変数を、プレイヤーに移動しておいて。

    レイキャスターの方は2つのブロックを消しておいて。

    定義「_プレイヤーティック」を作る

    スプライト「プレイヤー」を開こう。

    定義「_プレイヤーティック」を作る。

    トゲトゲやユガミを補正してハイクオリティ3Dの一歩を踏み出そう(爆速オンライン3Dゲームの作り方 #05)を語るok-scratch ok-scratch

    ティックというのは日本語だと「秒針がチクタク」みたいな意味なんだけど、分かりやすい訳がないからティックって書く。ティックはゲームクリエイターにはメジャーな単語だからチクタクってニュアンスで覚えるのがいいよ。

    ずっとループの中身をごっそり移すよ。

    移動元には定義を代わりに置いておこう。

    定義「_プレイヤーティック」の最後についてるメッセージ「レイキャストする」は取り外しておこう。

    代わりに、もともとの「ずっとループ」の中でメッセージを送るようにするよ。戻すって感じかな。

    定義「_レイキャスターを初期化する」を作る

    ずっとループの中で呼び出そう。

    カメラのゆがみを直してズームアウトできるようにする

    レイキャスターで「角度」っていう変数を作ったけど、実はこのままだと視野角によっては3D化がうまくいかないことがある。

    変数「★カメラの角度」を作って、変数「角度」と差し替える

    このゆがみを直す最初の一歩として新しい変数を用意するよ。

    レイキャスターを初期化するところで向きを割り当てる。

    トゲトゲやユガミを補正してハイクオリティ3Dの一歩を踏み出そう(爆速オンライン3Dゲームの作り方 #05)を語るok-scratch ok-scratch

    このカメラの角度(プレイヤーの向き)を、今までレイキャスターで使ってた「角度」という変数の代わりに使っていくよ。

    スプライト「レイキャスター」

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

    メッセージ「レイキャストする」を受け取ったタイミングで、プレイヤーの向きに向けていた部分を、★カメラの角度に差し替えよう。動きに違いはないよ。

    そして定義「_レイキャストする」にて、角度という変数に向きを割り当ててたところは消してOK。

    定義「_シングル・レイ」で使っていた角度も、★カメラの角度に差し替えよう。

    うん、動きに違いがないはずだから念のためテストしておいてね。

    どこを見ているかという角度や★視野角など見た目に関することをプレイヤーを起点に管理できるようになった

    さて、このままだと視野角を変えたときに「ゆがみ」が発生してしまうって伝えていたね。↓このショート動画をチェックしてみて。

    目の前の壁はまっすぐ見えるけど、周囲の壁がぐにょっと曲がって見えるよね。魚眼レンズみたいな状態

    これがなぜ発生するのかっていうと、実は陰影のところで実装した変数「距離」の計算が原因なんだ。目の前の壁よりも、斜め前にある壁のほうが暗く見えるように、三角関数を使って距離を再計算したところだよ。

    ↓これ。

    これのせいで魚眼レンズ状態だけど、陰影には必要な処理だった。だから距離は変えずに、今度は★カメラの角度を再計算することでゆがみを直していく。

    しかーし!ここで再び難解な数式を使うことになる。いやいや、安心してほしい。今回もスクラッチのブロックで用意されているものを使うだけだからね。使うのはアークタンジェント、いわゆる逆三角関数という計算だ。

    トゲトゲやユガミを補正してハイクオリティ3Dの一歩を踏み出そう(爆速オンライン3Dゲームの作り方 #05)を語るok-scratch ok-scratch

    逆三角関数がどんな内容なのか、それは。。。よく分からないからウィキペディアで調べたってグリフパッチさんも動画で言ってたw

    トゲトゲやユガミを補正してハイクオリティ3Dの一歩を踏み出そう(爆速オンライン3Dゲームの作り方 #05)を語るneko-sad-1 neko-sad-1

    丸投げじゃん

    トゲトゲやユガミを補正してハイクオリティ3Dの一歩を踏み出そう(爆速オンライン3Dゲームの作り方 #05)を語るok-scratch ok-scratch

    い、いま大切なのは、逆三角関数で魚眼レンズ状態が直せるっていうことさ!

    プレイヤー

    スプライト「プレイヤー」を開こう。

    変数「★DV」を作る

    DVっていうのは、無理やり和訳するなら方向性とか。でもピンとこないからDVにしておいた。スクショだと★つけてないけど、この後直したので付けておいてね!

    よぉし、ちょっと複雑な演算を組むから注意深くマネしてくれ。矢印の通りにはめていってね。

    トゲトゲやユガミを補正してハイクオリティ3Dの一歩を踏み出そう(爆速オンライン3Dゲームの作り方 #05)を語るok-scratch ok-scratch

    tanはタンジェントって呼ばれてて、これは逆じゃなくて普通の三角関数。これも高校数学かな。まぁブロックを使うだけだから数学が苦手な人も、習ってない人も、問題なし。

    最終的に↓こんな演算を組む。

    これを先ほど作った定義「_レイキャスターを初期化する」で、★DVの値としてセットするよ。

    レイキャスター

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

    さっき置いたばかりだけど、メッセージ「レイキャストする」を受け取ったときに★カメラの角度に向けていたところは消そう。

    さらに、定義「_レイキャストする」で使っている2つの角度を変えるブロックを消そう。

    新しく★DVを使って角度の計算をしていく。ここで登場するのがatanアークタンジェントだ。大丈夫、atanの計算自体はスクラッチがやってくれるから、僕らは正しい式を作ることに集中しよう。↓これらのブロックを用意して、矢印に沿ってブロックをはめていってほしい。

    ↓こういう演算ができるはずだ。

    これをループの中で向きに割り当てよう。

    CHECK! 魚眼レンズ状態が直ったかテストする

    やったぜ!アークタンジェント様が魚眼レンズを直してくれたぜ。めちゃめちゃすっきりしたよね。数学の力ってスゲー!

    カメラのゆがみが直った

    ズームアウトを実現する

    定義「_シングル・レイ」に行って。

    変数「高さ」を設定しているところを見つけて、ここの適当な演算を修正しよう。4,000っていう数字を最初は適当に設定してあったよね。

    この演算はいったん外して、新しい演算を作っていくよ。↓この演算を作って。

    これを高さに割り当てよう。

    CHECK ズームアウトされるようになったかテストする

    ちょっとショート動画の画素が粗いけど、わかるかな。4000のときと改善した時を比較してる。

    トゲトゲやユガミを補正してハイクオリティ3Dの一歩を踏み出そう(爆速オンライン3Dゲームの作り方 #05)を語るok-scratch ok-scratch

    これでズームインもズームアウトも正しく描画されるようになった。たとえばスナイパーが敵を狙うときはズームインして視野角が狭くなる代わりに遠くまで見える、みたいな仕様を実装するときも安心して作れるようになったというわけだ。最高!

    ズームアウトしたら距離も遠くなる演出が実現できた

    まとめ

    今回は見た目に関する改善ができた。ギザギザな3Dとはおさらばだぜ!って言っても、このあともっと改善していくから、今以上のもとを追求していこう。

    今回は以下のことができるようになったぞ。

    • 散らばっていた見た目に関する処理を、プレイヤーを起点にすることができた
    • トゲトゲになっていた壁を滑らかにした
    • ズームすると歪んでいた角度を自然に見えるよう補正できた

    この処理によってよくあるスクラッチのレイキャスティングとは一線を画すクオリティになった。おめでとう!って、あれあれ、まだスクラッチキャットが進めずにいるぞ!次回もチェックしてみよう。

    グリフパッチさんの動画を参考にしています

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

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

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

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

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