【新作進捗】メインメニュー背景/ダンジョン生成/水シミュレーション

こんにちは。
前回内容少なめだったので今回は多めです！

今回は書きかけのメインメニューに使う背景やダンジョン生成システム、水シミュレーションについての進捗記事になります。

進捗

メインメニュー背景

ダンジョンに入る前の画面です。
前作でいうと「スタート」とか「オプション」とかがあった画面のことですね。
書きかけ真っ只中で放置しちゃってますが、現状のイメージとしてはこんな感じになってます。

ここから真ん中の穴を押すとダンジョンに突入したりキャラクターや石碑的なやつを押すとあれこれできたりする予定です。
葉っぱがわさわさ動いてたら楽しげなんですけど…めんどくさそう…

とあるトラブルがあって放置してるのですが、進捗とは関係ないのでそれはオマケの部分に置いておきます。

ダンジョン生成

なんかいきなりゲームっぽい要素が出てきました。
ローグライクのダンジョンといえば入るたびに変わる！ですよね。
というわけで
本ゲームのダンジョンも入るたびに変わります！
といっても完全自動生成ではなく、なんとなーくいい感じで変化します。
ベースとなる枠組みをあらかじめ作っておいて、それらを組み合わせてダンジョンを生成するイメージですね。

そして現在採用している生成システムがこちらです。
動画内で何回かダンジョンを生成し直しています。
なんかぱっと見気持ち悪いので苦手な方は注意してください。

引きの画で見ると結構キモいですね…
この後、生成した概形を基に地形の成分設定や敵の配置を肉付けしていってダンジョンを作る、みたいな流れになります。
動画内のダンジョンの生成法則については仮のものですらない本編とは全く関係ないものなので気にしないでください。

詳細な生成方法については少し小難しい話だったのでオマケに移動しました。

水シミュレーション

フレームレートの低下が課題だった水のシミュレーションです。
処理方法をshaderベースへと変更し、パフォーマンスがかなり改善されました！

前々回の記事では同じような状況下でFPSが100以下まで落ちていたのが今回の動画では1000前後にまで改善されています。

水の内部処理方法以外にも水流の向きに逆らって進むと少しだけ減速する効果を仮実装してあります。
水関連の処理は上記のような水流に触れたときの処理や水しぶきのパーティクルなど、結構いろいろあって大変そうなので最適化もそれなりに頑張らないとなーといった感じです。

泳ぎ状態のドット絵なんかもあったら楽しそうですがそれはそれでまた処理がめんどくさくなりそう。

雑記

久々に内容多めの記事だった気がします。
ここ最近は今回使ったダンジョン生成方法やshaderの勉強ばかりでしたがこうしてそれが形になってくると嬉しいですね。

次はダンジョン生成の項で少し触れた肉付けの部分やピクセルシミュレーションの改善を進めていく予定です。

オマケ

メインメニュー背景画像の編集前

メインメニュー背景の項で書いたトラブルがどうこうの話です。

実はあの画像とりあえずの形で適当にコントラストや明るさをあげた画像でして、本当はこんな感じの色合いです。

横に並べるとよくわかります。

普段使用しているモニターとは異なるモニターで作業していたらこうなってしまいました…
その時作業していたモニターだと左のイメージに近い色合いで描いていたんですが、普段のモニターでこれを見た時いきなり右の暗さになって絶句しました。
モニター側の明るさとかブルーライトカットモードとかそのへんの兼ね合いなんでしょうね。

それに気づいてから普段のモニターで見える色合いも変なのでは！？となってきたのでそれからはスマホでもチェックするようにしています。

ダンジョン生成方法（Herringbone Wang Tiles）

今回、ダンジョン生成は「Herringbone Wang Tiles（Herringbone Tiles）」という手法を用いています。
ドット絵ローグライクとして有名なゲームであるnoitaでこの方法が取られているようだったのでこれを選びましたが日本語のページはおろかそもそもネット上にこの手法に言及してある記事が数個しかなかったので、進捗記事にする内容が無い時にでも軽くこの手法を紹介する記事を書けたらなーと思います。

それか実は当たり前の技術なんでしょうか。
よくわかりません。

以下がHerringbone Wang Tilesを考案した方の論文です。
Herringbone Wang Tiles
全文英語ですがめちゃくちゃわかりやすく解説がなされています。
というかこのページくらいしかありませんでした。

そしてこのオマケまで読んでる方はもの好きな方だと思うのでかるーく少しだけ紹介します。
別途で記事を書くの忘れそうなので。

①ヘリンボーン（Herringbone）とは

まず、ヘリンボーンというのはこういう柄のことを指します。

これがダンジョン生成の項で書いた「ベースとなる枠組みをあらかじめ作っておいて、それらを組み合わせてダンジョンを生成する」という部分の「ベースとなる枠組み」の部分に関係してきます。

②「ベースとなる枠組み」を作る

というわけでヘリンボーンの形に合うように「ベースとなる枠組み」の縦向きと横向きのタイルを書いてみます。
今回はお試しなので上に張った論文の中から引っ張ってきたものを使います。

③ヘリンボーン柄に合わせてダンジョンを生成する

あとはこのタイルを道が繋がるようにヘリンボーン柄に合わせて組み合わせていけばダンジョン生成の完了です。
生成後にヘリンボーン柄の境目がどのようになっているかわかりやすくしてみました。

赤と緑の四角形が横向きのタイル、黄色と水色の四角形が縦向きのタイルの部分を表しています。
②で作ったものと動画内の任意のタイルをよーく見比べると同じものが見つかるはずです。

まとめ

つまり無造作にダンジョンの穴を生成しているように見えて、実は先に作ってあったタイルを組み合わせたものだったんですね！
さらに（規則性はあれど）いい感じに複雑にタイルを組み合わせることで、プレイヤー側に生成の規則性がバレにくい多様なダンジョンを生成できるという素晴らしい手法です。

…という紹介でした。