Forums » Help » Random Map Generation Help?

Hello,

Yesterday I spent many hours trying to figure out a way to do random map generation. I got the game to show random tiles every time the game was loaded but all of the tiles were collisions so the player couldn't actually move around on them.

I also couldn't think of any way to interact with any of the tiles such as remove an individual tile. The code provided now doesn't work or show anything on screen. I have no idea what happened but it just stopped working.

I would appreciate any help you can give, thanks!

Here is the code:

ig.module( 
	'game.main' 
)
.requires(
	'impact.game',
	'impact.collision-map',
        'impact.background-map',
	'impact.debug.debug',
	'game.entities.player',
	'impact.font'
)
.defines(function(){

MyGame = ig.Game.extend({

	font: new ig.Font( 'media/04b03.font.png' ),
	tiles: new ig.Image( 'media/tileset.png' ),

	map: [],
	mapSize: 64,
	
	init: function() {
        for( var y = 0; y < this.mapSize; y++ ) {    
        	for( var x = 0; x < this.mapSize; x++ ) {
            	this.map[y] = this.getRow();
            	this.map[x] = this.getColumn();
        	}
        }

        this.collisionMap = new ig.CollisionMap( this.mapSize, this.map );
        var bgmap = new ig.BackgroundMap( this.mapSize, this.map, this.tiles );

        this.backgroundMaps.push( bgmap );

		console.log(this.map);

		ig.input.bind( ig.KEY.W, 'up' );
		ig.input.bind( ig.KEY.S, 'down' );
		ig.input.bind( ig.KEY.A, 'left' );
		ig.input.bind( ig.KEY.D, 'right' );

		ig.game.spawnEntity( EntityPlayer, 0, 0 );


	},

	getRow: function() {
		var row = [];
		for( var x = 0; x < this.mapSize; x++ ) {
			// row[x] = Math.random() > 0.93 ? 1 : 0;

			row[x] = Math.ceil(Math.random() * 5);
		}
		return row;
	},

	getColumn: function() {
		var column = [];
		for( var y = 0; y < this.mapSize; y++ ) {
			// column[y] = Math.random() > 0.93 ? 1 : 0;
			column[y] = Math.ceil(Math.random() * 5);
		}
		return column;
	},
	
	update: function() {
		// Update all entities and backgroundMaps
		this.parent();

		var player = ig.game.getEntitiesByType( EntityPlayer )[0];

		var newCamX = player.pos.x - ig.system.width/2;
		var newCamY = player.pos.y - ig.system.height/2;

		// Calculate the level width and height in pixels, subtract screen size
		var maxX = this.collisionMap.width * this.collisionMap.tilesize - ig.system.width;
		var maxY = this.collisionMap.height * this.collisionMap.tilesize - ig.system.height;

		// Set new screen coordinates
		this.screen.x = newCamX.limit( 0, maxX );
		this.screen.y = newCamY.limit( 0, maxY );
  
        if (player.pos.y > this.screen.y + ig.system.height - this.collisionMap.tilesize) {
            player.pos.y = this.screen.y + ig.system.height - this.collisionMap.tilesize;
        }
        if (player.pos.y < this.screen.y) {
            player.pos.y = this.screen.y;
        } 
        if (player.pos.x > this.screen.x + ig.system.width - this.collisionMap.tilesize) {
            player.pos.x = this.screen.x + ig.system.width - this.collisionMap.tilesize;
        }
        if (player.pos.x < this.screen.x) {
            player.pos.x = this.screen.x;
        }
		
		// Add your own, additional update code here
	},
	
	draw: function() {
		// Draw all entities and backgroundMaps
		this.parent();
	}
});


// Start the Game with 60fps, a resolution of 320x240, scaled
// up by a factor of 2
ig.main( '#canvas', MyGame, 60, 320, 240, 2 );

});

Hey, I saw you messages in the #impactjs channel yesterday, but you were already gone I wanted to reply. So let me explain here :)

Usually the Background and the Collision maps in your game use different data. They are independent of each other. As you already figured out, everything but the tile 0 in the CollisionMap implies a collision, so you need one data array for your BackgroundMap and a separate one for your CollisionMap.

