Phaser-islandjs-plugin

Island map generator in JavaScript, using a Voronoi graph and perlin noise provided as Phaser.io plugin.

• Inspired by http://www-cs-students.stanford.edu/~amitp/game-programming/polygon-map-generation/
• Use Raymond Hill Voronoi implementation : http://github.com/gorhill/Javascript-Voronoi
• Use Sean McCullough perlin noise generator (modified!) : http://gist.github.com/banksean/304522#file-perlin-noise-simplex-js

Dependencies

• Phaser game framework phaser.io
• Raymond Hill Voronoi implementation : http://github.com/gorhill/Javascript-Voronoi
• Modified Sean McCullough perlin noise generator : http://github.com/luckylooke/phaser-islandjs-plugin/blob/master/src/plugin/perlin.js

DEMO

Reload page to see another generated island.

Usage

Dependency files and plugin file need to be loaded before main game code

  <script src="lib/phaser.js"></script>
  <script src="lib/rhill-voronoi-core.min.js"></script>
  <script src="plugin/perlin.js"></script>
  <script src="plugin/PhaserIslandjsPlugin.js"></script>
  <script src="game.js"></script>

You need hidden canvas in your page for creating perlin noise

  <canvas id="perlin" hidden="true"></canvas>

In your game create function

  var island = this.game.plugins.add(Phaser.Plugin.Island, {
    // custom settings
    width: 500,
    height: 500,
    perlinWidth: 256,
    perlinHeight: 256,
    allowDebug: false, // if set to true, you can click on the map to enter "debug" mode. Warning : debug mode is slow to initialize, set to false for faster rendering.
    nbSites: 10000, // numbers of voronoi cell
    sitesDistribution: 'hexagon', // distribution of the site of the voronoi graph : random, square or hexagon
    sitesRandomisation: 80, // will move each site in a random way (in %), for the square or hexagon distribution to look more random
    nbGraphRelaxation: 0, // nb of time we apply the relaxation algo to the voronoi graph (slow !), for the random distribution to look less random
    cliffsThreshold: 0.15,
    lakesThreshold: 0.005, // lake elevation will increase by this value (* the river size) when a new river end inside
    nbRivers: (10000 / 200),
    maxRiversSize: 4,
    // seed: 168165168, // randomization can be seeded
    shadeOcean: true
  });
  
  // You can change colors before rendering
  island.DISPLAY_COLORS.OCEAN = '#4488ff';
  
  // Start rendering
  island.renderNow();

DEMO - debug=true

Try to click on the map, you will get extra debug info from cell.

Used code for debuged DEMO

  function create(){
    var island = this.game.plugins.add(Phaser.Plugin.Island, {
          nbSites: 100,
          perlinWidth: this.game.width/2,
          perlinHeight: this.game.height/2,
          allowDebug: true
      });
      island.renderNow();
      this.game.input.onDown.add(function click(pointer) {
        island.renderSite(island.cellIdFromPoint(pointer.x, pointer.y));
      });
  }
  
  var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, 'phaser-game-debugger', {create: create});

DEMO - cellular automata

Would you like to cellular automata on island map cells? Good news, I have rewritten cellauto.js lib by Jonas Olmstead to cellautoVoronoi.js version which can be used here. You can click on cave icon in first demo above to see it in action. I have used cave example from cellauto.js demo page. Every click is one step. If you want to restart example, just reload page.

Used code for cave demo

    function preload(){
    this.load.image('cave', 'src/assets/cave.png');
  }
  function create(){
    var island = this.game.plugins.add(Phaser.Plugin.Island, {
      // custom settings
        perlinWidth: this.game.width/2,
        perlinHeight: this.game.height/2
    });
    // island.DISPLAY_COLORS.OCEAN = '#4444ff';
    island.renderNow();
    
    function example_caves() {
  
    	var cells = island.diagram.cells,
    	  world = new CAVWorld(cells);
    
    	world.registerCellType('wall', {
    		process: function (cellVoronoi) {
    		  var neighbors = cellVoronoi.neighborsCache || island.getNeighbors(cellVoronoi.site.voronoiId),
    		    surrounding  = this.countSurroundingCellsWithValue(neighbors, 'wasOpen');
   
    			this.open = (this.wasOpen && surrounding >= 3) || surrounding >= 5;
    		},
    		reset: function () {
    			this.wasOpen = this.open;
    		}
    	}, function () {
    		//init
    		this.open = Math.random() > 0.40;
    	});
    
    	world.initialize([
    		{ name: 'wall', distribution: 100 }
    	]);
    
    	return world;
    }
    
    var test = example_caves();
    
    var testBtnFn = function() {
      test.step();
      console.log('testBtnFn');
      for (var i = 0; i < test.voronoiCells.length; i++) {
        var cell = test.voronoiCells[i],
          ctx = island.debugLayer.ctx,
          borders = cell.bordersCache || island.getBorders(cell.site.voronoiId),
          bLength = borders.length, y;
          
        ctx.fillStyle = cell.ca.open ? '#fff' : '#000';
        ctx.beginPath();
        ctx.moveTo(borders[0].x,borders[0].y);
        for (y = 1; y < bLength; y++) {
          ctx.lineTo(borders[y].x,borders[y].y);
        }
        ctx.closePath();
        ctx.fill();
      }
      island.debugLayer.dirty = true;
    };
    
    var button = this.game.add.button(95, 400, 'cave', testBtnFn, this, 2, 1, 0);
      button.fixedToCamera = true;
      button.cameraOffset.setTo(10, 30);
    }
    
  new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, 'phaser-game', {create: create, preload:preload});