Tiled file resizing when using phaser
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 start of the tiled map starts at height 320px
bcs, the map has that height, and if I change the height of the game to 320px
, everything is fine, but my question is if I want to make the tiledMap respond to the innerHeight and width for the screen. how can I do this so that the tiled map starts at the bottom of the screen and not on320px
you can see how the tiled layer starts in the middle of the screen. is there something I can do to get it running at the bottom of the screen.
source to share
If you want to create your game, use the percentage values and then correct the values as shown below:
var game = new Phaser.Game("100%", "100%", Phaser.AUTO, '');
also you can use the scaleManager to tell the game to resize the renderer to fit the game dimensions (i.e. browser width / height 100%):
game.scale.scaleMode = Phaser.ScaleManager.RESIZE;
you can also check the scaleManager documentation for more settings. There is also a community book on scaleManager to help you with agile games if you want to know more here .
source to share