盗まれたスターを取り戻せ！3D迷宮への旅（爆速オンライン3Dゲームの作り方①）

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

ゴンザレスからの挑戦状

ピコが大切にしてるスターが大怪盗ゴンザレスに奪われた！どうやらゴンザレスは3D迷宮に逃げ込んだらしい。彼を追跡するために、こっちも3D迷宮を実装しよう！同じものを実装すれば追いつけるはずだ。

一緒に3Dスクラッチを作っていこうぜ！

全チュートリアルの最終完成作品をチェックしておこう

この3Dゲームの作り方シリーズの最後に完成できるサンプル作品を最初に観ておこう！

スクラッチでプレイする ターボワープでプレイする

爆速オンライン3Dエンジン（モバイル対応）

by ok-scratch

[my-voice title="ok-scratchさんの作品"]

超軽量3Dだからこそ実現できたテクスチャ（画像）の壁や、オンライン（マルチプレイヤー）、さらに軽量すぎてモバイルでも3Dが動いてしまうというスーパーテクニックをマスターできるぞ。
重かったらLキーを押してみて。

[/my-voice]

ぶっちゃけスクラッチのポテンシャルがこんなに高いって知ってる人は少ない、たとえ大人でも。なんだったら学校の先生でもここまでの作品を作れる人は少ない……そんなスクラッチの高みに一緒に行こう！

実践的なサンプル作品

スクラッチでプレイする ターボワープでプレイする

3D逃走中

by ok-scratch

[my-voice title="ok-scratchさんの作品"]

このチュートリアルを土台にして、逃走中をゲーム化してみました！チュートリアルでつくった3Dエンジンをカスタマイズすれば色んなゲームが作れるという可能性の1つとしてプレイしてみてください♪

[/my-voice]

今回の目標「3Dの下地になるマップを作ろう」

いきなり3Dを作ることはできない。元になる2Dのマップが必要なんだ。

2Dのマップというのは↓こんなかんじ。

これを歩き回る矢印（プレイヤー）を作るのが第一回の目標だよ。

スクラッチでプレイする ターボワープでプレイする

3Dゲームの作り方：第①回目の完成サンプル

by ok-scratch

[my-voice title="ok-scratchさんの作品"]

今回の完成プロジェクトも観ておこうか。これを第一回目で作るよ。

[/my-voice]

コーディングをはじめよう！

まずはスタータープロジェクトをリミックスすることをオススメするよ。スタータープロジェクトにはコスチュームがすでに入っているんだ。もしコスチュームも作りたい、というならスターターは使わずにゼロから新規プロジェクトを作ればOKだよ。

https://scratch.mit.edu/projects/971769263/

もしスターターを使うなら、「プレイヤーの移動を実装しよう」まで飛ばしても平気だよ。

コスチュームを作ろう

スターターを使わずにやりたい、という猛者は一緒にコスチュームの作り方を見ていこう。自分の好きなマップを作っていけるし、理解度も深まるぞ。

ステージを開く

まずは背景のスプライトを開いて、真っ黒にしよう。

①ベクターに変換ボタンをクリックする

②塗りつぶしツールを選択する

③色を黒くする

④塗る！

スプライト「レベル」を作る

スプライトを「描く」を選んで新しいスプライトを作ろう。

スプライト名は「レベル」にしよう

マップを用意しよう

コスチュームを開いて、塗りつぶしの色をグレーにしよう。

四角く枠を作ろう

枠の太さは適当だし、きっちり四角じゃなくてもいいよ。

迷路を作ろう

さぁ、最初の楽しい場面だ。好きなように迷路を作っちゃおう。

コードを追加する

「緑の旗が押されたとき」を置いて。

ど真ん中にマップが来るようにしておこう。これだけだよ。

プレイヤーのコスチュームを作ろう

スプライト「プレイヤー」を開こう。小さい三角を作っていくよ。

デフォルトのネコのコスチュームは消してOK！

色を好きな色にしよう。僕は黄色にしておいた。

まずは小さい四角を描こう。大きさは適当でいいよ。

つぎに「形を変える」ツールを選ぼう。

四角の点のどれかを選んで。選ぶと青くなるよ。↓のスクショだと右上の点が選択されてる。

そしてDeleteデリート、削除しよう。三角ができるよね。

再び選択ツールを選ぼう。

三角の形を整えて回転させて真横を向かせよう。右90度ピッタリにしておこう。

形はそこまで重要ではないけど、シュッとした三角を目指して整形しよう。

コスチューム名は「プレイヤー」にしておいてね。

ヒットボックスのコスチュームを作ろう

もう１つコスチュームを作るよ。

名前は「ヒットボックス」

ビットマップに変換しよう。

四角形ツールを選ぼう。

１マス分の四角を描いて。

選択ツールを選ぼう。

中央のアンカーにピタッと吸着スナップするようにしとこう。

これでOKだ！

プレイヤーの移動を実装する

