奥行きを実装して真の三次元空間を創る（爆速オンライン3Dゲームの作り方 #09）

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

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

エンティティが描画(びょうが)されて、敵(てき)が見(み)えるようになった。でも敵(てき)がいない道(みち)を探(さが)して遠回(とおまわ)りすれば問題(もんだい)ないよね！ってアレ！？壁(かべ)の向(む)こう側(がわ)にいるはずの敵(てき)が見(み)えちゃってる！？これじゃあ速攻(そっこう)で見(み)つかっちゃうじゃんか……ダメダメ！なんとかしないと、しかし壁(かべ)の向(む)こうにいる敵(てき)をどうすれば壁(かべ)の向(む)こうに描画(びょうが)できるのだろうか……あぁなんだか頭(あたま)がこんがらがりそう(T_T)

今回(こんかい)の目標(もくひょう)「奥行(おくゆ)きを実装(じっそう)して奥(おく)から順番(じゅんばん)に描画(びょうが)する」

いまは外見(がいけん)上(じょう)は3Dだけど、実際(じっさい)は目(め)の錯覚(さっかく)でそう見(み)えるだけで、XとYの２次元(じげん)空間(くうかん)に過(す)ぎない。だから壁(かべ)の向(む)こうにナノがいるはずでも、それが反映(はんえい)されないで何(なん)でもかんでも前(まえ)に来(き)ちゃう……これじゃあ壁(かべ)に隠(かく)れながら進(すす)んだり、トーストをくわえた少女(しょうじょ)が角(かく)を曲(ま)がったらイケメンとぶつかるイベントも起(お)こせないよね！（え？いらない？）ということで今回(こんかい)はXとYにくわえてZに相当(そうとう)する３つ目(め)の次元(じげん)、奥行(おくゆ)きを実装(じっそう)していこうと思(おも)う。↓これが目標(もくひょう)の状態(じょうたい)。

マップを見(み)えるようにしておく

このあとの処理(しょり)でいったん見(み)えるようにしといたほうが便利(べんり)なので修正(しゅうせい)しておくね。

幽霊(ゆうれい)をゼロにセットしよう。

CHECK! 壁(かべ)の裏側(うらがわ)に敵(てき)を配置(はいち)したらどうなるかテストする

冒頭(ぼうとう)の漫画(まんが)はいったいどういうことなのか、最初(さいしょ)に現状(げんじょう)を確認(かくにん)しておこう。↓こんな感(かん)じで、エンティティを壁(かべ)の中(なか)に移動(いどう)してみたら分(わ)かるよ。

なんと壁(かべ)の前側(まえがわ)に描画(びょうが)されてしまった！本来(ほんらい)このナノは壁(かべ)の向(む)こう側(がわ)に存在(そんざい)しているのだから、見(み)えてはいけないよね。しかし現(げん)段階(だんかい)では「壁(かべ)の向(む)こう」みたいな概念(がいねん)は存在(そんざい)していないんだ。すべてが手前(てまえ)に描画(びょうが)されてしまう世界(せかい)になっている。ここからは奥行(おくゆ)きを実装(じっそう)して、何(なに)が手前(てまえ)で、何(なに)が奥(おく)にあるのか、という情報(じょうほう)を世界(せかい)に与(あた)えていくよ。

それにはリストを使(つか)った描画(びょうが)の管理(かんり)が必要(ひつよう)になる。さぁ、いよいよ手強(てごわ)い部分(ぶぶん)に差(さ)し掛(か)かってきたぞ。

リストで描画(びょうが)を管理(かんり)する

さっそくリストを使(つか)った描画(びょうが)の仕組(しく)みを作(つく)っていこう。

新(あたら)しいリスト「描画(びょうが)X」を作(つく)る

スクショだと末尾(まつび)にリストって書(か)いてあるけど、リストなのはブロックの色(いろ)で分(わ)かるから余計(よけい)だなと思(おも)い「描画(びょうが)X」という名前(なまえ)に変(か)えました。

新(あたら)しいリスト「描画(びょうが)距離(きょり)」

こちらも末尾(まつび)のリストという文字(もじ)は消(け)しました。

初期(しょき)化(か)しておくよ。

スプライト「レイキャスター」を開(ひら)く

ペン関連(かんれん)のブロックを移動(いどう)する

このブロックをドラッグアンドドロップで、スプライト「ペン」に移動(いどう)しよう。

移動(いどう)したらスプライト「レイキャスター」からは緑(みどり)のペンブロックは消(け)してしまってOKだ。こんな感(かん)じになるはず↓

