Using Inkscape as Scene Editor

On a previous blog post, I wrote about how are we using Inkscape as a Scene Editor for Archer Vs Zombies. Now, I want to talk a bit more about it. The post was going to be a dev log about Archer Vs Zombies but since it is about general Inkscape stuff for games, the original name lost its meaning.

First, I want to share a video showing how changes made in Inkscape are being reflected when the game loads.

note: some of the rocks were moved.

Creating Physics Object

As I probably said before, we are using Box2D to do physics behavior on our games. Box2D provides a way to define bodies based on circle or polygon shapes. Circle shapes are defined by a center and a radius and polygon shapes are defined by a list of vertices with some restrictions explained in Box2D manual.

On the other hand, SVG specification provides a way to specify paths which are used to describe straight lines or curves.

Then, I am creating SVG paths, when building the scene, in a separated Inkscape layer (named Physics) which could be parsed later inside the game to create Box2D polygon shapes. Having a separated layer for those shapes simplify the scene load process and, when working on Inkscape, provides a way to hide or show shapes definitions layer to easily work on the others.

Archers Vs Zombies - Inkscape - Scene Editor

The image shows the polygons of the Physics layer in red color.

Using XML Data to define Physics Bodies properties

One thing we could need in the future is to define more stuff about physics bodies like if they are static or dynamic, their mass, density and others. As said on the previous post, we could add custom XML data to XML nodes of the SVG file and process it when parsing the SVG inside the game to define those properties. For now, I am treating all SVG paths from the Physics layer as static bodies with no properties.

Parsing the SVG - Second part

I wanted to give a second chance to both SVG Salamander and Batik but the main reason to discard them is because both libraries depends on AWT classes and that doesn't work on Android.

In the end, I am using my own and incomplete parser implementation based on Slick2D SVG Parser classes with a lot of modifications because I am not using Slick2D Vector2f and Transform classes and because its doesn't handle SVG images.


After all that work, I feel comfortable working with Inkscape as a Scene Editor and I don't feel the need to implement our own for now. Also, in my opinion, it is similar to Aquaria Scene Editor as you can add sprites, rotate and scale them, move from one layer to another, etc, with limitations like you cannot test the scene until you load it in your game, between others.

Thats all for now, hope you like it.

VN:F [1.9.22_1171]
Rating: 4.5/5 (2 votes cast)

Archers Vs Zombies - Dev Log - 03

In the previous post, I was looking for a tool to edit game scenes information in an easy way. Talking with kevglass at LWJGL irc channel he told me he was using Inkscape for that purpose. I also read some time ago that Rocket Bear Games was using it for as level editor as well but I forgot about it.

Inkscape is very interesting for game development because it has a lot of useful features which you could use in different ways in order to achieve what you want. It works mainly with SVG files which are XML.

In this post I will comment some of the features I am using from Inkscape. As I am new with the program, feel free to correct me if I say something wrong about it or if there are better ways or doing stuff.

Working with different layers

The editor lets you work with different layers. These layers will be exported as different groups which could be parsed later in your game to decide different behavior. In my case, I am using two layers for now, one to put the tools (some tiles) and the other one to define the game world, as the next image shows. This is to avoid processing the tools layer when importing the SVG into the game.

Archers Vs Zombies - Inkscape - Scene Editor

Archers Vs Zombies - Inkscape - Scene Editor

Custom XML data

Also, as mentioned in the Rocket Bear Games post, Inkscape provides an easy way to add custom XML data to the file so you can add information you will need later to build the scene in your game. Right now, I am adding information to specify the tile type of each element so they could be correctly imported later in the game.

Parsing the SVG

Parsing the SVG is not an easy task, each node contains a lot of stuff you have to parse in order to get all the information you need. Inkscape adds extra information with its own attributes like labels or the custom XML Data we said before.

Some time ago we used a tiny SVG Java parser named SVG Salamander to make the paths for Zombie Rockers .

