Inkscape Parser for OpenFL (Haxe)

Last week I mentioned the small Inkscape parser I created for OpenFL and I said it was very helpful, not only to have it but also understanding how the Inkscape’s XML file is structured. This week I decided to briefly explain the code for that because it might be useful for someone working with OpenFL.

Editor XML (Shift + Ctrl + X)

This is the first cool thing about Inkscape I learned before writing the parser. Maybe you already know this but you can see an XML editor for the document you are seeing inside Inkscape if you press shift + ctrl + x. It basically shows a bunch of nodes that represent elements you have in your document.

In the XML you can find anything you add to the document, if we add a new element to the scene, it’s automatically added to the XML too and you can easily see it and its information when you select it in the document.

With these two things, we can easily write a very simple parser that maps positions from the XML document to our game. The following structure is the most basic one to get the elements inside layers in the document.

The Code

//This code is written in Haxe but WordPress does not highlight haxe so I just chose ActionScript3 :)

//This is what we use to load the Inkscape file (as it is)

var xml:Xml;

//You can use any variable you want but for this article I chose position, radius and id

var x, y, radius : Float;
var id : String;

xml = LoadXML(YOUR_FILE_PATH + "name_of_your_file.svg");

try
{
//Iterate over all the nodes of the file
for (e in xml.iterator())
{
if (e.nodeType == Xml.Element)
{
if (e.nodeType == Xml.Element)
{
//This is the layer's label (you can see the image above, it's called "Capa 1"
switch(e.get("inkscape:label"))
{
case "your_layer_name":
id = e1.get("id");
//The size of the Inkscape file should be the same in GraphicSystem here
x = Std.parseFloat(e1.get("x"));
y = Std.parseFloat(e1.get("y"));
radius = Std.parseFloat(e1.get("r"));
//This is only a sample, you can read whatever you want here
}
}
}
}
}
catch (e : String)
{
trace(e); //Catch the exception beautifully
}

//This function belongs to a bigger library I created as a helper for easily doing annoying stuff like this
public static function LoadXML(path : String) : Xml
{
var xml : Xml;
var str : String;

str = Assets.getText(path);
xml = Xml.parse(str).firstElement();

return xml;
}

I believe the code is kind of self explanatory but I’ll comment a bit on it. Basically we load the XML file, put it in a variable and iterate over all of its nodes to see which one contains the data we need: layers. If you want to customize your parser and add whatever information you need from the document you can also do that. Once we find the layer we are looking for (it should be the same name in the XML file), we use the data, store it in variables and use it as we want.

There are some transformation involved, depending on what you want to do with the data you get from Inkscape but it totally depends on the purpose of your code, if you have any questions related to this, please let me know.

Custom Attributes

Something that I find very helpful from Inkscape, is the possibility to include custom attributes, which enables us to take the editor further and add specific information for our elements.

Let’s say you have a game object that has “speed”. You want to customize each game object in the editor for different speeds so your game object is different depending on its type or something like that.

In the image above you can see fields for each attribute in the element if you click on the element and then click on the attribute. If you write a new name in the field for name and assign a value to it, it will be automatically created after you click “Accept” (it’s “Aceptar” in Spanish in the image).

switch(e.get("inkscape:label"))
{
case "your_layer_name":
id = e1.get("id");
//The size of the Inkscape file should be the same in GraphicSystem here
x = Std.parseFloat(e1.get("x"));
y = Std.parseFloat(e1.get("y"));
radius = Std.parseFloat(e1.get("r"));
//New Attribute
speed = Std.parseFloat(e1.get("speed"));
}

In the example above, you can see how we read the custom attribute using the same name we added in the XML editor.

I think that with these basic concepts you can easily write a whole map editor or if you prefer, a menu editor taking advantage of the Inkscape’s functionality. There are probably better or more general ways to do this but I wanted to discuss about the one I implemented.

Also, I want to clarify that an in-game editor would be much more helpful and comfortable to work with but either you need the time to make it or the money to buy it. This works for me and the simple games I’m creating, if you have advices or ideas, please let me know in the comments.

---