描画(びょうが)に必要(ひつよう)な情報(じょうほう)をリストに入(い)れる準備(じゅんび)をする

次(つぎ)は定義(ていぎ)「_シングル・レイ」を見(み)つけて。

↓この線(せん)のとこで切(き)り離(はな)してみて。

「レベルカラーに触(ふ)れたら」っていう条件(じょうけん)ブロックを横(よこ)にどけて、↓こんな状態(じょうたい)にしておいて。

定義(ていぎ)「_描画(びょうが)する」を作(つく)る

再(さい)描画(びょうが)せずに実行(じっこう)するにチェック入(い)れてね。引数(ひきすう)が３つもあるんだ。

• タイプ
• X
• 距離(きょり)

定義(ていぎ)「_シングル・レイ」の最後(さいご)で実行(じっこう)しよう。↓このスクショを見(み)て引数(ひきすう)に次(つぎ)の３つを入(い)れておいて。

• タイプ：空白(くうはく)
• X：変数(へんすう)「x座標(ざひょう)」
• 距離(きょり)：変数(へんすう)「距離(きょり)」

条件(じょうけん)ブロックを作(つく)って囲(かこ)もう

いま置(お)いた定義(ていぎ)ブロックを「もし～でなければ」ブロックで囲(かこ)もう。そしてタイプのところにペンの色(いろ)を入(い)れておいて。

定義(ていぎ)「_描画(びょうが)する」の中(なか)で、各(かく)引数(ひきすう)を各(かく)リストに格納(かくのう)するぞ。

残(のこ)りのペン関連(かんれん)ブロックを、スプライト「ペン」に移動(いどう)する

さっき切(き)り離(はな)しておいたペン関連(かんれん)ブロックを、ドラッグアンドドロップでスプライト「ペン」に移動(いどう)しよう。移動(いどう)後(ご)は消(け)しちゃってOKだ。

CHECK! リストにデータが格納(かくのう)されるかテストする

実行(じっこう)すると↓こんな感(かん)じになるぞ。

ペンで描画(びょうが)する

スプライト「ペン」を開(ひら)こう。

さっき準備(じゅんび)したリストの中身(なかみ)を使(つか)って、実際(じっさい)にペンを入(い)れていくぞ。

定義(ていぎ)「_描画(びょうが)する」を作(つく)る

さっきスプライト「レイキャスター」でも同名(どうめい)の定義(ていぎ)を作(つく)ったけど、今度(こんど)はスプライト「ペン」でも作(つく)るよ。引数(ひきすう)はいらないよ。

↓この一連(いちれん)のブロックを追加(ついか)しよう。

「描画(びょうが)Xの長(なが)さ」回(かい)繰(く)り返(かえ)すループを置(お)こう。

変数(へんすう)「行(ぎょう)#」を作(つく)る

行(ぎょう)#《ナンバー》を作(つく)るよ。

ループの直前(ちょくぜん)で、１で初期(しょき)化(か)しておこう。

ループの中(なか)で変数(へんすう)「行(ぎょう)#」を１ずつ加算(かさん)するよ。

定義(ていぎ)「_行(ぎょう)を描画(びょうが)する」を作(つく)る

ここまで作(つく)ったロジックだと、ペンって上(うえ)から下(した)に１行(ぎょう)ずつ描(えが)いていくよね。定義(ていぎ)「_行(ぎょう)を描画(びょうが)する」の行(ぎょう)は、この１行(ぎょう)のことなんだ。おっけぃ。

実行(じっこう)する

ループの中(なか)で実行(じっこう)しよう。実行(じっこう)する場所(ばしょ)はさっき置(お)いた変数(へんすう)「行(ぎょう)#」の前(まえ)に置(お)いてね。

変数(へんすう)「タイプ」を作(つく)る

色々(いろいろ)作(つく)るものが多(おお)いけど、今度(こんど)は「タイプ」っていう変数(へんすう)を作(つく)るよ。

定義(ていぎ)「_ 行(ぎょう)を描画(びょうが)する」の中(なか)でいろいろな値(ね)をいれていくよ。

タイプ

値(ね)は、リスト「描画(びょうが)タイプ」の「行(ぎょう)#」番(ばん)目(め)にしよう。

X座標(ざひょう)

これをまるっと複製(ふくせい)する。

複製(ふくせい)後(ご)に各(かく)値(ね)を調整(ちょうせい)して、X座標(ざひょう)についても同(おな)じようなブロックを作(つく)る。

距離(きょり)

距離(きょり)も作(つく)るよ。複製(ふくせい)しよう。

同(おな)じように各(かく)値(ね)を調整(ちょうせい)しておこう。

