Slay the Spire風のマップをp5.jsを使って生成する
SteamとSwitchで販売されているSlay the Spireというローグライクゲームがありますが、そのマップみたいなものをp5.jsで生成してみました。
デモ
このページで実際に生成できます。
生成は以下のように行われています。
環境
p5.js
ビジュアルデザインに使われているProcessingという言語がありますが、p5.jsはこれをJavaScriptで利用できるようにしたものです。
ProcessingはJavaベースなのですが、今回は使いたいライブラリがJavaScriptのものだったのでこれを使うことにしました。
CDN版があったので、前回のVue.jsと同様にこちらを使っていきます。
暇だったからp5.jsで遊んでた
— torin (@yurkth) 2020年2月21日
画像はPerlin noiseに合わせて点の密度を変えてるPoisson Disk Samplingです
JavaScriptもProcessingもほとんど使ったことなかったけど1時間ちょっとでできた pic.twitter.com/U5nQizjrUd
実装
点の準備
まずは、スタートとゴールになる2つの点を用意します。
そして、2点を直径とした円の範囲内にPoisson Disk Samplingで点を生成します。
Poisson Disk Samplingは、一定の距離感を保って点を生成するアルゴリズムです。
リンクの作成
準備した点に対して、ドロネー三角形分割を行って道を作ります。
A*による経路探索
作られた道に対してA*で経路を探索します。
一度経路を探索したら、経路上にある始点と終点を除くランダムな点を選択し、除外してから再び探索します。
これを複数回繰り返すことで下のような道が生まれます。
仕上げ
各点をランダムな絵文字に置き換え、Perlin noiseでエフェクトをつけて完成です。
まとめ
サークルの合宿中に思いついたアルゴリズムを実装してみました。割といい感じになったのではないでしょうか。
デモを公開してから、こちらの実装を教えていただいたのですが物理学を使うのも面白いですね。
最初はOpenSiv3Dで作ろうかと思ったのですが、ドロネー三角形分割がv0.4.3で追加されるようなので追加されたら移植したいです。p5.jsで作るとGitHub Pagesで簡単に公開できるのがいいですね。
使用したライブラリ
- GitHub - kchapelier/poisson-disk-sampling: Poisson disk sampling in arbitrary dimensions
- GitHub - mapbox/delaunator: An incredibly fast JavaScript library for Delaunay triangulation of 2D points
- GitHub - anvaka/ngraph.path: Path finding in a graph
- GitHub - anvaka/ngraph.graph: Graph data structure in JavaScript