さっそく3D迷宮に突入だ！爆速オンライン3Dゲームの作り方②

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

ゴンザレスからゲームクリエイターへの挑戦(ちょうせん)状(じょう)

2Dのマップを手(て)に入(はい)れたけど、これじゃあゴンザレスがいる3D迷宮(めいきゅう)にはたどり着(つ)かない！悲嘆(ひたん)に暮(く)れるピコにスクラッチキャットが差(さ)し出(だ)した希望(きぼう)の光(ひか)り、それがペンツール！これをつかって2Dのマップを3D化(か)できるとスクラッチキャットは豪語(ごうご)する。果(は)たしてその手法(しゅほう)とは！？

今回(こんかい)の目標(もくひょう)「3D化(か)する！」

なんともう3D化(ばか)しちゃうぞ。まずはオーソドックスなよくある3Dを作(つく)る。これはスクラッチWIKIにも乗(の)っている基本的(きほんてき)なレイキャスティングという手法(しゅほう)になる。でもこれが爆速(ばくそく)3Dの下地(したじ)になるから大事(だいじ)。今回(こんかい)の完成(かんせい)目標(もくひょう)となる動画(どうが)を確認(かくにん)しておこう。

うぉお！3Dっぽい動(うご)きになってるよね！この第(だい)二回(かい)チュートリアルでここまで実装(じっそう)が進(すす)む(む)よ。楽(たの)しんでいこうぜ！

スプライト「レイキャスター」を作(つく)る

3Dといえばレイキャスティングという手法(しゅほう)と、レイトレーシングという手法(しゅほう)があるんだ。レイトレーシングというのはマイクラみたいな本格的(ほんかくてき)な3Dゲームで採用(さいよう)されている精緻(せいち)《せいち》だけどめっちゃ重(おも)たい手法(しゅほう)。スクラッチではもう１つのレイキャスティングという手法(しゅほう)を使(つか)っていくよ。比較的(ひかくてき)軽(かる)いけど、普通(ふつう)に実装(じっそう)しただけではスクラッチで3Dゲームを作(つく)るのは厳(きび)しいと感(かん)じる重(おも)さ。とりあえず重(おも)たいけどスクラッチWikiにも載(の)ってる一般的(いっぱんてき)なレイキャスティングを実装(じっそう)するよ。それをのちのち改善(かいぜん)して爆速(ばくそく)にしていくからお楽(たの)しみに。

スプライトを複製(ふくせい)しよう

じゃ、レイキャスティングするスプライトを作(つく)るためにスプライト「プレイヤー」を複製(ふくせい)しよう。

「レイキャスター」と名付(なづ)けておこう。

コードはいったんすべて消(け)しておこう。

コスチュームも、「プレイヤー」は不要(ふよう)だから消(け)すよ。ヒットボックスだけ残(のこ)しておいてね。

コーディングをしよう

緑(みどり)の旗(はた)が押(お)されたらコスチュームを「ヒットボックス」にしておこう。

回転(かいてん)方法(ほうほう)を「回転(かいてん)しない」にしよう。

スペースキーが押(お)されたら壁(かべ)に向(む)かって発射(はっしゃ)する

一時的(いちじてき)にスペースキーが押(お)されたら、っていうタイミングでレイ（光(ひかり)）がキャスト（発射(はっしゃ)、照射(しょうしゃ)）されるようにするよ。まぁレイっていうか最初(さいしょ)はヒットボックスが飛(と)んでいく感(かん)じ。

プレイヤーの向(む)きに向(む)ける

この２つのブロックを見(み)つけておいて。

「ステージの背景(はいけい)」っていうドロップボックスから「プレイヤー」「向(む)き」っていう選択肢(せんたくし)を選(えら)ぼう。

これを組(く)み合(あ)わせて置(お)くよ。

で、プレイヤーに行(い)くようにする。

動(うご)きをテストする

オッケー、スペース押(お)したら四角(しかく)がプレイヤーに行(い)ってるね。

光(ひかり)を壁(かべ)に向(む)かって発射(はっしゃ)する

ここからループを実装(じっそう)するよ。

条件(じょうけん)式(しき)は「レベルに触(ふ)れたら」にして、壁(かべ)に当(あ)たるまで進(すす)む(む)ようにしていくよ。

