Phaser-islandjs-plugin by luckylooke

├── .gitignore ├── LICENSE ├── README.md ├── index.html ├── params.json ├── src ├── assets │ └── cave.png ├── game.js ├── index.html ├── lib │ ├── cellautoVoronoi.js │ ├── highlight.pack.js │ ├── phaser.js │ └── rhill-voronoi-core.min.js └── plugin │ ├── PhaserIslandjsPlugin.js │ └── perlin.js └── stylesheets ├── github-light.css ├── github.css ├── normalize.css └── stylesheet.css /.gitignore: -------------------------------------------------------------------------------- 1 | npm-debug.log -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 luckylooke 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Phaser island.js plugin 2 | Phaser.io plugin for procedural generation and rendering island maps based on island.js (https://github.com/lebesnec/island.js) 3 | 4 | # What I have done 5 | I mostly just refactor render functions to get rid of paper.js dependency (phaser framework has own rendering system). I also added seed as config parameter so you can get same islands by it. I have also created [modified version](https://gist.github.com/luckylooke/85b0aa072ad8e95f2cef) of [cellauto.js](https://sanojian.github.io/cellauto/) to support polygonal enviroment. 6 | 7 | # Plans 8 | Creating a game to show use of the plugin! :) 9 | 10 | Collaboration welcomed! 11 | 12 | #WEB with DEMO 13 | [link: luckylooke.github.io/phaser-islandjs-plugin](http://luckylooke.github.io/phaser-islandjs-plugin) 14 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Phaser-islandjs-plugin by luckylooke 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 23 | 24 |

25 | 26 |

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

27 |

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

35 | 36 |

Dependencies

37 | 38 |

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

46 | 47 |

DEMO

48 | 49 |

Reload page to see another generated island.

50 | 51 |

52 | 53 |

54 |

55 | 56 |

57 | 58 | 59 |

Usage

60 | 61 |

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

62 | 63 |


 64 |   <script src="lib/phaser.js"></script>
 65 |   <script src="lib/rhill-voronoi-core.min.js"></script>
 66 |   <script src="plugin/perlin.js"></script>
 67 |   <script src="plugin/PhaserIslandjsPlugin.js"></script>
 68 |   <script src="game.js"></script>
 69 |

70 | 71 | 72 |

You need hidden canvas in your page for creating perlin noise

73 | 74 |


 75 |   <canvas id="perlin" hidden="true"></canvas>
 76 |

77 | 78 |

In your game create function

79 | 80 |


 81 |   var island = this.game.plugins.add(Phaser.Plugin.Island, {
 82 |     // custom settings
 83 |     width: 500,
 84 |     height: 500,
 85 |     perlinWidth: 256,
 86 |     perlinHeight: 256,
 87 |     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.
 88 |     nbSites: 10000, // numbers of voronoi cell
 89 |     sitesDistribution: 'hexagon', // distribution of the site of the voronoi graph : random, square or hexagon
 90 |     sitesRandomisation: 80, // will move each site in a random way (in %), for the square or hexagon distribution to look more random
 91 |     nbGraphRelaxation: 0, // nb of time we apply the relaxation algo to the voronoi graph (slow !), for the random distribution to look less random
 92 |     cliffsThreshold: 0.15,
 93 |     lakesThreshold: 0.005, // lake elevation will increase by this value (* the river size) when a new river end inside
 94 |     nbRivers: (10000 / 200),
 95 |     maxRiversSize: 4,
 96 |     // seed: 168165168, // randomization can be seeded
 97 |     shadeOcean: true
 98 |   });
 99 |   
100 |   // You can change colors before rendering
101 |   island.DISPLAY_COLORS.OCEAN = '#4488ff';
102 |   
103 |   // Start rendering
104 |   island.renderNow();
105 |

106 | 107 | 108 |

DEMO - debug=true

109 | 110 |

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

111 | 112 |

113 | 114 |

115 | 116 |

117 | 118 |

Used code for debuged DEMO

119 | 120 |


121 |   function create(){
122 |     var island = this.game.plugins.add(Phaser.Plugin.Island, {
123 |           nbSites: 100,
124 |           perlinWidth: this.game.width/2,
125 |           perlinHeight: this.game.height/2,
126 |           allowDebug: true
127 |       });
128 |       island.renderNow();
129 |       this.game.input.onDown.add(function click(pointer) {
130 |         island.renderSite(island.cellIdFromPoint(pointer.x, pointer.y));
131 |       });
132 |   }
133 |   
134 |   var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, 'phaser-game-debugger', {create: create});
135 |

