スクラッチで3Dゲームを作る

スクラッチは基本的に2Dゲームをブラウザ上で楽しむことができるものですが、ペンという拡張機能（公式、ワンクリックでインストール可能）を使えば3Dゲームを作ることが可能です。
今回は3Dゲームをスクラッチで作るための基本的なノウハウについてまとめておきます。
なお、<a href="https://scratch.coach/lesson/3d-online-game-1/">ハイレベルな3Dゲームの作り方やパフォーマンスチューニング、3D空間にアイテムや敵を配置して主人公との当たり判定などを実装する方法</a>は別途まとめてあります。
## ミニマップを作る
![スクリーンショット 2024-05-17 16.16.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8240/2940a9d4-0e12-f533-c9af-5a51941042e9.png)

まずは2Dのミニマップを作ります。このマップを使って、のちほど3D化していきます。

### コスチューム
自由にマップを作ってください。通路になる部分は透明にしておきます。一番楽しいところｗ

![スクリーンショット 2024-05-17 16.04.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8240/4d1bc311-bd8e-c23d-536d-18514cc2c6ed.png)

### コーディング
ここはめちゃシンプルです。

![スクリーンショット 2024-05-17 16.14.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8240/8c9f8cbd-d599-a2d9-45c7-1decb66e07c0.png)

中央に配置して透明化しているだけです。このマップ自体は視認できる必要はありません。だから幽霊効果をつけています。ただし、スプライトを物理的に「隠す」にしてしまうとレンダリングする際に困ってしまうので、幽霊にしておく必要があります。CSSでいうところの、display:none と opacity:0 の違いみたいなもんです。

## プレイヤーを作る

次に主役となるプレイヤーを作ります。

![スクリーンショット 2024-05-17 16.16.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8240/6044a862-cdae-6f45-7579-f2499de1d6b4.png)

### コスチューム

4 X 4の正方形をセンターに作ってください。ちゃんとセンターのアンカーにスナップされるように配置する必要があります。

![スクリーンショット 2024-05-17 16.17.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8240/d656fd00-5725-019f-a69e-984d1ecf523b.png)

### コーディング

2Dマップを動き回る四角形を作るイメージで動きを作っていきます。まだ3D化はしません。

#### 緑の旗が押されたとき
![スクリーンショット 2024-05-17 16.19.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8240/ac41c69a-b47e-b5eb-a021-7b26b3b048cf.png)

#### 定義「動く」

![スクリーンショット 2024-05-17 16.19.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8240/dd598104-568a-6a60-d609-35bd5996f505.png)

## レイキャスターを作る

3D化にはレイキャスティングという手法を採用します。スプライト「レイキャスター」を用意していきましょう。

### コスチューム

プレイヤーと同じ4 x 4の正方形をセンターに作ってください。

###　コーディング

レイキャスティングを実装していくので、少し複雑になっていきます。

#### 緑の旗が押されたとき

![スクリーンショット 2024-05-17 16.21.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8240/2919d6e0-7479-cb73-7405-3ee381cd2cdc.png)

#### メッセージ「距離を調べる」を受け取ったとき
![スクリーンショット 2024-05-17 16.22.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8240/a1c609c8-2245-c235-d46a-74ecebcd461f.png)

#### 定義「距離を調べる」
![スクリーンショット 2024-05-17 16.22.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8240/3e3b7e2a-5ae6-c2e7-a8b6-f1b9ece67644.png)

## ペンを作る

レンダリングを担当するスプライトを作っていきます。ここでは拡張機能のペンを有効化しておいてください。スクラッチエディタの画面左下からカンタンに有効化出来ます。

![スクリーンショット 2024-05-17 16.22.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8240/2620e798-4d63-7437-65fa-c1fe649f78f5.png)

なお、コスチュームは必要ありません。

### コーディング
リストの中身をペンで描画する処理を作ります。

#### メッセージ「描画する」を受け取ったとき

![スクリーンショット 2024-05-17 16.23.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8240/3bbd170f-af1c-e979-e2da-f37c15e86673.png)

#### 定義「描画する」

![スクリーンショット 2024-05-17 16.24.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8240/13b94c31-5c58-e0ef-1a35-e0b14ec12384.png)

## まとめ

これでスクラッチプログラミングで３Dゲームを作る下地ができました。

![3d.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8240/e37b78a1-fad6-9749-6ad6-57a60c4443d6.gif)

これをゲームエンジンの礎にして様々なゲームが投稿されているので、みなさんも是非ゲームを作ってみてください。

実際に動く<a href="https://scratch.coach/segment/3d/">スクラッチ3Dゲーム完成品</a>をこちらで公開しています。

もっと<a href="https://scratch.coach/lesson/3d-online-game-1/">ハイレベルなチュートリアル</a>も公開しているのでチェックしてください。

たとえば3Dゲームとクラウド変数を組み合わせてマルチプレイで動くようなエンジンを作れます。
![3d2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8240/46bcb5a7-e2c2-b6dc-d082-8e083e841b54.gif)