134

I'm currently developing a small OpenGL game for the Android platform and I wonder if there's an easy way to render text on top of the rendered frame (like a HUD with the player´s score etc). The text would need to use a custom font also.

I've seen an example using a View as an overlay, but I don't know if I want to do that since I might want to port the game to other platforms later.

Any ideas?

3
  • take a look at this project: code.google.com/p/rokon
    – whunmr
    Apr 13, 2010 at 17:10
  • Look at the way that libgdx does this through Bitmap Fonts. May 16, 2011 at 4:24
  • The ftfles library is pretty complete. Especially, it includes support for generating meshes from the fonts (see the vectorizer). I think that's the cleanest way to draw text in OpenGL. May 4, 2021 at 2:56

13 Answers 13

171

Rendering text to a texture is simpler than what the Sprite Text demo make it looks like, the basic idea is to use the Canvas class to render to a Bitmap and then pass the Bitmap to an OpenGL texture:

// Create an empty, mutable bitmap
Bitmap bitmap = Bitmap.createBitmap(256, 256, Bitmap.Config.ARGB_4444);
// get a canvas to paint over the bitmap
Canvas canvas = new Canvas(bitmap);
bitmap.eraseColor(0);

// get a background image from resources
// note the image format must match the bitmap format
Drawable background = context.getResources().getDrawable(R.drawable.background);
background.setBounds(0, 0, 256, 256);
background.draw(canvas); // draw the background to our bitmap

// Draw the text
Paint textPaint = new Paint();
textPaint.setTextSize(32);
textPaint.setAntiAlias(true);
textPaint.setARGB(0xff, 0x00, 0x00, 0x00);
// draw the text centered
canvas.drawText("Hello World", 16,112, textPaint);

//Generate one texture pointer...
gl.glGenTextures(1, textures, 0);
//...and bind it to our array
gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);

//Create Nearest Filtered Texture
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_NEAREST);
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR);

//Different possible texture parameters, e.g. GL10.GL_CLAMP_TO_EDGE
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_S, GL10.GL_REPEAT);
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_T, GL10.GL_REPEAT);

//Use the Android GLUtils to specify a two-dimensional texture image from our bitmap
GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);

//Clean up
bitmap.recycle();
16
  • 5
    This helped me display at little fps counter on my app for debugging, thanks! Jan 15, 2011 at 22:29
  • 2
    You could use this to genereate all letters and numbers as textures when you load your other textures and then put them together to form words or numbers. Then it will be no less efficient than any other gl texture.
    – twDuke
    Nov 7, 2011 at 15:37
  • 11
    This is very slow, it will kill fps on a game for text that's always changing (score, etc), however it works well for semi-static stuff (player name, level name, etc).
    – led42
    Nov 14, 2011 at 12:15
  • 3
    I would like to note that the code in this answer is probably only a demo and is not optimized what-so-ever! Please do optimize/cache in your own way. Mar 19, 2013 at 8:28
  • 1
    Could you provide this for OpenGL ES 2.0? Sep 28, 2016 at 11:59
108

The Android SDK doesn't come with any easy way to draw text on OpenGL views. Leaving you with the following options.

  1. Place a TextView over your SurfaceView. This is slow and bad, but the most direct approach.
  2. Render common strings to textures, and simply draw those textures. This is by far the simplest and fastest, but the least flexible.
  3. Roll-your-own text rendering code based on a sprite. Probably second best choice if 2 isn't an option. A good way to get your feet wet but note that while it seems simple (and basic features are), it get's harder and more challenging as you add more features (texture-alignment, dealing with line-breaks, variable-width fonts etc.) - if you take this route, make it as simple as you can get away with!
  4. Use an off-the-shelf/open-source library. There are a few around if you hunt on Google, the tricky bit is getting them integrated and running. But at least, once you do that, you'll have all the flexibility and maturity they provide.
5
  • 3
    I've decided to add a view over my GLView, it might not be the most efficient way to do it but the view isn't updated very often, plus it gives me the flexibility to add whatever font I'd like. Thanks for all the replies!
    – shakazed
    Aug 28, 2009 at 6:18
  • 1
    How can I render common strings to textures, and simply draw those textures? Thanks.
    – VansFannel
    Jan 7, 2011 at 15:26
  • 1
    VansFannel: just use a paint program to put all your strings in one image, then in your app use offsets to only render the portion of the image that contains the string you want.displayed.
    – Dave
    Jan 9, 2011 at 8:36
  • 2
    Or see JVitela's answer below for a more programmatic way to achieve this.
    – Dave
    Jan 9, 2011 at 8:42
  • 4
    JVitela's answer is better. That's what I'm currently using. The reason why you switch from standard android vier+canvas to opengl is (amongst others) for speed. Adding a text box over your opengl sort of negates that. Feb 18, 2012 at 9:19
