HEJP's Blog

Terrabound Development Journal 1

Hello and welcome to the Terrabound dev journal. The aim of the journal is to document the development of the Terrabound a horizontal shooter for Android. There will be some tips and snippets of particularly for things such as game engine architecture, drawing sprites with OpenGL, collision detection, as well as using Swing to create tools. But this isn’t supposed to be a conclusive de facto set of instructions since alternatives always exist.

About the Game

The game is simply supposed to a fun horizontal shooter with all of the typical elements, shooting down hordes of enemies and turrets, fighting bosses, etc.

Early screenshot – the number in the corner is the ms per frame ⇒ ~59 fps

With a soft vector style rather than pixel art which is more often used.

Using animations in your Android applications can help create an interesting and engaging experience for your users. They can be used in games and applications in a number of ways either as a visual treat or as a method to convey information. Fortunately Android has an animation framework that allows you to easily translate, rotate, scale and alter the alpha of (or a combination) a View. Common transitions like fade in/out or slide in from off screen are examples of animations the framework can produce.

Animations and Interpolators

The process of animating a View makes use of two classes the Animation and Interpolator classes. The Animation class describes various aspects of the animation such as the transformation (changes in position, alpha, etc) and the duration of the animation.

The Interpolator class describes the rate of change of the animation, for example a ScaleAnimation with an AccelerateIterpolator results in a View that scales slowly at first and speeds up until the end of the animation. There are a number of different interpolators the most basic LinearInterpolator to more complex ones such as AccelerateInterpolator, AccelerateDecelerateInterpolter and OvershootInterpolator.

Adding Animation to a View

Here is res/layout/main.xml, it contains a button called ‘butt’ that is centred in the screen.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">

	<Button android:id="@+id/butt" android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_centerInParent="true" android:text="Shake!"/>

</RelativeLayout>

Now we define our animation, res/anim/exampe_anim.xml , which is going to slide the button in from the bottom of the screen to the centre of the screen scaling from 0.5 to 1 as it travels all in 1.5 seconds. The p in 50%p means parent, since the Button is a primary child of the RelativeLayout this means 50% of the screen height.

<?xml version="1.0" encoding="utf-8"?>

	<set xmlns:android="http://schemas.android.com/apk/res/android"
	android:interpolator="@android:anim/decelerate_interpolator" android:shareInterpolator="true">

		<translate android:fromYDelta="50%p" android:toYDelta="0" android:duration="1500" />

		<scale android:fromYScale="0.5" android:toYScale="1" android:fromXScale="0.5"
		android:toXScale="1" android:duration="1500" />

</set>

To start the animation use AnimationUtils.loadAnimation(context, resID) to load the animation and the startAnimation(animation) method of the View class.

butt.startAnimation(AnimationUtils.loadAnimation(getBaseContext(), R.anim.example_anim));

Read more: Creating Custom Animations

Now on to the algorithm that requires a little mathematical understanding, the Jacobian matrix method. This method approximates the IK problem as a linear problem, which it almost is if you only change the angles of the joints by small amounts.

Mathematics of the Method

Starting with the vector of angles,

We have the forward kinematic function f, i.e the function that return the position of the endpoint, x, given the angles of the joints.

Our goal is to find  this can be done be firstly introducing the Jacobian matrix as well as differentiating w.r.t. time resulting in this,

Since,

Replacing the δ operators with Δ operators to approximate the differentiation,

Sets us up for an iterative solution.

Outline of the Algorithm

1. Calculate Δx = Goal – f(q) if the size to Δx is small enough exit loop
2. Compute J^-1. J may not be square in which case use the pseudo inverse (J^TJ)^-1J^T
3. Compute Δθ = J^-1Δx
4. θ = θ + Δθ
5. Repeat

Read more: Example, Source and Notes

Preamble

Actionscript is, for the most part, a dynamically typed language, which means that the types (i.e. String, int, GameObject) of variables are checked at run-time rather than at compile-time like they are in C and Java. This is supposedly beneficial to the programmer since such a language is more flexible. All sorts of crap like this is valid:

var i = new GameObject();
i = "1";

As you can see it’s possible to change the type of a reference to something entirely different. This can generate type errors at run-time since later you may try to call i.update(). Although this example is very obvious real world examples can be more nuanced and thus more complicated to find and fix.

Casting and using ‘Strict Mode’ is a technique to essentially make Actionscript a little bit like a statically typed language.  The performance boost comes from firstly doing as much as possible at compile-time (thus less at run-time) and secondly helping the process of type checking by casting.

Read more: Code, Results and Conclusion

I recently released Orbital! And submitted it to ‘Made for Mobile’ contest over at Mochimedia.

Description

Use gravity and well timed rocket thrusts to slingshot your ship around the planets, collecting stars and destroying debris while saving fuel and minimising time taken.

Controls

Initially the ship is stationary holding down the left mouse button or your finger builds up your boost. Releasing fires your ship off with the power indicated in the top left corner. After the initial boost stage use the left mouse button or finger to active the rocket thrusts, these propel your ship in the direction of the cursor. Collide with stars to collect them. Debris can be destroyed with either the missile or the mine. Select which weapon with the button in the bottom left corner or press SPACE. Rockets fly straight and the mines are affected by gravity.

Read more: Play the game

Inverse Kinematics: Part 1 of 2

Inverse kinematics (IK) is the process of calculating the angles of joints required to reach from a start point to an end point. It has many uses, for example in robotics, 3D animation and computer games.

There are a number of algorithms to solve the IK problem; the three that I will describe are an analytic solution, a Cyclic-Coordinate Descent (CCD) solution and a Jacobian matrix iterative solution.

Analytic Solution

This method uses trigonometry to compute an exact solution to the IK problem. Often there are several solutions but the analytic solution may only give one (depending on the implementation) which could require unnecessary movement compared to another possible solution. Also given more than two joints this method is likely to involve impractical maths, but is perfect if your problem consists of two joints in 2D or an additional swivel point in 3D.

Given a situation like this:

θ₁, θ₂ can be calculated thusly:

Since acos(θ) is not real when θ is outside the range -1 to 1 which occurs when the goal (x,y) is out of reach of the arm you may want to make the arm form a straight line in the direction of (x,y).

Read more: Analytic Example, CDD Solution and CCD Example

Using a .ttf or .otf font in Android is fairly straightforward. Firstly create ‘assets/fonts/’ and put the files in there. Now using Typeface.createFromAsset we can create the typeface.

Typeface tf = Typeface.createFromAsset(getAssets(), "fonts/CustomFont.ttf");

To set TextView to use this typeface we use the setTypeface function.

TextView tv = (TextView) findViewById(R.id.texty);
tv.setTypeface(tf);

You can, of course, use this in your custom views with Paint.setTypeface.

Words of Warning

In general I wouldn’t recommend using fonts other than Droid font family apart from in games. That is because Ascender Corp specifically developed the Droid font family for optimal quality and readability on small screen devices. In an application the font is typically a form in which to present some information rather than containing information itself. For example in a racing you might use a font that is elongated with spoilers resembling a car but you probably would not use such a font for an article about cars.

Limitations

As far as I’m aware it is not possible to reference a font in XML. Making something like this impossible:

<TextView
android:id = ”@+id/texty”
android:typeface = "@font/CustomFont"
/>

I think that the Android team may have purposefully excluded a mechanism for referencing custom typefaces in XML to deter people from using an insane custom font that is difficult to read and potentially quite large.