歩数(ほすう)はとりあえず４歩(ほ)ずつ動(うご)くようにしようか。

壁(かべ)に向(む)かうかテストする

よしよし、四角(しかく)いヒットボックスが壁(かべ)に向(む)かっていってるね。

ちなみに４歩(ほ)にした理由(りゆう)

さっき４歩(ほ)ずつ動(うご)くようにしたけど、これはヒットボックスのコスチュームが4 x 4だからなんだ。

壁(かべ)にめり込(こ)んだら戻(もど)す

小(ちい)さいから見(み)えにくいけど、ヒットボックスと壁(かべ)の距離(きょり)によっては、ヒットボックスが壁(かべ)にめりこんでしまうんだ。

そこで、壁(かべ)から離(はな)れるまで後(うし)ろに下(さ)がるような実装(じっそう)を作(つく)るよ。ループを複製(ふくせい)しよう。

条件(じょうけん)式(しき)を反転(はんてん)して、マイナス1歩(ほ)動(うご)かすようにしよう。

壁(かべ)でピタッと止(と)まっているかテストする

ミリ単位(たんい)だから確認(かくにん)しづらいけど、壁(かべ)でピタッと止(と)まるようになったよ。壁(かべ)にあたった瞬間(しゅんかん)に「ピクッ」って下(さ)がってる様子(ようす)が見(み)て取(と)れるかな？

ブロック定義(ていぎ)「_シングル・レイ」を作(つく)る

この一連(いちれん)の処理(しょり)をカスタムブロック定義(ていぎ)としてまとめていくよ。画面(がめん)を再(さい)描画(びょうが)せずに実行(じっこう)すればピクってなる動(うご)きも抑制(よくせい)できるはずだし、壁(かべ)までの移動(いどう)も一瞬(いっしゅん)になるはずだ。名前(なまえ)は「_シングル・レイ」にしよう！ちょっとかっこいいｗ

ブロックを移(うつ)す

今(いま)作(つく)った一連(いちれん)の流(なが)れをまるっと移動(いどう)しよう。

BEFORE

AFTER

そして移動(いどう)元(もと)にはブロック定義(ていぎ)を置(お)いておこう。

一瞬(いっしゅん)で壁(かべ)に到達(とうたつ)するようになったかテストする

ふっふー♪一瞬(いっしゅん)で移動(いどう)するようになったぜい！

ビーム発射(はっしゃ)ぁ！

ヒットボックスが壁(かべ)に飛(と)ぶだけじゃあ味気(あじけ)ない（？）から、ペンを使(つか)ってビームを発射(はっしゃ)するようにするよ。画面(がめん)左下(ひだりした)からペンを追加(ついか)しよう。

ペンっていうのをクリックする。

これでペンの追加(ついか)はOK。

ペンの初期(しょき)設定(せってい)をする

新(あたら)しいブロックがブロックパレットに追加(ついか)されたと思(おも)うから、その中(なか)から「全部(ぜんぶ)消(け)す」ブロックを選(えら)んで、スペースキーが押(お)されたときに追加(ついか)しよう。

そしてペンの太(ふと)さを、ヒットボックスのサイズである４に設定(せってい)しよう。

色(いろ)は適当(てきとう)でいいよ。ここでは水色(みずいろ)（５３）にしとく。

ペンで描(えが)く

次(つぎ)は定義(ていぎ)「_シングル・レイ」にブロックを追加(ついか)していこう。まず「ペンを下(お)ろす」だ。

定義(ていぎ)の最後(さいご)には「ペンを上(あ)げる」を追加(ついか)だ。

ビームがでるようになったかテストする

よぉし、ビーム発射(はっしゃ)完成(かんせい)！

プレイヤーから常(つね)に発射(はっしゃ)されるようにする

いまはスペースキーを押(お)したらビームがでるけど、これを常(つね)に発射(はっしゃ)されるようにする。ビーム垂(た)れ流(なが)しｗ

メッセージ「レイキャストする」を作(つく)る

今(いま)まで使(つか)ってた「スペースキーが押(お)されたとき」を、今(いま)作(つく)った「レイキャストするを受(う)け取(と)ったとき」に置(お)き換(か)えよう。

こうなる↓

プレイヤーからメッセージを送(おく)る

スプライト「プレイヤー」を開(ひら)こう。

