陰影をつけて3Dの立体感を高めよう（爆速オンライン3Dゲームの作り方 #04）

スクラッチプログラミングに挑戦している皆さん、どうも！スクラッチコーチです。

ゴンザレスからの挑戦状

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

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

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

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

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

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

• 3D空間に陰影をつける
• 視野が扇おうぎ状に広がるのに合わせた自然な陰影をつける
• コスチュームを利用して奥行きも陰影で表現する

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

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

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

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

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

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

うひょぉ、怖い……w

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

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

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

↓これを見てほしい。

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

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

変数「角度」を作る

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

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

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

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

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

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

見てみよう！

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

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

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

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

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

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

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

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

それをコピーする。

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

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

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

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

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

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

プレイヤーを透明にする

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

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

幽霊を100にする。

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

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

壁の陰影

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

明るい壁と暗い壁を作る

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

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

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

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

選択ツールで

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

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

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