(The Drop example gets around this by only ever using one tile (the tile #1) in the BackgroundMap, so the CollisionMap and BackgroundMap can share their data)

So lets say you construct data for a random BackgroundMap that looks like this

[
	[0,1,4,6,3],
	[2,1,0,6,2],
	[0,1,4,0,1],
	[6,1,4,6,3]
]

Now lets assume the only background tile that should be solid is the tile #6. So for your CollisionMap, you need to create a new data array that looks like this:

[
	[0,0,0,1,0],
	[0,0,0,1,0],
	[0,0,0,0,0],
	[1,0,0,1,0]
]

I hope this makes sense :)

Hi dominic,

Sorry about that, I had to go and wasn't sure if I missed any messages and if there was a way to view chat history (I am sort of new to IRC). That makes sense, thanks for your help!

For anyone who would also like some basic random tile generation with specific tiles being collisions here is the code. There may be better ways to do what I have done but this works well, I think. I will soon find out when I start adding more features. Also, some code used from the Drop game example so credit there to dominic.

ig.module( 
	'game.main' 
)
.requires(
	'impact.game',
	'impact.collision-map',
	'impact.background-map',
	'impact.debug.debug',
	'game.entities.player',
	'impact.font'
)
.defines(function(){

MyGame = ig.Game.extend({

	collisionmap: [],
	backgroundmap: [],

	mapSize: 16,
	tileSize: 32,
	
	init: function() {
        for( var y = 0; y < this.mapSize; y++ ) { 
        	for( var x = 0; x < this.mapSize; x++ ) {
        		var data1 = this.getArray();
        		var data2 = this.getArray();

            	this.backgroundmap[y] = data1;
            	this.backgroundmap[x] = data2;

            	this.collisionmap[y] = this.getArrayCol(data1);
            	this.collisionmap[x] = this.getArrayCol(data2);
        	}
        }

        this.collisionMap = new ig.CollisionMap( this.tileSize, this.collisionmap );
        var bgmap = new ig.BackgroundMap( this.tileSize, this.backgroundmap, 'media/tileset.png' );

        this.backgroundMaps.push( bgmap );
	},

	getArray: function() {
		var row = [];

		for( var x = 0; x < this.mapSize; x++ ) { 
			row[x] = Math.ceil(Math.random() * 6);
		}

		return row;
	},

	getArrayCol: function(data) {
		var row = data;
		var colrow = [];

		for( var x = 0; x < this.mapSize; x++ ) { 
			if( row[x] == 1 || row[x] == 2 ) { // tiles 1 and 2 will not have collisions
				colrow[x] = 0;
			} else {
				colrow[x] = 1;
			}
		}

		return colrow;
	},
	
	update: function() {
		this.parent();

		var player = ig.game.getEntitiesByType( EntityPlayer )[0];

		var newCamX = player.pos.x - ig.system.width/2;
		var newCamY = player.pos.y - ig.system.height/2;

		var maxX = this.collisionMap.width * this.collisionMap.tilesize - ig.system.width;
		var maxY = this.collisionMap.height * this.collisionMap.tilesize - ig.system.height;

		this.screen.x = newCamX.limit( 0, maxX );
		this.screen.y = newCamY.limit( 0, maxY );
  
        if (player.pos.y > this.screen.y + ig.system.height - this.collisionMap.tilesize) {
            player.pos.y = this.screen.y + ig.system.height - this.collisionMap.tilesize;
        }
        if (player.pos.y < this.screen.y) {
            player.pos.y = this.screen.y;
        } 
        if (player.pos.x > this.screen.x + ig.system.width - this.collisionMap.tilesize) {
            player.pos.x = this.screen.x + ig.system.width - this.collisionMap.tilesize;
        }
        if (player.pos.x < this.screen.x) {
            player.pos.x = this.screen.x;
        }
	},
	
	draw: function() {
		this.parent();
	}
});

ig.main( '#canvas', MyGame, 60, 480, 320, 2 );

});

Thanks very much for sharing :)