I tried using it again to parse Inkscape generated SVG files but I couldn't force it to avoid trying to automatically load images when parsing the XML. The project doesn't contain good documentation about customizing behavior when parsing the file (maybe it even doesn't let you) and the page is a bit outdated, also SVN for the project was not working when I tried to reach it yesterday.

After that, I found Batik from The Apache XML Graphics Project. At first glance, it looked a lot better than the other one, also it is on Maven Central.

Using it wasn't so easy as I thought, I was using the latest version deployed in the Maven central repository but when I took a look at the online documentation it wasn't the same version, the examples were outdated. Another problem of the library is that it seems AWT dependent and that could be a problem if I want to use it on Android.

Also, there were no sources nor javadocs on Maven central so I couldn't explore the library to understand the behavior easily. I was getting a bit bored and anxious to have something working, so I left the library.

At the end, I am parsing the SVG by hand but I plan to give another opportunity to both libraries.

I will talk more about Inkscape and how I am using it in the next posts.

Some comments about last post

About the camera zoom I mentioned the last post, Rubén asked me why not using multi touch well known gestures (it seems natural), I thought about adding them but I remembered some people have single touch devices so they wouldn't be able to use the zoom feature. I end making a single touch implementation, however, I have the idea to implement both solutions in the near future.

VN:F [1.9.22_1171]
Rating: 5.0/5 (2 votes cast)

Animation4j - Interpolation Functions

Interpolation Functions are a key concept in animation4j project, they define how to a variable should change from one value to another. To define interpolation functions in animation4j, InterpolatorFunction interface should be implemented, the API looks like this:

public interface InterpolatorFunction {

	 * @param t
	 *            A real number in the interval [0,1]
	 * @return The interpolated value.
	float interpolate(float t);


So basically, functions works for values of t between interval [0,1]. An example implementation of this function is a linear Bézier:

 * Linear Bézier curve implementation of an InterpolatorFunction.
public class LinearBezierInterpolatorFunction implements InterpolatorFunction {

	private final float p0, p1;

	public LinearBezierInterpolatorFunction(float p0, float p1) {
		this.p0 = p0;
		this.p1 = p1;

	public float interpolate(float t) {
		if (t < 0)
			return p0;
		if (t > 1)
			return p1;
		return (1 - t) * p0 + t * p1;


The library already provides some implementations, you could instantiate them using InterpolatorFunctionFactory factory class. The API of the factory looks like this:

	// returns a cubic Bézier interpolation function based on the four specified points.
	InterpolatorFunction cubicBezier(float p0, float p1, float p2, float p3);

	// returns a quadratic Bézier interpolation function based on the four specified points.
	InterpolatorFunction quadratic(float p0, float p1, float p2);

	// returns a cubic Bézier interpolation function with presetted values.
	InterpolatorFunction ease();

	// returns a linear Bézier interpolation function.
	InterpolatorFunction linear();

	// returns a cubic Bézier interpolation function with presetted values.
	InterpolatorFunction easeIn();

	// returns a cubic Bézier interpolation function with presetted values.
	InterpolatorFunction easeOut();

	// returns a cubic Bézier interpolation function with presetted values.
	InterpolatorFunction easeInOut();

In the previous post we talked about transitions of variables from one value to another using Transition interface. When building a transition using the Transitions factory, you could specify the interpolation functions you want to use, if you don't, then linear Bézier functions are used by default. One example of how to create a Transition specifying the interpolation functions looks like this:

Transition<Vector2f> transition = Transitions.transition(
	new Vector2f(0f, 0f), 					// the starting value
	vector2fConverter, 						// the type converter (using two variables)
	InterpolatorFunctionFactory.easeOut(),	// the interpolation function for the first variable
	InterpolatorFunctionFactory.easeIn());	// the interpolation function for the second variable

One thing to mention is that Transitions factory methods use a varargs to specify interpolation functions parameters because we don't know beforehand how many variables you need. In case you specify less functions than variables, then linear Bézier functions will be used for the variables without functions specified.

As we said on the previous post, animation4j API could change since this blog post was written. API used for this post is the one of the current released version 0.0.8 (already uploaded to maven central).

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

Animation4j - Transitions

As we said on a previous post, we are going to talk a bit more about the current released version (0.0.8) of animation4j, remember that the API could change since we wrote this post.

In this case, we are going to talk about making a transition from one value to another in some time. Animation4j provides you one interface to make transitions, the Transition interface, the API by now looks like this:

public interface Transition<T> {

	 * Returns the current value of the transition.
	T get();

	 * Start an interpolation from a to b in the specified default time.
	 * @param t
	 *            The wanted new value.
	void set(T t);

	 * Start an interpolation from a to b in the specified time.
	 * @param t
	 *            The wanted new value.
	 * @param time
	 *            The time to set the new value. If time is zero, then value is applied directly.
	void set(T t, int time);

The library uses generics so you can create transitions of any type. To do this, you can use the Transitions factory class, where you can create transitions for your types. The API of the factory class looks like this:

<T> Transition<T> transition(T startValue, TypeConverter<T> typeConverter);

The current Transition generic implementation internally work with a float[] in order to optimize memory and to simplify internal work. To use it, you will have to create a converter from your type to float[] and vice versa by implementing the TypeConverter<T> interface. Current API of TypeConverter<T> looks like this:

 * Provides a way to convert an object in a float[] array and vice versa, for interpolation purposes.
 * @param <T>
 *            The type to convert.
 * @author acoppes
public interface TypeConverter<T> {

	 * Returns the quantity of variables are used to convert the object to the float[] and vice versa.
	 * @return the quantity of variables used.
	int variables();

	 * Copy the values of the object to the specified float array, if null it will create a new float array.
	 * @param object
	 *            The object from where to get the values to fulfill the float array.
	 * @param x
	 *            The float array to copy the values of the object. If null it will create a new float array.
	 * @return The float array with the values of the object.
	float[] copyFromObject(T object, float[] x);

	 * Copy the values of the float array to the specified object.
	 * @param object
	 *            The object which the float array values will be copied to. If null or object immutable, it will create a new object.
	 * @param x
	 *            The float array to get the values to fulfill the object.
	 * @return An object with the values of the float array.
	T copyToObject(T object, float[] x);


Type converters should be stateless, so you can reuse a single type converter for all your transitions of the same type. For the next Vector2f class example:

public class Vector2f {

	public float x,y;

	public Vector2f(float x, float y) {

	public void set(float x, float y) {
		this.x = x;
		this.y = y;


We could create the next type converter:

public class Vector2fConverter implements TypeConverter<Vector2f> {

	public float[] copyFromObject(Vector2f v, float[] x) {
		if (x == null) 
			x = new float[variables()];  // don't worry about garbage generation, the transition implementation will cache these values.
		x[0] = v.x;
		x[1] = v.y;
		return x;

	public Vector2f copyToObject(Vector2f v, float[] x) {
		if (v == null)
			v = new Vector2f(0, 0); // don't worry about garbage generation, the transition implementation will cache these values.
		v.x = x[0];
		v.y = x[1];
		return v;

	public int variables() {
		// we are only using two variables.
		return 2;

So, to create a transition, your code would look like:

TypeConverter<Vector2f> converter = new Vector2fConverter(); // could be reused
Transition<Vector2f> transition = Transitions.transition(new Vector2f(100, 100), converter);

// now, set a transition to (500,500) in five seconds.
transition.set(new Vector2f(500, 500), 5000);

// wait some time, and get the value interpolated
Vector2f v = transition.get();

For more information, there is an transitions example in the examples module.

The idea is to provide different TypeConverter implementations for different libraries as project modules so you don't have to implement a TypeConverter for a Slick2D vector2f, or libgdx Vector2. However it is really easy to implement a type converter and you only have to do it once. Also, you will probably use transitions only for some types.

In one of the next posts, we want to talk about interpolation functions (and how are they used for transitions) as they are key concepts in animation4j project.

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

Animation4j Project Introduction

Some time ago I started an internal project to simplify working with animations and transitions when making games in Java.

It was used in some of our games, for example ZombieRockers to make different kind of effects like fade in/out of screens or the points messages when scoring, or in JSnakes to make camera effects like zoom in/out, camera movement, etc.

After using it on our games, it became more clear what kind of things are possible with it.

Now that we are using Github for our source code, we started a dedicated project named animation4j with all the stuff related with animations.

This video shows some working examples of the project:

You can download a runnable jar to test the features shown in the video.

The project is on development, so right now there are a lot of things to improve starting by making easy to understand examples.

I plan to add more posts explaining some design decisions and showing how to use the library.

Hope Java developers could find some use for it.

VN:F [1.9.22_1171]
Rating: 4.0/5 (2 votes cast)

JNLP Downloader Tool

Some time ago, Rubén wrote a Java based tool to download all JNLP resources and prepare executable files to run it based on the JNLP file values.

It downloads all the resources specified by the JNLP file and save them into /libs and /natives for jar resources and nativelib resources respectively, in the second case it creates sub folders for each platform (Windows, Mac and Linux). After that, it creates one executable script file to run the application for each platform, configuring classpath and java.library.path inside it.

For example, running the tool:

 java -jar jnlpdownloader.jar example

where the JNLP contents are:

<?xml version="1.0" encoding="utf-8"?>
<jnlp spec="1.0+" codebase="" href="application.jnlp">
            <title>Some Title</title>
            <vendor>Some Vendor</vendor>
            <description>Some Description</description>
            <jar href="slf4j-api-1.5.8.jar" />
            <jar href="google-collections-1.0.jar" />
            <jar href="lwjgl-2.4.2.jar" />
    <resources os="Windows">
            <nativelib href="lwjgl-2.4.2-natives-win.jar" />
    <resources os="Linux">
            <nativelib href="lwjgl-2.4.2-natives-linux.jar" />
    <resources os="Mac">
            <nativelib href="lwjgl-2.4.2-natives-mac.jar" />
    <application-desc main-class="Main" />

will create the next file structure:


More info at the project's home page.

We used this tool mainly to take a snapshot of a deployed Java Web Start application to make it run offline, for demo purposes.

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)