Jump to content

How to position multiple Tilemaps


Recommended Posts



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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites


  • Recently Browsing   0 members

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