The code is not Android-specific and could be used for other platforms as well.
Defining what we want
Before we start coding, we have to get a better sense of what we want to achieve. For a cutscene we want a scene with multiple objects. These objects could be anything, like a bitmap (sprite) or a piece of text. We will call these objects actors. Each actor can be modified while playing the cutscene by an animation. This could be anything as well, for example: a translation, a rotation, a change of text or a visibility toggle. An animation basically mutates a property of the actor. In this part, we'll look at how to define these animations.
Gathering some tools
First we'll check if Android has some handy tools for us. It seems that from Android 3.0 on, the Property Animation is very useful and may do about the same as the framework we're going to build. However, Android 3.0 is too much of a restriction for me. I want my games to run on Android phones from 2.1 on. Their second library called View animations is only applicable to views, so that's not useful for sprites rendered in OpenGL or bitmap rendered on a canvas.
So it seems we have to do some things ourselves. That's ok, it's not a lot of work. First we start with some tools, a class that describes a 2d vector with float values: Vector2f.
import android.os.Parcel;
import android.os.Parcelable;
public class Vector2f implements Parcelable {
private final float x, y;
public Vector2f(float x, float y) {
super();
this.x = x;
this.y = y;
}
public Vector2f(Vector2f vec) {
super();
this.x = vec.x;
this.y = vec.y;
}
public Vector2f(Vector2d vec) {
super();
this.x = vec.getX();
this.y = vec.getY();
}
public float getX() {
return x;
}
public float getY() {
return y;
}
public Vector2f add(Vector2f vec) {
return new Vector2f(x + vec.x, y + vec.y);
}
public Vector2f sub(Vector2f vec) {
return new Vector2f(x - vec.x, y - vec.y);
}
public Vector2f scale(float f) {
return new Vector2f(x * f, y * f);
}
public float lengthSquared() {
return x * x + y * y;
}
@Override
public String toString() {
return "(" + x + ", " + y + ")";
}
@Override
public int hashCode() {
final int prime = 31;
int result = 1;
result = prime * result + Float.floatToIntBits(x);
result = prime * result + Float.floatToIntBits(y);
return result;
}
@Override
public boolean equals(Object obj) {
if (this == obj)
return true;
if (obj == null)
return false;
if (getClass() != obj.getClass())
return false;
Vector2f other = (Vector2f) obj;
if (Float.floatToIntBits(x) != Float.floatToIntBits(other.x))
return false;
if (Float.floatToIntBits(y) != Float.floatToIntBits(other.y))
return false;
return true;
}
public Vector2f(Parcel in) {
x = in.readInt();
y = in.readInt();
}
@Override
public int describeContents() {
return 0;
}
public static final Parcelable.Creator<Vector2f> CREATOR = new Parcelable.Creator<Vector2f>() {
@Override
public Vector2f createFromParcel(Parcel in) {
return new Vector2f(in);
}
@Override
public Vector2f[] newArray(int size) {
return new Vector2f[size];
}
};
@Override
public void writeToParcel(Parcel dest, int flags) {
dest.writeFloat(x);
dest.writeFloat(y);
}
}This is a thread-safe 2d vector implementation that's parcelable (useful if you want to store a vector using onSaveInstanceState). You can also see that a class Vector2d is mentioned, which is the same class only with ints instead of floats. I use Vector2d for positions in a grid.
Next in line is defining an Animation. This will be the abstract framework on top of which all the possible animations are built. It should certainly have the start frame, the end frame and the current frame. The framerate itself is determined by the main loop of the application (a nice tutorial can be found here). The Animation classes will all transform a single variable (this can be expanded) between those two keyframes. To identify which type of variable is transformed, I use an Enum. You could also use instanceof.
public abstract class Animation {
private final int startFrame;
private final int endFrame;
private int currentFrame;
private AnimationType type;
private List<AnimationChangedListener> listeners;
public Animation(int startFrame, int endFrame, AnimationType type) {
super();
this.startFrame = startFrame;
this.endFrame = endFrame;
this.type = type;
currentFrame = 0;
listeners = new ArrayList<AnimationChangedListener>();
}
public AnimationType getType() {
return type;
}
public boolean isActive() {
return currentFrame >= startFrame && currentFrame <= endFrame;
}
public void addListener(AnimationChangedListener listener) {
listeners.add(listener);
}
protected void dispatchValueChangedEvent() {
for (AnimationChangedListener listener : listeners) {
listener.valueChanged(this);
}
}
/**
* Can be overridden. This function should be called at the end.
*/
public void doTimeStep() {
if (currentFrame <= endFrame) {
currentFrame++;
}
}
public abstract Object getCurrentValue();
}
As you can see, I use an observer pattern to notify all listeners that a variable has changed. Because the abstract base class cannot see when a variable is changed, it is up to the derived classes to call dispatchValueChangedEvent(). AnimationChangedListener is a simple interface:
public interface AnimationChangedListener {
void valueChanged(Animation animation);
}
Each time a frame is being updated, doTimeStep is called. Classes that extend Animation should do their logic there. Let's write a simple animation to see how this works in practice.
The translation animation
Image we want to translate a sprite on the screen between frames 10 and 20. The starting position is (0,0) and the final position is (100,100). This means that the velocity has to be:
dir = end.sub(start).scale(1.f / (float) (endFrame - startFrame));This is simply the distance divided by the time in frames. What's left now is to add dir to the variable that tracks the position if the current frame is between the start frame and end frame, or in other words: when the animation is active.
public class TranslationAnimation extends Animation {
private final Vector2f dir;
private Vector2f current;
public TranslationAnimation(Vector2f start, Vector2f end, int startFrame,
int endFrame) {
super(startFrame, endFrame, AnimationType.POSITION);
current = start;
dir = end.sub(start).scale(1.f / (float) (endFrame - startFrame));
}
@Override
public void doTimeStep() {
if (isActive()) {
current = current.add(dir);
dispatchValueChangedEvent();
}
super.doTimeStep();
}
@Override
public Object getCurrentValue() {
return current;
}
}
And there we have it. The animated variable can be retrieved by calling getCurrentValue(). As we can see, that function returns an Object and not a Vector2f. By querying the type with getType() we know that the variable is a Vector2f.
Instead of polling getCurrentValue all the time, it's better to use the callback from dispatchValueChangedEvent().
The text changer
A second example of a useful animation in cutscenes is one that changes text. This is easily built:
public class TextAnimation extends Animation {
private String text;
private String newText;
public TextAnimation(String newText, int startFrame) {
super(startFrame, startFrame, AnimationType.TEXT);
this.newText = newText;
text = null;
}
@Override
public void doTimeStep() {
if (isActive()) {
text = newText;
dispatchValueChangedEvent();
}
super.doTimeStep();
}
@Override
public Object getCurrentValue() {
return text;
}
}
This class doesn't store the original text, because that would complicate the constructor. It's no problem, because the listeners are only called when a real value is set.
We've reached the end of tutorial one. Part 2 will come soon!
No comments:
Post a Comment