39

I've written a tutorial that expands on the answer posted by JVitela. Basically, it uses the same idea, but instead of rendering each string to a texture, it renders all characters from a font file to a texture and uses that to allow for full dynamic text rendering with no further slowdowns (once the initialization is complete).

The main advantage of my method, compared to the various font atlas generators, is that you can ship small font files (.ttf .otf) with your project instead of having to ship large bitmaps for every font variation and size. It can generate perfect quality fonts at any resolution using only a font file :)

The tutorial includes full code that can be used in any project :)

6
  • I'm currently looking into this solution, and I'm sure i'll find the answer in time, but does your implementation use any run time allocations? Dec 27, 2012 at 18:16
  • @Nick - All allocations (texture, vertex buffers, etc) are done when creating a font instance, rendering strings using the font instance requires no further allocations. So you can create the font at "load time" with no further allocations at run time.
    – free3dom
    Jan 4, 2013 at 9:15
  • Wow, great work! This is really helpful especially in cases where your text changes often.
    – mdiener
    Sep 17, 2015 at 15:39
  • This is the best answer, performance-wise, for applications that have to change the text frequently at runtime. Haven't seen anything else as nice as this for Android. It could use a port to OpenGL ES, though.
    – greeble31
    Sep 1, 2016 at 16:02
  • 1
    If you don't want to deal with text alignment, line breaks, etc - you could use a TextView. A TextView can easily be rendered into a canvas. Performance wise shouldn't be heavier than the given approach, you only need one TextView instance to render all texts you need. This way you also get simple HTML formatting for free. Sep 14, 2017 at 18:42
8

Take a look at CBFG and the Android port of the loading/rendering code. You should be able to drop the code into your project and use it straight away.

CBFG - http://www.codehead.co.uk/cbfg

Android loader - http://www.codehead.co.uk/cbfg/TexFont.java

8

According to this link:

http://code.neenbedankt.com/how-to-render-an-android-view-to-a-bitmap

You can render any View to a bitmap. It's probably worth assuming that you can layout a view as you require (including text, images etc.) and then render it to a Bitmap.

Using JVitela's code above you should be able to use that Bitmap as an OpenGL texture.

1
  • Yeah, I did it with a MapView in a game and bound it to a gl texture so combine maps and opengl. So yeah, all views have onDraw(Canvas c) and you can pass any canvas in and bind any canvas to any bitmap.
    – HaMMeReD
    Jun 23, 2011 at 23:33
6

I looked at the sprite text example and it looks awfully complicated for such a task, I considered rendering to a texture too, but I'm worried about the performance hit that might cause. I might just have to go with a view instead and worry about porting when it's time to cross that bridge :)

5

IMHO there are three reasons to use OpenGL ES in a game:

  1. Avoid differences between mobile platforms by using an open standard;
  2. To have more control of the render process;
  3. To benefit from GPU parallel processing;

Drawing text is always a problem in game design, because you are drawing things, so you cannot have the look and feel of a common activity, with widgets and so on.

You can use a framework to generate Bitmap fonts from TrueType fonts and render them. All the frameworks I've seen operate the same way: generate the vertex and texture coordinates for the text in draw time. This is not the most efficient use of OpenGL.

The best way is to allocate remote buffers (vertex buffer objects - VBOs) for the vertices and textures early in code, avoiding the lazy memory transfer operations in draw time.

Keep in mind that game players don't like to read text, so you won't write a long dynamically generated text. For labels, you can use static textures, leaving dynamic text for time and score, and both are numeric with a few characters long.

So, my solution is simple:

  1. Create texture for common labels and warnings;
  2. Create texture for numbers 0-9, ":", "+", and "-". One texture for each character;
  3. Generate remote VBOs for all positions in the screen. I can render static or dynamic text in that positions, but the VBOs are static;
  4. Generate just one Texture VBO, as text is always rendered one way;
  5. In draw time, I render the static text;
  6. For dynamic text, I can peek at the position VBO, get the character texture and draw it, a character at a time.

Draw operations are fast, if you use remote static buffers.

