In this post I will talk a bit more about animation4j project, particularly the Synchronizer class.

When working with transitions we could want to declare them in a seamlessly way. In a previous post I introduced the [Transition](https://github.com/gemserk/animation4j/blob/master/animation4j-core/src/main/java/com/gemserk/animation4j/transitions/Transition.java) class which lets you define a transition of an object from one state to another but it requires manual synchronization from transition object values to your own object values. In retrospective, that doesn't seems the best way to achieve seamless usage.

Meet the Synchronizer

For this reason, animation4j provides a class named Synchronizer, which handles all the synchronization internally for you. To create a new transition you have to declare something like this:

// create a synchronizer in some part of your initialization code
Synchronizer synchronizer = new Synchronizer();

// create a transition in some parte of your game logic, for example when the user press something
Vector2f position = new Vector2f(100, 100);
synchronizer.transition(position, Transitions.transitionBuilder().end(new Vector2f(200, 200)).time(500));

// this will perform the synchronization, it will set to my object the current value of the transition.
// normally this call will be on an update() method of your game
synchronizer.synchronize(delta);

// so now my object will be update with the new values
System.out.prinln(position);

note: I used a Vector2f class in the example because it is a known class, all libraries have a Vector implementation.

In the previous example, I create a transition of a Vector2f class from (100,100) to (200, 200) in 500ms.

To register a new transition to be synchronized you call transition() method and each time synchronize(delta) method is called, Synchronizer will perform synchronization of all registered transitions. The registration method comes in to flavors, one will modify the object you pass but it only works if you are using a mutable object. The other one works over the field of an object using reflection and calling public set method to modify the internal field. It works for both mutable and immutable objects because it is setting a new value each time, however, one pending improvement is to modify current field value, instead creating a new one each time, when the field class is mutable.

Synchronizer class could be used in a static way using the Synchronizers class, which holds an internal singleton instance to do all the work. That is really useful when you want to use the synchronization stuff wherever you want. However a restriction is that it will updates all registered transitions and that could be a problem if you have different states for your game, for example, a pause game state which keeps rendering a playing game state, you don’t want the transitions started in that state to go on, so in that case could use different instances for each game state.

TransitionBuilder is your friend

Another interesting stuff added to the library is the TransitionBuilder class provided inside the Transitions class. In previous versions, there were different methods to create a Transition using the Transitions factory class, one only specifying speed, other specifying speed and end value, other specifying speed and the interpolation functions, and the list goes on and on. In order to improve this, the TransitionBuilder class was created. It lets you specify the parameters you want when building a Transition, for example:

Transition transition = Transitions.transitionBuilder().start(v1)
	.end(v2)
	.time(5000)
	.functions(InterpolationFunctions.easeIn(), InterpolationFunctions.easeOut())
	.build();

The previous code will create a transition from value v1 to value v2 in 5000ms using the declared interpolation functions to interpolate between the internal values of v1 and v2 (as explained in a previous post).

These classes simplify a lot working with animation4j but there is still a lot of work to do in order to improve usage and internal performance.


On a previous blog post</a>, 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.

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</a>, 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.

Conclusion

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</a> 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.


This weekend was the Ludum Dare contest, and as you may already know, we always try to participate. It was the Ludum Dare number 20 and the theme was It’s Dangerous to go Alone! Take this!.

I was the only one who entered the contest this time, my game is named Codename: Taken. The idea is to survive as long as you can, there are red flying robots which fires at you and you have a green flying robot which protects you. The defender robot is a bit slow, so as you move away from him you become vulnerable to enemy robots then it is dangerous to go alone.

Here are the links for the game:

Here is a gameplay video:

And here a time lapse video:

The game is incomplete, I lost all Saturday making stuff for a game that I modified totally on Sunday. Some missing stuff:

  • Finish the game when you get killed or when you fall from the borders of the world
  • Increase points while you keep alive
  • Show a health bar of the character
  • Add a way to recover your health (maybe a magic mushroom or maybe only points made by survival time)
  • Add some other objective like reaching some point?

Well, that’s all, hope you could play it and you like it. I will be uploading a time lapse video in the next days.

UPDATE: Added time lapse video.

UPDATE 2: I am working on finishing some of the listed stuff for Ludum Dare 20 Jam

UPDATE 3: Added a link to play the jam version of the game.


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.


The game is progressing really slow, I am a bit stuck deciding what to do next.

One of the things I was on was testing a new bow controller where you press over a circular area and fire direction is calculated based on the pressed point and the center of the circle.

There are two versions to control the bow power, one is based on the pressed time, if you press and release quickly it will shoot a weak arrow, if you press and maintain it will fire a strong one.

The other one controls the bow power by the distance of between the pressed position and the circle center:

Archer Vs Zombies - Screen Controller

Archer Vs Zombies - Controller Example - Screen Controller

Another thing I was working on was a camera controller, a way to move and zoom the screen easily. The idea is to press over the screen and move the pointer to move the camera, also if you maintain pressed it will let you zoom in/out. In order to do that, I had to limit some areas where the controllers are enabled or not to avoid both controllers acting at the same time. That is one of the reasons I added the circle bow controller.

As you can see, this new controller is mainly for touch devices, in PC I believe the game could be adapted to use all mouse buttons instead and shoot by pressing wherever you want to press, not only over the circle. To control the camera, you could use another mouse button (or even the keyboard).

What I should do next

I have a couple of bugs where some zombies die without a reason, also game crashes some times. I believe it must be something in how I process the game entities (zombies, arrows, etc) and I have to fix them in a near future.

What I really want to do

Putting stuff on the scene right now is quite annoying, I keep modifying some code and run the game to see how it looks, then modify again and again and again until it looks acceptable. To simplify working with the scenes and improve the work done, I am thinking to use/make some graphical editor, something like the Aquaria Scene Editor is what I have in mind. With that, I could easily test stuff until something nice comes out.

Related with previous point, making bodies for the physics engine matching the sprites shapes is quite complex by putting values directly in game code. The next image shows how the physics body doesn’t match the sprite shape:

Archer Vs Zombies - Body Sprite Example

Archer Vs Zombies - Body Sprite Example

So another stuff I want to work on is to have an editor where you can open a sprite and create a physics body graphically. I don’t know if there is a common file format or structure to specify this relationship and/or if there is editors for this stuff.

Finally, as we suck at making 2D graphics, we suck more at making 2D animations (by drawing frame by frame). So, to improve this, I was thinking to use animations made by skeletons like games like Aquaria does. By this approach, we could test and create a lot of animations using only some graphics (maybe from a real artist). To accomplish this, I was looking into some 2d skeleton animations editors like the Aquaria Animation Editor, Demina (only XNA), Grim editor and Crimson Legend Skeletal Animation System but I can’t find clear information, there are a lot of custom implementations with custom formats or they are platform dependent (like editors only for Game Maker or XNA). Dunno which is the common solution, maybe using a 3d format like MD5 or something like this but I have to find out yet.

If you are a game developer, how are you making this stuff? I am really interested in learning from other game developers and to use common solutions, I don’t believe I should implement my own unless there is no option (cant deny I am really interested in developing my own).

UPDATE: Some other game developers suggested me to use Inkscape as Scene definition, I could also use it for physics bodies definitions as well adding some meta data to shapes. Could be a great solution, I will test it right now :D.

Thanks.