libgdx - libgdxで滑らかなテキストを描画するには?

Question

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

Answer 1

1 つの解決策は、ここで説明されているように、FreeType 拡張を libgdx に使用することです。これにより、.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();
}

Answer 2

カスタム フォント シェーダーおよび/または DistanceField-Fonts を簡単に確認する必要があります。それらは理解しやすく、同様に実装も簡単です。

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

DistanceFieldFonts は、アップスケールしても滑らかなままです。

Answer 3

• libgdx Web サイトで提供されている hiero を使用して .fnt ファイルを作成します。
• フォントのサイズを 150 に設定します。.fnt ファイルと .png ファイルが作成されます。
• 両方のファイルをアセット フォルダーにコピーします。

• フォントを宣言します。

  BitmapFont font;
  

• createメソッドで：

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

Answer 4

一般に、特定の解像度用にゲームを設計していて、別のデバイスに移動すると、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);
}

Answer 5

更新後に多くのことが非推奨になったため、これが私にとってうまくいっています：

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

Answer 6

ビットマップ フォントはテクスチャです。小さいテクスチャをより大きなサイズにリサイズするときに、より滑らかに見えるようにしたい場合は、適切なテクスチャ フィルタを使用する必要があります。

このブログ投稿では、そのような問題を扱います

Answer 7

Libgdx を使用した滑らかなテキストのための私のソリューション

BitmapFont を使用し、Hiero ツールの例 Arial 16 、Arial 32、Arial 64 を使用して 3 つの異なるサイズの同じフォントを生成します

それらをアセットファイルに入れ、画面のサイズに応じてそのうちの1つだけを使用（ロード）します

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

画像を拡大縮小する

デバイスのすべてのタイプの解像度のフォントのサイズを処理するには、これら2つの関数を使用します

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

これが明確で役立つことを願っています!!!

Answer 8

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() メソッドの使用方法を説明しているだけです。