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

actionscript3

  1. //This code is written in Haxe but Wordpress does not highlight haxe so I just chose ActionScript3 :)
  2.  
  3. //This is what we use to load the Inkscape file (as it is)
  4.  
  5. var xml:Xml;
  6.  
  7. //You can use any variable you want but for this article I chose position, radius and id
  8.  
  9. var x, y, radius : Float;
  10. var id : String;
  11.  
  12. xml = LoadXML(YOUR_FILE_PATH + "name_of_your_file.svg");
  13.  
  14. try
  15. {
  16.    //Iterate over all the nodes of the file
  17.    for (e in xml.iterator())
  18.    {
  19.       if (e.nodeType == Xml.Element)
  20.       {
  21.          if (e.nodeType == Xml.Element)
  22.          {
  23.             //This is the layer's label (you can see the image above, it's called "Capa 1"
  24.             switch(e.get("inkscape:label"))
  25.             {
  26.                case "your_layer_name":
  27.                   id = e1.get("id");
  28.                   //The size of the Inkscape file should be the same in GraphicSystem here
  29.                   x = Std.parseFloat(e1.get("x"));
  30.                   y = Std.parseFloat(e1.get("y"));
  31.                   radius = Std.parseFloat(e1.get("r"));
  32.                   //This is only a sample, you can read whatever you want here
  33.             }
  34.          }
  35.       }
  36.    }
  37. }
  38. catch (e : String)
  39. {
  40.    trace(e); //Catch the exception beautifully
  41. }
  42.  
  43. //This function belongs to a bigger library I created as a helper for easily doing annoying stuff like this
  44. public static function LoadXML(path : String) : Xml
  45. {
  46.    var xml : Xml;
  47.    var str : String;
  48.    
  49.    str = Assets.getText(path);
  50.    xml = Xml.parse(str).firstElement();
  51.  
  52.    return xml;
  53. }

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).

actionscript3

  1. switch(e.get("inkscape:label"))
  2. {
  3.    case "your_layer_name":
  4.       id = e1.get("id");
  5.       //The size of the Inkscape file should be the same in GraphicSystem here
  6.       x = Std.parseFloat(e1.get("x"));
  7.       y = Std.parseFloat(e1.get("y"));
  8.       radius = Std.parseFloat(e1.get("r"));
  9.      //New Attribute
  10.      speed = Std.parseFloat(e1.get("speed"));
  11. }

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.

Inkscape Parser for OpenFL (Haxe)

Level Editor

 

I’ve been slowly working in a project for computer and console devices, a puzzle-action game based on a prototype I made for Ludum Dare back in 2013. The idea evolved quite a bit and I’m focused now on more puzzles and action, the idea actually changed a lot but the base is still the same.

 

Since last year I’ve been writing code for physics, gameplay, etc using OpenFL for this projects and after a while I decided to start working with Unity (I want to release the game for consoles as well and it seemed easier). The game involves big levels now and a lot of level creation, so I wanted to use a tool to create levels easy and simple, this really saves a lot of time when testing and changing features.

Inkscape

First I decided to use Inkscape as a level editor, the tool itself is very good and combined with its possibility of generating XML code from the elements you add to the document (graphically) it’s very handy. I wrote a small parser on Haxe for a small prototype I created last year, also used in the first version of this new project I’m currently working on.

It really worked very well when I was using OpenFL. After deciding to work with Unity, I also tried to do the same thing because I wanted to keep the levels separated from the game engine and also Inkscape itself runs faster and better when I’m focused on creating only levels. I wrote a parser in C# of the XML code that Inkscape generates and it worked well too.

Generally speaking, Inkscape is a really good tool for creating levels, it is lightweight and very flexible. Inkscape was also doing the basic functionality I needed from the editor but there was still work to do to really make it good enough for this project.

Unity and Custom editors

Since I’m still in the process of learning about Unity and all its features, I didn’t know you could customize the editor and include custom scripts to minimize the efforts when doing cumbersome or repetitive tasks.

This week while reviewing some code, I found out that you can actually create your own menus and customize a lot of things. So I decided to play a little bit with that and try to create a very small tile editor for this game.

After struggling a bit about understanding how to make everything work, I was able to put together the most basic functionality for the tile editor I wanted: adding tiles as fast as possible, having a grid that snapped tiles automatically to it, removing and moving tiles.

