Anyone using Tiled?

[Wolfsbane]

Hi guys and girl,

A quick question on this one: Is anyone using Tiled for their Panda games, or used Tiled in general? How's the experience going? Do you use TexturePacked sprite sheets as Tilesheets for your maps?

I'm having a play with it now, and just trying to get familiar with the workflow. 

Cheers!

 

[enpu]

I have used Tiled with Kuru Panda. Nothing really bad to say about it, everything works great. I'm not sure if TexturePacker is compatible with Tiled. All tiles in your tileset must be same size for example.

[Wolfsbane]

16 hours ago, enpu said:

All tiles in your tileset must be same size for example.

Hmm, right. I was spending sometime using non-fixed sized tiles, and individual images which I don't think Tiled was originally designed for. It was messing up a bit.. probably just teething problems since it seems to be saving o.k. now.

But Panda's Tiled plugin currently doesn't work for non-fixed sized tiles&individual images, so I will take at writing something to load it. I don't know if I can extend the Tiled Plugin to load both fixed tiled/one tileset. The formats are similar, but Tiled does save them a little differently. 

I think currently, the Tiled plugin assumes there's a single tileset, that is split in a fixed sized grid, right?

[Wolfsbane]

Hmm, so I had an ugly hack around in the Tiled plugin to make it load maps that aren't just made with fixed sized tiles.

So it's Tiled: It's still grid based map (here, 32x32). But the images can be added individually, and placed (on the grid). Annoyingly, tiles are placed at the bottom left corner, and doesn't seem possibly to reorientation it to be place it at 0,0 coordinates. 

The .tmx file looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<tileset name="BreakoutTiles" tilewidth="1024" tileheight="1024" tilecount="3" columns="0">
 <grid orientation="orthogonal" width="1" height="1"/>
 <tile id="0">
  <image width="1024" height="1024" source="background.jpg"/>
 </tile>
 <tile id="1">
  <image width="64" height="64" source="brick_red.png"/>
 </tile>
 <tile id="2">
  <image width="100" height="45" source="brick_green_small.png"/>
 </tile>
</tileset>

Each tile has an individual image tag.  Maybe it's just because I'm trying to work individual images, but Tiled is a little bit quirky. Not great first impressions, but I'm slowly warming to it. But wondering if probably better just to make a custom level editor.

But this does lead on to what's the licensing on the plugins? The engine is opensource, with the commercial editor. And I can't see it stated anywhere, but it seems like the plugins are part of the the commercial package.

Does this mean that, say, after hacking around with the plugin, I wouldn't be able to post my changes I made to it to the forums? 

Some of the work I'm doing is with the the intent of it possibly being part of an example/tutorial.

[enpu]

22 hours ago, Wolfsbane said:

But this does lead on to what's the licensing on the plugins? The engine is opensource, with the commercial editor. And I can't see it stated anywhere, but it seems like the plugins are part of the the commercial package.

Good point. I should add info about that to the website.

22 hours ago, Wolfsbane said:

Does this mean that, say, after hacking around with the plugin, I wouldn't be able to post my changes I made to it to the forums? 

I would say that you can post your changes here and then i could update the official plugin.

[Wolfsbane]

10 hours ago, enpu said:

I would say that you can post your changes here and then i could update the official plugin.

I'll post the code changes I did when I get back to my pc. But I don't think you can just update the official plugin with it, at least just yet. I just ripped out the fixed-tile based loading code, and wrote it to load the format that Tiled was producing, which is a bit different from the one default plugin. It's not compatible with both formats!  (Extending the code to load both was more challenging that I had time).

But I think if we can clean up the code a bit then yeah, it would be useful. I feel like fixed sized tilesets is just an unnecessary restriction. Great for making retro style games, and leaving a small footprint, but kind of awkward for a casual dev.

[pstrejczek]

I'll put my 2 cents into this thread  ... Does Panda tiled plugin work correctly with exports from new Tiled 1.2 ? - There are some breaking changes in the export (as the changelog says). I haven't tried this myself and I'm just curious.

[Wolfsbane]

Alright, I attached a .zip of the little example I did.

example_tiled.zip

I removed the Tiled.js plugin, so you'll have to re-add that yourself. But it's got the level file, and 

the code changes I did to the Tiled.js was to re-write the following functions:

Changes to initTiles()

//Change this line: Tiled annoyingly orientates tiles to be bottom left corner, so we've got to add height calculation before we place our top-left orientated tile.

