Resizing a tiledmap when using phaser

Game Development Asked by Sora on December 16, 2020

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', '', null, Phaser.Tilemap.TILED_JSON);
            game.load.image('tiles', '');
            game.load.image('player', '');

        var map;
        var layer;
        var player;
        var _keyboard;
        var playerJumping;
        function create() {
            player = game.add.sprite(0, ch - 32, 'player');
  , 0, cw, ch);
            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');

            _keyboard = game.input.keyboard.createCursorKeys();
        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=""></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

enter image description here

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

One Answer

In Javascript, you can set an HTMLElement's position on the screen by setting the and and

You probably need to create a div element first and position it to where you want, then set the parent parameter in Phaser.Game to the div element.

Answered by user55564 on December 16, 2020

Add your own answers!

Related Questions

Instantiate random different gameObjects in specific spaces?

1  Asked on November 2, 2021 by hapk


Gradual strafe rotation with focus on mouse (circle-strafe)

2  Asked on November 2, 2021 by lacklustertoady


Tile map click to walk UX

1  Asked on November 2, 2021


NiftyGUI – Text isn’t rendering

1  Asked on November 2, 2021 by ben-steffan


Move player in a circular manner

1  Asked on November 2, 2021 by renan-valentin-ferreira


Player hitting bottom of tile when beside it?

1  Asked on November 2, 2021 by mushrombrother-jpg


Ask a Question

Get help from others!

© 2022 All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP