スクラッチに挑戦している皆さん、どうも!スクラッチコーチです。
- ① まず2Dマップを動き回れるようにしよう!
- ② さっそく3D化しちゃおうぜ!
- ③ 壁にスキマがあって敵から丸見え!?やっば
- ④ 陰影をつけて立体感マシマシにしよう
- ⑤ トゲトゲやユガミを補正してハイクオリティ3Dの一歩を踏み出そう(爆速オンライン3Dゲームの作り方 #05)
- ⑥ 壁の衝突判定の基本を作ろう
- ⑦ 壁に触れてると進めない!?移動を改善しよう
- ⑧ ついに敵が現れた!距離感の計算ってどうやる?
- ⑨ 奥行きを実装して壁の後ろに隠れられるようにする
- ⑩ エンティティに陰影をつける
- ⑪ 敵がプレイヤーに向かって迫ってくるように実装する
- ⑫ スターを実装しよう!
- ⑬ 爆速3D爆誕(いまここ)
- ⑭ 壁に画像(テクスチャ)を貼り付けてリッチな3D空間を演出する
- ⑮ テクスチャの壁を洗練させて本格3D完成!
- ⑯ シメだ!モバイル & オンライン化をするぞ
- ⑰ 【おまけ】敵がプレイヤーを見つけたら追いかけるロジック
ゴンザレスからの挑戦状
![](https://scratch.coach/wp-content/uploads/2024/03/cd0052373589237c99746ecc7706561c.png)
エンティティやアイテムなども実装して、解像度の値も小さくしてきれいに描画されるようにしてたら、急にスクラッチキャットの身体が動きにくくなった!
どうやら高負荷な描画に耐えきれずに、まともに動けなくなってしまったようだ……これはなんとかせねば!
今回の目標「3Dを爆速化する」
このチュートリアルシリーズのタイトルでもある「爆速3D」を今回で実現する。え?今までも十分に軽い?ノンノン、今までは過去になる。それが今回。ここがスクラッチ3Dの歴史における1つの転換点になる、そう確信しているぜ。
実現するのは次の通り。
- FPSを算出する
- プレイヤーと敵の移動をペンの描画と切り離して高速化する
- レイキャスティングのムダを省き、ペンの描画の負荷を下げる
うぃ、行くぜ!
爆速3D化の第一歩を踏み出す
ここからがこのチュートリアルが世界No.1スクラッチャー(グリフパッチさん)によって作られたものである超高品質な部分だ。まじ刮目して見てくれ。
スプライト「プレイヤー」を開く
![](https://scratch.coach/wp-content/uploads/2024/03/3fb0d887837fcb620971627f494543e5.png)
まずはデバッグ表示されている★解像度を右クリックして、スライダーの指定範囲を変更しよう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/b70309d7152047b3ce5974de22ce8d15.png)
1から16まで選べるようにする。
![](https://ok-scratch.io/wp-content/uploads/2024/03/108b99a6d93541280da9922a82ec8e7b.png)
![ok-scratch](https://scratch.coach/wp-content/uploads/2022/12/soylatte-e1717210866337.png)
小さいほうがキレイな描画になるよ。使ってるパソコンのスペックによっては1にするとモッサリしてとてもプレイできたもんじゃなくなるかも……不安な人は2か3くらいにしておいてもいいかも。
変数「ティック30」を作る
ちょっと変わった名前だけど、これからパフォーマンスを改善していくうえで重要になる変数だから、ニュアンスを変えてしまわないように変数の名前は動画のとおりにしておくね。
![](https://ok-scratch.io/wp-content/uploads/2024/03/26bc314f6ab8fa8db6aea429753aede9.png)
変数「★デルタ」を作る
![](https://ok-scratch.io/wp-content/uploads/2024/03/25ea70310bfce5bd78db0d093f8dd109.png)
変数「★FPS」を作る
![](https://ok-scratch.io/wp-content/uploads/2024/03/8b19e784d5a5659b4b1eecfd27e3d3e0.png)
★デルタとティック30を初期化しておこう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/a35772ee8a03d652493e4c65f77abc44.png)
定義「_FPS」を作る
ちょっと変な名前だけど、引数に「直前のティック30」をもたせよう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/8b7454e6314f322b97ece06cc3174fc7-1024x799.png)
ずっとループの最初で実行しよう。引数には変数「ティック30」をはめよう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/9bd1561dbdb7c5c633e3519cdbab8360.png)
この定義を作っていく。
まず最初に変数「ティック30」に「タイマー x 30」を割り当てよう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/67d8c9ce3bd91ee17fa0599293550b08.png)
次に変数「★デルタ」に「ティック30 - 直前のティック30」を割り当てる。
![](https://ok-scratch.io/wp-content/uploads/2024/03/88479e6076e221d71dfb05e5bbeaf5ff-1024x397.png)
CHECK! ★デルタの値が正常に動作するかテストする
これで解像度の値が大きくなる(粗くなる)と★デルタが減る。
![](https://ok-scratch.io/wp-content/uploads/2024/03/392525a8a4aebefad4b63810d26ca761.png)
逆に解像度の値を小さくする(きれいになる)とデルタが増える。
![](https://ok-scratch.io/wp-content/uploads/2024/03/b013131eefb2e30c9833a67a915bfa61.png)
この状態になっていることを、この段階で確認しておいてくれ。
★FPSを算出する
次の演算ブロックを使うよ。
![](https://ok-scratch.io/wp-content/uploads/2024/03/3d362c6a5703921588c26e0d2e3c55af.png)
↓こんな演算を作ってくれ。四捨五入って使いそうで意外と使わないよね。
![](https://ok-scratch.io/wp-content/uploads/2024/03/622e31a3153b87dbb1bbd9580ce8ef28.png)
これを★デルタの下でセットする。
![](https://ok-scratch.io/wp-content/uploads/2024/03/4d6cfc33dff95279ecdaa4318f18c237-1024x495.png)
トラブル発生!壁が透ける
さて、この段階でいったん解像度を1にしてみたところ、妙な減少が起きてしまった。
↓このように壁が半透明になってしまったんだ。
![](https://ok-scratch.io/wp-content/uploads/2024/03/7f919900f19fd244da9e1f02948527e9.png)
ペンの太さが細くなりすぎて起きたのが原因だよ。
これは直さないとね。
定義「_レイキャストする」を切り離す
↓この部分で切り離して。
![](https://ok-scratch.io/wp-content/uploads/2024/03/e7df819585e8ec511c8d805dbe9bb718-1024x519.png)
条件ブロックを挟もう。条件式には「★解像度 < 4」という演算をはめる。
![](https://ok-scratch.io/wp-content/uploads/2024/03/ba654a17f87508ca8063c74889b179ea.png)
解像度が1, 2, 3とか小さい値なら、X座標を四捨五入するようにする。こうすることでペンが細くても適切な場所に描画されるようになる。
![](https://ok-scratch.io/wp-content/uploads/2024/03/c80592c0639acf0d9e87ffbc772e4ec5.png)
CHECK!
ちょっと見づらいけど、★解像度が1になってるのに右側の壁が透けてないことが見て取れるよね!
![](https://ok-scratch.io/wp-content/uploads/2024/03/ca38b838aea3167859aa4ad1df8ed2e8.png)
おっけい!
プレイヤーの動きを爆速化する
さぁ面白い部分が始まるぞ。
なぜキレイな解像度の中でもプレイヤーが爆速で動くのか
解像度の値を小さくしてきれいな描画をすると、プレイヤーの動きがカクカクしてしまう。
この理由は、ペンの処理が忙しいから。
たとえば★解像度が8なら、スクラッチの処理としては(あくまで例えばの数字として)10回ペンを描く中でプレイヤーを動かすだけだから余裕なんだ。でも★解像度が1だと100回ペンを描く中でプレイヤーを動かす必要があって、めちゃめちゃ忙しくなる。
リアルな動きでたとえるなら、机に座りながら数学の問題を解くのはできるよね。
でも坂道をダッシュしながら数学の問題を解けって言われたら頭が回らなくなるのと同じような感じ。
スクラッチも忙しい中ではカンタンな処理でもできなくなってしまうというわけだ。
このため★解像度の値が小さいと、プレイヤーの動きがカクカクしてしまう。
じゃあどうすればいいだろうか。
スクラッチの性能を変えることはできないから、もちろんコーディングで解決する必要がある。
答えを抽象的に言うとこうだ。
ペンの描画が10倍忙しくなったなら、プレイヤーの動きは10倍ザツにすればいい、ってこと。
坂道ダッシュしながらでも1x1とか1x2っていう超カンタンな掛け算なら問題なく解けるよね。それと同じで、ペンの処理が忙しいなら、その分だけプレイヤーの動きの処理は大雑把なものにしてあげればいいんだ。
このときに役に立つのがさっき作った★デルタになる。
やってみよう。
★デルタを使う
定義「_プレイヤーティック」内の処理に★デルタを使っていくぞ。
←
まず左向き矢印キーが押されたときの値を「3 x ★デルタ」にしよう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/e02b5a5da83df52c0dc0ba2e66130b81.png)
↓こんなかんじ。
![](https://ok-scratch.io/wp-content/uploads/2024/03/fa3a8d8422ad17f77c47f93dd3fb3094-1024x432.png)
←
![](https://ok-scratch.io/wp-content/uploads/2024/03/be87b3a81d228862666698ce208fde74-1024x259.png)
↑
![](https://ok-scratch.io/wp-content/uploads/2024/03/8761e7cadbfdf39f44c6cff00cdb3d51.png)
↓
![](https://ok-scratch.io/wp-content/uploads/2024/03/1005681d1a7f2140adecb17b1494760e.png)
a
![](https://ok-scratch.io/wp-content/uploads/2024/03/85f6fa891ea13285ef227de10d0304c0.png)
d
![](https://ok-scratch.io/wp-content/uploads/2024/03/edf0ad3f78bcc88a24f9f78b7af62009.png)
おっけい!
スプライト「エンティティ」を開く
エンティティにも★デルタをつかっていく。
![](https://ok-scratch.io/wp-content/uploads/2024/03/8f28f6660789d51379c2233475c9c1e5.png)
クローンされたときの移動にさっきと同じような感じで★デルタを使おう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/3e40d5a3c7376fdcf7b64099ced490f0.png)
CHECK! 動きが爆速になったかテストする
どおおおおおやぁぁぁぁ( ・´ー・`)
★解像度を小さくしてもスーッと敵を華麗にスルーしていく様子が見て取れるんじゃないかな!?
すっげー!まじすっげー!
解像度に関係なくプレイヤーの動きが爆速になった!
天才スクラッチャー(グリフパッチさん)のすごいところは、これで満足しないところなんだよ……もうこれだけでも感動的なんだけど、こっからもっと驚くコーディングをしていく。
![ok-scratch](https://scratch.coach/wp-content/uploads/2022/12/soylatte-e1717210866337.png)
世界、変わりますよ?覚悟は良いですか?
レイキャスターの精度を上げる
いまってさ、レイキャスターでヒットボックスっていうコスチュームを使って扇状のビームを出してるよね、見えないけど。覚えてるかな?
このヒットボックスっていうコスチュームのサイズは4 x 4だよね。違う人もいるかもだけどまぁ大丈夫。
4 x 4って小さいように見えるけど、レイキャスターはこのコスチュームを使って「壁にぶつかったかどうか」という当たり判定を1度に何回も、いや何百回とか途方もない回数繰り返してるんだよね。
分かりやすく数値化すると、4 x 4のサイズのどこかが壁に触れてないかっていうチェックを1度のチェックにつき合計16回行ってるっていうイメージ。(あくまでイメージだから回数は正確じゃないよ)
![](https://scratch.coach/wp-content/uploads/2024/03/3117214f551729c0496b0d84cd223d77.png)
だったら、このヒットボックスのサイズをめちゃめちゃ小さくしてあげれば、1度に実行する当たり判定の負荷が下がるんじゃね?っていう発想。
それを今からスクラッチの裏技を使って実現していく……わお。
スプライト「レイキャスター」を開く
![](https://ok-scratch.io/wp-content/uploads/2024/03/ae4106d90327051e651a1870efca3840.png)
コスチュームを描くよ。
![](https://ok-scratch.io/wp-content/uploads/2024/03/fe4672807354fe5eca31d4c5425e7c1d.png)
最初にビットマップ化しておくと楽だよ。
![](https://ok-scratch.io/wp-content/uploads/2024/03/19e0abc92ab69d355e7328c0efd3df89.png)
塗りつぶしツール選ぼう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/be5a03071e6ab9b7de779c67d066d45d.png)
色は何でもいいから、枠内を塗りつぶすよ。これだけ。
![](https://ok-scratch.io/wp-content/uploads/2024/03/7533506d72a87f7f3caf74596a386054-1024x760.png)
名前はBIGにしておこうか。
![](https://ok-scratch.io/wp-content/uploads/2024/03/95ff336d8f322e9c0b08e489b8272279.png)
コーディングに戻って、緑の旗が押されたときにコスチュームをBIGにしてから大きさを1%にしてみて。
![](https://ok-scratch.io/wp-content/uploads/2024/03/33ff866f405fb4e0628a010d753d8139.png)
CHECK! レイキャスターの精度が上がったかテストする
実はこれだけでめっちゃ改善されてる……。
なんじゃこりゃぁ!!
ロジックはさっき説明した通り、レイキャスターのビームを4 x 4というサイズからもっともっと小さくして1度の当たり判定の負荷を下げているんだけど、いったいBIGっていうコスチュームはなんで必要だったんだろうか。
じつはスクラッチでは小さいコスチュームを大きさブロックを使ってめっちゃ小さくする、という挙動は実行されないようになっているんだ。え!?って感じだよね。小さすぎるコスチュームを作れないような仕様になってる。
そこで以下のような作戦でスクラッチをダマしたんだ。
- いったん大きなコスチュームを使って大きさ1%という状態を作る。これは大きなコスチュームをめちゃ小さくしてるからスクラッチもOKを出してくれる
- 大きさが1%の状態でコスチュームを着替える(4 x 4)
- 4 x 4の1%の大きさのスプライト爆誕
わおわおわお!
1度の当たり判定の負荷も超下がって、描画がさっきよりもヌルヌルになってるっていうわけ。天才だなマジで!
レイキャスターの負荷を下げることで精度が増した。
レイキャスティングを……しない
天才は止まらない。天才だから止まらないのか、止まらないから天才なのか。とにかくさらにパフォーマンスを上げていく。
いまのレイキャスティングには無駄がある。どこだと思う?
![](https://scratch.coach/wp-content/uploads/2024/03/2cbc994d896f39da437417b373a59dc4.png)
↑これのとおり、カベの近くだけ当たり判定が必要で、それ以外の空白の空間では別に当たり判定する必要ないよね。
いやーでも、当たり判定しないとそこが空白かどうかわからないじゃん、って思うよね……。
そこで、空白かどうか、分かるようにしておく工夫をほどこす。どうするか、コスチュームを使う。
取り掛かる前にいったん敵とかスターを消しておこうか。
スプライト「エンティティ」を開く
![](https://ok-scratch.io/wp-content/uploads/2024/03/f201985e79c64fe33102a5ed5a7a86b5.png)
スポーンさせる数をゼロにしておこう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/8ca549ec8849bb5f90884300d587a034.png)
スプライト「アイテム」を開く
アイテムもスポーンをゼロにしておく。
![](https://ok-scratch.io/wp-content/uploads/2024/03/1eb88258a8590926dd15ba1fbb907d37.png)
スプライト「レベルの近接範囲」を作る
さっき言ってたコスチュームを使った工夫をしていくよ。
スプライト「レベル」を複製して。
![](https://ok-scratch.io/wp-content/uploads/2024/03/b9915ee0f1fbecc9213ceef5606a4f4c.png)
名前を、ちょっと変わってるけど、レベルの近接範囲っていう名前にしておこう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/4c74cfc1385a0aa2adff031d324779c5.png)
コスチュームを修正するよ。
選択ツールを選んで。
![](https://ok-scratch.io/wp-content/uploads/2024/03/d3a4eb57e8b848ac94fadceebad4a27e.png)
全選択しよう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/54fb0142e3c23cf552ba69c716bdc3c0-1024x821.png)
この状態で、枠線を20にする。
![](https://ok-scratch.io/wp-content/uploads/2024/03/93031b324ff2be228a1b9c8e12f4d70d.png)
↓こんなかんじになるよね。
![](https://ok-scratch.io/wp-content/uploads/2024/03/091f5caa6b873014213253db63cf9b80-1024x851.png)
この黒い枠線の部分にレイキャスターのビームが触れたら当たり判定をするようにしていく。
逆に言うと、それ以外の場所では当たり判定は行われなくするってこと。
マップ表示を切り替えるところだけ消す
このスプライトは人間にはいっさい見える必要ないから、このブロックは消そう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/687515ef8a73dd9507062f253e0a294b.png)
スプライト「レイキャスター」を開く
よし、じゃあさっき言ってたコーディングをしていくぜ。
![](https://ok-scratch.io/wp-content/uploads/2024/03/fdbc9509972c4b25a167d9ccf20bb654.png)
定義「_ハイスピード・レイ」を作る
なんかカッコいいw
![](https://ok-scratch.io/wp-content/uploads/2024/03/abdc586e14ade6e59853237b5e5c9ae7-1024x801.png)
定義「_シングル・レイ」から一部移植するよ。
「レベルに触れた」まで繰り返すループを_ハイスピード・レイに移動しよう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/e867f1f7f0bf5dc9da0ac5825c6f041a-1024x491.png)
↓こんなかんじにしてね。
![](https://ok-scratch.io/wp-content/uploads/2024/03/e7d02ab316f7c05dc95d32ee421bb29d-1024x286.png)
_ハイスピード・レイにはずっとループを置く。
![](https://ok-scratch.io/wp-content/uploads/2024/03/773d7f62a4802de8261a10e81efd0d7d-1024x358.png)
この中で条件ブロックを置いて「レベルの近接範囲に触れてないなら」という条件を作る。
![](https://ok-scratch.io/wp-content/uploads/2024/03/591dce012b4815a0d4b90f7c95739154.png)
レベルの近接範囲に触れてないということは、さっき作った太い線に当たってないから、カベからは遠いよね。だから10歩動かしてしまおう。何も障害物がないから大股でビューンと動く感じ。
![](https://ok-scratch.io/wp-content/uploads/2024/03/c875739efd595a64ea345cae703609e4.png)
![ok-scratch](https://scratch.coach/wp-content/uploads/2022/12/soylatte-e1717210866337.png)
ちなみにこの10という数字は、さっき枠線を20にしたことと密接に関係している。あまり大きな歩数動くと、線に触れる前にカベに当たってしまったり、カベを通り越してしまったり不具合が起きる。
この条件ブロック内に新しくループを作る。
今度は「レベルの近接範囲に触れるまで繰り返す」というループだよ。この中でも10歩動かそう。これで太い枠線かカベか、どっちかに当たるわけだ。
![](https://ok-scratch.io/wp-content/uploads/2024/03/07f3f63e813b8f35a95e8ba8684a5397.png)
当たったらちょっと下がる。どのくらい下がるか。枠線の太さが20だったよね。実は枠線の太さは1につき0.5歩分に相当する。だから太さ20は10歩分に相当するんだ。そこで半分よりも少し多めのマイナス6歩下がっておく。確実にカベの当たり判定が行われるためだ。
![](https://ok-scratch.io/wp-content/uploads/2024/03/b5cb5e011050b14a1b9017b0bc51f82c.png)
マイナス6歩下がって、そろそろカベがあるということが分かっている状態なので、ここからは従来通り慎重にレイキャスティングを進めていく。
8回繰り返すループを置こう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/ac2e3463a44c6da6ade35cfdfa2ab87c.png)
その中で1歩ずつ動かすよ。
![](https://ok-scratch.io/wp-content/uploads/2024/03/6775a5a10a25920972e6f3d87b51f6a1.png)
そしてレベルに触れたらこのスクリプトを止めよう。
![](https://ok-scratch.io/wp-content/uploads/2024/03/86d2fc869b1fbf396f74e8187e7cba21.png)
これでカベに近づくまでは大股でガシガシ進み、カベに近づいたらゆっくり慎重に進むという柔軟なビームができあがった!
CHECK! パフォーマンスがあがったかテストする
さぁて、どうなったかな?
どぇぇぇぇ!なんなんすか?!このスムーズな描画!動き!神ってる!わーーーーー!
解像度1なのにヌルヌルだぜ……。
まとめ
いやぁ今回は神回。マジでパフォーマンス爆上げ。ちなみにパフォーマンスを上げることを専門的にはパフォーマンスチューニング(パフォチュー)とかって呼ぶ。今回は神パフォチュー。
こんなことができるようになったぞ。
- デルタを算出しFPSの管理ができるようになった
- デルタ値に合わせてプレイヤーと敵の移動を最適化した
- レイキャスティングのムダを省き負荷を下げ精度までもが高まった
なにこれ……超高額のスクラッチ講座にでも参加したような気分。いや、国内でこれだけの技術を教えてくれるスクラッチ講座なんて存在しないから、もはやスクラッチ留学したようなお得な気分だぜ……。ふぅー最高。
まぁこれでスクラッチキャットもスムーズにスターを集めてサッサと脱出できるように……ってあれ?なになに?まだなにか問題があるの?次回もチェックしてみてくれ!
グリフパッチさんの動画
このチュートリアルは世界No.1スクラッチャーとして名高いグリフパッチさんの動画を参考にしているよ。ただし手順を一部変えているところもあるんだ。
- ① まず2Dマップを動き回れるようにしよう!
- ② さっそく3D化しちゃおうぜ!
- ③ 壁にスキマがあって敵から丸見え!?やっば
- ④ 陰影をつけて立体感マシマシにしよう
- ⑤ トゲトゲやユガミを補正してハイクオリティ3Dの一歩を踏み出そう(爆速オンライン3Dゲームの作り方 #05)
- ⑥ 壁の衝突判定の基本を作ろう
- ⑦ 壁に触れてると進めない!?移動を改善しよう
- ⑧ ついに敵が現れた!距離感の計算ってどうやる?
- ⑨ 奥行きを実装して壁の後ろに隠れられるようにする
- ⑩ エンティティに陰影をつける
- ⑪ 敵がプレイヤーに向かって迫ってくるように実装する
- ⑫ スターを実装しよう!
- ⑬ 爆速3D爆誕(いまここ)
- ⑭ 壁に画像(テクスチャ)を貼り付けてリッチな3D空間を演出する
- ⑮ テクスチャの壁を洗練させて本格3D完成!
- ⑯ シメだ!モバイル & オンライン化をするぞ
- ⑰ 【おまけ】敵がプレイヤーを見つけたら追いかけるロジック