gpt4 book ai didi

opengl - Lwjgl/Opengl字体渲染

转载 作者:行者123 更新时间:2023-12-02 06:35:45 35 4
gpt4 key购买 nike

我正在尝试使用opengl在lwjgl显示屏上显示具有自定义字体的文本。目前,我正在使用自定义位图字体类从png文件加载字体,并以与tileet相同的方式显示它们。它可以正常工作,但是当我将文本绘制到屏幕上时,字符之间的间距是完全不同的,因为字母M比字母I宽得多,并且所有字符都有不同的宽度。有什么方法可以检测每个字符的宽度?还是在lwjgl中有特定于字体的库?有一种使用slick2d做到这一点的方法,但是加载整个库只是为了显示文本是毫无意义的!

最佳答案

我曾经遇到过同样的问题,所以这是我为解决问题所做的工作。

我通常会制作许多小的示例程序,因此实际上我仍然可以找到存在确切问题的程序,因此下面是屏幕截图。

正如您已经描述的那样,问题在于我们对每个字符使用相同的宽度,从而给出了可怕的间距。

基本上,我最终要做的是将每个字符和符号的x,y,宽度,高度,xoffset,yoffset,xadvance写入文件。

  • x / y =图像上字符的x / y坐标。
  • width / height =字符的宽度/高度。
  • xoffset / yoffset =这是仅赋予渲染角色的额外间距。
  • xadvance =这是在渲染角色之后将添加的额外间距。
  • 所有值均以像素为单位。

  • 这是一个例子:
    file data/materials/font/font1.png

    char default width=5 height=7 xoffset=0 yoffset=0 xadvance=1

    char id= x=0 y=16

    char id=a x=8 y=48
    char id=b x=16 y=48
    char id=c x=24 y=48
    ... etc ...
    char id=i x=72 y=48 width=1
    ... etc ...

    char id=A x=8 y=32
    char id=B x=16 y=32
    char id=C x=24 y=32
    ... etc ...
    char id=I x=72 y=32 width=3
    ... etc ...

    了解文件

    让我简短地解释一下每一行的作用。
    file data/materials/font/font1.png
    告诉解析器我们要加载并使用以下给定路径作为字体纹理。您当然可以手动执行此操作,这只是我的操作方式。
    char default width=5 height=7 xoffset=0 yoffset=0 xadvance=1
    这将为新的char设置默认值,因此,如果我们定义一个char且其中不包含上述任何字符,则会为其指定默认值。
    char id=a x=8 y=48
    这定义了字符“a”,因为 ìd=a当然告诉它是“a”,并且 x=8 y=48是字符在纹理上的位置的左上坐标。

    同样,由于我们在上面定义了 char default width=5 height=5 .....,因此默认情况下也会将其分配给该字符。因此,基本上,解析器将 char id=a x=8 y=48读取为 char id=a x=8 y=48 width=5 height=7 xoffset=0 yoffset=0 xadvance=1
    这就是为什么我在示例中添加 char id=i x=72 y=48 width=1的原因,您实际上可以看到我们将宽度定义为仅 1而不是默认的 5 char id= x=0 y=16
    这实际上定义了空格,因此,如果您愿意,可以用字母或符号代替空格,也可以这样做。

    加载文件

    首先,我主要有2个类 BitmapFontBitmapGlyph我不会给您两个类的所有代码,因为Stack Overflow的重点不是我们应该完成所有工作。
    BitmapGlyph类存储有关字符/符号的信息,因为它只是用于存储信息的类,因此非常简单。
    public class BitmapGlyph {
    public int id;
    public int x, y, width, height;
    public int xoffset, yoffset, xadvance;
    public float u, v, u2, v2;
    }
    BitmapFont类主要包​​含2种方法 static load(final File file)render(String text, float x, float y, float size)
    它包含更多方法,例如 dispose()getTexture()等,尽管与您的问题无关。

    解析文件
    public final static BitmapFont load(final File file) {
    BitmapFont font = new BitmapFont();

    final ArrayList<BitmapGlyph> glyphs = new ArrayList<BitmapGlyph>();

    try (final BufferedReader br = new BufferedReader(new InputStreamReader(new FileInputStream(file)))) {
    String line;

    while ((line = br.readLine()) != null) {
    if (line.isEmpty()) { continue; }

    // Now parse the file, example:

    if (line.startsWith("file ")) {
    // I don't know if you have a Texture class, and if you
    // can load an image from a path to a texture,
    // though since this is just an example and it's easy
    // to understand. Then you will just have to adapt it
    // to your own program.
    font.texture = new Texture(new File(line.substring(5)));
    }

    // PARSE THE REST OF THE FILE
    }

    br.close();
    }
    catch (Exception ex) {}

    return font;
    }

    解析文件后,我还将字符 x, y, width, height,转换为纹理上的实际 u, v, u2, v2,坐标。我通过像这样遍历每个 BitmapGlyph来做到这一点。
    int width = texture.getWidth(); // The width should of course be the actual pixel width of the image.
    int height = texture.getHeight(); // The height should of course be the actual pixel height of the image.

    for (BitmapGlyph glyph : glyphs) {
    glyph.u = glyph.x / (float) width;
    glyph.v = glyph.y / (float) height;
    glyph.u2 = (glyph.x + glyph.width) / (float) width;
    glyph.v2 = (glyph.y + glyph.height) / (float) height;
    }

    渲染图

    您可能已经知道这一点,尽管为了安全起见,我会指导您。
    public final void render(String text, float x, float y, float size) {
    // BIND FONT TEXTURE

    glBegin(GL_QUADS);

    for (int i = 0, istop = text.length(); i < istop; i++) {
    char ascii = text.charAt(i);

    BitmapGlyph g = ...; // Get the stored glyph according to the char, check against the BitmapGlyph id

    float ww = g.width * size;
    float hh = g.height * size;

    float xx = x + g.xoffset * size;
    float yy = y + g.yoffset * size;

    glTexCoord2f(g.u, g.v);
    glVertex2f(xx, yy);

    glTexCoord2f(g.u, g.v2);
    glVertex2f(xx, yy + hh);

    glTexCoord2f(g.u2, g.v2);
    glVertex2f(xx + ww, yy + hh);

    glTexCoord2f(g.u2, g.v);
    glVertex2f(xx + ww, yy);

    x += (g.width + g.xadvance) * size;
    }

    glEnd();
    }

    重要提示:我仅使用不推荐使用的方法,因为它使解释变得更容易。

    当使用我刚才描述的方式时,您将得到这个结果。 (同样,这是我为修复此问题而制作的实际程序的屏幕截图)

    比较方式

    之前



    额外

    以下是有关为什么您应该选择以这种方式进行操作的一些要点。
  • 这样,您不必以相同的方式排列所有字符。
  • 您始终可以添加新的字符和/或符号。
  • 字符可以是您想要的任何大小。

  • 这可能是我做过的最长答案,尽管我希望您可以使用它!

    关于opengl - Lwjgl/Opengl字体渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19610697/

    35 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com