3D空間に敵を描画する方法…遠近感もバッチリ！（爆速オンライン3Dゲームの作り方 #08）

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

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

どこを探(さが)しても何(なに)も無(な)い！それもそのはず、そもそもこの3D空間(くうかん)には何(なに)も出現(しゅつげん)するような実装(じっそう)がされてない。なんてこった！これじゃあただ散歩(さんぽ)してるだけじゃないか。でもアイテムを出現(しゅつげん)させるには、その前(まえ)に敵(てき)も出現(しゅつげん)させないといけないらしい。背(せ)に腹(はら)は変(か)えられない！いっちょやってみっか！

今回(こんかい)の目標(もくひょう)「敵(てき)を描画(びょうが)する」

今(いま)までは３D空間(くうかん)の描画(びょうが)やそこを自由(じゆう)に動(うご)き回(まわ)ることだけに集中(しゅうちゅう)してきた。ここからはいよいよ敵(てき)やアイテムを出現(しゅつげん)させることに注力(ちゅうりょく)していく！今回(こんかい)は次(つぎ)のことに取(と)り組(く)む(む)ぞ。

• 3D空間(くうかん)でどうやってプレイヤーと相手(あいて)の距離(きょり)を測(はか)るか
• 距離(きょり)に合(あ)わせて敵(てき)を遠近感(えんきんかん)を反映(はんえい)させて描画(びょうが)する方法(ほうほう)

どっちもワクワクする課題(かだい)だよね！3Dゲームの至上(しじょう)命題(めいだい)と言(い)っても過言(かごん)ではないマスターしがいのある挑戦(ちょうせん)になるぜ！

メインループに「エンティティの計算(けいさん)をする」を追加(ついか)する

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

メインループ（ゲームループともいう）のずっとブロックに、新(あたら)しいメッセージを追加(ついか)しよう。メッセージ名(めい)は「エンティティを計算(けいさん)する」にしておこうか。

スプライト「エンティティ」を作(つく)る

新(しん)スプライトを作(つく)るよ！

スプライト名(めい)は「エンティティ」だよ。

プレイヤーのヒットボックスをコピーしておく

スプライト「プレイヤー」を開(ひら)こう。プレイヤーのコスチュームからヒットボックスをドラッグアンドドロップして、エンティティにコピーしておこう。

プレイヤーを開(ひら)いたついでに、プレイヤーの幽霊(ゆうれい)効果(こうか)をいったんゼロにして見(み)えるようにしておこう。そのほうがこの後(あと)の処理(しょり)が分(わ)かりやすいよ。

エンティティのコスチュームを調整(ちょうせい)する

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

ヒットボックスがあるはずだから、デフォルトのコスチュームは消(け)してしまおう。

コーディング

コーディングに移(うつ)るよ。緑(みどり)の旗(はた)が押(お)されたときを置(お)く。

まず回転(かいてん)方法(ほうほう)を回転(かいてん)しないにしてから、大(おお)きさを225%くらいに調整(ちょうせい)しようか。

次(つぎ)は適当(てきとう)。座標(ざひょう)をプレイヤーから見(み)える位置(いち)にしよう。単純(たんじゅん)に、プレイしたら見(み)えるほうがデバッグしやすいからだよ。

敵(てき)との距離(きょり)を測(はか)る

敵(てき)との距離(きょり)を3D空間(くうかん)上(じょう)で計算(けいさん)する必要(ひつよう)がある。理屈(りくつ)はカンタンなんだ。計算(けいさん)が複雑(ふくざつ)なだけで。。。💦いったん3Dではなくて2Dで考(かんが)えてみようか。平面(へいめん)にしてからプレイヤーの目線(めせん)上(じょう)に来(く)るように回転(かいてん)させる。そしたらあとはお互(たが)いの相対(そうたい)距離(きょり)を測(はか)るだけでOK。

うん、どうやって？ｗ大丈夫(だいじょうぶ)、一緒(いっしょ)に見(み)ていこうぜ！

変数(へんすう)「相対(そうたい)距離(きょり)X」「相対(そうたい)距離(きょり)Y」を作(つく)る

まずはメッセージ「エンティティの計算(けいさん)をする」を受(う)け取(と)ったとき、を置(お)くよ。

変数(へんすう)を作(つく)るよ。

まずはXから計算(けいさん)していこう。↓こんなブロックを用意(ようい)して矢印(やじるし)を参考(さんこう)に当(あ)てはめて。

これを相対(そうたい)距離(きょり)Xにセットしよう。

これを複製(ふくせい)しよう。

相対(そうたい)距離(きょり)Yも同(おな)じような感(かん)じで整(ととの)える。3か所(しょ)ともX座標(ざひょう)のところがY座標(ざひょう)に変(か)わってるから注意(ちゅうい)。

