【迷路編】１．迷路の地形をつくろう

こんにちは、ロブスタのハルです！
今回は実際に簡単なゲーム制作を通して、どんなステップで作るのかを体験してもらいたいと思います。

概要

ここでは簡単な迷路を作っていきます。
基本編で学んだことを復習しながら一緒にゲームを作ってみましょう。
このゲームでは難むずかしいプログラムは作らないので初めてゲームを作るという方でも安心してください。

それでは、今回作りたいゲームの仕様しようについて共有きょうゆうしますね。

• 迷路ゲーム
• スタート位置にリスポーンする
• プレイヤーはスタートからゴールを目指す
• ゴールに着いたらクリア！と画面に表示する

これだけ見るとなんだか作れそうな気がしませんか？

作り方を考えよう

さて、それではどうやって作るか考えていきましょうか。
僕も正しい作り方を知っているわけではないので自己流で進めようと思います。（そもそもゲーム制作に正しさはない…？）

まずは迷路をどうやって作るかですが、今回はWeb上で迷路を作って画像を出力してくれるツールがあるのでそれを使います。そして、この記事で紹介したように地形エディタを使って迷路をマップ上に生成します。

自分で迷路を考えてそれを基もとにパーツを組くんで作っていくのもアリですが、なるべく楽したいですよね。（あと、後々ランダムで迷路を生成するようにしたいからというのもあります。）

次にスタート位置の決定ですが、これは単純たんじゅんに迷路のスタート地点にSpownLocationスポーンロケーションを置くようにします。

そしてゴール位置の床にもパーツを置くようにしましょうか。そのパーツに触ふれると『クリア！』と画面に表示するプログラムを書くようにします。

僕はこの手順で作ろうと思いますが、これ通りにやっても自分の好きな方法で作っても大丈夫です。

迷路を作ろう

迷路生成ツールを使う

まずは迷路を作ってくれるサイトを探します。
今回はMazeメイズ Generatorジェネレータ – Alance AB様のツールhttps://mo2nabe.com/maze-generator/を使用します。

WidthウィドゥスとHeightハイトの大きさを共に16としてそれ以外は変えずに作成します。右下に『Generateジェネレート』とあるのでそれを押します。

できあがった画像がこちらです。
ものすごく手軽に作れますね。

出来上がったSVGを加工する

ただ、これではRoblox Studioスタジオに取り込めないので加工していきます。
具体的には次の2つのことをします。

1. SVGファイルの設定を変更して線の色を黒から白にする
2. SVGファイルをpng形式に変換する

まずはエクスプローラ上でダウンロードしたSVGファイルを探さがして、右クリック→プログラムから開く→メモ帳を選択せんたくしてください。

開けたら下の画像のようになっていると思います。

その中のstrokeストローク=”#000000″をstroke=”#ffffff“に、stroke-width=”2″をstroke-width=”4“に変えてください。それぞれ、線の色と太さを変えていることになります。

完了したら保存してSVGファイルをブラウザで開いてみましょう。
おそらく真っ白で何も表示されないと思いますが、それで大丈夫です。

続いてSVGファイルをpng形式に変換したいのですが、これはブラウザ上で『svg png 変換』のように検索して出てきたツールを使うことで変換できます。

迷路の地形を生成しよう

下準備は終わったのでRoblox Studioを立ち上げていきます。

左上の『Baseplateベースプレート』を押します。

表示タブの中の『地形エディタ』を表示します。

地形エディタの中の作成タブから『インポート』を選択してください。
今回はサイズを（x, y, z）=（160, 32, 160）に、位置を（x, y, z）=（0, 16, 0）とします。
また、Heightmapハイトマップには先程変換した迷路のpng画像を選んでください。
デフォルト素材には好きなものを選んでください。
最後にインポートを押して完了です。

なんか思ったものと違いますよね…
たぶんきっちりと同じ高さになった迷路が生成されると考えていたのではないでしょうか？

これはおそらくSVGからpngへ変換するときにノイズが載のってしまっているためだと思います。
僕が調べた限りではpng画像を直接出力してくれて迷路の線の色を白色にしてくれるツールはありませんでした。後々そういったツールも作っていきたいですね。

説明し忘れていましたが、迷路の線の色をわざわざ白色にしているのはRoblox Studioの地形生成機能ではカラー画像をグレースケール画像に変換し、黒が一番低く、白が一番高くなるように地形を生成しているためです。元のSVGだと迷路の通路部分が壁かべとして生成されてしまうわけです。

迷路の高さを均一にしよう

地形エディタの編集タブの中にある『平地化』を選んでください。

ブラシの形状は立方体、平地化モードは真ん中、ブラシサイズはW=20, H=20、強度は1、ピボット位置は下、装着そうちゃくはボクセル、平面を平坦化へいたんかは自動、パーツを無視むしにチェックを入れてください。

あとは迷路の上部を長押ししてまわると高さが均一になります。

迷路の高さを調節しよう

均一にはできましたがこのままだと壁が高すぎて迷路内が薄暗うすぐらいです。
そこで、迷路の高さを低くしましょう。

まずは地形エディタの編集タブから『選択』を選んでください。
サイズはxとzはいじらずにyのみを消したい高さに設定しましょう。今回はy=24にしました（画像では8ですが、その後16を追加で消しています）。位置は3Dビューポート上の緑色のハンドルを動かして一番上に合うようにしましょう。

続いて『埋める』を選んで、素材の設定から『空気』を選び、『埋める』を押します。
これによって選択されたブロックを空気に変換することができました。

まとめ

ひとまず迷路の地形を作ることができました。
手順は少し多いですが、自分の手で地道にパーツを重ねていく必要も迷路を考える必要もなく手軽に迷路を作られましたね。

もちろん、自分が考えた迷路を作りたいという人はドット絵を作るソフトなどで描いてpng画像として出力すれば今回の方法が使えます。

次回はスタートとゴールの設定とクリア！と表示するためのプログラムを書いてみましょう。