Comment puis-je supprimer le ratio de pixels CSS en JavaScript afin de pouvoir créer des jeux HD sur mon téléphone?

Question

J'ai travaillé sur un jeu en JavaScript/CSS/HTML pur et j'ai rencontré le problème où mon téléphone 1920x1080 affiche mon jeu en 586x330 avec un ratio d'affichage de pixels de 3. Ce que je veux savoir, c'est comment avoir mon jeu tourne sur l'écran en HD car je ne veux pas avoir un jeu en basse résolution alors qu'il pourrait être en haute résolution. Lorsque je lance le jeu sur un navigateur Web (de bureau ou mobile), la densité de pixels est de 1 alors tout va bien, le problème se produit lorsque je l'utilise comme application Android à l'aide de PhoneGap.

Toute aide serait appréciée, je suis bloqué ici.

Merci,

Answer 1

Je suppose que vous utilisez l'élément <canvas> comme il est le fondement graphique pour la plupart des jeux.

Si tel est le cas, vous devez vous assurer de ne le redimensionner qu'à l'aide de ses attributs width et height en ligne. En ligne, je veux dire ceux sont littéralement intégrés dans le code HTML:

<canvas width="--your width--" height="--your height--"> 
</canvas> 

Ce que vous voulez vous assurer est qu'il n'y a pas d'autre dimensionnement appliqué à votre toile.

Rien de tout cela:

/* style.css */ 
canvas { 
    transform: scale(1.5, 1.5); 
} 

Et même rien de tout cela:

/* style.css */ 
canvas { 
    width: 100%; 
    height: 100%; 
} 

La chose est que le nombre de pixels de résolution qu'une toile doit travailler avec est défini seulement par ses attributs en ligne width et height. Si vous voulez que votre toile pour avoir la même résolution que l'écran de votre téléphone, vous devez utiliser javascript pour modifier ses width et height chaque fois que les modifications de la taille de l'écran:

/* thing.js */ 
var resizeCanvas = function() { 
    var canvasElem = getYourCanvasElement(); 

    canvasElem.width = getWidthOfScreen(); 
    canvasElem.height = getHeightOfScreen(); 
} 

// Make sure canvas fits initially... 
whenPageLoads(resizeCanvas); 

// And then resize it whenever needed 
whenScreenSizeChanges(resizeCanvas); 

Bien sûr, je ne sais pas ce que les cadres que vous êtes en utilisant de sorte que le code est juste un modèle. Vous devez décider comment implémenter getYourCanvasElement, getWidthOfScreen, getHeightOfScreen, whenPageLoads et whenScreenSizeChanges.

EDIT: Une autre chose qui peut affecter la taille de votre canevas est la mise à l'échelle de la fenêtre du navigateur. Il y a un bon aperçu de cela here.