CaptainCannabis

Members
  • Content Count

    2
  • Joined

  • Last visited

About CaptainCannabis

  • Rank
    Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Like this: var game = new Phaser.Game(1280, 1024, Phaser.AUTO, 'eAnt', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.json('backgroundTileset', __dirname+'/assets/bg.json'); game.load.image('background', __dirname+'/assets/bg.png'); } var cursors; var map; var layer1; var tileset1; function create() { // Add data to the cache // game.cache.addJSON('backgroundTileset', 'backgroundTileset', data, Phaser.Tilemap.CSV); console.log(JSON.stringify(game.cache.getJSON('backgroundTileset'))); 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); // Layer für den Hintergrund erstellen, 24 x 24 Tiles die jeweils 16 x 16 px groß sind layer1 = map.create('background', 240, 240, 16, 16); layer1.scrollFactorX = 1.5; layer1.scrollFactorY = 1.5; // Scroll it layer1.resizeWorld(); // Das Layer mit Tiles füllen for (var y = 0; y < 24; y++){ for (var x = 0; x < 24; x++){ var zufall = game.rnd.between(0, 100).toString(); if(zufall > 75){ var SpriteIndex = resolveTileSet('Sand'); }else{ var SpriteIndex = resolveTileSet('Grass'); } // Zufälliges Bild aus dem Hintergrund-Tileset var t = new Phaser.Tile(layer1, SpriteIndex, x, y, 16, 16); map.putTile( t, x, y, layer1); } } cursors = game.input.keyboard.createCursorKeys(); } function resolveTileSet(TerrainType){ var backgroundTileset = game.cache.getJSON('backgroundTileset'); var terrain = null; var terrainIndex; for(var t=0; t < backgroundTileset.terrains.length; t++){ if(backgroundTileset.terrains[t].name === TerrainType){ terrain = backgroundTileset.terrains[t]; terrainIndex = t break; } } if(terrain){ return terrainIndex; } return null; } 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() { }
  2. 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() { }