34

我尝试在libgdx上的 android 游戏中绘制简单的文本，但它看起来很清晰。如何使文本在不同分辨率下看起来平滑？我的代码：

private BitmapFont font;

font = new BitmapFont();

font.scale((ppuX*0.02f));

font.draw(spb, "Score:", width/2-ppuX*2f, height-0.5f*ppuY);
4

10 回答 10

52 
font.getRegion().getTexture().setFilter(TextureFilter.Linear, TextureFilter.Linear);

这将获取在 BitmapFont 中使用的纹理并将其过滤更改为双线性，从而允许更高的图像质量，同时以稍微慢一些（差异通常不明显）GPU 渲染为代价进行放大和缩小。

于 2013-08-05T16:00:39.073 回答
28

一种解决方案是使用 libgdx 的 FreeType 扩展，如此处所述。这允许您从 .ttf 字体动态生成位图字体。通常，一旦您知道目标分辨率，您就会在启动时执行此操作。

这是一个例子：

int viewportHeight;
BitmapFont titleFont;
BitmapFont textFont;

private void createFonts() {
    FileHandle fontFile = Gdx.files.internal("data/Roboto-Bold.ttf");
    FreeTypeFontGenerator generator = new FreeTypeFontGenerator(fontFile);
    FreeTypeFontParameter parameter = new FreeTypeFontParameter();
    parameter.size = 12;
    textFont = generator.generateFont(parameter);
    parameter.size = 24;
    titleFont = generator.generateFont(parameter);
    generator.dispose();
}
于 2013-02-28T22:37:34.917 回答
23

您绝对应该快速了解自定义字体着色器和/或 DistanceField-Fonts。它们易于理解并且同样易于实现：

https://github.com/libgdx/libgdx/wiki/Distance-field-fonts

DistanceFieldFonts 保持平滑，即使您放大它们：

在此处输入图像描述

于 2013-11-10T14:52:23.923 回答
12
  • 使用 libgdx 网站提供的 hiero 创建一个 .fnt 文件。
  • 设置字体大小为150；它将创建一个 .fnt 文件和一个 .png 文件。
  • 将这两个文件复制到您的资产文件夹中。

  • 现在声明字体：

    BitmapFont font;

  • 现在在创建方法中：

    font = new BitmapFont(Gdx.files.internal("data/100.fnt"), false); // 100 is the font name you can give your font any name

  • 在渲染中：

    font.setscale(.2f);

font.draw(batch, "whatever you want to write", x,y);
于 2013-08-07T13:11:27.903 回答
6

通常，您不会得到清晰的文本，因为您正在为特定分辨率设计游戏，并且当您移动到不同的设备时，Libgdx 会缩放所有内容以匹配新分辨率。即使使用线性过滤缩放对文本也很不利，因为圆角很容易扭曲。在一个完美的世界中，您将在运行时根据您可用的像素数动态创建内容，并且不会使用单个自动缩放。

这是我正在使用的方法：为小屏幕（480 x 320）构建所有内容，当您以更大的分辨率打开它时，我会加载更大尺寸的 BitmapFont 并将其应用和反向缩放到 Libgdx 稍后将自动做。

这是一个让事情更清楚的例子：

    public static float SCALE;
    public static final int VIRTUAL_WIDTH = 320;
    public static final int VIRTUAL_HEIGHT = 480;


    public void loadFont(){

     // how much bigger is the real device screen, compared to the defined viewport
     Screen.SCALE = 1.0f * Gdx.graphics.getWidth() / Screen.VIRTUAL_WIDTH ;

     // prevents unwanted downscale on devices with resolution SMALLER than 320x480
     if (Screen.SCALE<1)
        Screen.SCALE = 1;

     FreeTypeFontGenerator generator = new FreeTypeFontGenerator(Gdx.files.internal("data/Roboto-Regular.ttf"));

     // 12 is the size i want to give for the font on all devices
     // bigger font textures = better results
     labelFont = generator.generateFont((int) (12 * SCALE));

     // aplly the inverse scale of what Libgdx will do at runtime
     labelFont.setScale((float) (1.0 / SCALE));
     // the resulting font scale is: 1.0 / SCALE * SCALE = 1

     //Apply Linear filtering; best choice to keep everything looking sharp
     labelFont.getRegion().getTexture().setFilter(TextureFilter.Linear, TextureFilter.Linear);
}
于 2013-11-18T10:58:25.197 回答
2

位图字体是纹理，如果您想让较小的纹理在将它们调整为较大尺寸时看起来更平滑，您需要确保使用正确的纹理过滤器。

这篇博客文章处理了这些问题

于 2013-02-06T17:57:56.210 回答
2

