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

3D空間に敵を描画する方法…遠近感もバッチリ!(爆速オンライン3Dゲームの作り方 #08)
グリフパッチ(動画)
ok-scratch(執筆)

和訳解説は動画作者のグリフパッチさんご本人から許可をいただいて掲載しております。
チャンネルはYOUTUBE ( by griffpatch )からどうぞ。

ついに敵が現れた!距離も遠近感も正確に描画していく
スターター
プロジェクト
リミックス用プロジェクトへ
難しさ

任意)自分の作業中のスクラッチ作品URLを記録しておこう!再開するときに便利だよ。

LOADING...

※ この記録は今使ってるPCに保存されます。別のPCで作業するときは表示されません。

スクラッチに挑戦している皆さん、どうも!スクラッチコーチです。

ゴンザレスからの挑戦状

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

今回の目標「敵を描画する」

今までは3D空間の描画やそこを自由に動き回ることだけに集中してきた。ここからはいよいよ敵やアイテムを出現させることに注力していく!

今回は次のことに取り組むぞ。

  • 3D空間でどうやってプレイヤーと相手の距離を測るか
  • 距離に合わせて敵を遠近感を反映させて描画する方法

どっちもワクワクする課題だよね!3Dゲームの至上命題と言っても過言ではないマスターしがいのある挑戦になるぜ!

メインループに「エンティティの計算をする」を追加する

スプライト「プレイヤー」を開こう。

メインループ(ゲームループともいう)のずっとブロックに、新しいメッセージを追加しよう。

メッセージ名は「エンティティを計算する」にしておこうか。

スプライト「エンティティ」を作る

新スプライトを作るよ!

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

ok-scratch ok-scratch

エンティティというのは、アイテムもエネミーも含めた名前なんだけど、ぶっちゃけグリフパッチさんが「これエンティティじゃなくてエネミーで良かったかも」って言ってるので、エンティティという名前だけど敵のスプライトとして使っていく。まぁとりあえず名前はエンティティにしておこう。今後自分のオリジナル3D作品を作るときはエネミーにしてもいいかも。

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

スプライト「プレイヤー」を開こう。

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

プレイヤーを開いたついでに、プレイヤーの幽霊効果をいったんゼロにして見えるようにしておこう。そのほうがこの後の処理が分かりやすいよ。

エンティティのコスチュームを調整する

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

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

コーディング

コーディングに移るよ。

緑の旗が押されたときを置く。

まず回転方法を回転しないにしてから、大きさを225%くらいに調整しようか。

次は適当。座標をプレイヤーから見える位置にしよう。単純に、プレイしたら見えるほうがデバッグしやすいからだよ。

敵との距離を測る

敵との距離を3D空間上で計算する必要がある。理屈はカンタンなんだ。計算が複雑なだけで。。。💦

いったん3Dではなくて2Dで考えてみようか。平面にしてからプレイヤーの目線上に来るように回転させる。そしたらあとはお互いの相対距離を測るだけでOK。

うん、どうやって?w

大丈夫、一緒に見ていこうぜ!

変数「相対距離X」「相対距離Y」を作る

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

変数を作るよ。

まずはXから計算していこう。↓こんなブロックを用意して矢印を参考に当てはめて。

これを相対距離Xにセットしよう。

これを複製しよう。

相対距離Yも同じような感じで整える。3か所ともX座標のところがY座標に変わってるから注意。

定義「_画面を回転させる」を作る

この定義の名前はもっと正確に言うなら「_画面を回転させるのに必要な値を用意する」って感じ。実際に回転させるわけではないので混乱しないように。

エンティティの計算をするところで実行しよう!

ok-scratch ok-scratch

ここのスクショ掲載し忘れていました。ご指摘をくれたmaple_tayamaさん、ありがとう!!

相対距離Xの算出

まずは相対距離Xだ。

X方向の回転

回転みたいな曲線の動きの計算によく使われるのは三角関数だ。ここでも「X * ★カメラの角度のcosコサイン 」という演算を作る。

↓こんなかんじ。

Y方向の回転

今度はsinサインを使ってY方向の回転を導いていく。

↓こんな感じ。

X方向の回転と、Y方向の回転を組み合わせる

引き算ブロックに各演算をはめよう。

これを変数「相対距離X」にセットする。

相対距離Yの算出

今度は足し算ブロックを相対距離Yにセットするところから始めよう。

この足し算にまた三角関数を使った回転の計算を入れていくよ。

X方向の回転

さっき作った↓この掛け算のあたりを右クリックして複製を押そう。

