スクラッチに挑戦している皆さん、どうも！スクラッチコーチです。
- ① まず2Dマップを動き回れるようにしよう！
- ② さっそく3D化しちゃおうぜ！
- ③ 壁にスキマがあって敵から丸見え！？やっば
- ④ 陰影をつけて立体感マシマシにしよう （いまここ）
- ⑤ トゲトゲやユガミを補正してハイクオリティ3Dの一歩を踏み出そう（爆速オンライン3Dゲームの作り方 #05）
- ⑥ 壁の衝突判定の基本を作ろう
- ⑦ 壁に触れてると進めない！？移動を改善しよう
- ⑧ ついに敵が現れた！距離感の計算ってどうやる？
- ⑨ 奥行きを実装して壁の後ろに隠れられるようにする
- ⑩ エンティティに陰影をつける
- ⑪ 敵がプレイヤーに向かって迫ってくるように実装する
- ⑫ スターを実装しよう！
- ⑬ 爆速3D爆誕
- ⑭ 壁に画像（テクスチャ）を貼り付けてリッチな3D空間を演出する
- ⑮ テクスチャの壁を洗練させて本格3D完成！
- ⑯ シメだ！モバイル & オンライン化をするぞ
- ⑰ 【おまけ】敵がプレイヤーを見つけたら追いかけるロジック
- ⑱ 【特別編】マウスに合わせて視線を上下させる方法
- ⑲ 【特別編】マウスでターンするスピードを調整する
- ⑳ 【特別編】敵をジャンプで乗り越える
ゴンザレスからの挑戦状
壁のスキマはなくなったけど、遠くまで見晴らしが良すぎて敵から丸見えってことにピコが気づいたみたい。これは、住むにはいいけどこっそり潜入する側としては困ったね。よし、ここは一つ自然な暗さを演出するために影を作っていこう。
今回の目標「自然な陰影をつける」
今は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スクラッチャーとして名高いグリフパッチさんの動画を参考にしているよ。ただし手順を一部変えているところもあるんだ。
- ① まず2Dマップを動き回れるようにしよう！
- ② さっそく3D化しちゃおうぜ！
- ③ 壁にスキマがあって敵から丸見え！？やっば
- ④ 陰影をつけて立体感マシマシにしよう （いまここ）
- ⑤ トゲトゲやユガミを補正してハイクオリティ3Dの一歩を踏み出そう（爆速オンライン3Dゲームの作り方 #05）
- ⑥ 壁の衝突判定の基本を作ろう
- ⑦ 壁に触れてると進めない！？移動を改善しよう
- ⑧ ついに敵が現れた！距離感の計算ってどうやる？
- ⑨ 奥行きを実装して壁の後ろに隠れられるようにする
- ⑩ エンティティに陰影をつける
- ⑪ 敵がプレイヤーに向かって迫ってくるように実装する
- ⑫ スターを実装しよう！
- ⑬ 爆速3D爆誕
- ⑭ 壁に画像（テクスチャ）を貼り付けてリッチな3D空間を演出する
- ⑮ テクスチャの壁を洗練させて本格3D完成！
- ⑯ シメだ！モバイル & オンライン化をするぞ
- ⑰ 【おまけ】敵がプレイヤーを見つけたら追いかけるロジック
- ⑱ 【特別編】マウスに合わせて視線を上下させる方法
- ⑲ 【特別編】マウスでターンするスピードを調整する
- ⑳ 【特別編】敵をジャンプで乗り越える
質問テンプレート（素早く3回クリックすると全選択できるのでコピーしよう）
・◯◯ ... 記事のどこまで実装が終わったのかを記入しよう。・□□ ... どんな問題が起きているのか、どういうときに起きるのか、具体的に書こう。
・共有済みURL ... たまに共有してない作品URLを書いてる人がいるけど、共有しないとこちらから確認できないからよろしくね。
スクラッチャーからのコメント
