Posts Tagged ‘inkscape’

Area triggers using Box2D, Artemis and SVG paths

Thursday, March 22nd, 2012

As we explained in previous posts, we are using Inkscape to design the levels of some of our games, in particular, our current project. In this post we want to share how we are making area triggers using Box2D sensor bodies, Artemis and SVG paths.

What is an area trigger

When we say area trigger we mean something that should be triggered, an event for example, when an entity/game object enters the area, to perform custom logic, for example, ending the game or showing a message. Some game engines provides this kind of stuff, for example Unity3d with its Collider class and different events like OnTriggerEnter.

Building an area trigger in Inkscape

Basically, we use SVG paths with custom XML data to define the area trigger to later parse it by the game level loader to create the corresponding game entities. The following screen shot shows an example of an area defined using Inkscape:

Right now, we are exporting two values with the SVG path, the event we want to fire identified by the XML attribute named eventId, and extra data for that event identified by the XML attribute eventData. For example, for our current game we use the eventId showTutorial with a text we want to share with the player on eventData attribute like "Welcome to the training grounds". The following example shows the XML data added to the SVG path:

  

The exported data may depend on your framework or game, so you should export whatever data you need instead.

Defining the area trigger inside the game

Inside the game, we have to define a entity/game object for the area trigger. In the case of our current game, that entity is composed by a Box2D sensor body with a shape built using the SVG path and a Script with logic to perform when the main character collides it.

We use sensor bodies because they are mainly used to detect collisions but not to react to them by changing their angular and linear velocities. As we explained in a previous post, we are using our custom builders to help when building Box2D bodies and fixtures. Our current body declaration looks like this:

  
Body body = bodyBuilder //
	.fixture(bodyBuilder.fixtureDefBuilder() //
		.polygonShape(vertices) // the vertices from the SVG path
		.categoryBits(Collisions.Triggers) // the collision category of this body
		.maskBits(Collisions.MainCharacter) // the collision mask
		.sensor() //
	) //
	.position(0f, 0f) //
	.type(BodyType.StaticBody) //
	.angle(0f) //
	.userData(entity) //
	.build();

The previous code depends on specific stuff of the current game but it could be modified to be reused in other projects.

As we explained in another previous post, we are using a basic scripting framework over Artemis. Our current script to detect the collision looks like this:

 
public static class TriggerWhenShipOverScript extends ScriptJavaImpl {
	
	private final String eventId;
	private final String eventData;
	
	EventManager eventManager;

	public TriggerWhenShipOverScript(String eventId, String eventData) {
		this.eventId = eventId;
		this.eventData = eventData;
	}

	@Override
	public void update(World world, Entity e) {
		PhysicsComponent physicsComponent = Components.getPhysicsComponent(e);
		Contacts contacts = physicsComponent.getContact();
		
		if (contacts.isInContact()) {
			eventManager.submit(eventId, eventData);
			e.delete();
		}
	}
}

For the current game, we are testing this stuff for a way to communicate with the player by showing messages from time to time, for example, in a basic tutorial implementation. The next video shows an example of that working inside the game:

Conclusion

The idea of the post is to share a common technique of triggering events when a game object enters an area, which is not framework dependent. So you could use the same technique using your own framework instead Box2D and Artemis, a custom level file format instead SVG and the editor of your choice instead Inkscape.

References

VN:F [1.9.22_1171]
Rating: 4.3/5 (4 votes cast)

Building 2d animations using Inkscape and Synfig

Friday, March 16th, 2012

In this blog post we want to share a method to animate Inkscape SVG objects using Synfig Studio, trying to follow a similar approach to the Building 2d sprites from 3d models using Blender blog post.

A small introduction about Inkscape

Inkscape is one of the best open source, multi platform and free tools to work with vector graphics using the open standard SVG.

After some time using Inkscape, I have learned how to make a lot of things and feel great using it. However, it lacks of some features which would make it a great tool, for example, a way to animate objects by making interpolations of its different states defining key frames and using a time line, among others.

It has some ways to create interpolations of objects between two different states but it is unusable since it doesn't work with groups, so if you have a complex object made of a group of several other objects, then you have to interpolate all of them. If you make some modification on of the key frames, then you have to interpolate everything again.

Synfig comes into action

Synfig Studio is a free and open-source 2D animation tool, it works with vector graphics as well. It lets you create nice animations using a time line and key frames and lets you easily export the animation. However, it uses its own format, so you can't directly import an SVG. Luckily, the format is open and there are already some ways to transform from SVG to Synfig.

In particular I tried an Inkscape extension named svg2sif which lets you save files in Synfig format and seems to work fine (the page of the extension explains how to install it). I don't know possible limitations of the svg2sif Inkscape extension, so use it with caution, don't expect everything to work fine.

Now that we have the method defined, we will explain it by showing an example.

Creating an object in Inkscape

We start by creating an Inkscape object to be animated later. For this mini tutorial I created a black creature named Bor...ahem! Gishus Maximus:

Modelling Gishus Maximus using Inkscape

Here is the SVG if you are interested on it, sadly WordPress doesn't support SVG files as media files.

With the model defined, we have to save it as Synfig format using the extension, so go to "Save a Copy..." and select the .sif format (added by the svg2sif extension), and save it.

Animating the object in Synfig

Now that we have the Synfig file we open it and voilà, we can animate it. However, there is a bug, probably with the svg2sif extension and the time line is missing. To fix it, we have to create a new document and copy the shape from the one exported by Inkscape to the new one.