更新后很多东西都被弃用了，这对我有用：

public void regenerateFonts(OrthographicCamera cam, Game game) {
    int size = 18;

    if (cam != null && game != null) {
        // camera and game are provided, recalculate sizes
        float ratioX = cam.viewportWidth / game.getW();
        float ratioY = cam.viewportHeight / game.getH();
        System.out.println("Ratio: [" + ratioX + ":" + ratioY + "]");

        size *= ratioY;
    }

    // font parameters for this size
    FreeTypeFontParameter params = new FreeTypeFontParameter();
    params.flip = true; // if your cam is flipped
    params.characters = LETTERS; // your String containing all letters you need
    params.size = size;
    params.magFilter = TextureFilter.Linear; // used for resizing quality
    params.minFilter = TextureFilter.Linear; // also

    // Lato Light generator
    FreeTypeFontGenerator generator = new FreeTypeFontGenerator(Gdx.files.internal("fonts/Lato-Light.ttf"));

    // make the font
    fontLatoLight = generator.generateFont(params);
    generator.dispose(); // dispose to avoid memory leaks
}

当你想在屏幕上渲染它时：

// text rendering
fontLatoLight.setColor(Color.WHITE); // set color here (has other overloads too)
fontLatoLight.draw(batch, "Hello World!", xCoord, yCoord);
于 2014-08-09T23:27:50.737 回答
2

我使用 Libgdx 实现平滑文本的解决方案

我使用 BitmapFont，并使用 Hiero 工具示例 Arial 16、Arial 32、Arial 64 生成 3 种不同大小的相同字体

我将它们放在我的资产文件中，并根据屏幕大小仅使用（加载）其中一个

if(Gdx.graphics.getWidth() < (480*3)/2)
        {
            textGametFont = BitmapFont(Gdx.files.internal(nameFont+16+".fnt"),
                    Gdx.files.internal(nameFont+16+".png"), false);
        }else
        {
            if(Gdx.graphics.getWidth() < (3*920)/2)
            {

                textGametFont = new BitmapFont(Gdx.files.internal(nameFont+32+".fnt"),
                        Gdx.files.internal(nameFont+32+".png"), false);
            }else
            {
                textGametFont = new BitmapFont(Gdx.files.internal(nameFont+64+".fnt"),
                        Gdx.files.internal(nameFont+64+".png"), false);
            }
        }

然后我使用这行代码来提高上下缩放的结果质量

textGametFont.getRegion().getTexture().setFilter(TextureFilter.Linear, TextureFilter.Linear);

缩放图像

为了处理所有设备分辨率类型的字体大小，我使用这两个函数

public static float xTrans(float x)
{
    return x*Gdx.graphics.width/(YourModel.SCREEN_WIDTH);
}

public static float yTrans(float y)
{
    return y*Gdx.graphics.height/YourModel.SCREEN_Height;
}

我使用的模型屏幕分辨率是

屏幕宽度 = 480

屏幕高度 = 320

将比例设置为字体

textGametFont.setScale((xtrans(yourScale)+ ytrans(yourScale))/2f);

最后画出你的文字

textGametFont.draw(batch, "WINNER !!", xTrans(250), yTrans(236));

希望这是清楚和有帮助的！

于 2015-10-15T18:36:42.027 回答
1 
private BitmapFont font;

font = new BitmapFont();

font.scale((ppuX*0.02f));

font.draw(spb, "Score:", width/2-ppuX*2f, height-0.5f*ppuY);

    Check out [this](http://www.badlogicgames.com/wordpress/?p=2300) blog post.

？？？这只是解释了如何使用我所说的在当前版本中已弃用的 .scale() 方法。

于 2015-06-23T10:03:14.943 回答
0

在scene2d中，如果要对所有标签应用抗锯齿，请将其放在第一个屏幕的构造函数上：

skin.getFont("default-font").getRegion().getTexture().setFilter(Texture.TextureFilter.Linear, Texture.TextureFilter.Linear);

这是我游戏中的第一个屏幕：

...
public class MainMenuScreen implements Screen {    
    public MainMenuScreen() {
        ...
        skin.getFont("default-font").getRegion().getTexture().setFilter(Texture.TextureFilter.Linear, Texture.TextureFilter.Linear);
    }
}

字体名称在ui.json文件中，检查BitmapFont和Label$LabelStyle部分：

"com.badlogic.gdx.graphics.g2d.BitmapFont": {
    "default-font": {
      "file": "default.fnt"
    }
  },
"com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle": {
    "default": {
      "font": "default-font",
      "fontColor": "white",
    }
  },
于 2018-06-12T16:42:43.447 回答