var y = this.tileHeight * Math.floor(i / layer.width) - (this.tiles[layer.data[i] - 1].texture.height - this.tileHeight); //D Change


//Change this line to make it data[i] - 1
if (this.addingTile(layer, layer.data[i] - 1, i, x, y)) continue;

//change this line to make it data[i] - 1
 if (!this.tileAdded(layer, sprite, layer.data[i] - 1, i, x, y)) {

Changes to initTileset: 

initTilesets: function() {
        for (var i = 0; i < this.json.tilesets.length; i++) {
			var tileset = this.json.tilesets[i];
			
			for ( var j = 0; j < this.json.tilesets[i].tiles.length; j++ ) {
				var tile = this.json.tilesets[i].tiles[j];
				
				var texture = new game.Texture(game.BaseTexture.fromAsset(tile.image), 0, 0, tile.imagewidth, tile.imageheight);
				var tile = new game.Tile(texture, tileset);
				this.tiles.push(tile);
					
				this.tilesets.push(tileset);
			}
        }
    }

 

Change to parseTSX: This is just to deal with the different format of our tiles, as compared to the other tiles. I just deleted most of the existing code, and wrote it just to load the non-fixed tileset format.

 var tileset = responseXML.getElementsByTagName('tileset');
        if (tileset.length) {
			var image = tileset[0].getElementsByTagName('image');
			var tiles = tileset[0].getElementsByTagName('tile');
			var json = game.json[jsonFilePath];
			
			json.tilesets[0].tiles = [];
			
			for ( var i = 0; i < tiles.length; i++ ) {
				var tileImage = tiles[i].getElementsByTagName('image');
				var storedTiles = new Object();
				storedTiles.image = tileImage[0].getAttribute('source');
				storedTiles.imagewidth = parseInt(tileImage[0].getAttribute('width'));
				storedTiles.imageheight = parseInt(tileImage[0].getAttribute('height'));
				storedTiles.tilewidth = parseInt(tileImage[0].getAttribute('width'));
				storedTiles.tileheight = parseInt(tileImage[0].getAttribute('height'));
				storedTiles.spacing = 0;
				storedTiles.margin = 0; 
				storedTiles.tilecount = parseInt(tileset[0].getAttribute('tilecount'));
				
				var path = game._getFilePath(storedTiles.image);
                game.paths[storedTiles.image] = path;
                this.loadImage(path, this.loadTilesets.bind(this, jsonFilePath, callback));
                json.tilesets[0].tiles.push(storedTiles);
			}
			return;

 

3 hours ago, pstrejczek said:

Does Panda tiled plugin work correctly with exports from new Tiled 1.2 ? - There are some breaking changes in the export (as the changelog says). I haven't tried this myself and I'm just curious.

Was about to say I'm using the latest version, but I just checked and.. no I'm not! So I'll have to download 1.2 and see. 

(later.. later...)

[Wolfsbane]

On 10/2/2018 at 1:12 PM, pstrejczek said:

Does Panda tiled plugin work correctly with exports from new Tiled 1.2 ? - There are some breaking changes in the export (as the changelog says). I haven't tried this myself and I'm just curious.

I think this is just with the json export. The Panda plugin uses the .tmx/xml export, so should be fine. Was fine with the one test I did.

[Wolfsbane]

Just a small update on this: I haven't been able to play around much with this.

But there is a small fix that the current Tiled Plugin needs. @enpu. If you're using a tileset that has no spaces/margins between tiles, the load fails.

This is because is because in Tiled, if you have set zero margin/spacing, then it just doesn't save the zero values it to the .tsx files. I guess the assumption is if the value doesn't exist, it's zero. 

You can compare this to say, the desert.tsx file:

 

Where as my file:

(No spacing/margin values)

I've attached an example project, but I have removed the tiled.js plugin (you'll have to re-add it), so you can see the failure.

The 'quick fix': in tiled.js, at around line 512, I added these two lines:

json.tilesets[i].spacing = (isNaN(json.tilesets[i].spacing)) ? 0 : json.tilesets[i].spacing;
json.tilesets[i].margin = (isNaN(json.tilesets[i].margin)) ? 0 : json.tilesets[i].margin;

And then it loads pretty good.

Not sure if this is a good permanent solution? I'm not quite sure of the current JS standard for dealing with non-existent values.

 

TiledExampleNoSpaces.zip

[enpu]

@Wolfsbane

Loading tilesets with no spacing or margin has been now fixed on Tiled plugin 1.2.1

https://www.panda2.io/plugins#tiled