Load exported .json tilesets from Tiled?

[st0n3vn]

Hello all,

 

I am pretty new to game development (and programming as a whole) and same goes for Phaser. Please excuse me if the question I am about to ask has already been answered somewhere, but I haven't been able to find a solution.

 

So, me and some friends have been trying to make a relatively simple platformer game using Tiled. The creation, usage and importing of standard tilesets hasn't been a problem (thanks a lot for the thorough example section).

 

However, we've encountered a problem when we create tilesets from images within Tiled, which can then be exported in two formats - .tsx and .json. Now, from what I gather, the .tsx format is a Tiled-specific format used to import the given tileset in a separate Tiled project as an external tileset, so I guess that can't be used in Phaser.

 

The .json option was added only recently with the latest version of Tiled (I think) - 0.14 - and I couldn't find info of whether I can use that in Phaser. So my question is, can a .json file be somehow used for a tilemap in a way similar to how you add .png tilesets with the map.addTilesetImage function?

 

Thank you in advance!

[megmut]

Correct me if I'm wrong, but is this not the answer you are looking for?

 

http://phaser.io/examples/v2/loader/load-tilemap-json

[st0n3vn]

No, the link you have provided explains how to add a tileset as a .png. The .json that was loaded is the map itself. My question was whether you can load a tileset as .json, and if you can, what the process is.

[drhayes]

Before I answer "no", I want to make sure I understand what you're looking to do.

 

You're not talking tile*maps*, you're talking tile*sets*? Are you asking "how can I load a JSON file that tells Phaser which tiles to collide with, what image to use, all that jazz"? The answer to that is "you can't, out of the box". But you could write something yourself that parses that JSON into something usable in your game?

 

I'd love to hear your use cases.

[st0n3vn]

Yes, my question is whether you can somehow use a tileset in .json format in Phaser. The reason I would want to do that is because Tiled allows you within the program to create tilesets from images where you import an entire image and then you can use that image as a single element not split into many different tiles. Sadly, Tiled currently allows you to export such tilesets only in .tsx and .json formats.

[drhayes]

I've never used the feature so I'm not sure what you're talking about. But, surely, this is something you could write if you want it? And then open source so we can see it? ( =

[CaptainCannabis]

Like this:

 

var game = new Phaser.Game(1280, 1024, Phaser.AUTO, 'eAnt', { preload: preload, create: create, update: update, render: render });

function preload() {
	game.load.json('backgroundTileset', __dirname+'/assets/bg.json');
	game.load.image('background', __dirname+'/assets/bg.png');

}
var cursors;
var map;
var layer1;
var tileset1;

function create() {

    //  Add data to the cache
    // game.cache.addJSON('backgroundTileset', 'backgroundTileset', data, Phaser.Tilemap.CSV);
    console.log(JSON.stringify(game.cache.getJSON('backgroundTileset')));
	
	game.stage.backgroundColor = '#2d2d2d';

    // Eine leere TileMap erstellen
    map = game.add.tilemap();

    // Das Tilset für den Boden hinzufügen
    tileset1 = map.addTilesetImage('background','background', 16, 16);

	// Layer für den Hintergrund erstellen, 24 x 24 Tiles die jeweils 16 x 16 px groß sind
    layer1 = map.create('background', 240, 240, 16, 16);

    layer1.scrollFactorX = 1.5;
    layer1.scrollFactorY = 1.5;

    //  Scroll it
    layer1.resizeWorld();

	// Das Layer mit Tiles füllen
    for (var y = 0; y < 24; y++){
        for (var x = 0; x < 24; x++){
        	
        	var zufall = game.rnd.between(0, 100).toString();
        	if(zufall > 75){
        		var SpriteIndex = resolveTileSet('Sand');
        	}else{
        		var SpriteIndex = resolveTileSet('Grass');
        	}

        	// Zufälliges Bild aus dem Hintergrund-Tileset
        	var t = new Phaser.Tile(layer1, SpriteIndex, x, y, 16, 16);
			map.putTile( t, x, y, layer1);
		}
	}
    cursors = game.input.keyboard.createCursorKeys();
}
function resolveTileSet(TerrainType){
	var backgroundTileset = game.cache.getJSON('backgroundTileset');
	var terrain = null;
	var terrainIndex;
	for(var t=0; t < backgroundTileset.terrains.length; t++){
		if(backgroundTileset.terrains[t].name === TerrainType){
			terrain = backgroundTileset.terrains[t];
			terrainIndex = t
			break;
		}
	}
	if(terrain){
		return terrainIndex;
	}
	return null;
}
function update() {

    if (cursors.left.isDown)
    {
        game.camera.x--;
    }
    else if (cursors.right.isDown)
    {
        game.camera.x++;
    }

    if (cursors.up.isDown)
    {
        game.camera.y--;
    }
    else if (cursors.down.isDown)
    {
        game.camera.y++;
    }

}
function render() {
}