Skip to main content

On Sale: GamesAssetsToolsTabletopComics
Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

Pixelbox

Create 2D games in JavaScript, made easier · By Cedric Stoquer

i need help with proceural generation

A topic by INKOU created Mar 18, 2021 Views: 356 Replies: 4
Viewing posts 1 to 5

ok, im new to javascript so sry for being bad at this lol, but i wanted to make a game setted in a procedural generated desert, so i made a bunch of rooms that will be put together to form the desert, the only problem is that i dont know how to do this

lets say i wante to make a 500 x 500 tiles that are 16 x 16 each

(+2)

First, I must say that procedural generation is not a very beginner friendly technique, but in no way I want to discourage you, quite the opposite, but since the ideas behind it are not trivial, you can find it hard in the beginning and lose the interest. Because of that, I would first suggest you try to create something the way you want (your desert with the rooms) in a static way, and later migrate to a  procedurally generated way.

That said, I would suggest you read this: https://craiky.github.io/tutorial/ it's a tutorial about procedural generation, but it teaches it in a nice way for someone that's learning programming (and it's uses javascript, which is a plus).

Later, when you feel more comfortable with javascript and programming, I would recommend you to check Roguebasin(it's very focused on Roguelikes but it has very nice articles on generating procedural maps and other techniques to develop these kind of games, that can be used in many different games).

Good luck.

(2 edits) (+1)

I would start small by creating an algorithm that generate one of the 16x16 room. Maybe start with a simple function that create an empty map, and add some random sprites in it. It could look like this:

var TileMap = require('pixelbox/TileMap');

function createRoom() {
  var map = new TileMap(16, 16);
  var nbSprites = random(40);
  for (var i = 0; i < nbSprites; i++) {
    var x = random(16);
    var y = random(16);
    var sprite = random(64);
    map.set(x, y, sprite);
  }
  return map;
}

var room = createRoom();
draw(room, 0, 0);

Then, implement a player character that move into this room (look at this tutorial).

When the character reach the border of this room, we can create another room to continue the desert.

Finally, if you want the desert to look the same when the character move back to the previous room, you will need to control the randomness. For that, I recommend to look into “Pseudo-random number generator” that can be seeded.

First, create a fixed walkthrough formed with N maps. You must try it manually first.

When this works, you can define a serie of parameters that you could vary. The RNG output should be used for calculating these parameters. Begin using manual values for this. Same input should generate the same output map, in order to re-create the previous maps retrieving older values. 

Keep in mind that the randomness must be consistent, in order to not make your game unplayable.

Remember that "A good randomness began with a good manual design"