Dynamic TileMap

[CaptainCannabis]

Took me some time to understand the example with a blank tilemap. Maybe because it comes along with mouse input and extraction of tiles from a predefined source.

So i thought i'll leave this here. assets/bg.png is an image with 32x32 pixels holding 4 different background sprites.

Dynamic tile map created from an array (found in another example):

var game = new Phaser.Game(1280, 1024, Phaser.AUTO, 'eAnt', { preload: preload, create: create, update: update, render: render });

function preload() {
	game.load.image('background', __dirname+'/assets/bg.png');
}
var cursors;
var map;
var sand;
var layer1;
var obstacks;
var tileset1;
var tileset2;
function create() {

	game.stage.backgroundColor = '#2d2d2d';
    
    //  Create some map data dynamically
    //  Map size is 128x128 tiles
    var data = '';

    for (var y = 0; y < 24; y++)
    {
        for (var x = 0; x < 24; x++)
        {
            data += game.rnd.between(0, 3).toString();

            if (x < 23)
            {
                data += ',';
            }
        }

        if (y < 23)
        {
            data += "\n";
        }
    }
    
    //console.log(data);

    //  Add data to the cache
    game.cache.addTilemap('dynamicMap', null, data, Phaser.Tilemap.CSV);

    map = game.add.tilemap('dynamicMap',16, 16);
    
    // Das Tilset für den Boden hinzufügen
    tileset1 = map.addTilesetImage('background','background', 16, 16);

    console.log('tileset1.tileWidth',tileset1.tileWidth);
    console.log('tileset1.tileHeight',tileset1.tileHeight);
    console.log('tileset1.columns',tileset1.columns);
    console.log('tileset1.rows',tileset1.rows);
	console.log('tileset1.total',tileset1.total);

	// Layer für den Hintergrund erstellen, Maße durch das data-Array vorgegeben
    layer1 = map.createLayer(0);
    layer1.scrollFactorX = 1.5;
    layer1.scrollFactorY = 1.5;

    // Scroll it
    layer1.resizeWorld();
	

    console.log('layer1.world.x',layer1.world.x);
    console.log('layer1.world.y',layer1.world.y);
    console.log('layer1.world.x',map.heightInPixels);
    console.log('layer1.world.y',map.widthInPixels);
    console.log('map.tileWidth',map.tileWidth);
    console.log('map.tileHeight',map.tileHeight);

    //  Hindernisse
    obstacks = game.add.group();
    
    cursors = game.input.keyboard.createCursorKeys();
}

function update() {

    if (cursors.left.isDown)
    {
        game.camera.x--;
    }
    else if (cursors.right.isDown)
    {
        game.camera.x++;
    }

    if (cursors.up.isDown)
    {
        game.camera.y--;
    }
    else if (cursors.down.isDown)
    {
        game.camera.y++;
    }

}
function render() {
}

Dynamic tile map with "on the fly" created random tile:

var game = new Phaser.Game(1280, 1024, Phaser.AUTO, 'eAnt', { preload: preload, create: create, update: update, render: render });

function preload() {
	game.load.image('background', __dirname+'/assets/bg.png');
}
var cursors;
var map;
var layer1;
var obstacks;
var tileset1;
function create() {

	game.stage.backgroundColor = '#2d2d2d';

    // Eine leere TileMap erstellen
    map = game.add.tilemap();

    // Das Tilset für den Boden hinzufügen
    tileset1 = map.addTilesetImage('background','background', 16, 16);

    console.log('tileset1.tileWidth',tileset1.tileWidth);
    console.log('tileset1.tileHeight',tileset1.tileHeight);
    console.log('tileset1.columns',tileset1.columns);
    console.log('tileset1.rows',tileset1.rows);
	console.log('tileset1.total',tileset1.total);

	// Layer für den Hintergrund erstellen, 24 x 24 Tiles die jeweils 16 x 16 px groß sind
    layer1 = map.create('background', 24, 24, 16, 16);

    layer1.scrollFactorX = 1.5;
    layer1.scrollFactorY = 1.5;

    //  Scroll it
    layer1.resizeWorld();
	

    console.log('layer1.world.x',layer1.world.x);
    console.log('layer1.world.y',layer1.world.y);
    console.log('layer1.world.x',map.heightInPixels);
    console.log('layer1.world.y',map.widthInPixels);
    console.log('map.tileWidth',map.tileWidth);
    console.log('map.tileHeight',map.tileHeight);

	// Das Layer mit Tiles füllen
    for (var y = 0; y < 24; y++){
        for (var x = 0; x < 24; x++){
        	
        	// Zufälliges Bild aus dem Hintergrund-Tileset
        	var SpriteIndex = game.rnd.between(0, tileset1.total-1).toString();

        	var t = new Phaser.Tile(layer1, SpriteIndex, x, y, 16, 16);
			map.putTile( t, x, y, layer1);
		}
	}

    //  Hindernisse
    obstacks = game.add.group();

    cursors = game.input.keyboard.createCursorKeys();
}

function update() {

    if (cursors.left.isDown)
    {
        game.camera.x--;
    }
    else if (cursors.right.isDown)
    {
        game.camera.x++;
    }

    if (cursors.up.isDown)
    {
        game.camera.y--;
    }
    else if (cursors.down.isDown)
    {
        game.camera.y++;
    }

}
function render() {
}