エンティティに陰影をつける（爆速オンライン3Dゲームの作り方 #10）

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

ゴンザレスからの挑戦状

遠くの敵が明るく見えるのが不安みたいだね！なるほど、言われてみればそうかもね。よし、陰影の処理を改善してみよう！

今回の目標「エンティティに陰影をつける」

遠くのエンティティは暗く、近づけば明るくみえるようなロジックを作っていくよ。前に壁でも同じようなことしたよね。

さらにエンティティの足元にも影をつくっていく。

影を作るとすこーし空間を圧迫するような印象があるので、天井を高くして空間にゆとりも作っていくよ。

コーディング目標は主に３点。

• エンティティの遠近による陰影
• エンティティの足元の影
• 天井の高さ

ウォーミングアップ

まずはカンタンな作業だよ。

デバッグしていた幽霊効果を元に戻す

まずはプレイヤー。

幽霊の効果を100に戻そう。

スプライト「レベル」を開こう。

こちらも戻す。

続いてスプライト「エンティティ」だ。

ここを100に戻す。

CHECK! 余計なものが表示されてないかテストする

うん、すっきりしたね。

エンティティに陰影をつける

壁のときに実装したように、遠くのエンティティは暗く、近くなら明るくなるようにしてみよう。こうするとますます雰囲気が出る。こういう細かい演出が高品質への道だ。

スプライト「ペン」を開く

定義「_エンティティをスタンプする」を見つけて明るさ効果を設定しよう。

このゼロのところに距離を考慮した演算を入れる。矢印を参考に作ってみて↓

↓これが完成形だよ。

CHECK! 遠くのエンティティが暗くなったかテストする

きっと↓こんな感じになってるはずだ。雰囲気あるよね〜。ホラーゲームっぽさがどんどん増してくｗ

定義「_スポーンさせる」を作る

エンティティを表示させるための定義を作っておくと便利。

スプライト「エンティティ」を開く

引数「タイプ」でどのエンティティを表示するかを指定して、引数「数」で何体表示させるかを指定するようにしておく。

とりあえず緑の旗がおされたときに実行するようにしよう。数は25体くらいかな！ナノだらけになっちゃうけどねｗ

実装する

まず表示しようか。

変数「タイプ」を作る

この変数にそのまま引数「タイプ」をセットする。

ループを置いて、引数「数」を回数に指定する。

この中で今回は適当に「どこかの場所へ行く」ブロックを置いておこう。

壁に埋もれないようにする

このままだと壁の中にもエンティティがスポーンしたほうがいいので、それを回避するよ。

「◯まで繰り返す」を置こう。

少し複雑な条件式を作るから、先に↓こういう条件ブロックを置いてみて。

1つ目の条件には「レベルに触れた」をはめよう。

２つ目の条件には「エンティティに触れた」っていう条件を入れたいんだけど、スプライト「エンティティ」からはこの条件が作れないんだ。これはスクラッチの仕様だよ。そこでちょっと裏技を使うね。

スプライト「ペン」を開く

ここで「エンティティに触れた」っていう調べるブロックを外に出して、スプライト「エンティティ」にドラッグアンドドロップしよう。

スプライト「エンティティ」に戻る

エンティティに戻って、いまドラッグアンドドロップされたブロックを２つ目の条件式に設置しよう。

この中で「どこかの場所へ行く」ブロックを置こう。こうすれば壁の外にスポーンされるまで繰り返されるよ。

最終的にクローンを作ろう。

事後処理として変数「タイプ」に空白をセットしよう。

最後に「隠す」で終わりだよ。

CHECK! ナノがたくさんスポーンされるかテストしよう

をををををぅ！敵が大量に現れてしまったぁ！スクラッチキャットごめーんｗ

エンティティの足元に影を作る

エンティティが浮いてるように見えるケースがあったので、足元に影を作ろうと思う。

スプライト「ペン」を開く

コスチュームを調整して影をつけるよ。

円を描こう。色は黒！

足元に楕円を描こう。

この影を最背面にするよ。

そうすると足元に影っぽいのができる。

CHECK! 影が見えるかテストする

っと、スクショが暗いｗ見える？

↓見えないかもしれないけど、壁際にいるナノが浮いて見えるような現象が起きるケースがあったんだ。

壁の描画ロジックを調整する

定義「_行を描画する」のところにいこう。

演算を作るよ。「高さ - (★解像度 / 2)」という演算だよ。

これをY座標にセットしよう。

さらにその下のY座標のところも演算を割り当てる。ここは逆に「(★解像度 / 2) - 高さ」だよ。

CHECK! 壁際のナノが浮いてないかテストする

うん、また暗いｗ

でもいい感じに壁際の描画が正しくいってるよ！ひゅー！

天井を高くする

Y座標をいじったついでに、ちょっと天井を高くしようと思う。

今作った演算の高さを２倍にしてみよう。

CHECK! 天井が高くなったかテストする

おお！

かなりゆとりのある空間になったね。

ちょっと高すぎるから２倍じゃなくて1.5倍にしとく。

まとめ

これで遠くにいるエンティティは暗くなった。きっとナノからも遠くのスクラッチキャットは明るく見えなくなったはずだ。（知らんけど）

まぁ大丈夫！だって敵がいても動かないからね！動かない敵ならスクラッチキャットも安心してくれるでしょう。さぁ、自由にスターを探し回ってくれ〜……って、ん？おいおい、なんか敵が動き出してないか！？なんてこった！次回もチェックしてみてくれ！

グリフパッチさんの動画

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