フォントサイズを画面解像度と一致させる方法は?


12

だから、LibGDXを使用してゲームに取り組んでいて、問題があります。

ゲームをほとんどの解像度に合わせるために、たとえばメインメニューの背景画像など、アスペクト比ごとにベースアセットを作成しました。4:3の場合は800X600、16:9の場合は1280X720などにしました。

今、私はTextButtonオプションのために、sをゲームに組み込もうとしています。私の問題は、どのフォントサイズがどの画面解像度と一致するかを理解できないことです。これを理解する方法はありますか、または私が持っている各解像度を1つずつ調べて、テキストを解像度に手動で一致させる必要がありますか?

回答:


17

簡単です。フォントは解像度に合わせる必要はありません。ピクセル密度に合わせる必要があります。

ピクセル密度は、1インチあたりのピクセル数(PPI)、または1センチあたりのピクセル数として測定されます。密度非依存ピクセル(DPと呼ばれる測定単位もあります。画面1dp上で1ピクセルのサイズであると定義されてい160 PPIます。

フォントに戻って、このテストを試してください。ラップトップを720pで実行します。フォントのサイズを見てみましょう。次に、デスクトップの1080p 42インチモニターに差し込みます。モニターがそのサイズに関する正しい情報を出力する場合、フォントは720p画面とまったく同じサイズである必要があります。テキストがラップトップとデスクトップモニターのテキストのサイズは異なりましたが、解像度が大きいほどフォントの詳細がわかり、画面が大きいほど表示されるコンテンツが多くなります。

同じことがテキストエディタでも見られます。72ptフォントは、画面上の紙に印刷するとき、それは同じだろうになります。

これは、すべてのディスプレイサイズで同じサイズを希望することを意味します(一部の例外を除きます)。どこかに拠点を置きたい場合、Webサイトは通常12ptフォントを使用し、MS Windowsはフォントを使用11pt12ptます。

このグラフ(回答の下部にも含まれています)は12pt、CSSでの値がCSSでの値とほぼ等しいことを示してい16pxます(これで十分に混乱しなかったかのように、CSSのpxは他のすべての場所のdpと同じです)。16dpLibGDXでフォントを作成します。

ゲームでは、FreeTypeFontGeneratorを使用して動的にフォントを生成します。これにより、フォントを作成するときに画面密度を考慮することができます。

BitmapFont createFont(FreeTypeFontGenerator ftfg, float dp)
{
    return ftfg.generateFont((int)(dp * Gdx.graphics.getDensity()));
}
//On Init
BitmapFont buttonFont = createFont(arial, 16); //16dp == 12pt

これは、Gdx.graphics.getDensity()と等しいためYourScreenDensity/160、160ppi画面でのサイズに合わせるための「スケール係数」であるため機能します。

前に述べた例外について:ロゴやプロモーションなどの場合は、画面サイズに応じてフォントのサイズを変更する必要があります。ただし、PhotoshopやGimpなどのグラフィックエディターでこれらを作成するほうがよいことに注意してください。とにかく。

もう1つの例外は、小さな画面上のテキストです。4.5"または小さな携帯電話の画面は、ウェアラブル。通常、あなたがコンテンツをスクロールさせるための時間を持っていない、またはあなただけの、その画面上でそんなにコンテンツを置く余裕することができません。あなたは、フォントの拡大縮小しよう1dpとして、ダウンをリーダーはおそらく電話を顔に非常に近づけますが、読むのに問題はないでしょう。

TL; DR:

  • 物理的なサイズは、画面のサイズや解像度で直接変化することはありませんが、両方の組み合わせでscreenSize/resolution有名です(有名なPPI)
  • ptdpについて考えてください。最終結果を描画する必要があるまで、画面のピクセルを忘れてください。
  • 実行時に適切なサイズでフォントを作成します。
  • dpをスクリーンピクセルに変換する:pixels = dp * Gdx.graphics.getDensity();
  • あなたがいないあなたがコンバータ与えないエンジンを使用している場合は、DP LibGDXのようにGdx.graphics.getDensity()、あなたが試すことができますdensityFactor = Screen.getPixelsPerInch() / 160.0f、その後、pixels = dp * densityFactor

編集:

2014年6月25日、Google IOでMatiasがAndroid向けの新しいスタイルガイドラインを発表しました。これには、新しいRobotoフォントとタイポグラフィガイドラインが含まれています。次の表を参考にしてください。

google.com/designから取得したAndroidフォントサイズのガイドライン

EDIT2:

リンクが壊れた場合に備えて含まれているCSSフォントサイズ表: CSSフォントサイズ


1
+1、すばらしい答えです。視聴距離も非常に重要な要素です。PCやタブレット(表示距離が非常に短い)のフォントと比較して、コンソール/テレビで実行するゲームには大きなフォントが必要です。
bummzack 2014年

1
@bummzack、これを指摘してくれて素晴らしい!これを行うには、次のように、式にスケーリング係数を追加しますdp * Gdx.graphics.getDensity() * distanceFactor2コンソール/ TV用にコンパイルする場合は、distanceFactorを定数にして定義し、1そうでない場合はそれを定義できます。もちろん、これに適した値を見つける必要があります。
Gustavo Maciel

これに問題があります。SPのサイズをピクセルのサイズとしてジェネレーターに入力しただけで、デスクトップアプリで画像のサイズと同じサイズ、およびこれに関する他のオンラインソースが得られます。掛け合わせるgetDensity() == 0.6と、デスクトップでは判読できません。それらは小さくなりますが、 `getDensity()== 3 'である私のGalaxy S8では適切なサイズです。私は自分で密度を計算しましたが、それらは正しいようですが、実際に携帯電話をデスクトップアプリケーションの隣に置いたところ、実際には同じです。しかし、それらは私のデスクトップに表示される実際の画像のサイズではないのですか?
Madmenyo

@Madmenyoそれは私が話した倍率です。同じフォームファクタのデバイスでテキストサイズを同じに保つには、密度スケーリングを使用する必要があります。だから、だけではなくdp * getDensity()、あなたはおそらく行う必要がありますdp * getDensity() * scalingFactorされ、scalingFactorコンパイル時に決定されるべきである、とこのような何かは仕事ができる:電話:scalingFactor = 1コンピュータ:scalingFactor = 3テレビ:scalingFactor = 5。これらの数字で遊ぼう!
Gustavo Maciel

判明すると、GetDensityは正確な密度を返しません。github.com/libgdx/libgdx/issues/5322#issuecomment-406902114getPpiX() / 160)より良い結果を得るには、次のようなことを行う必要があります。しかし、 getDensity()私はほとんどの場合私が推測する十分な仕事をします。
Madmenyo
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.