android - 在 OpenGL ES 中绘制文本

Question

我目前正在为 Android 平台开发一个小型 OpenGL 游戏，我想知道是否有一种简单的方法可以在渲染帧的顶部渲染文本（比如带有玩家分数的 HUD 等）。文本也需要使用自定义字体。

我看过一个使用视图作为覆盖的示例，但我不知道我是否想这样做，因为我可能想稍后将游戏移植到其他平台。

有任何想法吗？

score 169 · Accepted Answer

将文本渲染到纹理比 Sprite Text 演示看起来更简单，基本思想是使用 Canvas 类渲染到 Bitmap，然后将 Bitmap 传递给 OpenGL 纹理：

// 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();

score 107 · Accepted Answer

Android SDK 没有提供任何在 OpenGL 视图上绘制文本的简单方法。为您提供以下选项。

在 SurfaceView 上放置一个 TextView。这是缓慢而糟糕的，但却是最直接的方法。
将常用字符串渲染到纹理，然后简单地绘制这些纹理。这是迄今为止最简单和最快的，但最不灵活。
基于精灵滚动你自己的文本渲染代码。如果 2 不是一个选项，可能是第二好的选择。让你的脚湿透的好方法，但请注意，虽然它看起来很简单（基本功能也是如此），但随着您添加更多功能（纹理对齐、处理换行符、可变宽度字体等），它会变得更加困难和更具挑战性。 ) - 如果你走这条路，让它尽可能简单！
使用现成的/开源库。如果你在谷歌上搜索，有一些，棘手的一点是让它们集成并运行。但至少，一旦你这样做了，你将拥有它们提供的所有灵活性和成熟度。

score 38 · Accepted Answer

我写了一个教程，扩展了 JVitela发布的答案。基本上，它使用相同的想法，但不是将每个字符串渲染为纹理，而是将字体文件中的所有字符渲染为纹理，并使用它来允许完全动态的文本渲染而不会进一步减速（一旦初始化完成） .

与各种字体图集生成器相比，我的方法的主要优点是您可以将小字体文件 (.ttf .otf) 与您的项目一起发送，而不必为每种字体变化和大小发送大位图。它可以仅使用字体文件以任何分辨率生成完美质量的字体:)

本教程包含可在任何项目中使用的完整代码 :)

score 8 · Accepted Answer

根据此链接：

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

您可以将任何视图渲染为位图。可能值得假设您可以根据需要（包括文本、图像等）布局视图，然后将其渲染为位图。

使用上面的 JVitela 代码，您应该能够将该位图用作 OpenGL 纹理。

score 7 · Accepted Answer

看看 CBFG 和加载/渲染代码的 Android 端口。您应该能够将代码放入您的项目并立即使用它。

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

Android 加载器 - http://www.codehead.co.uk/cbfg/TexFont.java

score 6 · Accepted Answer

我查看了精灵文本示例，对于这样的任务，它看起来非常复杂，我也考虑过渲染到纹理，但我担心可能会导致性能下降。我可能只需要去看风景，并担心在需要过桥的时候移植 :)

score 5 · Accepted Answer

恕我直言，在游戏中使用 OpenGL ES 有三个原因：

通过使用开放标准避免移动平台之间的差异；
更好地控制渲染过程；
受益于 GPU 并行处理；

绘制文本一直是游戏设计中的一个问题，因为您正在绘制东西，所以您无法拥有普通活动的外观和感觉，以及小部件等。

您可以使用框架从 TrueType 字体生成位图字体并渲染它们。我见过的所有框架都以相同的方式运行：在绘制时为文本生成顶点和纹理坐标。这不是 OpenGL 最有效的使用方式。

最好的方法是在代码的早期为顶点和纹理分配远程缓冲区（顶点缓冲区对象 - VBO），避免绘制时的惰性内存传输操作。

请记住，游戏玩家不喜欢阅读文本，因此您不会编写很长的动态生成文本。对于标签，您可以使用静态纹理，为时间和分数保留动态文本，两者都是数字，只有几个字符。

所以，我的解决方案很简单：

为常见标签和警告创建纹理；
为数字 0-9、“:”、“+”和“-”创建纹理。每个角色一个纹理；
为屏幕中的所有位置生成远程 VBO。我可以在该位置呈现静态或动态文本，但 VBO 是静态的；
只生成一个Texture VBO，因为文本总是以一种方式呈现；
在绘制时，我渲染静态文本；
对于动态文本，我可以查看 VBO 位置，获取字符纹理并绘制它，一次一个字符。

如果您使用远程静态缓冲区，则绘制操作很快。

我创建了一个带有屏幕位置（基于屏幕的对角线百分比）和纹理（静态和字符）的 XML 文件，然后在渲染之前加载此 XML。

要获得高 FPS 速率，您应该避免在绘制时生成 VBO。

score 4 · Accepted Answer

4

查看GLSurfaceView示例中的“Sprite Text”示例。

于 2009-08-27T06:18:12.810 回答

score 3 · Accepted Answer

如果您坚持使用 GL，则可以将文本渲染到纹理上。假设大部分 HUD 是相对静态的，您不必过于频繁地将纹理加载到纹理内存中。

score 3 · Accepted Answer

查看CBFG加载/渲染代码的 Android 端口。您应该能够将代码放入您的项目并立即使用它。

我对这个实现有问题。它只显示一个字符，当我尝试更改字体位图的大小（我需要特殊字母）时，整个绘制失败:(

score 2 · Accepted Answer

我已经找了几个小时了，这是我遇到的第一篇文章，虽然它有最好的答案，但我认为最受欢迎的答案是不正确的。当然是我需要的。weichsel 和 shakazed 的答案在按钮上是正确的，但在文章中有点模糊。让您正确地参与该项目。这里：只需基于现有示例创建一个新的 Android 项目。选择 ApiDemos：

查看源文件夹下

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

你会找到你需要的一切。

score 1 · Accepted Answer

对于静态文本：

使用 PC 上使用的所有单词生成图像（例如使用 GIMP）。
将此加载为纹理并将其用作平面的材料。

对于需要不时更新的长文本：

让 android 在位图画布上绘图（JVitela 的解决方案）。
将其加载为飞机的材料。
为每个单词使用不同的纹理坐标。

对于数字（格式为 00.0）：

生成包含所有数字和一个点的图像。
将其加载为飞机的材料。
使用下面的着色器。

在您的 onDraw 事件中，仅更新发送到着色器的值变量。

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;

}

上面的代码适用于纹理图集，其中数字从 0 开始，位于字体图集（纹理）第 2 行的第 7 列。

请参阅https://www.shadertoy.com/view/Xl23Dw进行演示（虽然纹理错误）

score 1 · Accepted Answer

在 OpenGL ES 2.0/3.0 中，您还可以结合 OGL 视图和 Android 的 UI 元素：

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);
        ...
    }
}

创建布局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>

要从渲染线程更新元素，可以使用 Handler/Looper。

android - 在 OpenGL ES 中绘制文本

13 回答 13

Related

Reference