移動(いどう)しておいたブロックをくっつける

さっきスプライト「レイキャスター」から移動(いどう)しておいたペン関連(かんれん)ブロックをガチャン！っとくっつけよう。

とりまこれでOK！

メッセージ「ペイントする」を受(う)け取(と)ったとき

テストの前(まえ)にここで定義(ていぎ)「_描画(びょうが)する」を置(お)いておこう。

CHECK!　壊(こわ)れてないかテストする

色々(いろいろ)変(か)えたから、壊(こわ)れてないかテストしておこう。

だいたいOKだね。でもナノが画面(がめん)の端(はし)にいるのが不自然(ふしぜん)な瞬(まじろぎ)間(ま)があるね。ずっと端(はし)っこから監視(かんし)しているみたいだ……これは直(なお)さないと、敵(てき)に見(み)つかっちゃいそうだね。さっき置(お)いた定義(ていぎ)「_描画(びょうが)する」の場所(ばしょ)を変更(へんこう)しよう。↓こんなかんじ。

↓ここに置(お)けばナノが画面(がめん)から消(き)えるはず。ちょっとしたタイミングの問題(もんだい)なんだ。

あと、壁(かべ)のカラーが無(な)くなってたね。定義(ていぎ)「_行(ぎょう)を描画(びょうが)する」で、変数(へんすう)「タイプ」をペンの色(いろ)に設定(せってい)しよう。

CHECK!　ナノが画面(がめん)外(がい)に消(き)えるかテストする

これでナノが画面(がめん)外(がい)にスムーズに消(き)えるかな。

うん、大丈夫(だいじょうぶ)そうだね！ナチュラルな動(うご)きになった。

奥(おく)から順番(じゅんばん)に描画(びょうが)していく

奥行(おくゆ)きを実装(じっそう)するメインの処理(しょり)に取(と)り掛(か)かるよ。3Dで奥行(おくゆ)きを実装(じっそう)するというのはどういうことかと言(い)うと、奥(おく)にあるモノから順番(じゅんばん)に描画(びょうが)していくということなんだ。基本的(きほんてき)には後(あと)から描画(びょうが)されたものほど、前(まえ)に表示(ひょうじ)されるという法則(ほうそく)がある。だから奥(おく)から順番(じゅんばん)に描画(びょうが)すれば、前(まえ)のモノほど前(まえ)に、後(うし)ろのモノほど後(うし)ろに表示(ひょうじ)されるんだ。つまり↓コレが実現(じつげん)できるってこと！

やってみよう！

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

定義(ていぎ)「_レイキャスターを初期(しょき)化(か)する」でダミー値(ち)をリスト「描画(びょうが)距離(きょり)」に追加(ついか)しよう。

残(のこ)りの２リストについても追加(ついか)するブロックを置(お)いておこう。

変数(へんすう)「★描画(びょうが)インデックス」を作(つく)る

インデックスとして使(つか)う変数(へんすう)を用意(ようい)するぞ。

• インデックスってなに？

  インデックスというのはリストの何番目かという数字です。リストじゃなくても例えば図書館の本棚を想像してみて。本棚の5番目にある本のインデックスは５。１９番目にある本のインデックスは１９みたいなイメージ。

  プログラミングだとインデックスという言葉は必須知識の１つだから、もし知らなかったらこの機会に覚えよう。

  ちなみにメジャーなプログラミング言語だとインデックスは１番目が０になる。２番目が１になる。でもスクラッチだと１番目は１だし、２番目は２になってるから注意。

２で初期(しょき)化(か)する。

スプライト「レイキャスター」を開(ひら)く

定義(ていぎ)「_描画(びょうが)する」に「◯まで繰(く)り返(かえ)す」ブロックを置(お)いて、元々(もともと)あったリストに関(かん)するブロックはいったん外(はず)しておこう。

◯まで繰(く)り返(かえ)す、の条件(じょうけん)に使(つか)う演算(えんざん)を用意(ようい)しよう。↓このブロックを準備(じゅんび)して。

この引(ひ)き算(ざん)は「★描画(びょうが)インデックス - 1」を作(つく)っておいて。（スクショ取(と)り忘(わす)れたm(_ _)m）これを「◯ > 距離(きょり)」っていう比較(ひかく)演算(えんざん)の左側(ひだりがわ)にセットしてみよう。

最終的(さいしゅうてき)には↓こんな感(かん)じになるはずだ。

適切(てきせつ)な位置(いち)にインデックスをセットする