I create an XML file with screen positions (based on screen's diagonal percentage) and textures (static and characters), and then I load this XML before rendering.

To get a high FPS rate, you should avoid generating VBOs at draw time.

1
  • By "VOB", do you mean "VBO" (vertex buffer object)?
    – Dan Hulme
    Mar 5, 2014 at 13:43
4

Look at the "Sprite Text" sample in the GLSurfaceView samples.

3

If you insist on using GL, you could render the text on to textures. Assuming that most of the HUD is relatively static, you shouldn't have to load the textures to texture memory too often.

3

Take a look at CBFG and the Android port of the loading/rendering code. You should be able to drop the code into your project and use it straight away.

  1. CBFG

  2. Android loader

I have problems with this implementation. It displays only one character, when I try do change size of the font's bitmap (I need special letters) whole draw fails :(

2

I have been looking for this for a few hours, this was the first article i came accross and although it has the best answer, the most popular answers i think are off the mark. Certainly for what i needed. weichsel's and shakazed's answers were right on the button but a bit obscured in the articles. To put you right to the project. Here: Just create a new Android project based on existing sample. Choose ApiDemos:

Look under the source folder

ApiDemos/src/com/example/android/apis/graphics/spritetext

And you will find everything you need.

1

For static text:

  • Generate an image with all words used on your PC (For example with GIMP).
  • Load this as a texture and use it as material for a plane.

For long text that needs to be updated once in a while:

  • Let android draw on a bitmap canvas (JVitela's solution).
  • Load this as material for a plane.
  • Use different texture coordinates for each word.

For a number (formatted 00.0):

  • Generate an image with all numbers and a dot.
  • Load this as material for a plane.
  • Use below shader.
  • In your onDraw event only update the value variable sent to the shader.

    precision highp float;
    precision highp sampler2D;
    
    uniform float uTime;
    uniform float uValue;
    uniform vec3 iResolution;
    
    varying vec4 v_Color;
    varying vec2 vTextureCoord;
    uniform sampler2D s_texture;
    
    void main() {
    
    vec4 fragColor = vec4(1.0, 0.5, 0.2, 0.5);
    vec2 uv = vTextureCoord;
    
    float devisor = 10.75;
    float digit;
    float i;
    float uCol;
    float uRow;
    
    if (uv.y < 0.45) {
        if (uv.x > 0.75) {
            digit = floor(uValue*10.0);
            digit = digit - floor(digit/10.0)*10.0;
            i = 48.0 - 32.0 + digit;
            uRow = floor(i / 10.0);
            uCol = i - 10.0 * uRow;
            fragColor = texture2D( s_texture, uv / devisor * 2.0 + vec2((uCol-1.5) / devisor, uRow / devisor) );
        } else if (uv.x > 0.5) {
            uCol = 4.0;
            uRow = 1.0;
            fragColor = texture2D( s_texture, uv / devisor * 2.0 + vec2((uCol-1.0) / devisor, uRow / devisor) );
        } else if (uv.x > 0.25) {
            digit = floor(uValue);
            digit = digit - floor(digit/10.0)*10.0;
            i = 48.0 - 32.0 + digit;
            uRow = floor(i / 10.0);
            uCol = i - 10.0 * uRow;
            fragColor = texture2D( s_texture, uv / devisor * 2.0 + vec2((uCol-0.5) / devisor, uRow / devisor) );
        } else if (uValue >= 10.0) {
            digit = floor(uValue/10.0);
            digit = digit - floor(digit/10.0)*10.0;
            i = 48.0 - 32.0 + digit;
            uRow = floor(i / 10.0);
            uCol = i - 10.0 * uRow;
            fragColor = texture2D( s_texture, uv / devisor * 2.0 + vec2((uCol-0.0) / devisor, uRow / devisor) );
        } else {
            fragColor = vec4(0.0, 0.0, 0.0, 0.0);
        }
    } else {
        fragColor = vec4(0.0, 0.0, 0.0, 0.0);
    }
    gl_FragColor = fragColor;
    
    }
    

Above code works for a texture atlas where numbers start from 0 at the 7th column of the 2nd row of the font atlas (texture).

Refer to https://www.shadertoy.com/view/Xl23Dw for demonstration (with wrong texture though)

1

In the OpenGL ES 2.0/3.0 you can also combining OGL View and Android's UI-elements:

public class GameActivity extends AppCompatActivity {
    private SurfaceView surfaceView;
    @Override
    protected void onCreate(Bundle state) { 
        setContentView(R.layout.activity_gl);
        surfaceView = findViewById(R.id.oglView);
        surfaceView.init(this.getApplicationContext());
        ...
    } 
}

public class SurfaceView extends GLSurfaceView {
    private SceneRenderer renderer;
    public SurfaceView(Context context) {
        super(context);
    }

    public SurfaceView(Context context, AttributeSet attributes) {
        super(context, attributes);
    }

    public void init(Context context) {
        renderer = new SceneRenderer(context);
        setRenderer(renderer);
        ...
    }
}

Create layout activity_gl.xml:

<?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout
        tools:context=".activities.GameActivity">
    <com.app.SurfaceView
        android:id="@+id/oglView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <TextView ... />
    <TextView ... />
    <TextView ... />
</androidx.constraintlayout.widget.ConstraintLayout>

To update elements from the render thread, can use Handler/Looper.

1
  • 1
    To update elements from the render thread, can use Handler/Looper. By this method, I can update my Textview's text which indicating fps from my RenderThread.
    – hata
    Mar 22, 2021 at 15:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.