スクラッチに挑戦している皆さん、どうも!スクラッチコーチです。
- ① まず2Dマップを動き回れるようにしよう!
- ② さっそく3D化しちゃおうぜ!
- ③ 壁にスキマがあって敵から丸見え!?やっば
- ④ 陰影をつけて立体感マシマシにしよう
- ⑤ トゲトゲやユガミを補正してハイクオリティ3Dの一歩を踏み出そう(爆速オンライン3Dゲームの作り方 #05)
- ⑥ 壁の衝突判定の基本を作ろう
- ⑦ 壁に触れてると進めない!?移動を改善しよう
- ⑧ ついに敵が現れた!距離感の計算ってどうやる?
- ⑨ 奥行きを実装して壁の後ろに隠れられるようにする
- ⑩ エンティティに陰影をつける(いまここ)
- ⑪ 敵がプレイヤーに向かって迫ってくるように実装する
- ⑫ スターを実装しよう!
- ⑬ 爆速3D爆誕
- ⑭ 壁に画像(テクスチャ)を貼り付けてリッチな3D空間を演出する
- ⑮ テクスチャの壁を洗練させて本格3D完成!
- ⑯ シメだ!モバイル & オンライン化をするぞ
- ⑰ 【おまけ】敵がプレイヤーを見つけたら追いかけるロジック
ゴンザレスからの挑戦状
![](https://scratch.coach/wp-content/uploads/2024/03/8de980d4ce9b1a6ea281dfd914bcfb7c.png)
遠くの敵が明るく見えるのが不安みたいだね!なるほど、言われてみればそうかもね。よし、陰影の処理を改善してみよう!
今回の目標「エンティティに陰影をつける」
遠くのエンティティは暗く、近づけば明るくみえるようなロジックを作っていくよ。前に壁でも同じようなことしたよね。
さらにエンティティの足元にも影をつくっていく。
影を作るとすこーし空間を圧迫するような印象があるので、天井を高くして空間にゆとりも作っていくよ。
コーディング目標は主に3点。
- エンティティの遠近による陰影
- エンティティの足元の影
- 天井の高さ
ウォーミングアップ
まずはカンタンな作業だよ。
デバッグしていた幽霊効果を元に戻す
まずはプレイヤー。
![](https://ok-scratch.io/wp-content/uploads/2024/03/e98aa400a9443026805223c05bc73321.png)
幽霊の効果を100に戻そう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/8f5005904a5dff6dc48397f5754807af.png)
スプライト「レベル」を開こう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/e9dc8426d0683cf64713a3dc0dd1b7a4.png)
こちらも戻す。
![](https://ok-scratch.io/wp-content/uploads/2024/03/d5c73809aca37ead7d10d6388b9cceaf.png)
続いてスプライト「エンティティ」だ。
![](https://ok-scratch.io/wp-content/uploads/2024/03/4295ac67654163cf6def69a3c4573871.png)
ここを100に戻す。
![](https://ok-scratch.io/wp-content/uploads/2024/03/b9d4d2e848571405b6be260b7c764415.png)
CHECK! 余計なものが表示されてないかテストする
うん、すっきりしたね。
エンティティに陰影をつける
壁のときに実装したように、遠くのエンティティは暗く、近くなら明るくなるようにしてみよう。こうするとますます雰囲気が出る。こういう細かい演出が高品質への道だ。
スプライト「ペン」を開く
![](https://ok-scratch.io/wp-content/uploads/2024/03/16fa69d4dd8a16b1006635336d199b02.png)
定義「_エンティティをスタンプする」を見つけて明るさ効果を設定しよう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/a759f808bedad99116a84e1746e0e4b7.png)
このゼロのところに距離を考慮した演算を入れる。矢印を参考に作ってみて↓
![](https://ok-scratch.io/wp-content/uploads/2024/03/51a15c75132ae4ff60721fb6d6b7e803.png)
↓これが完成形だよ。
![](https://ok-scratch.io/wp-content/uploads/2024/03/668d1080d3cb031c3bba80622a096f7c-1024x171.png)
CHECK! 遠くのエンティティが暗くなったかテストする
きっと↓こんな感じになってるはずだ。雰囲気あるよね〜。ホラーゲームっぽさがどんどん増してくw
![](https://ok-scratch.io/wp-content/uploads/2024/03/1e1c009cb5241904c2394d5e38e67698.png)
エンティティに陰影が付いた
定義「_スポーンさせる」を作る
エンティティを表示させるための定義を作っておくと便利。
スプライト「エンティティ」を開く
![](https://ok-scratch.io/wp-content/uploads/2024/03/0c10f43a063c40a4344c95c061a76116.png)
引数「タイプ」でどのエンティティを表示するかを指定して、引数「数」で何体表示させるかを指定するようにしておく。
![](https://ok-scratch.io/wp-content/uploads/2024/03/90399183dac17b7c73bd577d2338a612-1024x795.png)
とりあえず緑の旗がおされたときに実行するようにしよう。数は25体くらいかな!ナノだらけになっちゃうけどねw
![](https://ok-scratch.io/wp-content/uploads/2024/03/2706e6327edb3c846388053685968125.png)
実装する
まず表示しようか。
![](https://ok-scratch.io/wp-content/uploads/2024/03/22b4914a978dbb618a6f7deadc343c62-1024x356.png)
変数「タイプ」を作る
![](https://ok-scratch.io/wp-content/uploads/2024/03/016fc670b77a402c7c40c347882778dd.png)
この変数にそのまま引数「タイプ」をセットする。
![](https://ok-scratch.io/wp-content/uploads/2024/03/5187873ed2a9cd4fb5f874bca5b73ae0-1024x482.png)
ループを置いて、引数「数」を回数に指定する。
![](https://ok-scratch.io/wp-content/uploads/2024/03/c0e8f2c3edac451a3e4677d42e425160.png)
この中で今回は適当に「どこかの場所へ行く」ブロックを置いておこう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/58432654546264c28f654294c6295e35.png)
壁に埋もれないようにする
このままだと壁の中にもエンティティがスポーンしたほうがいいので、それを回避するよ。
「◯まで繰り返す」を置こう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/b05796f8dc202018de7423ed0a7ee6b7.png)
少し複雑な条件式を作るから、先に↓こういう条件ブロックを置いてみて。
![](https://ok-scratch.io/wp-content/uploads/2024/03/eed8c6d39999534b11656fa179e52be9-1024x572.png)
1つ目の条件には「レベルに触れた」をはめよう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/249b69221a1a8fe4555b9ab27812616e-1024x544.png)
2つ目の条件には「エンティティに触れた」っていう条件を入れたいんだけど、スプライト「エンティティ」からはこの条件が作れないんだ。これはスクラッチの仕様だよ。そこでちょっと裏技を使うね。
スプライト「ペン」を開く
![](https://ok-scratch.io/wp-content/uploads/2024/03/9ca6bfe83746e5eabfca833037276433.png)
ここで「エンティティに触れた」っていう調べるブロックを外に出して、スプライト「エンティティ」にドラッグアンドドロップしよう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/a70b51cebfc2193dec6d186eb95dfbb5-1024x252.png)
スプライト「エンティティ」に戻る
エンティティに戻って、いまドラッグアンドドロップされたブロックを2つ目の条件式に設置しよう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/c54f83e2aa88c890b989ab6698486ce4-1024x318.png)
エンティティが壁の中に埋もれなくなった
この中で「どこかの場所へ行く」ブロックを置こう。こうすれば壁の外にスポーンされるまで繰り返されるよ。
![](https://ok-scratch.io/wp-content/uploads/2024/03/1613d6b8b30cc8400faf5518302fe52b.png)
最終的にクローンを作ろう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/a1c05184354c215dc972c42c7df7f80d.png)
事後処理として変数「タイプ」に空白をセットしよう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/ec47d381c49f4cec2e9ffda8ebb9d505.png)
最後に「隠す」で終わりだよ。
![](https://ok-scratch.io/wp-content/uploads/2024/03/29d355b314170673477dfcd1ed7d12c1.png)
CHECK! ナノがたくさんスポーンされるかテストしよう
をををををぅ!敵が大量に現れてしまったぁ!スクラッチキャットごめーんw
![scratch cat](https://scratch.coach/wp-content/uploads/2024/03/neko-sad-1.png)
そ、そんなぁ(T_T)
敵をカンタンにスポーンできるようになった
エンティティの足元に影を作る
エンティティが浮いてるように見えるケースがあったので、足元に影を作ろうと思う。
スプライト「ペン」を開く
![](https://ok-scratch.io/wp-content/uploads/2024/03/ce7b46931b74e375b80622faaf79ed6c.png)
コスチュームを調整して影をつけるよ。
円を描こう。色は黒!
![](https://ok-scratch.io/wp-content/uploads/2024/03/8f0c359f11d12eefd19bd6110d34170e.png)
足元に楕円を描こう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/25e6538e5b06e9af6e7742aac01cd62b.png)
この影を最背面にするよ。
![](https://ok-scratch.io/wp-content/uploads/2024/03/f46d4d4abffb73b6516f79a576538ca4.png)
そうすると足元に影っぽいのができる。
![](https://ok-scratch.io/wp-content/uploads/2024/03/fb067a81b6c5d7837b23da91b1433bc6.png)
CHECK! 影が見えるかテストする
っと、スクショが暗いw見える?
↓見えないかもしれないけど、壁際にいるナノが浮いて見えるような現象が起きるケースがあったんだ。
![](https://ok-scratch.io/wp-content/uploads/2024/03/4f822e141c41ceea1db20ccb342d10f6.png)
壁の描画ロジックを調整する
定義「_行を描画する」のところにいこう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/24957fd8a2b59f6e8d0ee95d81a5e9f6.png)
演算を作るよ。「高さ - (★解像度 / 2)」という演算だよ。
![](https://ok-scratch.io/wp-content/uploads/2024/03/546a278b30806aa4195a6e625a6a7347.png)
これをY座標にセットしよう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/ecbac767215a1965edac6a7340bcff3a-1024x673.png)
さらにその下のY座標のところも演算を割り当てる。ここは逆に「(★解像度 / 2) - 高さ」だよ。
![](https://ok-scratch.io/wp-content/uploads/2024/03/efd0d5c81be28815486b9464df86d1c7-1024x717.png)
CHECK! 壁際のナノが浮いてないかテストする
うん、また暗いw
![](https://ok-scratch.io/wp-content/uploads/2024/03/e2f54847f9126bff48fa3cd20d5b6ad1.png)
でもいい感じに壁際の描画が正しくいってるよ!ひゅー!
天井を高くする
Y座標をいじったついでに、ちょっと天井を高くしようと思う。
今作った演算の高さを2倍にしてみよう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/37fcb962f4e44a16c10abaeddf13b000-1024x716.png)
CHECK! 天井が高くなったかテストする
おお!
![](https://ok-scratch.io/wp-content/uploads/2024/03/76b84c963ff5a620b775252a48ea920e.png)
かなりゆとりのある空間になったね。
ちょっと高すぎるから2倍じゃなくて1.5倍にしとく。
![](https://ok-scratch.io/wp-content/uploads/2024/03/670df1937423fa019839a226b0efa883-1024x141.png)
まとめ
これで遠くにいるエンティティは暗くなった。きっとナノからも遠くのスクラッチキャットは明るく見えなくなったはずだ。(知らんけど)
まぁ大丈夫!だって敵がいても動かないからね!動かない敵ならスクラッチキャットも安心してくれるでしょう。さぁ、自由にスターを探し回ってくれ〜……って、ん?おいおい、なんか敵が動き出してないか!?なんてこった!次回もチェックしてみてくれ!
グリフパッチさんの動画
このチュートリアルは世界No.1スクラッチャーとして名高いグリフパッチさんの動画を参考にしているよ。ただし手順を一部変えているところもあるんだ。
- ① まず2Dマップを動き回れるようにしよう!
- ② さっそく3D化しちゃおうぜ!
- ③ 壁にスキマがあって敵から丸見え!?やっば
- ④ 陰影をつけて立体感マシマシにしよう
- ⑤ トゲトゲやユガミを補正してハイクオリティ3Dの一歩を踏み出そう(爆速オンライン3Dゲームの作り方 #05)
- ⑥ 壁の衝突判定の基本を作ろう
- ⑦ 壁に触れてると進めない!?移動を改善しよう
- ⑧ ついに敵が現れた!距離感の計算ってどうやる?
- ⑨ 奥行きを実装して壁の後ろに隠れられるようにする
- ⑩ エンティティに陰影をつける(いまここ)
- ⑪ 敵がプレイヤーに向かって迫ってくるように実装する
- ⑫ スターを実装しよう!
- ⑬ 爆速3D爆誕
- ⑭ 壁に画像(テクスチャ)を貼り付けてリッチな3D空間を演出する
- ⑮ テクスチャの壁を洗練させて本格3D完成!
- ⑯ シメだ!モバイル & オンライン化をするぞ
- ⑰ 【おまけ】敵がプレイヤーを見つけたら追いかけるロジック