Resizing a tiledmap when using phaser

Question

 var cw = window.innerWidth; var ch = window.innerHeight; var game = new Phaser.Game(cw, ch, Phaser.AUTO, 'game', { preload: preload, create: create, update: update }); function preload() { game.load.tilemap('Background', 'https://gist.githubusercontent.com/anonymous/c61b37df015a0b2af1d7/raw/172bf9c2d4c20c56699eacce263525409caaf743/54996634e4b0a35d00c9b516.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tiles', 'http://i.imgur.com/gmWQIFK.png'); game.load.image('player', 'http://i.imgur.com/tCCrLyh.png'); } var map; var layer; var player; var _keyboard; var playerJumping; function create() { player = game.add.sprite(0, ch - 32, 'player'); game.world.setBounds(0, 0, cw, ch); game.physics.startSystem(Phaser.Physics.ARCADE); game.physics.arcade.gravity.y = 300; game.physics.enable(player, Phaser.Physics.ARCADE); player.body.collideWorldBounds = true; game.stage.backgroundColor = '#787878'; map = game.add.tilemap('Background'); map.addTilesetImage('smb_tiles', 'tiles'); layer = map.createLayer('Tile Layer 1'); layer.resizeWorld(); _keyboard = game.input.keyboard.createCursorKeys(); game.camera.follow(player); } function update() { player.body.x += 2; if (_keyboard.up.isDown && player.body.onFloor()) { playerJumping = true; player.body.velocity.y = -2; } else { playerJumping = false; } } 

 <script src="http://yourjavascript.com/222115941388/phaser-min.js"></script> <div id="game"></div> 

As you can see the tiled Map start at a height of 320px bcs originally the map have this height and if I change the game height to 320px everything works fine , but my question is if i want to make the tiledMap responsive to innerHeight and width for the screen how can i do this so the tiled map start at the bottom of the screen and not at the 320px

you can see how the tiled map layer is starting in the middle of the screen . is there by any chance something i can do to make it start at the bottom of the screen

Answer 1

When you want to create your game use percent values instead fix values as below:

var game = new Phaser.Game("100%", "100%", Phaser.AUTO, '');

also you can use scaleManager to tell the game to resize the renderer to match the game dimensions (ie 100% browser width / height):

game.scale.scaleMode = Phaser.ScaleManager.RESIZE;

you can also check the scaleManager documentation for more settings. Also there is a book from community about scaleManager that helps you for responsive game designs if you want to know more here .