The next step is to use your super animation skill and animate the object. In my case I created some kind of eating animation by making a mouth, opening it slow and then closing it fast:

Animating Gishus Maxumis using Synfig

Here is the Synfig file with the animation if you are interested on it.

To export it, use the "Show the Render Settings Dialog" button and configure how much frames per second you want, among other things, and then export it using the Render button. You can export it to different format, for example, a list of separated PNG files for each animation frame or an animated GIF. However, it you can't configure some of the formats and the exported file is not what I wanted so I preferred to export to a list of PNG files and then use the convert tool to create the animated GIF:

Finally, I have a time lapse of how I applied the method if you want to watch it:

Extra section: Importing the animation in your game

After we have separated PNG files for the animation, we can create a sprite sheet or use another tools to create files to be easily imported by a game framework. For this example, I used a Gimp plug-in named Sprite Tape to import all the separated PNG files and create a sprite sheet:

If you are a LibGDX user and want to use the Texture Packer, you can create a folder and copy the PNG files changing their names to animationname_01, animationname_02, etc, and let Texture Packer to automatically import it.

Conclusions

One problem with this method is that you can't easily modify your objects in Inkscape and then automatically import them in Synfig and update the current animation to work with it. So, once you moved to Synfig you have to keep there to avoid making a lot of duplicated work. This could be avoided if Inkscape provided a good animation extension.

Synfig Studio is a great tool but not the best of course, it is not intuitive (as Gimp, Blender and others) and it has some bugs that make it explode without reason. On the other hand, it is open source, free and multi platform and the best part is that it works well for what we need right now ;)

This method allow us to animate vector graphics which is great since it is a way for programmers like us to animate their programmer art :D

Finally, I am not an animation expert at all, so this blog post could be based on some wrong assumptions. So, if you are one, feel free to correct me and share your opinions.

As always, hope you like the post.

VN:F [1.9.22_1171]
Rating: 4.9/5 (14 votes cast)

Making buttons using Inkscape - part 3

Monday, November 7th, 2011

This is the third part of the buttons tutorial series, in this case I will show how to make more complex shapes to be used inside the buttons.

As I did on previous posts, I will show images with the steps to follow to make each icon.


This image explains the steps to follow to make a question mark icon.

This image explains the steps to follow to make an icon for high scores.

Finally, a time lapse video showing how I made all the stuff:

Here is the link to download the question mark SVG and here is the link to download the high scores icon SVG.

As always, hope you like it.

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

Making buttons using Inkscape - part 2

Tuesday, November 1st, 2011

Following the buttons tutorials, in this case I want to show how to make square buttons and how to make simple inner shapes to be used over the button base.

First, the next image tutorial explains a bit how to make buttons to increase/decrease values by using plus and minus symbols.

Here is an example of using it to modify the volume of a game:

The next image shows how to make square buttons with a similar style used for the circular buttons of the previous tutorial.

And here is a time lapse to show how I made the square button:


(note: watch it in 720p, youtube killed the video when converting it to 360p and 480p)

If you want to use this templates, you can access here for the SVG file used for the tutorial, and here is the SVG with several shapes to be used with these buttons.

Finally, I made a new icon to show our android market games at the icons widget in the right side bar, if you like it, feel free to use it. Here is how it looks like:

Hope you like the post. Next time make complex shapes like the high scores goblet/cup.

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

Making buttons using Inkscape - part 1

Monday, October 31st, 2011

Inspired by the Gamasutra article named 2D Game Art For Programmers part 1, I was making some stuff using Inkscape and I want to share my learnings.

In this case, I want to share how I made the background for buttons to be used in games. As the article's author did, I created an image explaining step by step:

Creating a button step by step
(note: click the image for full resolution)

After adding content to the background, we could create stuff like this:

Button examples

I will create another post explaining how to make those button content shapes.

You can download the SVG template from this link if you want to use it, and or modify it.

Hope you like this post, because I am planning to make more :D.

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

Building levels for Super Flying Thing with Inkscape

Wednesday, July 13th, 2011

As we did for Archers Vs Zombies and Taken, we are using Inkscape for building Super Flying Thing levels too.

On SFT, levels are defined by the following information:

  • The position of the starting planet
  • The position of the destination planet
  • The obstacles, specified by a collection of vertices and if they are dynamic or not
  • The items, specified by their position
  • For dynamic obstacles, a list of vertices specifying the path they follow

To declare this stuff on Inkscape, we are using three layers: World, Paths and Obstacles.

World layer is used to declare starting positions like start and destination planets and items.

Paths layer is used to define paths to use for dynamic obstacles (and probably for other stuff too).

Obstacles layer is used to define the shapes of the obstacles of the level. If the obstacles are dynamic we could link them with a defined path to make them follow it in the game. To link it we are using, for now, a custom xml field named movementPath with the id of the path we want.

We also have a templates layer, used to define templates for stuff we want to replicate later in other layer, for example, premade obstacles. That layer is not being processed when the level is loaded.

Here is a screenshot of one level being edited:

Using Inkscape as level editor for Super Flying Thing works great, however, we believe it could be an interesting feature to have an in-game easy to use level editor, to let players create their own levels and probably share them with other players.

Hope you like it.

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

Using Inkscape as Scene Editor

Tuesday, May 3rd, 2011

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.

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

Thursday, April 28th, 2011

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)