緑の旗が押されたら、X座標とY座標をゼロにしよう。

回転方法を「自由に回転」にしよう。

とりあえず斜め上を向くようにするよ。このあたりは今は適当だよ。

コスを「プレイヤー」にしよう。

プレイヤーのずっとループを実装する

ずっとループを実装して、プレイヤーの移動を管理するよ。

左への移動を作る

条件ブロックを追加するよ。

左向き矢印キーが押されたら、を条件式にはめよう。

左に３度回すよ。

右への移動を作る

この条件ブロックをまるっと複製しよう。

右向き矢印キーが押されたら、右に３度回そう。

上下の移動を作る

今作った２つの条件ブロックを複製しよう。

上向き矢印キーが押されたら２歩、下向き矢印キーが押されたらマイナス２歩うごかそう。

よし、OK！

動き回れるかテストしよう

これで動くよね。

うん、壁にめり込んじゃうけど、このあたりはもっと後で直そうと思う。早く3D化したいからね！移動を洗練するよりも、このマップを3D化することを先決にしたいと思う！

よし出だしは順調！と思ったけど、なんだかピコが叫んでるみたい。どうしたんだろう？話を聞いてみよう！次回をチェックしてね。

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

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

hisa511 2024-12-20

3Dゲームを作りたいなと思ってok-scratchさんのサイトを見てとても勉強になりました！ですが、3Dを作ってる途中で、よくある「学校から脱出するゲーム」みたいなのを作りたいなって思って教えていただいたプログラムをうまく改良できないかなと思いいろいろ試行錯誤したのですがなかなかできないです…ペンで書いてあるところにドアを作って教室に入るというプログラムもそれっぽいのを作っても難しかったので、、、①3D上で階段はどうやって作るのか②教室に入るためのドアなどはどうやって作ればいいのか、を教えてくださると助かります。そこまでスクラッチでは再現できないようでしたら諦めますのでよろしくお願いします。

ok-scratch 2024-12-21

@hisa511 意欲的なチャレンジですね！素晴らしい〜。①階段かぁ、視点の高さを変えるという処理ならジャンプの回が参考になる。 https://scratch.coach/lesson/3d-20/ ただ、簡単なのは階段ではなくワープみたいな機能にする方法かな。ワープしたらミニマップを変えるか、ミニマップを壁で分断しておいて、壁の向こう側を2階として扱うような方法が簡単だと思います。

ok-scratch 2024-12-21

@ok-scratch ②ドアも同じ方法がおすすめです。ワープで、教室の中に強制的に移動させると簡単です。演出という点ではドアが開いたり階段を登れるとかっこいいので、ワープだと納得できないかもしれませんが、（比較すると）簡単ではあります！

ok-scratch 2024-12-21

@ok-scratch でも階段とかドアとか面白そう、、、そのうち研究してみたいって思ったので質問ありがとうございます(*^^*)

hisa511 2024-12-21

@ok-scratch おお！アドバイスありがとうございます！いきなり難しいチャレンジするのはさすがにかな…と思ったのでワープみたいな感じにします！

kenta55 2024-09-10

爆速3Dのサイトを見て作ったのですが、色々とバグが多いです。 （多分私が間違えたのだろうけど。）テクスチャが横一直線になっていたり、 壁ががたがたになったり。お時間ありましたら、見てくださると幸いです。

ok-scratch 2024-09-11

@kenta55 見ました！パッと見だと変ではなかった気がしたのですが、もう修正済みだったでしょうか。未修正であれば、具体的にチュートリアルのどこに着手しているのか、どの部分と違う挙動なのか、詳細を教えてもらえればチェックしてみます。

kenta55 2024-09-12

@ok-scratch すいません。軽くするためのレイキャスティングする量を減らすところで、壁にあたったときに、描画が止まるとかあったのですが、 いつもと同じとうりに変えたら、治りました。壁も、いい感じにテクスチャの見た目をいじってごまかしたのでオッケーです！ありがとうございました。

kenta55 2024-09-12

@ok-scratch https://scratch.mit.edu/projects/1065042092/ すいません。なぜか、描画はできてるんですが、プレイヤーと敵が動けなくなってしまったんです。少しだけ動こうとするとプルプル します。本当にまいどすいません。お時間ありましたらよろしくお願いします

kenta55 2024-09-12

@kenta55 ごめんなさい。治りました。 どうやらサムネのスプライトで「タイマーをリセットする」 がリピートされていて、それでスピードがバグって動かなくなったのだと思います。そのときのfpsはinfinityと表示されてました

kenta55 2024-09-12

@kenta55 完成したので少し見てほしいです。

ok-scratch 2024-09-12

@kenta55 おお、なるほどー！素晴らしい分析です。見ておきますね♪

nekogakure 2024-07-21

