Jump to content

Make tilemap/world fit in game?


udbhav
 Share

Recommended Posts

Hi, I just learned some basics of using tilemaps. I created a tilemap using Tiled, containing 32x32px tiles. The problem is, I can't resize the entire tilemap to fit the entire canvas. I need the layer in the tilemap or the world itself to fit the canvas. scale.setTo() works, but that's relative and I want to set the width and height to that of the game's canvas. Changing displayWidth and width doesn't seem to have any effects. The tilemap still appears small in the upper left corner of the canvas. Any suggestions guys? 

Code:

var playLevel = {
    
    create: function() {
            
        this.map = this.game.add.tilemap('tilemap');
        this.map.addTilesetImage('sewer', 'sewerTileset');

        //Need to make this layer larger by a specified amount        
        this.groundLayer = this.map.createLayer('Ground');
        this.map.setCollisionBetween(1, 200, true, 'Ground');
        
        this.groundLayer.resizeWorld();
        
    },
    
    update: function() {
                
    }
    
}

EDIT:

I just found out that changing width and height DOES work. But for some reason, instead of the tilemap's width being 32 * 20 = 640, it returned 940, which is the width of the canvas. But the tilemap itself looks to be 640 pixels wide, so I don't know why the width and height properties don't correspond to the actual ones. So I guess I can't use it?

Link to comment
Share on other sites

Found a temporary workaround:

this.groundLayer.scale.setTo(game.width/(32 * 20), game.height/(32 * 10));

Since each tile is 32 x 32, it will scale it according to the game width and height divided by the tilemap's actual width and height (It's dimensions are 20 tiles by 10 tiles).

Please reply if anyone knows a better solution :) 

Link to comment
Share on other sites

      this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
      this.game.scale.minWidth =  480;
      this.game.scale.minHeight = 260;
      this.game.scale.maxWidth = 640;
      this.game.scale.maxHeight = 480;
      this.game.scale.forceOrientation(true);
      this.game.scale.pageAlignHorizontally = true;
      this.game.scale.setSize();

i normally can use this code (or slight variabtions) to makethe game scale properly, i also use this to make the game world resize with window changes. i think this may be what you rlooking for though. if you lookup more with the scalemanager it can help

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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