屋根裏

コードを書いたりします

Slay the Spire風のマップをp5.jsを使って生成する

SteamとSwitchで販売されているSlay the Spireというローグライクゲームがありますが、そのマップみたいなものをp5.jsで生成してみました。

デモ

このページで実際に生成できます。

生成は以下のように行われています。

f:id:yurkth:20200302154907g:plain

環境

p5.js

ビジュアルデザインに使われているProcessingという言語がありますが、p5.jsはこれをJavaScriptで利用できるようにしたものです。

ProcessingはJavaベースなのですが、今回は使いたいライブラリがJavaScriptのものだったのでこれを使うことにしました。

CDN版があったので、前回のVue.jsと同様にこちらを使っていきます。

実装

点の準備

まずは、スタートとゴールになる2つの点を用意します。

f:id:yurkth:20200302154933p:plain

そして、2点を直径とした円の範囲内にPoisson Disk Samplingで点を生成します。

Poisson Disk Samplingは、一定の距離感を保って点を生成するアルゴリズムです。

f:id:yurkth:20200302154946p:plain

リンクの作成

準備した点に対して、ドロネー三角形分割を行って道を作ります。

f:id:yurkth:20200302155008p:plain

A*による経路探索

作られた道に対してA*で経路を探索します。

f:id:yurkth:20200302155025p:plain

一度経路を探索したら、経路上にある始点と終点を除くランダムな点を選択し、除外してから再び探索します。

f:id:yurkth:20200302155033p:plain

これを複数回繰り返すことで下のような道が生まれます。

f:id:yurkth:20200302155042p:plain

仕上げ

各点をランダムな絵文字に置き換え、Perlin noiseでエフェクトをつけて完成です。

f:id:yurkth:20200302155049p:plain

まとめ

サークルの合宿中に思いついたアルゴリズムを実装してみました。割といい感じになったのではないでしょうか。

デモを公開してから、こちらの実装を教えていただいたのですが物理学を使うのも面白いですね。

最初はOpenSiv3Dで作ろうかと思ったのですが、ドロネー三角形分割がv0.4.3で追加されるようなので追加されたら移植したいです。p5.jsで作るとGitHub Pagesで簡単に公開できるのがいいですね。

yurkth/stsmapgen - GitHub

使用したライブラリ