Jump to content

Scaled tile map layers not scrolling correctly


Recommended Posts

I am loading a small tile map (created in tiled) and scaling it to be double the size to fill the screen. The scaling works but something is off with the tile layer scrolling. The tile layers scroll on the x axis as the player moves to the right but it stops short of the end of the level (meaning the player continues on but the tile layers stop scrolling short of the boundry). I suspect this is something with my bounds settings but I'm not getting anywhere adjusting settings. Even worse, the tile layers do not scroll at all on the Y axis. Has anyone had a similar issue or a possible fix? I figure its something with the world bounds, camera bounds and tile layer bounds but I'm not getting anywhere on my own. Any help would be appreciated.


Canvas settings: 

width: 1024

height: 768


TileMap settings:

Tile size: 32x32

height: 15 (480px)

width: 468 (14976px)




Screen settings

game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;game.scale.minWidth = 480;game.scale.minHeight = 260;game.scale.maxWidth = 768;game.scale.maxHeight = 576;game.scale.pageAlignHorizontally = false;game.scale.pageAlignVertically = false;game.scale.setScreenSize(true);

Level Loader

createMap : function (game) {	// adding the "level" tilemap loaded it preloader state	var map = game.add.tilemap("level");	$.each(map.tilesets, function (index, tileset) {		map.addTilesetImage(tileset.name, tileset.name);	});	// create tilemap layers	var that = this,	    entitiesScale = 2,	    levelScale = 2,            platformScale = 2;	game.scaleFactor = {		level : levelScale,		platforms : platformScale	};	$.each(map.layers, function (index, layer) {		var mapLayer = map.createLayer(layer.name),		    speed = mapLayer.layer.properties.parallaxSpeed || 1;		mapLayer.scrollFactorX = 0.5;		mapLayer.name = layer.name;		mapLayer.scale.setTo(levelScale, levelScale);				//mapLayer.height = 1536; // doesn't seem to make a diff		that.layers[layer.name] = mapLayer;		if (layer.name === "ground") {			mapLayer.resizeWorld();		}	});	map.currentLayer = 2;	map.widthInPixels = 32 * (468 * 2);	map.heightInPixels = map.heightInPixels * 2;	//game.camera.setBoundsToWorld();	game.camera.bounds.height = 1536;	game.world.bounds.height = 1536;	console.log("cam", game.camera.bounds.width, game.camera.bounds.height, game.world);	return map;},

Camera follow in player update function.

game.camera.focusOnXY(this.masterSprite.x + offsetX, this.masterSprite.y + offsetY);
Link to comment
Share on other sites


  • Recently Browsing   0 members

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