Exporting a PNG using JavaScript

Questions
1

I’m trying to write a script that can export maps in the format used by King Arthur’s Gold. KAG uses .png files with each pixel representing a scpecific tile, but I can’t figure out how to create a png file using JavaScript*. Would it be better to use C++ for this instead?

  • Specifically, how I can generate an ArrayBuffer to stick in a BinaryFile
2

Hey @ACrazyNewfie, welcome to the Tiled forums!

Actually that part should be easy:

const buffer = new ArrayBuffer(sizeInBytes);

// Now you could create some view on the buffer through which to change it.
// (this is standard JavaScript)

const file = new BinaryFile(fileName, BinaryFile.WriteOnly);
file.write(buffer);
file.commit();

But do you know how to put together a PNG file in binary? I think it would be better if I finish the following addition to the scripting API:

This API would allow you to build an image using a convenient API and I can add a “save” function that allows saving the image in any supported format.

3

That’s the real problem for me, generating a PNG. That looks like a very useful addition to the Tiled API, but in the meantime do you know of any good tutorials to introduce me to the PNG format? Alternatively, a JS library to do the same would be really useful, but I can’t figure out how to use one in Tiled

4

I think the easiest solution is to use a second seperate tileset where the tiles are 1x1 pixels using the colors your engine needs. When you want to export the map, swap the tileset to the 1x1 pixels tileset, export as image, swap back.

5

That’s perfect. I’m new to Tiled and wasn’t aware you could do that.