Android opengles animated text logic?

Question

I have gotten text to render using opengl es on android and currently am trying to find out how to "animate" it like in pokemon games where it "reveals" the characters from left to right at a certain speed. How is this done?

Answer 1

Basically, this "text-sliding-in" is like all other animations.

For example, look at this sample code:

public class GameObject {
    // Each element in this char array contains
    // a single character, representing a serie of text.
    private char[] mText;
    // Frames before a new character appears.
    private int mFrames;        
    // Current frame.
    private int mCurrentFrame;
    // Current index (which character is currently the last).
    private int mIndex;

    public GameObject(String defaultText, int framesPerCharacter) {
        final int textLength = defaultText.length();
        mText = new char[textLength];

        for (int x = 0; x < textLength; x++) {
            mText[x] = defaultText.charAt(x);
        }

        mFrames = framesPerCharacter;
    }

    public void drawText() {
        // I do not have room enough to explain drawing APIs, but 
        // you'll get the idea.
        for (int x = 0; x < mIndex; x++) {
            // Draw text, from the beginning to the current index.
            // Depending on the drawing API, you might have to
            // change the x and y coordinates for each character.
            APIDrawText.drawText(mText[x]);
        }

        // Reset the counter if the character's "animation"
        // is done and add one to the index. 
        // Otherwise, add one to the current frame.
        if (mCurrentFrame >= mFrames) { mCurrentFrame = 0; mIndex++; }
        else { mCurrentFrame++; }

        if (mIndex >= mText.length) {
            // Reset the index counter (will display the text all over again).
            mIndex = 0;
        }
    }
}

Notice that a game object class has more fields describing them, but for example purposes this should be enough.

/**
 * Basic OpenGL ES implementation on Android.
 * Should contain onSurfaceCreated() and onSurfaceChanged().
 */
public class GLRenderer extends GLSurfaceView implements Renderer {
    private GameObject mGameObject;

    public GLRenderer() { 
        // Add default text and add 25 frames per character.
        mGameObject = new GameObject("Default text!", 25);
    }

    /**
     * The ordinary draw function on Android. Your code should
     * look something similiar to this.
     */
    @Override
    public void onDrawFrame(GL10 gl) {
        // Use the method which you got to render text with OpenGL
        // here.
        mGameObject.drawText();         
    }
}

Well, what happens? To summarize:

First frame: D <- Increase mCurrentFrame by one.

Second frame: D <- Increase mCurrentFrame by one.

...

Twenty-sixth frame: De <- mIndex has increased to one (it loop through the mText variable two times).

...

All text has been displayed: <- Reset the mIndex to zero, reset mCurrentFrame to zero. This will play the animation from the beginning.

This is the basic idea. You can add more methods where you change the frames per character amount, change text, slow/speed up the animation after each character, etc.

I also wrote an example of this, but for the Canvas system. It should be easy for you to adapt to whatever you choose.

You can find my example here.