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

スターター作品

リミックスする作品

今回の完成サンプル

Scratchへ

ゴンザレスからゲームクリエイターへの挑戦状

どこを探しても何も無い！それもそのはず、そもそもこの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スクラッチャーとして名高いグリフパッチさんの動画を参考にしているよ。ただし手順を一部変えているところもあるんだ。