Posts Tagged ‘howto’

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.11_1134]
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.11_1134]
Rating: 5.0/5 (2 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.11_1134]
Rating: 5.0/5 (3 votes cast)

Testing Android controls on libGDX PC application using libGDX remote

Friday, September 9th, 2011

When testing our games, sometimes we only need to test the game controls on the Android devices, not all the game, and deploying it on the device is always slower than running it on the PC.

The LibGDX library provides a way to send your Android device input data to through the network, one of the possible uses is to control your libGDX PC application with it.

Here is a demo video using the remote input, made by libGDX team:


(note: magic starts after minute 2)

In the case of Super Flying Thing, we need it when testing and debugging some controls that cannot be tested directly on PC like the TiltController for example (we need device orientation data). Recently, we starting using it also to test and customize other controls like the the ClassicController (despite it has a bit of lag in some cases).

Sadly, my camera is also my android phone so I can’t make a video of how we are using it.

One interesting point of this is that we could use multiple android devices (and probably other devices like iPod/iPhone/iPad/others) to create multiple wireless controllers for PC, and that, for example, could be funny if we want to make a local multiplayer game.

Another interesting point is that you could implement your own remote input server to read the device input data sent by the GDX Remote Android Application, so you wouldn’t be forced to use libGDX in your server application.

VN:F [1.9.11_1134]
Rating: 5.0/5 (1 vote cast)

Multiple Android controls for Super Flying Thing

Tuesday, August 9th, 2011

Most people tell us that the game controls are not fine yet, at least for the Android version. Based on that, we are working on multiple control implementations to test and to let the user choose which controls fits best for him.

How we manage the controls internally

To control the Ship, we created a structure named ShipController with two methods:

  shouldReleaseShip() : boolean
  getMovementDirection() : float

The first one returns true if the Ship should be released from the planet, false otherwise. The second one returns a real number between [-1, 1] to determine the rotation direction of the Ship and the rotation speed.

That is just a structure with the values modified by the real controllers, explained next, and processed by the Ship behaviors.

Classic controller

The classic control is the current one, you have to press one half of the screen to rotate the Ship to the right and the other half to rotate the Ship to the left.

Classic Controller

This controller performs an acceleration from 0 to 1 internally to the returned movement direction. This allows the player to rotate in slower but after pressing the controls for a while start rotating faster.

Problems with this controls are that it is too sensitive on Android, it may be enough to find better values for acceleration but we couldn’t find the best solution yet.

Axis based controller

Determines the movement rotation based on a variable Axis and the current pressed position. The Axis could be horizontal or vertical its position is defined with the first pressed position.

Axis based controller

We are just testing and we have to play a bit with the controller values to know exactly if this controller will work or not.

Some options of the controller could be to make the Axis fixed, not dependent of the first pressed position.

Analog stick based controller

This controller behaves like an analog stick, you decide the desired Ship’s direction and the controller will do its magic to make the Ship points to that direction.

For now, the stick center is dynamic and defined with the first pressed position and the stick direction is defined with the current pressed position and the stick center.

Analog based controller

A problem with this controller is we are afraid it could change all the original game play of the game, but could be for the best if it let players control the Ship in an easy way.

We are just testing it also, for now it doesn’t feel easy to use, but again, we need to test more controller values to know that better.

Same as the previous controller, one option could be to have the stick center fixed in some part of the screen.

Tilt based controller

Finally, the Tilt based controller is just that (not implemented yet), control the Ship using device’s sensors, never worked with that before.

No image in this case, should be easy enough to imagine.

An interesting point of this controller is that it let us recover part of the screen and that could be very important for small resolution devices where your fingers could cover a great part of the screen.

Final notes

One interesting point in testing different controls is to understand that different players need different controls, some times they need the game to adapt to them and not vice versa. We are thinking in having a controls menu or something to select the Controller you want to use and maybe some internal values.

Also, some of the controls could work for Desktop version too, have to test them a bit there to see if they fit, could be great to play using only the mouse.

As always, hope you enjoy these kind of posts.

VN:F [1.9.11_1134]
Rating: 0.0/5 (0 votes cast)

Building 2d sprites from 3d models using Blender

Wednesday, July 20th, 2011

In this post I want to share the process used to create the ship sprite sheet of Super Flying Thing (STF from now on). I will assume you have a basic experience with Blender or software alike.

Model and texture

The first step will be to get or create a model you want for the sprite sheet. In my case, the ship was created from zero, following this excellent tutorial (a bit boring to watch, but great content). Of course, as I am not an artist and I only dedicated three hours, my model sucks a bit compared to the one of the tutorial.

Set the camera

Now that you have a model, you will have to configure the camera for the Blender rendering process. The idea is to put it pointing to the model, and bring it closer to the model until you get it in the camera view port. The next image shows an example:

