陰影をつけて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スクラッチャーとして名高(なだか)いグリフパッチさんの動画(どうが)を参考(さんこう)にしているよ。ただし手順(てじゅん)を一部(いちぶ)変(か)えているところもあるんだ。