Dungeon generation + visualization in javascript / webgl.
Live version here.
The general idea is borrowed from this blog article on gamasutra.
Project builds into 2 scripts: dungeonizer.js and dungeonVisualiser.js.
Details:
- Whole dungeon is on integer grid.
- Seeded random is used, so you could reconstruct dungeon from id.
Algorithm (briefly):
- Room sizes are generated.
- Rooms are placed without collision (placing rooms one by one. Moving room in random direction until there are no collisions, after that doing a round trying to place room closer).
- Main rooms are chosen and placed into dungeon (room is main if its width and height is more than certain threshold).
- Delanay triangulation is formed from main rooms centers.
- Forming minimal spanning tree from triangulation + leaving some extra edges.
- Rooms which are connected in graph are connected with tunnels.
- Rooms which are intersected by tunnels are attached to dungeon.
- Tunnels are splited, so there are no tunnels over rooms.
- Walls generation is completed, walls-walls, walls-tunnels intersections are resolved.
Dungeon generator usage:
- include
dungeonizer.js
to your HTML (could be found at dist/scripts). var dungeon = window.dungeonizer.generateDungeon(params, withWalls, isDebug)
orvar dungeon = window.dungeonizer.generateDungeonById(dungeonId, withWalls, isDebug)
.params
is expected to be an object with following structure:{ seed: 'your seed string', dungeonSize: Number > 0, roomSizeDistribution: 'normal' || 'uniform', roomSizeMean: Number > 0, roomSizeDeviation: Number > 0, mainRoomThreshold: Number > 0, connectivity: Number <= 1, density: Number <= 1}
.- all parameters are optional and defaults could be found at src/scripts/config.js.
withWalls
determines whether walls are generated and returned.isDebug
determines whether additional information is returned.dungeonId
is a string composed from params, look the structure in src/scripts/app-uigenerateNewDungeonId()
method.- returned
dungeon
will be an object with following structure:{rooms: [{x, y, w, h, size, x1, x2, y1, y2}, ...], tunnels: [tun1_x1, tun1_y1, tun1_x2, tun1_y2, tun2_x1, ...]}
. - if
withWalls
is set, dungeon object will containwalls
property with same structure as tunnels. - if
isDebug
is set, dungeon object will containtrashRooms
property with same structure as rooms anddelaunayTriangles
,mstLines
,leftAliveLines
properties with arrays of lines coordinates ([line1_x1, line1_y1, line1_x2, line1_y2, line2_x1, ...]
).
To launch the project locally:
- Install Node.js v5 or higher.
- Clone project to your hard drive.
- Run "npm install" in project root directory.
- Run "gulp watch" to launch dev server.
- Look in terminal what port is used and navigate to http://localhost:${port} (default is http://localhost:9000).
- To update build run gulp build.