当記事はグリフパッチさんの動画を参考に、日本人向けに分かりやすく手直ししたものです。和訳解説は動画作者のグリフパッチさんご本人から許可をいただいて掲載しております。チャンネルはYOUTUBE ( by griffpatch )からどうぞ。
- ① 2Dマップを動き回れるようにしよう!
- ② さっそく3D化しちゃうぞ！（いまここ）
- ③ 壁にスキマがあって丸見えじゃん！敵にバレちゃう！
- ④ 部屋が不自然に明るすぎる！陰影を付けよう！
- ⑤ ズームすると空間がゆがんでグニャグニャになっちゃう！
- ⑥ 壁の衝突判定の基本を作ろう
- ⑦ 壁に触れてると進めない！？移動を改善しよう
- ⑧ ついに敵が現れた！距離感の計算ってどうやる！？
- ⑨ 奥行きを実装して真の三次元空間を創る
- ⑩ エンティティに陰影をつける
- ⑪ 敵がプレイヤーに襲いかかる
ゴンザレスからゲームクリエイターへの挑戦状
2Dのマップを手に入れたけど、これじゃあゴンザレスがいる3D迷宮にはたどり着かない！悲嘆に暮れるピコにスクラッチキャットが差し出した希望の光り、それがペンツール！これをつかって2Dのマップを3D化できるとスクラッチキャットは豪語する。果たしてその手法とは！？
いよいよ、というか第二回目にしてさっそく3D化だよ。新しい変数や定義が増えるけど、僕がサポートするから一緒に進めていこう！
今回の目標「3D化する！」
なんともう3D化しちゃうぞ。まずはオーソドックスなよくある3Dを作る。これはスクラッチWIKIにも乗っている基本的なレイキャスティングという手法になる。でもこれが爆速3Dの下地になるから大事。
今回の完成目標となる動画を確認しておこう。
うぉお！3Dっぽい動きになってるよね！この第二回チュートリアルでここまで実装が進むよ。楽しんでいこうぜ！
スプライト「レイキャスター」を作る
3Dといえばレイキャスティングという手法と、レイトレーシングという手法があるんだ。
レイトレーシングというのはマイクラみたいな本格的な3Dゲームで採用されている精緻だけどめっちゃ重たい手法。
スクラッチではもう１つのレイキャスティングという手法を使っていくよ。比較的軽いけど、普通に実装しただけではスクラッチで3Dゲームを作るのは厳しいと感じる重さ。とりあえず重たいけどスクラッチWikiにも載ってる一般的なレイキャスティングを実装するよ。それをのちのち改善して爆速にしていくからお楽しみに。
スプライトを複製しよう
じゃ、レイキャスティングするスプライトを作るためにスプライト「プレイヤー」を複製しよう。
「レイキャスター」と名付けておこう。
コードはいったんすべて消しておこう。
コスチュームも、「プレイヤー」は不要だから消すよ。ヒットボックスだけ残しておいてね。
コーディングをしよう
緑の旗が押されたらコスチュームを「ヒットボックス」にしておこう。
回転方法を「回転しない」にしよう。
スペースキーが押されたら壁に向かって発射する
一時的にスペースキーが押されたら、っていうタイミングでレイ（光）がキャスト（発射、照射）されるようにするよ。まぁレイっていうか最初はヒットボックスが飛んでいく感じ。
プレイヤーの向きに向ける
この２つのブロックを見つけておいて。
「ステージの背景」っていうドロップボックスから「プレイヤー」「向き」っていう選択肢を選ぼう。
これを組み合わせて置くよ。
で、プレイヤーに行くようにする。
動きをテストする
オッケー、スペース押したら四角がプレイヤーに行ってるね。
光を壁に向かって発射する
ここからループを実装するよ。
条件式は「レベルに触れたら」にして、壁に当たるまで進むようにしていくよ。
歩数はとりあえず４歩ずつ動くようにしようか。
壁に向かうかテストする
よしよし、四角いヒットボックスが壁に向かっていってるね。
ちなみに４歩にした理由
さっき４歩ずつ動くようにしたけど、これはヒットボックスのコスチュームが4 x 4だからなんだ。
壁にめり込んだら戻す
小さいから見えにくいけど、ヒットボックスと壁の距離によっては、ヒットボックスが壁にめりこんでしまうんだ。
そこで、壁から離れるまで後ろに下がるような実装を作るよ。
ループを複製しよう。
条件式を反転して、マイナス1歩動かすようにしよう。
壁でピタッと止まっているかテストする
ミリ単位だから確認しづらいけど、壁でピタッと止まるようになったよ。壁にあたった瞬間に「ピクッ」って下がってる様子が見て取れるかな？
壁に向かって発射するビームの実装に成功した
ブロック定義「_シングル・レイ」を作る
この一連の処理をカスタムブロック定義としてまとめていくよ。画面を再描画せずに実行すればピクってなる動きも抑制できるはずだし、壁までの移動も一瞬になるはずだ。名前は「_シングル・レイ」にしよう！ちょっとかっこいいｗ
ちなみに名前の最初にアンダーバーが付いているのは、「再描画せずに実行する」ブロック定義のマークとして使ってるんだ。こうしておくとパッと見で「再描画ありかなしか」が分かりやすい。
ブロックを移す
今作った一連の流れをまるっと移動しよう。
BEFORE
AFTER
そして移動元にはブロック定義を置いておこう。
一瞬で壁に到達するようになったかテストする
ふっふー♪一瞬で移動するようになったぜい！
壁までビームが一瞬で届くようになった
ビーム発射ぁ！
ヒットボックスが壁に飛ぶだけじゃあ味気ない（？）から、ペンを使ってビームを発射するようにするよ。
画面左下からペンを追加しよう。
ペンっていうのをクリックする。
これでペンの追加はOK。
ペンの初期設定をする
新しいブロックがブロックパレットに追加されたと思うから、その中から「全部消す」ブロックを選んで、スペースキーが押されたときに追加しよう。
そしてペンの太さを、ヒットボックスのサイズである４に設定しよう。
色は適当でいいよ。ここでは水色（５３）にしとく。
ペンで描く
次は定義「_シングル・レイ」にブロックを追加していこう。まず「ペンを下ろす」だ。
定義の最後には「ペンを上げる」を追加だ。
ビームがでるようになったかテストする
よぉし、ビーム発射完成！
プレイヤーから常に発射されるようにする
いまはスペースキーを押したらビームがでるけど、これを常に発射されるようにする。ビーム垂れ流しｗ
メッセージ「レイキャストする」を作る
今まで使ってた「スペースキーが押されたとき」を、今作った「レイキャストするを受け取ったとき」に置き換えよう。
こうなる↓
プレイヤーからメッセージを送る
スプライト「プレイヤー」を開こう。
緑の旗が押されたとき、で使ってる「ずっとループ」の最後でメッセージ「レイキャストする」を送ろう。
↑このスクショが、この先のチュートリアルのものを使ってしまったため「移動する」っていう定義があるけど、気にせず進めてください。今後のチュートリアルで一緒に実装していきます。ご指摘をくれたunagiRocketさん、ありがとうございますm(_ _)m
ビームが常に発射されるかテストする
おおぉ、ビームがずっと発射されるようになったからプレイヤーの動きにピッタリ合ってるね。最高！
プレイヤから常にビームがでるようになった！これを視線として使っていく。
扇状にビームを発射する
このシングル・レイは一本線というか一条の光だよね。最終的にはこのビームを扇状になるようにたくさん出したいから、その処理を作ったあとに、処理をまとめる定義を作るよ。
まずは扇状になるようにカスタマイズしていこう。
シングル・レイをたくさん発射する
ではスプライト「レイキャスター」を開こう
10回繰り返すループで定義「_シングル・レイ」を囲む。
次に5度右に回そう。
これでOK！
新定義「_レイキャストする」を作ろう
スクショだとアンダーバーが抜けてるけど、新定義「_レイキャストする」を再描画せずに実行するように作ろう。
今作った10回繰り返すループをまるっと移すよ。
BEFORE
AFTER
移動元にはこの定義を実行するブロックを置こう。
扇状のビームをテストする
奥義「扇ビーム！」なんちゃって😅
ビームが広がる範囲を管理できるようにする
今は角度を管理しづらいけど、ゲームによっては視野が広かったり狭かったりできると楽しい機能を実装できそうだよね。そこで、ビームが広がる範囲、角度を管理できるようにするよ。
変数「★視野角」を作る
スクショだと★がついてないけど、すべてのスプライト用の変数には名前の前に★をつけておくと分かりやすいからオススメだよ。
グリフパッチさんをはじめとして多くの海外スクラッチャーは、すべてのスプライト用の変数を大文字で書いて、このスプライトのみの変数は小文字で書く、といった工夫をしているよ。でも日本語だと大文字とかないから僕は★で見分けられるようにしてる。
初期値は60にしておこう。
変数のデバッグ表示を右クリックして、スライダーで管理できるようにしよう。
もう一度右クリックして「スライダーの指定範囲を変更」を選ぼう。
30から120に設定しておくとちょうどいいよ。
定義「レイキャストする」で視野角を使う
ループの条件式にこの視野角の値を使おう！
そして右に回す角度を1度にしたら正しく視野角を実現できるぞ！
視野角の範囲にビームが広がるかテストする
やっほぃ！視野角のスライダーを変えるとビームの範囲が変わったね！これで成功だ。
あーでも、ちょっとずれてるの分かる？プレイヤーの右側にビームが傾いてしまっているよね。
これは直しておこうか。
ビームの傾きを直す
視野角を2で割った値を用意するだけで実現できるよ。
これを「右に◯度回す」ブロックにはめて、定義「_レイキャストする」の最初に置こう。
ビームの傾きが直ったかテストする
おけーぃ！ちゃんとプレイヤーを中心にしてビームが広がっているね！よっしゃ。
プレイヤーから出るビームが扇状になった。ちょうど視線が目の前に広がっていく感じ。
3D化するぞ大作戦！
3D化する作戦を伝えるぞ！下の図を見てほしい。
僕らはいまビームを飛ばすことに成功している。ビームは扇状に広がっているので、扇の左端はX座標が-240の地点、右端はX座標が240の地点と決めてしまう。
大切なのは、各X座標のビームの距離なんだ。
描画自体はX座標がマイナス240からプラス240の地点までジックリ描いていくんだけど、そのときにいったいどのくらいの「高さ」の壁を描けばいいのか、それを教えてくれるのが距離なんだ。
ピンとこなくても大丈夫！いますぐ理解する必要はないよ。実装したら理解できた、なんてこともよくあるからね！
変数「x座標」をつくる
ではビームの位置を保持するためにx座標っていう変数を作ろう。もともと青いブロックである名前と同じだから混乱しないようにね。
定義「_レイキャストする」の最初でマイナス240で初期化しよう。一番左端だね。
そしてループの最後にも置いてね。値のところは次に演算をいれるよ。
演算は、「480 / 視野角」だよ。
480はX座標の端から端（-240から240まで）だね。視野角は60だから、実質「480 / 60 = 8」だね。8かぁ。それだといまヒットボックスのサイズが4っていうのに合わせて横に4ずつ描いてるからスキマがあいちゃいそうだけど、まぁ最初は適当でもいいよね。これでいってみよう！
変数「距離」を作る
大事大事と言ってた距離だ。
ペンをいったん外す
定義「_シングル・レイ」にあるペンのブロックを2つともはずそう。
そしてあまり使わないけど、この↓ブロックを探してみて。選択肢から「プレイヤー」を選ぶよ。
これをはめて距離の値にしよう。距離のブロック自体は定義の最後に置くよ。複雑な演算は必要ないからシンプルだね！ふぅ！
変数「高さ」を作ろう
X座標ごとの距離が取れたから、今度は距離によってどの高さからペンを下ろすのかを決めていくよ！もう少しだ！
距離のあとに「4000 / 距離」って演算を入れて設置しよう。4000っていうのは……今は適当な数字を使ってるだけなんだｗ細かいところを詰めるのは後回し大作戦だ（なんそれ）
その下でX座標とY座標をそれぞれ変更しよう。
これでペンを下ろす初期位置に付いた。さっそくペンを下ろそう！
ここから動いた分だけ描画されるぞ。どこまで動くかは、とりあえず単純に高さをマイナス値に反転させた分だけ描こう！
これでペンを上げればOKだ！
テストの前にマップを見えないようにしておこう。スプライト「レベル」を選んで。
幽霊の効果を100にしておこうか。
3D化されたかテストする
ドドドドドッどやぁ！3Dだぁぁぁ！
2Dマップを3D化することに成功した！
まぁまだプレイヤーが見えてたりするんだけどｗでもできたね。そして予想通りスキマが空いてるね〜。まぁこのあたりは直していきましょう。
それに、これってまだ爆速3Dではなくて、よくある普通のレイキャスティングだから、まだまだ満足はしないでくれよ？もちろんもっと高みを目指していくから、一緒に頑張ろう！
まぁきっとピコは喜んでることでしょう……って、あれ？なんか困ったことが起きてるみたいだぞ。次回もチェックしてみてね。
このチュートリアルは世界No.1スクラッチャーとして名高いグリフパッチさんの動画を参考にしているよ。ただし手順を一部変えているところもあるんだ。
- ① 2Dマップを動き回れるようにしよう!
- ② さっそく3D化しちゃうぞ！（いまここ）
- ③ 壁にスキマがあって丸見えじゃん！敵にバレちゃう！
- ④ 部屋が不自然に明るすぎる！陰影を付けよう！
- ⑤ ズームすると空間がゆがんでグニャグニャになっちゃう！
- ⑥ 壁の衝突判定の基本を作ろう
- ⑦ 壁に触れてると進めない！？移動を改善しよう
- ⑧ ついに敵が現れた！距離感の計算ってどうやる！？
- ⑨ 奥行きを実装して真の三次元空間を創る
- ⑩ エンティティに陰影をつける
- ⑪ 敵がプレイヤーに襲いかかる