緑(みどり)の旗(はた)が押(お)されたとき、で使(つか)ってる「ずっとループ」の最後(さいご)でメッセージ「レイキャストする」を送(おく)ろう。

ビームが常(つね)に発射(はっしゃ)されるかテストする

おおぉ、ビームがずっと発射(はっしゃ)されるようになったからプレイヤーの動(うご)きにピッタリ合(あ)ってるね。最高(さいこう)！

扇状(せんじょう)にビームを発射(はっしゃ)する

このシングル・レイは一本(ほん)線(せん)というか一条(ひとすじ)の光(ひかり)だよね。最終的(さいしゅうてき)にはこのビームを扇状(せんじょう)になるようにたくさん出(だ)したいから、その処理(しょり)を作(つく)ったあとに、処理(しょり)をまとめる定義(ていぎ)を作(つく)るよ。まずは扇状(せんじょう)になるようにカスタマイズしていこう。

シングル・レイをたくさん発射(はっしゃ)する

ではスプライト「レイキャスター」を開(ひら)こう

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 / 視野(しや)角(かく)」だよ。

変数(へんすう)「距離(きょり)」を作(つく)る

大事(だいじ)大事(だいじ)と言(い)ってた距離(きょり)だ。

ペンをいったん外(はず)す

定義(ていぎ)「_シングル・レイ」にあるペンのブロックを2つともはずそう。

そしてあまり使(つか)わないけど、この↓ブロックを探(さが)してみて。選択肢(せんたくし)から「プレイヤー」を選(えら)ぶよ。

これをはめて距離(きょり)の値(ね)にしよう。距離(きょり)のブロック自体(じたい)は定義(ていぎ)の最後(さいご)に置(お)くよ。複雑(ふくざつ)な演算(えんざん)は必要(ひつよう)ないからシンプルだね！ふぅ！

変数(へんすう)「高(たか)さ」を作(つく)ろう

X座標(ざひょう)ごとの距離(きょり)が取(と)れたから、今度(こんど)は距離(きょり)によってどの高(たか)さからペンを下(お)ろすのかを決(き)めていくよ！もう少(すこ)しだ！

距離(きょり)のあとに「4000 / 距離(きょり)」って演算(えんざん)を入(い)れて設置(せっち)しよう。4000っていうのは……今(いま)は適当(てきとう)な数字(すうじ)を使(つか)ってるだけなんだｗ細(こま)かいところを詰(つ)めるのは後回(あとまわ)し大作(たいさく)戦(せん)だ（なんそれ）

その下(した)でX座標(ざひょう)とY座標(ざひょう)をそれぞれ変更(へんこう)しよう。

これでペンを下(お)ろす初期(しょき)位置(いち)に付(つ)いた。さっそくペンを下(お)ろそう！

ここから動(うご)いた分(ぶん)だけ描画(びょうが)されるぞ。どこまで動(うご)くかは、とりあえず単純(たんじゅん)に高(たか)さをマイナス値(ち)に反転(はんてん)させた分(ぶん)だけ描(えが)こう！

これでペンを上(あ)げればOKだ！

テストの前(まえ)にマップを見(み)えないようにしておこう。スプライト「レベル」を選(えら)んで。

幽霊(ゆうれい)の効果(こうか)を100にしておこうか。

3D化(ばか)されたかテストする

ドドドドドッどやぁ！3Dだぁぁぁ！ まぁまだプレイヤーが見(み)えてたりするんだけどｗでもできたね。そして予想通(よそうどお)りスキマが空(あ)いてるね～。まぁこのあたりは直(なお)していきましょう。それに、これってまだ爆速(ばくそく)3Dではなくて、よくある普通(ふつう)のレイキャスティングだから、まだまだ満足(まんぞく)はしないでくれよ？もちろんもっと高(たか)みを目指(めざ)していくから、一緒(いっしょ)に頑張(がんば)ろう！まぁきっとピコは喜(よろこ)んでることでしょう……って、あれ？なんか困(こま)ったことが起(お)きてるみたいだぞ。次回(じかい)もチェックしてみてね。このチュートリアルは世界(せかい)No.1スクラッチャーとして名高(なだか)いグリフパッチさんの動画(どうが)を参考(さんこう)にしているよ。ただし手順(てじゅん)を一部(いちぶ)変(か)えているところもあるんだ。