そしてcosコサインのところをsinサインに変えて足し算の左側にはめよう。

Y方向の回転

次はYで作った掛け算のあたりを右クリックして複製しよう。

sinサインのところをcosコサインに変えてから足し算の右側にはめよう。

↓こんな感じに仕上がる。

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

相手との距離を測るために必要な相対距離を確保した!

スプライト「ペン」を作る

新しいスプライトを作るよ。

コスチュームを選ぶ。

どれがいい?ここでは怒ってるナノを選んでみたよ。

スプライト名は「ペン」だ。

ok-scratch ok-scratch

このペンというスプライトは、さっきのエンティティと密接に関係するスプライトなんだ。ペンは見た目を描画するスプライトで、エンティティは動き方を管理するスプライトになる。

コスチュームを3D空間用にリサイズする

このまま3D空間に描画すると、ナノが浮遊してるみたいに地面が足についてない感じになっちゃう。

そこで一定の法則でナノを調整リサイズしていく。

ナノをグループ化する

まずは全選択して、

グループ化しておこう。

正方形を描く

四角形ツールを選ぶ。

200 x 200の正方形を描こう。コスのサムネを見るとサイズが分かるよ。

正方形が描けたら、最背面にレイヤーを下げよう。ナノが見えるはず。

↓こんな感じ。

選択ツールを選ぶ。

ナノをクリックすれば、グループ化してあるからナノだけ選択できるはずだ。

ナノだけ正方形の下辺に足が着くようにドラッグしよう。

ok-scratch ok-scratch

↑ちなみにこの正方形は、天井と床の位置を擬似的に表現してる。

十字を描く

直線ツールを選ぼう。

正方形の真ん中で横線を引く。

真ん中で縦線も引いておこう。

ok-scratch ok-scratch

正方形と十字は、このあとで透明にしちゃうよ。いまは調整リサイズするときに便利だから描いた。

選択ツールを選ぶ。

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

ガイドラインを透明にする

まずナノを含めないように気をつけながら、正方形と十字線を選択する。

グループ化する。

塗りつぶしを選んで、透明化ボタンをクリックする。

枠線を選んで、透明化ボタンをクリックする。

スッキリ!

コスチューム1は消しとく。

よし!これでコスチュームの作業は完了だ。

3D空間に最適化されたサイズのコスチュームを用意することができた!

敵を3D空間に描画する

ここまでに、相対距離XYの算出と、描画するコスチュームの用意を進めてきた。

ここからいよいよ直線距離を算出して3D空間にプレイヤー以外の存在を作り出す具体的なステップに入る。

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

新しいメッセージ「ペイントする」を作る。

変数「距離」を作る

新しい変数「距離」を作る。

メッセージを受け取ったところで、距離に「エンティティの相対距離Y」をセットする。さっき計算した値だ。

変数「高さ」を作る

高さの計算は少し複雑だ。以前計算してあった★DVを使うぞ。

↓これらのブロックを用意して矢印を参考に組み立ててみて。

高さにセットしよう。

さらに、大きさを「高さ」%にするぞ。

距離を加味した高さを大きさに反映することで、縦方向の遠近感が正しく調整できた。

高さに使った演算の掛け算あたりを右クリックして複製しよう。

10のところに、エンティティの相対距離Xをはめよう。

↑この演算ブロックを↓X座標に割り当てよう。Y座標には、ゼロを入れておいて。

横方向の距離も正しく反映することができた。

メインループに「ペイントする」を追加する

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

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

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

3D空間に、ナノが、

来たぁーーー!

まとめ

今回はすっごいスキルを詰め込んだ。キーになったのは相対距離の算出と、それを使った描画処理だったね。距離から高さを導き出すところで遠近感を実現できたところは感動的スクラッチだった。

学びをまとめておこう。

  • 3D空間でどうやってプレイヤーと相手の距離を測るのに、相対距離を計算することがわかった
  • 相対距離を使って距離を導き出し、さらに高さを計算することで遠近感を出すことができた

よしよし!これでピコの盗まれた家宝「スター」も描画する準備が整ったかな!?っとアレ?なんだか大変なことになってるぞ!スクラッチキャットが大ピンチに陥ってしまったみたいだ!次回もチェックしてみてね!

グリフパッチさんの動画を参考にしています

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

完成サンプルがあるよ
おつかれさま!今回のチュートリアルには完成サンプルがあるから、作ってて分からなくなったり、 動作確認をしたいときはチェックしてみてね。
このスクラッチゲームの作り方への質問もOK このスクラッチゲームの作り方への質問もOK
このスクラッチゲームの作り方に挑戦していて分からないことが発生したら質問してみてね。気づいたタイミングで回答するよ。 質問は 僕のスクラッチのプロフィール で受け付けているよ。

