当記事はグリフパッチさんの動画を参考に、日本人向けに分かりやすく手直ししたものです。和訳解説は動画作者のグリフパッチさんご本人から許可をいただいて掲載しております。チャンネルはYOUTUBE ( by griffpatch )からどうぞ。
ゴンザレスからゲームクリエイターへの挑戦状
![](https://ok-scratch.io/wp-content/uploads/2024/02/3d1.png)
ピコが大切にしてるスターが大怪盗ゴンザレスに奪われた!どうやらゴンザレスは3D迷宮に逃げ込んだらしい。彼を追跡するために、こっちも3D迷宮を実装しよう!同じものを実装すれば追いつけるはずだ。
一緒に3Dスクラッチを作っていこうぜ!
![盗まれたスターを取り戻せ!3D迷宮への旅(爆速オンライン3Dゲームの作り方 #01)を語るok-scratch](https://ok-scratch.io/wp-content/uploads/2024/02/avatar_user_1_1708915454-96x96.jpg)
3Dゲームのチュートリアルは、僕がサポートするよ!
全チュートリアルの最終完成作品をチェックしておこう
この3Dゲームの作り方シリーズの最後に完成できるサンプル作品を最初に観ておこう!
![爆速オンライン3D(モバイル対応)](https://cdn2.scratch.mit.edu/get_image/project/971476261_282x218.png)
爆速オンライン3D(モバイル対応)
![ok-scratchさんの作品という口コミを寄せてくれた方](https://ok-scratch.io/wp-content/uploads/2024/02/avatar_user_1_1708915454-96x96.jpg)
超軽量3Dだからこそ実現できたテクスチャ(画像)の壁や、オンライン(マルチプレイヤー)、さらに軽量すぎてモバイルでも3Dが動いてしまうというスーパーテクニックをマスターできるぞ。
重かったらLキーを押してみて。
ぶっちゃけスクラッチのポテンシャルがこんなに高いって知ってる人は少ない、たとえ大人でも。なんだったら学校の先生でもここまでの作品を作れる人は少ない……そんなスクラッチの高みに一緒に行こう!
今回の目標「3Dの下地になるマップを作ろう」
いきなり3Dを作ることはできない。元になる2Dのマップが必要なんだ。
2Dのマップというのは↓こんなかんじ。
![](https://ok-scratch.io/wp-content/uploads/2024/02/8a236df7ab695144a45782f718b05c19.png)
これを歩き回る矢印(プレイヤー)を作るのが第一回の目標だよ。
![3Dゲームの作り方:第①回目の完成サンプル](https://cdn2.scratch.mit.edu/get_image/project/971743902_282x218.png)
3Dゲームの作り方:第①回目の完成サンプル
![ok-scratchさんの作品という口コミを寄せてくれた方](https://ok-scratch.io/wp-content/uploads/2024/02/avatar_user_1_1708915454-96x96.jpg)
今回の完成プロジェクトも観ておこうか。これを第一回目で作るよ。
コーディングをはじめよう!
まずはスタータープロジェクトをリミックスすることをオススメするよ。スタータープロジェクトにはコスチュームがすでに入っているんだ。もしコスチュームも作りたい、というならスターターは使わずにゼロから新規プロジェクトを作ればOKだよ。
https://scratch.mit.edu/projects/971769263/
もしスターターを使うなら、「プレイヤーの移動を実装しよう」まで飛ばしても平気だよ。
コスチュームを作ろう
スターターを使わずにやりたい、という猛者は一緒にコスチュームの作り方を見ていこう。自分の好きなマップを作っていけるし、理解度も深まるぞ。
ステージを開く
まずは背景のスプライトを開いて、真っ黒にしよう。
![](https://ok-scratch.io/wp-content/uploads/2024/02/9fc24e9776c216fee71b88abd05e99dd-1024x474.png)
①ベクターに変換ボタンをクリックする
②塗りつぶしツールを選択する
③色を黒くする
④塗る!
スプライト「レベル」を作る
スプライトを「描く」を選んで新しいスプライトを作ろう。
![](https://ok-scratch.io/wp-content/uploads/2024/02/324372b7012e6b648c5234450216b664.png)
スプライト名は「レベル」にしよう
![](https://ok-scratch.io/wp-content/uploads/2024/02/234f9fb04e83a364d70d5991ffa047fd.png)
![盗まれたスターを取り戻せ!3D迷宮への旅(爆速オンライン3Dゲームの作り方 #01)を語るok-scratch](https://ok-scratch.io/wp-content/uploads/2024/02/avatar_user_1_1708915454-96x96.jpg)
レベル、って日本語だと「強さ」みたいな意味が有名だけど、英語だと「ステージ」っていう意味もあるんだよ。
マップを用意しよう
コスチュームを開いて、塗りつぶしの色をグレーにしよう。
![盗まれたスターを取り戻せ!3D迷宮への旅(爆速オンライン3Dゲームの作り方 #01)を語るok-scratch](https://ok-scratch.io/wp-content/uploads/2024/02/avatar_user_1_1708915454-96x96.jpg)
マップの色も形も、同じじゃなくても平気。赤や紫でもOK!
![](https://ok-scratch.io/wp-content/uploads/2024/02/d32ebf22e575a8f5bd148e13bb22b264.png)
四角く枠を作ろう
枠の太さは適当だし、きっちり四角じゃなくてもいいよ。
![](https://ok-scratch.io/wp-content/uploads/2024/02/bb2265ebc34361ade933ea77c73a25df-1024x798.png)
迷路を作ろう
さぁ、最初の楽しい場面だ。好きなように迷路を作っちゃおう。
![](https://ok-scratch.io/wp-content/uploads/2024/02/67828973d000627350b546614f0926e9-1024x817.png)
![盗まれたスターを取り戻せ!3D迷宮への旅(爆速オンライン3Dゲームの作り方 #01)を語るok-scratch](https://ok-scratch.io/wp-content/uploads/2024/02/avatar_user_1_1708915454-96x96.jpg)
どんな感じでもいいけど、後で使うからマルをどこか1箇所に入れておこう!あと初めだからギッチギチの細い迷路じゃなくて、少し広い空間を残しておいたほうが分かりやすいよ。
コードを追加する
「緑の旗が押されたとき」を置いて。
![](https://ok-scratch.io/wp-content/uploads/2024/02/418c091731c5acfd070d455b1b40c737.png)
ど真ん中にマップが来るようにしておこう。これだけだよ。
![](https://ok-scratch.io/wp-content/uploads/2024/02/043a9e19c99a4c532c7ad6e9c49fb4d0.png)
プレイヤーのコスチュームを作ろう
スプライト「プレイヤー」を開こう。小さい三角を作っていくよ。
![](https://ok-scratch.io/wp-content/uploads/2024/02/356b1102647a69894aec624f4c1a17f6.png)
デフォルトのネコのコスチュームは消してOK!
![](https://ok-scratch.io/wp-content/uploads/2024/02/60ff850b969cf63d58671f52a540366f.png)
![盗まれたスターを取り戻せ!3D迷宮への旅(爆速オンライン3Dゲームの作り方 #01)を語るscratch-cat](https://ok-scratch.io/wp-content/uploads/2024/02/neko-sad-1.png)
そ、そんな〜
![盗まれたスターを取り戻せ!3D迷宮への旅(爆速オンライン3Dゲームの作り方 #01)を語るok-scratch](https://ok-scratch.io/wp-content/uploads/2024/02/avatar_user_1_1708915454-96x96.jpg)
ごめんてw
色を好きな色にしよう。僕は黄色にしておいた。
![](https://ok-scratch.io/wp-content/uploads/2024/02/f7ad6f921f05eb9c11ea33b26aec154d.png)
まずは小さい四角を描こう。大きさは適当でいいよ。
![](https://ok-scratch.io/wp-content/uploads/2024/02/8a20be876001e68fc4d97bfff3d44e6c.png)
つぎに「形を変える」ツールを選ぼう。
![](https://ok-scratch.io/wp-content/uploads/2024/02/ba2df5c274226f74ee0f2634a3ebbb85.png)
四角の点のどれかを選んで。選ぶと青くなるよ。↓のスクショだと右上の点が選択されてる。
![](https://ok-scratch.io/wp-content/uploads/2024/02/7b66d6f387371c6f9765eb5a32df6934.png)
そしてDelete、削除しよう。三角ができるよね。
![](https://ok-scratch.io/wp-content/uploads/2024/02/6bae8b25954487f5b7d6c6bacea45931.png)
再び選択ツールを選ぼう。
![](https://ok-scratch.io/wp-content/uploads/2024/02/a5a46f15dd4eaa5894dc6ee6096f83e2.png)
三角の形を整えて回転させて真横を向かせよう。右90度ピッタリにしておこう。
![](https://ok-scratch.io/wp-content/uploads/2024/02/fcbab2a2f3bcc51b2b684f31f547a1a2.png)
形はそこまで重要ではないけど、シュッとした三角を目指して整形しよう。
![](https://ok-scratch.io/wp-content/uploads/2024/02/4e60321fe2bff644cb5ce477e1bedd74.png)
![盗まれたスターを取り戻せ!3D迷宮への旅(爆速オンライン3Dゲームの作り方 #01)を語るok-scratch](https://ok-scratch.io/wp-content/uploads/2024/02/avatar_user_1_1708915454-96x96.jpg)
サイズは8 x 8にしておこう。コスチュームのサムネイルを見ると確認できるよ。
コスチューム名は「プレイヤー」にしておいてね。
![](https://ok-scratch.io/wp-content/uploads/2024/02/9c37b8127829a5507dd959bbcfa752ed.png)
ヒットボックスのコスチュームを作ろう
もう1つコスチュームを作るよ。
![](https://ok-scratch.io/wp-content/uploads/2024/02/ea7b585b684850b48d9b3872f5829708.png)
名前は「ヒットボックス」
![](https://ok-scratch.io/wp-content/uploads/2024/02/64308f5d40b21f16e6057ae4eb7205ac.png)
ビットマップに変換しよう。
![](https://ok-scratch.io/wp-content/uploads/2024/02/f885f17f6981984cfeb22dc9079961a0.png)
四角形ツールを選ぼう。
![](https://ok-scratch.io/wp-content/uploads/2024/02/8a18d7e960da67244e07defa5c579758.png)
1マス分の四角を描いて。
![](https://ok-scratch.io/wp-content/uploads/2024/02/20824092a915e0600ac84e8185c86d41.png)
![盗まれたスターを取り戻せ!3D迷宮への旅(爆速オンライン3Dゲームの作り方 #01)を語るok-scratch](https://ok-scratch.io/wp-content/uploads/2024/02/avatar_user_1_1708915454-96x96.jpg)
サイズは4 x 4にしておこう。これもコスチュームのサムネイルを見ると確認できるよ。
選択ツールを選ぼう。
![](https://ok-scratch.io/wp-content/uploads/2024/02/48a1aaf58f4eba69180597ac77509e96.png)
中央のアンカーにピタッと吸着するようにしとこう。
![](https://ok-scratch.io/wp-content/uploads/2024/02/0a1c0e04a5172bf2d4fecc4e297923a4.png)
これでOKだ!
必要なコスチュームが用意できた
プレイヤーの移動を実装する
緑の旗が押されたら、X座標とY座標をゼロにしよう。
![](https://ok-scratch.io/wp-content/uploads/2024/02/043a9e19c99a4c532c7ad6e9c49fb4d0.png)
回転方法を「自由に回転」にしよう。
![](https://ok-scratch.io/wp-content/uploads/2024/02/a4f5a9067e7517e734bd5df703110fb0.png)
とりあえず斜め上を向くようにするよ。このあたりは今は適当だよ。
![](https://ok-scratch.io/wp-content/uploads/2024/02/7f92c611c1f05e6f16a9ed017dec261c.png)
コスを「プレイヤー」にしよう。
![](https://ok-scratch.io/wp-content/uploads/2024/02/96b2e1316a971e6dc686536bdc71945d.png)
プレイヤーのずっとループを実装する
ずっとループを実装して、プレイヤーの移動を管理するよ。
![](https://ok-scratch.io/wp-content/uploads/2024/02/1d8ac2686def64d08315d1952074c647.png)
左への移動を作る
条件ブロックを追加するよ。
![](https://ok-scratch.io/wp-content/uploads/2024/02/d3f5db5e959e76756dc827aaf37398c0.png)
左向き矢印キーが押されたら、を条件式にはめよう。
![](https://ok-scratch.io/wp-content/uploads/2024/02/5dd1534c081fab5f8ce95c0f6e0233c3.png)
左に3度回すよ。
![](https://ok-scratch.io/wp-content/uploads/2024/02/77bc35bc4fc6a72697e7d9dcaecf0d9a.png)
右への移動を作る
この条件ブロックをまるっと複製しよう。
![](https://ok-scratch.io/wp-content/uploads/2024/02/0e2e59451cc2eb781b6fbce713881c28.png)
右向き矢印キーが押されたら、右に3度回そう。
![](https://ok-scratch.io/wp-content/uploads/2024/02/8d35f270e3cfc8c9768fdd5d0505852f.png)
上下の移動を作る
今作った2つの条件ブロックを複製しよう。
![](https://ok-scratch.io/wp-content/uploads/2024/02/3b19f2dbbfe5eea4c09e30204136ab18.png)
上向き矢印キーが押されたら2歩、下向き矢印キーが押されたらマイナス2歩うごかそう。
![](https://ok-scratch.io/wp-content/uploads/2024/02/7313851fc4474a7f9cb3adf00b9d42be-764x1024.png)
よし、OK!
動き回れるかテストしよう
これで動くよね。
うん、壁にめり込んじゃうけど、このあたりはもっと後で直そうと思う。早く3D化したいからね!移動を洗練するよりも、このマップを3D化することを先決にしたいと思う!
プレイヤーが上下左右に移動できる2Dマップが完成した
よし出だしは順調!と思ったけど、なんだかピコが叫んでるみたい。どうしたんだろう?話を聞いてみよう!次回をチェックしてね。
このチュートリアルは世界No.1スクラッチャーとして名高いグリフパッチさんの動画を参考にしているよ。ただし手順を一部変えているところもあるんだ。