Search code examples
javascriptphaser-frameworktiled

How to show a different map to each user in a Phaser game


I am developing one application (platform) where I have 10 users (maybe this will increase with time). I have created one login page and created one map using tiled (phaser framework). But this map is now same for all users, What I want is to create a separate map for every user and that will be visible after login. Please give me some suggestion so that at least I can try. Or give me some idea for this implementation.

The following code is for tile map parsing.

var game = new Phaser.Game(450, 300, Phaser.CANVAS, 'phaser', { preload: preload, create: create, update: update, render: render });

function preload() {
    game.load.tilemap('map', '../tileMap/background.json', null, Phaser.Tilemap.TILED_JSON);
    game.load.image('tile2', '../tileMap/floor2.png');
    game.load.image('player','../tileMap/bot2.png');
}

var map;
var layer;

function create() {
    map = game.add.tilemap('map');
    map.addTilesetImage('floor2','tile2');
    layer = map.createLayer('Tile Layer 1');
    layer.resizeWorld();
}

Solution

  • The problem is that if everyone is redirected to the same page after logging in then all users will see the same map located under '../tileMap/background.json'.

    The solution would be to somehow connect map with user, in example you can create array like that:

    var maps= {};
    maps['bob'] = '../tileMap/backgroundBob.json';
    maps['joe'] = '../tileMap/backgroundJoe.json';
    

    Then you can create global variable (but there's definitely better way for it, maybe using login value from cookie when initializing phaser) for tilemapPath and after authenticating user do something like:

    tilemapPath = maps[login];
    

    And load tilemap with:

    game.load.tilemap('map',tilemapPath, null, Phaser.Tilemap.TILED_JSON);
    

    Hope it'll help you someway.