udbhav Posted December 27, 2017 Share Posted December 27, 2017 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 More sharing options...
udbhav Posted December 27, 2017 Author Share Posted December 27, 2017 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 More sharing options...
Nivoset Posted January 1, 2018 Share Posted January 1, 2018 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 More sharing options...
Recommended Posts