質問テンプレート(素早く3回クリックすると全選択できるのでコピーしよう)

・◯◯ ... 記事のどこまで実装が終わったのかを記入しよう。
・□□ ... どんな問題が起きているのか、どういうときに起きるのか、具体的に書こう。
・共有済みURL ... たまに共有してない作品URLを書いてる人がいるけど、共有しないとこちらから確認できないからよろしくね。

スクラッチャーからのコメント

akamu92 akamu92 2024-12-24
階段やらをマップに追加したいのですが、どうすればいいですか?
ok-scratch ok-scratch 2024-12-24
@akamu92 階段は現在研究中です!分かったらチュートリアル化しますね。
ok-scratch ok-scratch 2024-12-24
@ok-scratch それまでは階段やドアなどは、ワープ機能で代用しておくことをおすすめしてます。ある座標に行ったら、特定の座標にワープして二階や部屋の中という扱いにする感じです。
akamu92 akamu92 2024-12-26
@ok-scratch 階段を上ると言う風にはできますか?
akamu92 akamu92 2024-12-26
@akamu92 (揺れながら)
ok-scratch ok-scratch 2024-12-27
@akamu92 演出を加えようとするとちょっと複雑になると思うけど、不可能ということはないはず。理想を実現するのって楽しいから、トライしてみてもいいかもですね。
hsg2003el hsg2003el 2024-07-14
あの〜貴方のサイトを見ながらやっていたんですけど、うまく出来なくてその作品は、僕のプロフィールに載っている【3dゲーム】という作品です。 間違っているところがあったら教えていただきたいです。
ok-scratch ok-scratch 2024-07-14
@hsg2003el うまくいかない現象はどうすれば再現できるか、あとチュートリアルはどこまで進んでいるかを教えて下さい。
hsg2003el hsg2003el 2024-07-15
@ok-scratch チュートリアル8まで進んでいて、8をやっていたら、かげのいろが全部同じ色になってしまったんです。
ok-scratch ok-scratch 2024-07-15
@hsg2003el プレイしてみたのですが、そもそもミニマップがずっと表示されてて、3Dにならない状態みたいです。↑この状態に戻せますか?
hsg2003el hsg2003el 2024-07-15
@ok-scratch 分かりました
hsg2003el hsg2003el 2024-07-15
@hsg2003el 壁も消えてしまったんですけど、直し方分かりますか?
hsg2003el hsg2003el 2024-07-15
@ok-scratch もう一回見直したら上手く出来ました。 でも、次にスプライトの動きが遅くなってしまいました。 今、爆速3Dが終わったところです。
hsg2003el hsg2003el 2024-07-15
@hsg2003el そのままやってみたところ、3Dゲームコピーみたいになってしまったんです。壁が色々なスプライトと重なってしまうのでどうすればいいか教えていただきたいです。 どこら辺から直せばいいですか? 14の途中です。
hsg2003el hsg2003el 2024-07-15
@hsg2003el 3Dゲームコピーは、共有したプロジェクトの一番最初にあります。
ok-scratch ok-scratch 2024-07-16
@hsg2003el おお、最初のは見直したらうまくいったんです。よかった。ちょっと見てみますね。
ok-scratch ok-scratch 2024-07-16
@hsg2003el ステージにある変数「■エンティティの上限数」が実行されてないからっぽいです。緑の旗がおされたときブロックにくっつけてみてください。
hsg2003el hsg2003el 2024-07-16
@ok-scratch 教えていただきありがとうございます。これでちゃんと出来ました。
ok-scratch ok-scratch 2024-07-16
@hsg2003el ( ´∀`)bグッ!
hsg2003el hsg2003el 2024-07-16
@ok-scratch 次は、3Dゲームの作り方15 壁の描画精度が高まったかテストするで、壁に近づくと壁が見えなくなってしまうのですが、どうすれば良ですか。 作品は、3Dゲームコピーです。
ok-scratch ok-scratch 2024-07-16
@hsg2003el スプライト「ペン」の定義「_行を描画する」を見てください。条件ブロック「スケールしたテクスチャのサイズ < 48なら」というブロックの「でなければ」のところ。変数「スケールしたテクスチャのサイズ」にセットする値を「★テクスチャのサイズ」に変えてみてください。
hsg2003el hsg2003el 2024-07-16
@ok-scratch ありがとうございました。上手く出来ました。
ok-scratch ok-scratch 2024-07-17
@hsg2003el よかった。ここまで作れたのスゴイ!もう少しだからファイト〜( ´∀`)bグッ!
hsg2003el hsg2003el 2024-07-17
@ok-scratch あとモバイル対応だー、(^_^)
hsg2003el hsg2003el 2024-07-19
@ok-scratch 最後まで作ったんですけど、壁の形、ハンターが出現しないなどの問題点があるんですけどどうしたらいいですか?
ok-scratch ok-scratch 2024-07-19
@hsg2003el とりあえずハンターについてはエンティティの「_スポーンさせる」を実行しているところで、数がゼロになっていることが原因なのでこれを1と10とかにすれば解決すると思います。もう1つの壁の形というのはなんのことでしょう。
hsg2003el hsg2003el 2024-07-19
@ok-scratch 壁がレンガみたいに模様がついているところとついてないと頃があるということです。また、TNTみたいな模様とレンガみたいな模様が一緒についているところがあるのでどうすればいいですか?
hsg2003el hsg2003el 2024-07-20
@hsg2003el また、何個か並べてみたらスプライトが見えないんですがどうすれば良いですか?
ok-scratch ok-scratch 2024-07-20
@hsg2003el ちょっと見てみますね
ok-scratch ok-scratch 2024-07-20
@hsg2003el レイキャスターの「_シングル・レイ」の最後の条件ブロック「レベルカラーに触れたら」を見てください。TRUEの方の「_描画する」の第一引数タイプに、変数「テクスチャのズレ」がプラスされていません。これを直してみてください。
hsg2003el hsg2003el 2024-07-20
@ok-scratch 分かりました
hsg2003el hsg2003el 2024-07-20
@ok-scratch オンラインプレイが出来ないですがどうすれば良いですか?
hsg2003el hsg2003el 2024-07-20
@hsg2003el 多分です
ok-scratch ok-scratch 2024-07-21
@hsg2003el 昨日今日パソコンが使えないので確認遅れますm(_ _)m
hsg2003el hsg2003el 2024-07-21
@ok-scratch 分かりました
hsg2003el hsg2003el 2024-07-24
@hsg2003el 分かりますか?
ok-scratch ok-scratch 2024-07-24
@hsg2003el 複数ブラウザで実行しても、プレイヤーUID一覧に値が入っていかないみたいなので、そのあたりの処理を確かめてみてください。
hsg2003el hsg2003el 2024-07-24
@ok-scratch 分かりました
hsg2003el hsg2003el 2024-07-25
@ok-scratch 出来ました。 そのまま、クラウドプライヤーを入れていたのでクラウド変数が使えなくなっていました。ステージ(背景)でクラウド変数が使われているところを消して、もう一回入れ直すとオンラインプレイが出来るようになりました。
hsg2003el hsg2003el 2024-07-25
@hsg2003el ステージ(背景)で入れる理由は、クラウド変数のブロックを消さないようにするためです。
hsg2003el hsg2003el 2024-07-25
@hsg2003el ハンターに触れたら捕まったという報告を出したいのですが、どうすれば良いですか。
ok-scratch ok-scratch 2024-07-25
@hsg2003el メッセージ(イベント)を使うと実現できるかなと思います。(クラウド化成功してよかった)
hsg2003el hsg2003el 2024-07-25
@ok-scratch OKです。
maple_tayama maple_tayama 2024-03-18
3d 8 チュートリアルで画面を回転させるに数値を入れるところがないと思います テキトーにやったのですがX X引くプレイヤーX座標的な感じでいいのでしょうか
ok-scratch ok-scratch 2024-03-18
@maple_tayama ぬ、抜けてました〜!ご指摘ありがとうございます!っていうか、まさかもう⑧まで実装している……早い。
maple_tayama maple_tayama 2024-03-19
@ok-scratch 楽しみすぎて一日に二個くらい進めちゃってます!面白いチュートリアルをありがとうございます
ok-scratch ok-scratch 2024-03-19
@maple_tayama すご(笑)3D楽しすぎる!いまかなり3Dブームです(自分の中で)
ブクマよろしくお願いします! ブクマよろしくお願いします!
どんどん追記・更新していくので、ブックマークやシェアよろしくお願いします!

スクラッチゲーム攻略

スクラッチゲーム

    • 厳選されたスクラッチ人気作品リストがレビュー付きで楽しめます
      趣味に関するスクラッチ作品例
      勉強になるスクラッチ作品