定義(ていぎ)「_画面(がめん)を回転(かいてん)させる」を作(つく)る

定義(ていぎ)「_画面(がめん)を回転(かいてん)させる」を作(つく)ろう！この定義(ていぎ)の名前(なまえ)はもっと正確(せいかく)に言(い)うなら「_画面(がめん)を回転(かいてん)させるのに必要(ひつよう)な値(ね)を用意(ようい)する」って感(かん)じ。実際(じっさい)に回転(かいてん)させるわけではないので混乱(こんらん)しないように。で、ブロック定義(ていぎ)作(つく)るところのスクショ取(と)り忘(わす)れた（笑）この下方(かほう)のスクショにあるハットブロックを参考(さんこう)に作(つく)ってほしい！画面(がめん)を再(さい)描画(びょうが)せずに実行(じっこう)するにチェックして、引数(ひきすう)としてXとYをもたせてる。

相対(そうたい)距離(きょり)Xの算出(さんしゅつ)

まずは相対(そうたい)距離(きょり)Xだ。

X方向(ほうこう)の回転(かいてん)

回転(かいてん)みたいな曲線(きょくせん)の動(うご)きの計算(けいさん)によく使(つか)われるのは三角(さんかく)関数(かんすう)だ。ここでも「Ｘ * ★カメラの角度(かくど)のcosコサイン 」という演算(えんざん)を作(つく)る。

↓こんなかんじ。

Y方向(ほうこう)の回転(かいてん)

今度(こんど)はsinサインを使(つか)ってY方向(ほうこう)の回転(かいてん)を導(みちび)いていく。

↓こんな感(かん)じ。

X方向(ほうこう)の回転(かいてん)と、Y方向(ほうこう)の回転(かいてん)を組(く)み合(あ)わせる

引(ひ)き算(ざん)ブロックに各(かく)演算(えんざん)をはめよう。

これを変数(へんすう)「相対(そうたい)距離(きょり)X」にセットする。

相対(そうたい)距離(きょり)Yの算出(さんしゅつ)

今度(こんど)は足(た)し算(ざん)ブロックを相対(そうたい)距離(きょり)Ｙにセットするところから始(はじ)めよう。

この足(た)し算(ざん)にまた三角(さんかく)関数(かんすう)を使(つか)った回転(かいてん)の計算(けいさん)を入(い)れていくよ。

X方向(ほうこう)の回転(かいてん)

さっき作(つく)った↓この掛(か)け算(ざん)のあたりを右(みぎ)クリックして複製(ふくせい)を押(お)そう。

そしてcosコサインのところをsinサインに変(か)えて足(た)し算(ざん)の左側(ひだりがわ)にはめよう。

Y方向(ほうこう)の回転(かいてん)

次(つぎ)はＹで作(つく)った掛(か)け算(ざん)のあたりを右(みぎ)クリックして複製(ふくせい)しよう。

sinサインのところをcosコサインに変(か)えてから足(た)し算(ざん)の右側(みぎがわ)にはめよう。

↓こんな感(かん)じに仕上(しあ)がる。

よぉし、ちょっとヘビーな操作(そうさ)が続(つづ)いたね。この定義(ていぎ)はいったんここまでにして、別(べつ)のスプライトに取(と)り掛(か)かろう。

スプライト「ペン」を作(つく)る

新(あたら)しいスプライトを作(つく)るよ。

コスチュームを選(えら)ぶ。

どれがいい？ここでは怒(いか)ってるナノを選(えら)んでみたよ。

スプライト名(めい)は「ペン」だ。

コスチュームを3D空間(くうかん)用(よう)にリサイズする

このまま3D空間(くうかん)に描画(びょうが)すると、ナノが浮遊(ふゆう)してるみたいに地面(じめん)が足(あし)についてない感(かん)じになっちゃう。そこで一定(いってい)の法則(ほうそく)でナノを調整(ちょうせい)《リサイズ》していく。

ナノをグループ化(か)する

まずは全(ぜん)選択(せんたく)して、

グループ化(か)しておこう。

正方形(せいほうけい)を描(えが)く

四角形(しかくけい)ツールを選(えら)ぶ。

200 x 200の正方形(せいほうけい)を描(えが)こう。コスのサムネを見(み)るとサイズが分(わ)かるよ。

正方形(せいほうけい)が描(えが)けたら、最(さい)背面(はいめん)にレイヤーを下(さ)げよう。ナノが見(み)えるはず。

↓こんな感(かん)じ。

選択(せんたく)ツールを選(えら)ぶ。

ナノをクリックすれば、グループ化(か)してあるからナノだけ選択(せんたく)できるはずだ。ナノだけ正方形(せいほうけい)の下辺(かへん)に足(あし)が着(つ)くようにドラッグしよう。

十字(じゅうじ)を描(えが)く

