Comment faire correspondre la taille de la police avec la résolution d'écran?

12

Je travaille donc sur un jeu utilisant LibGDX, et j'ai un problème.

Pour adapter mon jeu à la plupart des résolutions, j'ai créé un élément de base pour chaque rapport d'aspect, par exemple, une image d'arrière-plan du menu principal, je l'ai créé en 800X600 pour 4: 3, 1280X720 pour 16: 9, etc.

Maintenant j'essaye d'incorporer des TextButtons dans le jeu, pour les options; Mon problème est que je ne peux pas déterminer quelles tailles de police correspondent à quelles résolutions d'écran. Existe-t-il un moyen de comprendre cela, ou dois-je parcourir chacune des résolutions que j'ai et faire correspondre manuellement le texte à la résolution?

Aon GoltzCrank
la source

Réponses:

17

C'est simple: les polices n'ont pas besoin de correspondre à la résolution, elles doivent correspondre à la densité de pixels .

La densité de pixels est mesurée en pixels par pouce ( PPI ) ou pixels par centimètre. Il existe également une unité de mesure appelée pixels indépendants de la densité ( DP ) . Il est défini 1dpcomme la taille d'un pixel sur un 160 PPIécran.

Revenons maintenant aux polices, essayez de faire ce test: mettez votre ordinateur portable en fonctionnement sur 720p. Jetez un oeil sur la taille de la police. Maintenant, branchez-le sur le moniteur 1080p 42 "de votre bureau. Si votre moniteur produit les bonnes informations sur sa taille, alors la police devrait avoir EXACTEMENT la même taille qu'elle avait sur l'écran 720p. Imaginez à quel point ce serait bizarre si du texte dans votre ordinateur portable avait une taille différente de celle du texte sur votre moniteur de bureau. Cela dit, des résolutions plus grandes devraient donner plus de détails à la police, des écrans plus grands devraient donner plus de contenu à afficher.

Le même fait peut être observé sur les éditeurs de texte. Une 72ptpolice doit ressembler à l'écran de la même façon que lorsqu'elle est imprimée sur du papier.

Tout cela signifie que vous devriez probablement vouloir la même taille sur toutes les tailles d'affichage (à quelques exceptions près). Si vous voulez vous baser quelque part, les sites Web utilisent généralement des 12ptpolices, MS Windows utilise 11ptet des 12ptpolices.

Ce graphique (également inclus dans le bas de la réponse) nous dit 12ptqu'en CSS est à peu près égal à 16pxégalement en CSS (comme si cela n'était pas assez déroutant, un px en CSS est le même que dp partout ailleurs), alors disons que vous vais faire vos polices 16dpsur LibGDX.

Sur votre jeu, utilisez le FreeTypeFontGeneratorpour générer des polices dynamiquement, de cette façon, vous pouvez considérer la densité de l'écran lors de leur création:

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

Cela fonctionne car Gdx.graphics.getDensity()est égal à YourScreenDensity/160donc, est un "facteur d'échelle" pour amener les choses à la taille qu'elles seraient sur un écran 160ppi.

À propos des exceptions que j'ai mentionnées plus tôt: vous voudrez probablement redimensionner les polices en fonction de la taille de l'écran en cas de logos, de promotions, etc. Mais gardez à l'esprit que vous feriez mieux de les faire sur un éditeur graphique comme Photoshop ou Gimp , en tous cas.

L'autre exception est le texte sur de minuscules écrans. Écrans de téléphone de 4,5 pouces ou moins, appareils portables. Habituellement, vous n'aurez pas le temps de faire défiler le contenu, ou vous ne pourrez tout simplement pas vous permettre de mettre autant de contenu sur cet écran. Vous pouvez essayer de 1dpréduire la police , car le le lecteur aura probablement le téléphone très près de son visage, il n’aura probablement pas de problème de lecture. Gardez à l’esprit que vous risquez d’ennuyer le lecteur à lire un petit texte illisible.

TL; DR:

  • La taille physique ne changera pas directement avec la taille de l'écran ou la résolution, mais avec une combinaison des deux ( screenSize/resolutionle célèbre PPI)
  • Pensez à pt et dp . Oubliez les pixels de l'écran jusqu'à ce que vous deviez dessiner le résultat final.
  • Créez votre police au moment de l'exécution avec une taille raisonnable.
  • Conversion de dp en pixels d'écran:pixels = dp * Gdx.graphics.getDensity();
  • Si vous utilisez un moteur qui ne vous donne pas de convertisseur en dp comme LibGDX Gdx.graphics.getDensity(), vous pouvez essayer :, densityFactor = Screen.getPixelsPerInch() / 160.0fpuispixels = dp * densityFactor

ÉDITER:

25 juin 2014 sur Google IO, Matias a annoncé de nouvelles directives de style pour Android, il comprend une nouvelle police Roboto et des directives de typographie. Prenez ce tableau comme guide:

Consignes de taille de police Android, prises sur google.com/design

EDIT2:

Tableau de taille de police CSS inclus au cas où le lien deviendrait pourri: Tailles de police CSS

Gustavo Maciel
la source
1
+1, excellente réponse. La distance d'observation est également un facteur très important. Vous aurez besoin de polices plus grandes pour les jeux qui s'exécutent sur une console / TV par rapport à celles pour PC ou même une tablette (où la distance de visualisation est assez courte).
bummzack
1
@bummzack super que vous l'ayez signalé! Vous pouvez y parvenir en ajoutant un facteur d'échelle à la formule, comme ceci: dp * Gdx.graphics.getDensity() * distanceFactor. Vous pouvez faire de distanceFactor une constante et la définir 2lors de la compilation pour console / TV, 1sinon. Bien sûr, vous devriez trouver de meilleures valeurs pour cela.
Gustavo Maciel
J'ai des problèmes avec ça. Lorsque je mets simplement la taille SP dans le générateur comme taille pour les pixels, j'obtiens exactement la même taille sur mon application de bureau que celles de l'image et d'autres sources en ligne à ce sujet. Quand je multiplie par, getDensity() == 0.6ils sont illisibles sur mon bureau. Ils deviennent petits, mais joliment dimensionnés sur mon Galaxy S8 où `getDensity () == 3 '. J'ai calculé la densité moi-même et elles semblent correctes, puis j'ai tenu mon téléphone à côté de mon application de bureau et elles sont en effet égales. Mais ne devraient-ils pas être de la taille de l'image réelle affichée sur mon bureau?
Madmenyo
@Madmenyo C'est le facteur d'échelle dont j'ai parlé. Vous devez utiliser la mise à l'échelle de la densité pour conserver la même taille de texte sur les appareils de même format. Ainsi , au lieu de juste dp * getDensity(), vous devriez probablement faire dp * getDensity() * scalingFactor, ce qui scalingFactordevrait être décidé au moment de la compilation, et quelque chose comme cela pourrait fonctionner: Téléphones: scalingFactor = 1Ordinateur: scalingFactor = 3et TV: scalingFactor = 5. Jouez avec ces chiffres!
Gustavo Maciel
GetDensity ne renvoie pas la densité exacte comme il s'avère. github.com/libgdx/libgdx/issues/5322#issuecomment-406902114 vous devez faire quelque chose comme getPpiX() / 160)pour obtenir un meilleur résultat. Cependant, getDensity()je pense que cela fait du bon travail dans la plupart des cas.
Madmenyo