How to position multiple Tilemaps

[kieve]

Hi,

 

I'm trying to make use of several tilemaps to build the world, cities, and dungeons of my game. For example, having a single tile map represent the "layout" of the outdoors of a city; leaving spaces or "lots" for buildings to be placed. These buildings would each contain 5+ layers, every building needs their layers to be mutually exclusive of the others.

 

The base layouts of areas are rather large (150x150 tiles) compared to the buildings (13x8 tiles). I want to be able to reuse the buildings, so I'm not going to copy and paste them around a map created in Tiled.

 

When the player walks into a building, I want to fade out the external look of the building, and fade in the interior. When you have 10, 15, 20+ buildings in one level, it becomes very difficult to manage the large amount of layers in a single tilemap. Not to mention I have no idea how it would perform with 100 layers, each at 150x150x32x32 pixels.

 

What I need is to be able to move one tilemap relative to another. I need to change the origin of a tilemap. I've spent a few hours searching this forum and google looking for an answer. Even if I can't make of collision on the layers, I can sort that out easily once I'm able to move the tilemaps around.

 

So, here is an example of what I have now.

 

Code notes:

home_village_f0 - A 150x150 tile map that gives the layout of a city

house0_f0          - A 13x8 tile map that represents a house.

TPOW.States.Game = function(game) {};TPOW.States.Game.prototype = {    create : function() {        // Load the current over world map        this.home_village_f0 = this.game.add.tilemap('home_village_f0');        this.home_village_f0.addTilesetImage('city_inside', 'tiles_city_inside');        this.home_village_f0.addTilesetImage('forest_tiles', 'tiles_forest_tiles');        this.home_village_f0.addTilesetImage('PathAndObjects_0', 'tiles_PathAndObjects_0');        this.ground = this.home_village_f0.createLayer('ground');        // Resize the game world to match the layer dimensions        this.ground.resizeWorld();        // Load each module        // TODO: Auto load modules based on map content        this.house0_f0 = this.game.add.tilemap('house0_f0');        this.house0_f0.addTilesetImage('city_outside', 'tiles_city_outside');        this.house0_f0.addTilesetImage('interior', 'tiles_interior');        this.house0_f0.addTilesetImage('hyptosis_tile-art-batch-3', 'tiles_hyptosis_tile-art-batch-3');        this.house0_f0.addTilesetImage('base_out_atlas', 'tiles_base_out_atlas');        this.house0_floor = this.house0_f0.createLayer('floor');        this.house0_indoors0 = this.house0_f0.createLayer('indoors0');        this.house0_indoors1 = this.house0_f0.createLayer('indoors1');        this.house0_outdoors0 = this.house0_f0.createLayer('outdoors0');        this.house0_outdoors1 = this.house0_f0.createLayer('outdoors1');        // Test        this.house0_floor.alpha = 0;        this.house0_indoors0.alpha = 0;        this.house0_indoors1.alpha = 0;        /**         * More content not relevant to question.         */    },    update : function() {        var alpha = this.house0_floor.alpha;        if (alpha != 1) {            alpha = Math.min(1, alpha + 0.005);        }        this.house0_floor.alpha = alpha;        this.house0_indoors0.alpha = alpha;        this.house0_indoors1.alpha = alpha;        this.house0_outdoors0.alpha = 1 - alpha;        this.house0_outdoors1.alpha = 1 - alpha;        /**         * More content not relevant to question.         */    }};

TL;DR: How do I move a tilemap relative to another? That is, make the top left corner be something other than (0, 0) in the world.

[kieve]

I ended up figuring this out. Kind of annoying but the following works fine:

layer.fixedToCamera = false;layer.scrollFactorX = 0;layer.scrollFactorY = 0;layer.position.set(pixelX, pixelY);

You have to do this on every layer in the tilemap.