使(つか)うブロックはカンタンだけど処理(しょり)は複雑(ふくざつ)なところ。とりあえず実装(じっそう)していこうか。ループの中(なか)で★描画(びょうが)インデックスをマイナス１ずつ変(か)えていこう。

このループの直下(ちょっか)で、もう１つ「◯まで繰(く)り返(かえ)す」ブロックを置(お)こう。

ここの条件(じょうけん)にも比較(ひかく)演算子(えんざんし)を入(い)れる。ただしさっきとは逆向(ぎゃくむ)きの比較(ひかく)をするぞ。「◯ < 距離(きょり)」を置(お)こう。

左側(ひだりがわ)にはシンプルに、リスト「描画(びょうが)距離(きょり)」の「★描画(びょうが)インデックス」番目(つがいめ)、を入(い)れよう。↓この画像(がぞう)をみて上下(じょうげ)の条件(じょうけん)式(しき)が違(ちが)うことを再(さい)確認(かくにん)しておこう。

この中(なか)で変数(へんすう)「★描画(びょうが)インデックス」をプラス１ずつ変(か)えよう。上(うえ)のループとは何(なに)もかも逆(ぎゃく)だね。

この２つのループを通(とお)して変数(へんすう)「★描画(びょうが)インデックス」は適切(てきせつ)な位置(いち)にセットされる。ところで適切(てきせつ)な位置(いち)とはなんだろうか？

適切(てきせつ)な位置(いち)の演算(えんざん)を解説(かいせつ)

読(よ)んでもよくわからん、という人(ひと)は飛(と)ばしてもOK。現時点(げんじてん)で理解(りかい)は必須(ひっす)ではないけど、一応(いちおう)解説(かいせつ)しておく。まず２つのループを作(つく)ったよね。１つ目(め)はインデックスをマイナス１していくループ。２つ目(め)はインデックスをプラス１していくループ。この１つ目(め)のループでは何(なに)をしていたのかを見(み)ていこう。サンプルとして↓こんな感(かん)じのリストがあったとしよう。矢印(やじるし)は距離(きょり)の長(なが)さを表(あらわ)しているよ。

↓★描画(びょうが)インデックスの１つ上(じょう)と、引数(ひきすう)の１つである「距離(きょり)」を比較(ひかく)するんだよね。

↓引数(ひきすう)「距離(きょり)」より、リストの中身(なかみ)が長(なが)かったらループを止(と)めるんだよね。

ここまでが１つ目(め)のループ。これで終(お)わりでもいいんだけど、さらに２つ目(め)のループを作(つく)ったね。↓２つ目(め)では引数(ひきすう)「距離(きょり)」より、リストの中身(なかみ)が短(みじか)かったらループを止(と)めるんだよね。

こうすることで、確実(かくじつ)に描画(びょうが)距離(きょり)リストが「奥(おく)のモノがリストの上(うえ)」に来(く)るようになる。

これこそが今(いま)まで使(つか)っていた「適切(てきせつ)な位置(いち)」の正体(しょうたい)なんだ。

適切(てきせつ)な位置(いち)を各(かく)リストに反映(はんえい)する

このインデックスを使(つか)って、例(れい)の３つのリストに値(ね)をセットしよう。

これで奥行(おくゆ)きを反映(はんえい)した描画(びょうが)の準備(じゅんび)は整(ととの)った！

CHECK! 奥(おく)から描画(びょうが)されるかテストする

このテストはいつもとは違(ちが)う手順(てじゅん)で行(おこな)う。描画(びょうが)は一瞬(いっしゅん)で行(おこな)われるから、目(め)で確認(かくにん)するには工夫(くふう)が必要(ひつよう)なんだ。まずスプライト「ペン」を開(ひら)いてほしい。

いったんプロジェクトを止(と)めるために停止(ていし)ボタンを押(お)そう。

その後(あと)、定義(ていぎ)「_描画(びょうが)する」をクリックしよう。

そうすれば……

こんな感(かん)じでテストできると思(おも)う！奥(おく)からペンで描(えが)かれている様子(ようす)がバッチリわかるね！あーでもちょっと待(ま)って。↓肝心(かんじん)のナノがまだ壁(かべ)の前(まえ)に描画(びょうが)されてしまうみたい。

それもそのはず。奥行(おくゆ)きが実装(じっそう)されたのは壁(かべ)だけであって、まだエンティティ（スタンプ）は何(なに)も変(か)わってないもんね。

スタンプも奥行(おくゆ)きを反映(はんえい)する

エンティティも今(いま)作(つく)ったリストで管理(かんり)されるように直(なお)していこうか！

スプライト「レイキャスター」を開(ひら)く