136 | 137 | 138 |

DEMO - cellular automata

139 | 140 |

141 | Would you like to cellular automata on island map cells? Good news, 142 | I have rewritten cellauto.js lib by Jonas Olmstead 143 | to cellautoVoronoi.js version which can be used here. 144 | 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. 145 | Every click is one step. If you want to restart example, just reload page. 146 |

147 | 148 |

Used code for cave demo

149 | 150 |


151 |     function preload(){
152 |     this.load.image('cave', 'src/assets/cave.png');
153 |   }
154 |   function create(){
155 |     var island = this.game.plugins.add(Phaser.Plugin.Island, {
156 |       // custom settings
157 |         perlinWidth: this.game.width/2,
158 |         perlinHeight: this.game.height/2
159 |     });
160 |     // island.DISPLAY_COLORS.OCEAN = '#4444ff';
161 |     island.renderNow();
162 |     
163 |     function example_caves() {
164 |   
165 |     	var cells = island.diagram.cells,
166 |     	  world = new CAVWorld(cells);
167 |     
168 |     	world.registerCellType('wall', {
169 |     		process: function (cellVoronoi) {
170 |     		  var neighbors = cellVoronoi.neighborsCache || island.getNeighbors(cellVoronoi.site.voronoiId),
171 |     		    surrounding  = this.countSurroundingCellsWithValue(neighbors, 'wasOpen');
172 |    
173 |     			this.open = (this.wasOpen && surrounding >= 3) || surrounding >= 5;
174 |     		},
175 |     		reset: function () {
176 |     			this.wasOpen = this.open;
177 |     		}
178 |     	}, function () {
179 |     		//init
180 |     		this.open = Math.random() > 0.40;
181 |     	});
182 |     
183 |     	world.initialize([
184 |     		{ name: 'wall', distribution: 100 }
185 |     	]);
186 |     
187 |     	return world;
188 |     }
189 |     
190 |     var test = example_caves();
191 |     
192 |     var testBtnFn = function() {
193 |       test.step();
194 |       console.log('testBtnFn');
195 |       for (var i = 0; i < test.voronoiCells.length; i++) {
196 |         var cell = test.voronoiCells[i],
197 |           ctx = island.debugLayer.ctx,
198 |           borders = cell.bordersCache || island.getBorders(cell.site.voronoiId),
199 |           bLength = borders.length, y;
200 |           
201 |         ctx.fillStyle = cell.ca.open ? '#fff' : '#000';
202 |         ctx.beginPath();
203 |         ctx.moveTo(borders[0].x,borders[0].y);
204 |         for (y = 1; y < bLength; y++) {
205 |           ctx.lineTo(borders[y].x,borders[y].y);
206 |         }
207 |         ctx.closePath();
208 |         ctx.fill();
209 |       }
210 |       island.debugLayer.dirty = true;
211 |     };
212 |     
213 |     var button = this.game.add.button(95, 400, 'cave', testBtnFn, this, 2, 1, 0);
214 |       button.fixedToCamera = true;
215 |       button.cameraOffset.setTo(10, 30);
216 |     }
217 |     
218 |   new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, 'phaser-game', {create: create, preload:preload});
219 |

220 | 221 | 222 | 227 | 228 |

12 |

Phaser-islandjs-plugin

Phaser.io plugin for procedural generation and rendering island mapsbased on island.js (https://github.com/lebesnec/island.js)

Dependencies

DEMO

Usage

DEMO - debug=true

DEMO - cellular automata

Phaser.io plugin for procedural generation and rendering island maps
based on island.js (https://github.com/lebesnec/island.js)