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

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?

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:

EDIT2:

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