1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2024-05-17

スクラッチは基本的に2Dゲームをブラウザ上で楽しむことができるものですが、ペンという拡張機能(公式、ワンクリックでインストール可能)を使えば3Dゲームを作ることが可能です。
今回は3Dゲームをスクラッチで作るための基本的なノウハウについてまとめておきます。
なお、ハイレベルな3Dゲームの作り方やパフォーマンスチューニング、3D空間にアイテムや敵を配置して主人公との当たり判定などを実装する方法は別途まとめてあります。

ミニマップを作る

スクリーンショット 2024-05-17 16.16.14.png

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

コスチューム

自由にマップを作ってください。通路になる部分は透明にしておきます。一番楽しいところw

スクリーンショット 2024-05-17 16.04.00.png

コーディング

ここはめちゃシンプルです。

スクリーンショット 2024-05-17 16.14.25.png

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

プレイヤーを作る

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

スクリーンショット 2024-05-17 16.16.36.png

コスチューム

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

スクリーンショット 2024-05-17 16.17.31.png

コーディング

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

緑の旗が押されたとき

スクリーンショット 2024-05-17 16.19.07.png

定義「動く」

スクリーンショット 2024-05-17 16.19.28.png

レイキャスターを作る

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

コスチューム

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

### コーディング

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

緑の旗が押されたとき

スクリーンショット 2024-05-17 16.21.11.png

メッセージ「距離を調べる」を受け取ったとき

スクリーンショット 2024-05-17 16.22.09.png

定義「距離を調べる」

スクリーンショット 2024-05-17 16.22.28.png

ペンを作る

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

スクリーンショット 2024-05-17 16.22.43.png

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

コーディング

リストの中身をペンで描画する処理を作ります。

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

スクリーンショット 2024-05-17 16.23.50.png

定義「描画する」

スクリーンショット 2024-05-17 16.24.46.png

まとめ

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

3d.gif

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

実際に動くスクラッチ3Dゲーム完成品をこちらで公開しています。

もっとハイレベルなチュートリアルも公開しているのでチェックしてください。

たとえば3Dゲームとクラウド変数を組み合わせてマルチプレイで動くようなエンジンを作れます。
3d2.gif

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?