Having this functionality inside the editor while creating levels and the possibility of adding more stuff like rotation, layering, etc is really a great advantage if you want to save time and avoid doing repetitive tasks. I will keep improving what I have so far, keep posting about it and share it when it’s in a decent state for people to play with it.

Closing

Before writing this post I thought about detailed explaining how to write a parser for Inkscape and how to create a custom editor for Unity, however, I’m not really sure if it’s worth it. A lot of people have done this before and probably they explain it better than me.

If someone wants to know details about what I did, I’ll definitely explain everything step by step, meanwhile, you can check out the following links that helped me a lot understanding how to both processes work.

Once I clean up the code for the Unity editor I wrote and the Inkscape parser, I’ll upload them to my repository in Github.

Ah, in addition to the new project, Fiery Squirrel is also focused on this new mobile game: Kuon’s Saga, I’ll talk more about it soon!

Level Editor

SORLD: Ludum Dare 38

This will be a short post about the result of a game I made for Ludum Dare 38 last weekend. I will basically cover why did I decide to participate and how did I come up with the idea.

Why

Recently I’ve been very busy working on other projects that are planned to be released this year. However, after the theme was unvelied, I decided that if could find something that had a message I could transmit somehow (I want to make a full educational game in the future), I was going to participate.

In this case, I focused the brainstorming in two topics: what’s going on in Venezuela (my country) now  and global warming. I decided to go with the first topic because this is how I feel can contribute to what’s going on there, we can all contribute to a cause from different perspectives and my perspective is from the game development side.

How

The Jam lasts only two days and there was not a lot of time to decide what to do. As always I try to keep things as simple as possible and concentrate on a small idea.

important points for the game

  • Choose a message
  • Communicate the message clearly
  • Make something dynamic
  • Try as hard as possible make it fun
  • Polish as much as possible until the Jam is over

Message

As message, I just wanted people to be aware of what’s going on in other countries, make people think about what’s happening in other parts of the world. I wanted people to understand that despite the fact that we have different cultures, live in different places and have different ways of thinking, we all belong to the same planet and should care about each other.

I said earlier that I wanted to focus on what is happening in Venezuela and it’s true, however I also think it’s important to take a look at other countries because people are suffering everywhere.

communication

The message is communicated not only in an explicit way in the end of the game but also the whole mechanics are based on the idea of caring about others, helping and cooperating.

The rules of the game are:

  • Beat the aliens: To beat the aliens, members have to combine the power of their colors to attack
  • Stay alive: You need at least one house in your territory to respawn
  • You can attack any alien
  • You can give one of your houses away
  • You can repair your or someone else’s house

The game is made in a way that these rules are not explicitly taught. From the game you know you can move, grab and place houses, you can shoot and you can repair houses, but I don’t tell the player “to beat the aliens you need to cooperate”. The idea was that the player understood the rules by looking at the NPC or just using common sense.

The NPCs have different behaviors:

  • Attack an alien in my territory
  • If someone helps me, I’ll help too
  • Stay alive
  • Give the player a house if he is out of them

Since I didn’t have enough time to make things smoother, I included a condition to randomly decide to help someone sometimes, so the player could understand easier what to do.

Dynamism

The game is really simple. Since the theme of the jam was a small world, I just decided to make everything in a very small world created from four different parts. To add a fast pace, the aliens attack non-stop in a random way. In addition, all the NPCs work very hard to attack the aliens and try to stay alive too.

The focus here was trying to stay concentrated on the main message and make something enjoyable.

Polishing

After all the basic elements were complete, I just focus on trying to add things that improved the experience of players.

I think that when time is very limited like in a game jam, one should focus first on adding important feedback after finishing the basic mechanichs of the game. Shooting, receiving damage, reparing a house and subtle details to explain how to play were the core of this part.

Also the planet reacts to what is happening in the game, if it’s attacked, everything shakes and when something good happens (like defeating an alien), it winks.

These things are very small but they improve the experience of the game as a whole. I really wanted to put more efforts here but… not enough time.

Wrapping up

This is it, I wanted to make a small post and I feel it’s very long already, so to wrap up, this jam for me was different and interesting for the following reasons:

  • First time I base everything on communicating a message
  • First experience using Unity for a game jam
  • I tried to make simple but pretty graphics with a different palette of what I use to
  • Programming the NPC was a challenge but really fun

So if you have any questions, let me know.

You can visit the Ludum Dare 38 entry here and play the game online or download it in your computer.

By the way, I’ll still think about the idea for the global warming game, I think it’s an important issue.

 

SORLD: Ludum Dare 38