In the case of SFT, I configured the view port to be 64×64.

Create the animation

Now, you have to create the animation you want to render. For SFT, I wanted to create the animation of ship rotating 360 degrees. As the speed of the ship is approx 300 degrees per second, and I was using a 30FPS animation, then I wanted to have the matching frames for the complete rotation animation, in this case, 36 frames. So I created one key frame for 0 degrees, 90, 180, 270 and 360 degrees. The last one is only used to complete the interpolation and is not included in the final animation.

ship animation key frames

Be sure to configure the animation to use a linear interpolation to match the frame with the ship’s angle, unless you want otherwise. To do that, open the Graph Editor, and from Key menu modify Interpolation Mode to Linear.

Finally, export the animation using Render animation from blender, it will create each frame of the animation in your temp folder. Be aware you will get a better result using an Anti-Aliasing algorithm, for example, Catmull-Rom, thanks void256 for the tip.

Here is the difference:


The left image is not using anti aliasing at all, the right one is using Catmull-Rom with 16 samples per pixel.

And here is the animation:

The process is tools independent, so you could use, for example, 3D Studio if you want. You only need a good artist, as we do.

As always, hope you like the post and it could be of help.

VN:F [1.9.11_1134]
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.11_1134]
Rating: 1.0/5 (1 vote cast)

Simplifying building bodies and joints with libGDX Box2D – 2

Tuesday, July 12th, 2011

BodyBuilder, which I commented on a previous post, has been updated to work with multiple fixtures, keeping simplicity.

Internally, it uses a FixtureDef builder named FixtureDefBuilder which lets you specify a fixture definition for each fixture.

Here is an example of how it looks now it supports multiple fixture definitions:

Body body = bodyBuilder
		.fixture(bodyBuilder.fixtureDefBuilder()
				.circleShape(radius * 0.1f)
				.categoryBits(CategoryBits.MiniPlanetCategoryBits)
				.restitution(0f))
		.fixture(bodyBuilder.fixtureDefBuilder()
				.circleShape(radius)
				.categoryBits(CategoryBits.AllCategoryBits)
				.sensor())
		.position(x, y)
		.mass(1f)
		.type(BodyType.StaticBody)
		.userData(e)
		.build();

The previous example shows how to declare two fixtures for a Body, one of them is a sensor. For you to know, I am using that code in Super Flying Thing to declare the destination planet (that’s the name for now), the sensor is to detect when the ship is near to trigger an event and then attach it to the planet by creating a Box2D Joint.

If you are a game programmer, it could be useful to maintain your code clean and simple.

VN:F [1.9.11_1134]
Rating: 5.0/5 (2 votes cast)

Simplifying building bodies and joints with libGDX Box2D

Monday, June 27th, 2011

In almost all of our latest games we are using libGDX as our main game library. As it comes with a wrapper of well known physics library Box2D, we are using it as well.

Some times when creating a Box2D body, you have to initialize a lot of stuff, you have to create a BodyDef and a FixtureDef and then create the Body with the BodyDef, after that create the fixture on the body using the FixtureDef, it could be a bit confuse.

The next code snippet shows an example of that:

	BodyDef bodyDef = new BodyDef();
	FixtureDef fixtureDef = new FixtureDef();

	bodyDef.type = BodyType.StaticBody;
	bodyDef.bullet = false;
	// ... more stuff

	Shape shape = new CircleShape();
	shape.setRadius(radius);

	fixtureDef.shape = shape
	fixtureDef.friction = 1f;
	// ... more fixtureDef stuff

	Body body = world.createBody(bodyDef);
	body.createFixture(fixtureDef);

To improve this a bit, I have created a BodyBuilder which lets you build Box2D physics bodies in less code lines.

The following code snippet shows an example of using the BodyBuilder:

	Body body = bodyBuilder
			.mass(1000f)
			.circleShape(radius * 0.1f)
			.position(x, y)
			.restitution(0f)
			.type(BodyType.StaticBody)
			.categoryBits(MiniPlanetCategoryBits)
			.build();

As you can see, it looks smaller and cleaner. However, it has the limitation (because I was lazy when I did the class) it works for only one fixture def, if you want to build a complex body that will be a problem.

There is also a similar builder for Joints named JointBuilder but it is just started.

The following code snippet shows an example of using the JointBuilder:

	Joint joint = jointBuilder.distanceJoint()
			.bodyA(bodyA)
			.bodyB(bodyB)
			.collideConnected(false)
			.length(1.5f)
			.build();

If you are using libGDX Box2D as well, both classes could be of help despite they are incomplete.

VN:F [1.9.11_1134]
Rating: 5.0/5 (4 votes cast)

Animation4j – Synchronizer

Friday, May 13th, 2011

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

VN:F [1.9.11_1134]
Rating: 0.0/5 (0 votes cast)