直線(ちょくせん)ツールを選(えら)ぼう。

正方形(せいほうけい)の真(ま)ん中(なか)で横(よこ)線(せん)を引(ひ)く。

真(ま)ん中(なか)で縦線(じゅうせん)も引(ひ)いておこう。

選択(せんたく)ツールを選(えら)ぶ。

ナノを選択(せんたく)する。角(かく)の点(てん)をドラッグして、ナノのサイズを小(ちい)さくしよう。ちょうど頭(あたま)が横線(おうせん)になるくらいまで小(ちい)さくして、ナノの眉間(みけん)《みけん》が縦線(じゅうせん)あたりにくるように調整(ちょうせい)して。

ガイドラインを透明(とうめい)にする

まずナノを含(ふく)めないように気(き)をつけながら、正方形(せいほうけい)と十字(じゅうじ)線(せん)を選択(せんたく)する。

グループ化(か)する。

塗(ぬ)りつぶしを選(えら)んで、透明(とうめい)化(か)ボタンをクリックする。

枠線(わくせん)を選(えら)んで、透明(とうめい)化(か)ボタンをクリックする。

スッキリ！

コスチューム１は消(け)しとく。

よし！これでコスチュームの作業(さぎょう)は完了(かんりょう)だ。

敵(てき)を3D空間(くうかん)に描画(びょうが)する

ここまでに、相対(そうたい)距離(きょり)XYの算出(さんしゅつ)と、描画(びょうが)するコスチュームの用意(ようい)を進(すす)めてきた。ここからいよいよ直線距離(ちょくせんきょり)を算出(さんしゅつ)して3D空間(くうかん)にプレイヤー以外(いがい)の存在(そんざい)を作(つく)り出(だ)す具体的(ぐたいてき)なステップに入(はい)る。

メッセージ「ペイントする」

新(あたら)しいメッセージ「ペイントする」を作(つく)る。

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

新(あたら)しい変数(へんすう)「距離(きょり)」を作(つく)る。

メッセージを受(う)け取(と)ったところで、距離(きょり)に「エンティティの相対(そうたい)距離(きょり)Ｙ」をセットする。さっき計算(けいさん)した値(ね)だ。

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

高(たか)さの計算(けいさん)は少(すこ)し複雑(ふくざつ)だ。以前(いぜん)計算(けいさん)してあった★DVを使(つか)うぞ。↓これらのブロックを用意(ようい)して矢印(やじるし)を参考(さんこう)に組(く)み立(た)ててみて。

高(たか)さにセットしよう。

さらに、大(おお)きさを「高(たか)さ」%にするぞ。

高(たか)さに使(つか)った演算(えんざん)の掛(か)け算(ざん)あたりを右(みぎ)クリックして複製(ふくせい)しよう。

10のところに、エンティティの相対(そうたい)距離(きょり)Xをはめよう。

↑この演算(えんざん)ブロックを↓X座標(ざひょう)に割(わ)り当(あ)てよう。Ｙ座標(ざひょう)には、ゼロを入(い)れておいて。

メインループに「ペイントする」を追加(ついか)する

ペイントするというメッセージも、ゲームのメインメッセージを集約(しゅうやく)してあるプレイヤー（のずっとループ）から送(おく)ろう。

メッセージ「ペイントする」を送(おく)ろう。

CHECK! ナノが見(み)えるかテストする

3D空間(くうかん)に、ナノが、

来(き)たぁーーー！

まとめ

今回(こんかい)はすっごいスキルを詰(つ)め込(こ)んだ。キーになったのは相対(そうたい)距離(きょり)の算出(さんしゅつ)と、それを使(つか)った描画(びょうが)処理(しょり)だったね。距離(きょり)から高(たか)さを導(みちび)き出(だ)すところで遠近感(えんきんかん)を実現(じつげん)できたところは感動的(かんどうてき)スクラッチだった。学(まな)びをまとめておこう。

• 3D空間(くうかん)でどうやってプレイヤーと相手(あいて)の距離(きょり)を測(はか)るのに、相対(そうたい)距離(きょり)を計算(けいさん)することがわかった
• 相対(そうたい)距離(きょり)を使(つか)って距離(きょり)を導(みちび)き出(だ)し、さらに高(たか)さを計算(けいさん)することで遠近感(えんきんかん)を出(だ)すことができた

よしよし！これでピコの盗(ぬす)まれた家宝(かほう)「スター」も描画(びょうが)する準備(じゅんび)が整(ととの)ったかな！？っとアレ？なんだか大変(たいへん)なことになってるぞ！スクラッチキャットが大(だい)ピンチに陥(おちい)ってしまったみたいだ！次回(じかい)もチェックしてみてね！

グリフパッチさんの動画(どうが)を参考(さんこう)にしています

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