定義(ていぎ)「_描画(びょうが)する」をドラッグアンドドロップして、スプライト「エンティティ」にコピーしよう。両方(りょうほう)のスプライトに定義(ていぎ)「_描画(びょうが)する」が存在(そんざい)するようにしたいから、消(け)さないでね。

スプライト「エンティティ」を開(ひら)く

定義(ていぎ)「_画面(がめん)を回転(かいてん)させる」で、いまコピーした定義(ていぎ)「_描画(びょうが)する」を実行(じっこう)しよう。

引数(ひきすう)「タイプ」

タイプにはコスチューム番(ばん)号(ごう)を入(い)れる。とりあえず１にしておこうか。

引数(ひきすう)「X」

「相対(そうたい)距離(きょり)X * (★DV / 相対(そうたい)距離(きょり)Y)」という演算(えんざん)を作(つく)ろう。↓この矢印(やじるし)を参考(さんこう)に作(つく)ってみて。

引数(ひきすう)「距離(きょり)」

ここには変数(へんすう)「相対(そうたい)距離(きょり)X」を入(い)れよう。↓最終的(さいしゅうてき)にはこんな感(かん)じ。

そして、この定義(ていぎ)ブロックを条件(じょうけん)ブロックで囲(かこ)んでみて。

条件(じょうけん)式(しき)で、相対(そうたい)距離(きょり)Yがゼロよりも大(おお)きいかどうかを調(しら)べる。

スプライト「ペン」を開(ひら)く

メッセージ「ペイントする」を受(う)け取(と)ったときの処理(しょり)をごっそり外(はず)すよ。横(よこ)にどけておいて。

そして最初(さいしょ)に「隠(かく)す」ブロックを置(お)こう。

定義(ていぎ)「_行(ぎょう)を描画(びょうが)する」を改修(かいしゅう)する

ちょっと複雑(ふくざつ)な改修(かいしゅう)作業(さぎょう)をするよ。いまって↓こんな感(かん)じだよね。

これを「ペンの明(あか)るさ」で切(き)り離(はな)してから、変数(へんすう)「高(たか)さ」のブロックを、変数(へんすう)「距離(きょり)」の下(した)に持(も)ってきて。↓こんなかんじにする。

変数(へんすう)「高(たか)さ」ブロックの直下(ちょっか)に条件(じょうけん)ブロックを挟(はさ)もう。

条件(じょうけん)式(しき)でタイプが１０未満(みまん)かどうか調(しら)べる。

定義(ていぎ)「_エンティティをスタンプする」を作(つく)る

さっき『メッセージ「ペイントする」を受(う)け取(と)ったとき』から外(はず)しておいたブロック群(ぐん)をここにくっつけよう。

↓こんなかんじになるよ。

これを加工(かこう)していく。まず距離(きょり)と高(たか)さの処理(しょり)は消(け)しちゃって。

さらに最後(さいご)の「ドラッグできるようにする」がある場合(ばあい)は消(け)しちゃおう。

そしてこの定義(ていぎ)を、さっき追加(ついか)した条件(じょうけん)ブロックの中(なか)で実行(じっこう)する。

ココ以降(いこう)は壁(かべ)を描画(びょうが)する処理(しょり)になるから、エンティティをスタンプする場合(ばあい)は処理(しょり)をここで止(と)めちゃおう！

なんか加工(かこう)しまくったら結局(けっきょく)くっつけたブロックのほとんどを外(はず)して、いったん↓ここまでシンプルにしてもらったほうが分(わ)かりやすいかも……。

あらためてX座標(ざひょう)とY座標(ざひょう)をセットしていこう。YはゼロでOK。

そしてペンのスタンプブロックを実行(じっこう)する。

CHECK! ナノが壁(かべ)に隠(かく)れるようになったかテストする

やっほーーーい！ナノが壁(かべ)の向(む)こう側(がわ)に描画(びょうが)されたぁ！！長(なが)かったね……ｗ

まとめ

今回(こんかい)は奥行(おくゆ)きを実装(じっそう)するのがメインだったね。しかしこれで3D空間(くうかん)が真(しん)の意味(いみ)で3Dになったよ。XとYと奥行(おくゆ)き、この３つの次元(じげん)がそろって始(はじ)めて3D（３次元(じげん)）だからね。ふぅー！これでスクラッチキャット氏(し)も壁(かべ)に隠(かく)れながらスターを探(さが)せるに違(ちが)いない。っと、あれ？なんかスクラッチキャットが迷子(まいご)になってない！？なんてこった！次回(じかい)もチェックしてみてくれ。

グリフパッチさんの動画(どうが)

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