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

    陰影をつけて3Dの立体感を高めよう(爆速オンライン3Dゲームの作り方 #04)(2024年3月更新)

    陰影をつけて3Dの立体感を高めよう(爆速オンライン3Dゲームの作り方 #04)
    スターター作品
    リミックスする作品
    今回の完成サンプル
    Scratchへ

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

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

    壁のスキマはなくなったけど、遠くまで見晴らしが良すぎて敵から丸見えってことにピコが気づいたみたい。これは、住むにはいいけどこっそり潜入する側としては困ったね。よし、ここは一つ自然な暗さを演出するために影を作っていこう。

    今回の目標「自然な陰影いんえいをつける」

    今は3D空間が均一な光で照らされているような状態になっている。

    それはそれでいいんだけど、今回は自然な陰影が発生するようにしていきたい。

    でも影なんてどうやって作るんだろうか。大丈夫、ペンツールにある「明るさ」を調整するだけでサクッと陰影をつけることはできるから!

    今回はこんなことにタックルするよ。

    • 3D空間に陰影をつける
    • 視野がおうぎ状に広がるのに合わせた自然な陰影をつける
    • コスチュームを利用して奥行きも陰影で表現する
    陰影をつけて3Dの立体感を高めよう(爆速オンライン3Dゲームの作り方 #04)を語るok-scratch ok-scratch

    ここらへんから少し演算も複雑化してくる。といってもスクショを見ながら一歩ずつ進めば必ずできるから、一緒に見ていこう!

    陰影をつける距離を調べよう

    遠くに行くほど暗くなる、という仕様を実装していこう。

    まずは↓このブロックを用意して。

    これを組み合わせて、「120 - (距離 / 1.5)」という演算を作り、ペンの明るさに割り当てよう。

    実はこれだけで結構いい感じになる。

    CHECK! 遠くに行くほど暗くなったかテストする

    うひょぉ、怖い……w

    いっきにホラーゲームっぽくなったね。ゴクリ……。

    遠くに行くほど暗くできた

    陰影のロジックを洗練させる

    これだけでもいい感じなんだけど、さらに洗練させる。

    ↓これを見てほしい。

    目の前の壁よりも、斜めにある壁のほうが距離が離れているから、陰影も濃くなる方が自然だよね。これを実装していきたいと思う。

    ↑この図には、プレイヤーの周りに円が描かれてるよね。視野を表現するときは円形で計算するのがメジャーだからこの図でも円を描いてプレイヤーの視野を表現しているんだ。そして円を使った距離を計算するときは、だいたい三角関数を使うのが定番になる。ここでも三角関数を使った演算を作っていくことになるよ。

    陰影をつけて3Dの立体感を高めよう(爆速オンライン3Dゲームの作り方 #04)を語るok-scratch ok-scratch

    三角関数は高校の数学で習う、たしか。高校生レベルだけど、用意されてるブロックを使うだけだからまだ習ってない人でも安心してほしい。

    変数「角度」を作る

    定義「_レイキャストする」の最初に、向きをそのまま角度に割り当てよう。

    次に、ちょっと複雑な演算を組む。

    「 (距離 x ( (向き - 角度) の cosコサイン)」っていう演算を作るよ。このcosっていうのが三角関数だよ。↓この図の矢印を参考にブロックをはめていってね。(cosのブロックはデフォルトだと絶対値ってなってる。選択肢を開くとcosが見つかるよ)

    最終的にこんな演算になる。

    これを定義「_シングル・レイ」の距離にプレイヤーまでの距離を割り当てた直後に置こう。これによって壁とプレイヤーの距離がより正確に計算できるようになる。

    CHECK! より自然な陰影を演出できたかテストする

    見てみよう!

    動画だけだと違いが見分けづらいかもしれない場合は、今作ったブロックと付けたり外したりしてプロジェクトをプレイしてみてほしい。より自然な陰影が表現できていることに気づくはずだ。

    視野に合わせた、より自然な陰影を表現できるようになった

    床と天井も作って陰影にメリハリをつける

    さらにさらに、コスチュームを工夫することで陰影にもっとメリハリを付けていこう。

    陰影をつけて3Dの立体感を高めよう(爆速オンライン3Dゲームの作り方 #04)を語るok-scratch ok-scratch

    ちなみにスタータープロジェクトをリミックスしたなら、すでに入ってるからそれを使ってもいいし、ココを見て改造したり新規制作してみるのもいいと思うよ。

    ステージにコスを追加する

    背景であるステージを選択しよう。

    ステージのコスチュームを開いて「描く」を選ぶ。

    上から下に向かう線形グラデーションを選択しよう。

    ちょうど半分くらいになる長方形を作ろう。

    それをコピーする。

    ペーストすれば複製できる。

    あとは上下を反転させてみよう。

    できたものを画面上半分に配置すれば、奥のほうが濃い背景が完成だ!

    CHECK! 床と天井がいい感じに陰影にメリハリを付けてるかテストする

    この背景を適用すると……

    クール!奥に行くほど暗くなるっていう仕様にピッタリの背景画像が仕上がったね。

    コスチュームを利用して、遠くに行くほど暗くなる仕様をより強調することができた

    プレイヤーを透明にする

    まだプレイヤーの三角が見えてる状態だから、このタイミングで透明にしておこう。

    スプライト「プレイヤー」を選択する。

    幽霊を100にする。

    さらにスプライト「レイキャスター」を選択する

    このスプライトでも幽霊を100にすればOKだ。

    壁の陰影

    部屋の暗さはできたけど、壁の角度によっても暗さは変わるはずだよね。ここからは↓こんな壁の陰影を作っていこうと思う。

    陰影をつけて3Dの立体感を高めよう(爆速オンライン3Dゲームの作り方 #04)を語るok-scratch ok-scratch

    ここはコスチュームの操作が大切になる。この作業後はマップを変更するのが手間だから、もし何かマップに調整を加えたいなら事前にやっておこう。

    明るい壁と暗い壁を作る

    スプライト「レベル」を選ぶ。

    スプライトをまるごと複製する。スプライト名は「レベルカラー」にしておこう。

    コスチュームを開いて、マップのコスチュームを右クリックして複製する。

    陰影をつけて3Dの立体感を高めよう(爆速オンライン3Dゲームの作り方 #04)を語るok-scratch ok-scratch

    コスチュームに対して複雑な操作をしていくから、万が一「分からない・無理」ってなったら、完成サンプルのスプライトを使うといいよ。

    複製されたコスチューム2を開こう。画面右下にあるズームのリセットを押しておくよ。

    選択ツールで

    全選択する!パーツを余さず選択しよう。でっかい四角を描くように選択するのがコツ。

    コピーボタンをクリック!

    まだペーストはしないよ。コピーボタンを押したら、もうコスチューム2は消してOK。

    コスチューム1で作業を続ける。まだペーストはしないよ。

    コスチューム1でも、全選択しよう。コピーはしないでね。

    全選択したら、左キーを一回押してほんのわずか、1ピクセルだけ動かす。ピクセルとは、単位のことで、1ピクセルは1ドットみたいなものだよ。

    陰影をつけて3Dの立体感を高めよう(爆速オンライン3Dゲームの作り方 #04)を語るok-scratch ok-scratch

    このとき何故かシフトを押してないのに押した状態のように大きく右に動くことがあった。もしそうなったらいったん右キーで元の位置に戻してから、選択を解除して再び全選択して再チャレンジしてみて。それでもダメなら、半角と全角を切り替えたりして、なんとか1ピクセルだけズレる状態を作ってほしい。

    ここでやっとペーストボタンをクリックだ。選択状態は解除しないでね。もし解除しちゃったら、ペーストを取り消して再びペーストし直そう。

    今度は右キーを一回押して、右に1ピクセル動かす。

    そうすると↓こんな感じでわずかに(合計2ピクセル)ズレた2層のマップになると思う。

    レベルカラーとレベルでペンの色を変える

    次はコードだ。スプライト「レイキャスター」の定義「_シングル・レイ」に条件ブロックを追加しよう。

    条件式でレベルカラーに触れたかどうか調べよう。

    この中でペンの色を変える。こうすることで壁の陰影を表現できるぞ!

    CHECK! 壁に明るい面と暗い面ができたかテストする

    おお!門が明確に分かれてる!これは視覚的に優しい。

    あーでも、待って。円のところはどうだろう。

    あちゃー。ギザギザだね。これは何か手を加えないとな。

    円い壁の陰影を手直しする

    スプライト「レベルカラー」を開く。

    コスチュームを開いて円のところを選択する。

    円の代わりに長方形を設置してみよう。

    CHECK! 円の陰影がギザギザではなくなったかテストする

    うーん、まぁ今回はこれでいいかな。そこまで大切なところじゃないし。

    スプライトを二層構造にすることによって、明るい壁と暗い壁を作ることができた

    まとめ

    今回は3D空間に陰影をつけることができたね。これで遠くの方は真っ暗、みたいな状況を作ることができた。より自然だし、なんだかダンジョンっぽさが一気に増したよね!ホラーゲームなら今すぐ作れちゃいそうな雰囲気。

    電気をつけたら陰影が消える、なんて仕様も作れそうだし、逆に停電だ!っていうハプニングで一気に部屋が暗くなったり……オラワクワクすっぞ!

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

    • 3Dに陰影をつける
    • 視野に合わせて自然な濃さを演出する
    • コスチュームも組み合わせて奥行きの陰影や明るい壁と暗い壁も演出する

    オッケーナイスゥ!これでスクラッチキャットもゴンザレスに追いつ……あれ?なんだかまだ問題が発生しているみたい。なんだろう?次回もチェックしてみてね!

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

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

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

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

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