Search the Community

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() { }

I build a scene and run the following: BABYLON.Tools.CreateScreenshot(engine, scene.activeCamera, 400); The resulting, beautiful 400x400 png is entirely transparent. What could cause this?