Jump to content

Phaser tilemap draw position question


Recommended Posts

Hey guys,

I'm using the Tiled map editor and creating it with the code below:

    this.load.tilemap('map_testmap', 'assets/phaser_assets/maps/map_testmap.json', null, Phaser.Tilemap.TILED_JSON);
    this.load.image('grass', 'assets/phaser_assets/tiles/grass.png');
    this.load.image('spike', 'assets/phaser_assets/tiles/test_spike.png');
  create: function() {
    // this.scale.pageAlignVertically = true;
    this.world.setBounds(0, 0, 2000, 1400);
    this.stage.backgroundColor = '#3A5963'
    // this.add.sprite(0, 0, 'sky');

    var map = this.add.tilemap('map_testmap');
    map.addTilesetImage('grass', 'grass');
    map.addTilesetImage('spike', 'spike');
    map.setCollision([0, 1, 2, 15, 16, 17, 18, 19, 20, 30, 31])
    this.layer = map.createLayer('Tile Layer 1');
    // this.layer.fixedToCamera = false;
    // this.layer = map.createLayer('Tile Layer 1', 2000, 1400);
    // this.layer.anchor.setTo(0.5);
    // this.layer.position.set(this.world.centerX, this.world.centerY);

However, when I start the game up, my layer looks like this, but my actual layer looks like the image on the right.


So my question is, how can I push the layer down on the canvas programmatically?

I've tried changing the position, but it seems that the collision doesn't move with the layer's position.


Any help would be greatly appreciated!

Link to comment
Share on other sites

If you're using camera.follow, the camera has panned downwards to follow the sprite. So remove that and any other camera operations and then see if it looks like what you expect.

There's no need to use both world.setBounds and layer.resizeWorld. They're both setting the same boundary.

Double-check that the game width and height are what you want.

game.debug.cameraInfo(…) will show you the camera position and boundary.

Edited by samme
Link to comment
Share on other sites

After trying out your suggestions, the layer still didn't display correctly, but debugging helped me find out that the top half isn't rendering at all.

I took a look at the json file and turns out there was a -340y offset applied to the tmx file.  Removing the offset solved the issue!

Thanks for your help!

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...