udbhav

Make tilemap/world fit in game?

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?

Share this post


Link to post
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 :) 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.