知恵をお借りしたいのですが、このプロジェクト(https://scratch.mit.edu/projects/1043972166)はポリゴンの点を位置指定で描画しているのですが、レイヤー機能を搭載した（はず）なのに、なぜかポリゴン数を8から4（三角錐）にすると、影の描画や、向こう側の面が見えてしまう、という現象が起きています。理由がわかればどうかお力添えをお願いします=⁠_⁠=

ok-scratch 2024-07-21

@nekogakure おお、四角形すごい！明日の夜までパソコンが使えない状況なんです、すいませんm(_ _)m　ただ3dモデリングとかだと頂点（vertex）の位置によってはそういう現象起きた記憶も。ポリゴン数を8から4に減らしたとして、その4点が全て意図した頂点に相当してるか確認してみてください。めちゃ適当な予想ですいません。

nekogakure 2024-07-21

@ok-scratch あ、なるほど…。とてもわかり易い回答、ありがとうございます。改善してみますね。

hsg2003el 2024-07-14

ok-scratchさんの3dオンラインゲームの作り方が分かりやすいです！ よく見ているので頑張って下さい。

ok-scratch 2024-07-14

@hsg2003el ありがとうございます！！わかりやすいといってもらえて嬉しいです(^o^)

___Afu___ 2024-06-15

すいません!ok-scratchさんの3Dゲームを作る講座（？）的ものを作った後に改造して プログラミングコンテストに提出したいんですがよろしいでしょうか？

ok-scratch 2024-06-15

@___Afu___ 改造しているのであれば問題ないと思います！がんばってください(*^^*)

___Afu___ 2024-06-15

@ok-scratch がんばります＞＜

Kikki_0501 2024-05-27

すみません、今サイトの方を見て3Dを作っているのですが、スクラッチコーチとスクラッチコーチキャンプに同じようなものがあります。これらは違うものなのでしょうか？

ok-scratch 2024-05-28

@Kikki_0501 同じです！人によってはscratch.coachのサイトが見れない人もいるので、念の為ok-scratch.io にも再掲してあったのです。ただscratch.coachのほうが正規なのでこちらを見てもらえたらと思います。質門ありがとうございます(^o^)

ok-scratch 2024-05-28

@ok-scratch 質門→質問（謎の変換ミス）

Kikki_0501 2024-05-28

@ok-scratch わかりました!

koyabun 2024-05-11

はじめまして！スクラッチコーチの3dの記事たまに見てます！日本語であそこまで本格的な3Dの作り方を解説しているところはめったに無いので見てて面白いです！

ok-scratch 2024-05-12

@koyabun ありがとうございます！！そう言っていただけるとチュートリアル書いてよかったなって思えるし、また書こうってモチベにつながります。嬉しい〜(^o^)　ぜひぜひ爆速3Dつくってみてください♪

HARINEZUMINOKETU 2024-04-29

3dゲームの作り方を出してほしいです（四角とかを出して当たり判定つけるやつ）

ok-scratch 2024-04-29

@HARINEZUMINOKETU いま3Dゲームの作り方が連載中ですよ〜是非見てみてほしい(^o^) もしそれとは違う3Dゲームってことだったら、みんなの知りたいことを知りたい人なので、教えてみてもらえたら嬉しいです！

HARINEZUMINOKETU 2024-04-30

@ok-scratch https://scratch.mit.edu/projects/425943006/　とかのやつみたいな

ok-scratch 2024-04-30

@HARINEZUMINOKETU 四角いキューブがホワンホワンしてるロジックとか面白そうですね。候補に入れておきます！ありがとうございます(^o^)

L-Size 2024-04-06

griffpatchさんの3Dはつくった事あるけどテクスチャまで！すごすぎん！

ok-scratch 2024-04-06

@L-Size おお、グリフパッチさん仲間ですね！彼のおかげで出来ました(*^^*)

L-Size 2024-04-06

@ok-scratch 敵の部分も作れてないからもう一回作ってみようかな〜

ok-scratch 2024-04-06

@L-Size おすすめです( ´∀｀)bｸﾞｯ!

mocura_01 2023-11-16

https://scratch.mit.edu/projects/924867881/　スクラッチコーチの3Dゲームの作り方を参考にして作りました。ぜひ見てご感想お願いします！。

mocura_01 2023-11-16

@mocura_01 https://scratch.mit.edu/projects/924867881/ スクラッチコーチの3Dゲームの作り方を参考にして作りました。ぜひ見てご感想お願いします！。

ok-scratch 2023-11-18

@mocura_01 おお、しっかり迷路として完成されてますね！通路の幅も十分広くて通りやすいですね。赤い壁の実装はどう考えているのか、気になるところです。ご報告ありがとうございます(*^^*)

mocura_01 2023-11-18

@ok-scratch 今のところ当たり判定とペンの色を変えるのに迷っています...

densyadego 2023-08-15

3dゲームのやつ、参考にします！あと、公開してもよろしいですか？

ok-scratch 2023-08-16

@densyadego がんばってください！作った作品の公開はもちろん自由です(*^^*)