jeu de toile html5 - comment ajouter du soutien rétine
Je suis de la création d'un HTML5 canvas jeu pour iPhone. Je tiens à soutenir à la fois la rétine et non les écrans de la rétine.
Ma question est, comment puis-je soutenir à la fois la rétine et non les écrans de la rétine?
I. E., qu'est-ce que la mise en œuvre générale pour faire cela? Dois-je écrire le jeu à l'aide de l'iPhone dimension et ensuite ajouter le support du retina? Ou dois-je créer le jeu de la rétine taille et ajouter les non-support du retina? Est-il préférable d'avoir deux images, l'une rétine une non-retina? ou tout simplement à l'échelle de la rétine de l'image vers le bas? Dois-je séparer toile tailles pour la rétine et de la non-retina? Ai-je besoin à l'échelle de l'entrée de la souris?
Fondamentalement, je n'ai aucune idée sur l'idée générale, le/la logique de la mise en œuvre de deux.
Cheers,
J
source d'informationauteur Jarrod
Vous devez vous connecter pour publier un commentaire.
Vous utilisez devicePixelRatio pour séparer les écrans de la rétine de la normale affiche
Votre logique de jeu de coordonnées (sprite postes, etc.) doit fonctionner de façon indépendante à partir des coordonnées de l'écran qui sera toujours 2x multiplié sur l'écran retina.
Votre graphique de l'actif doit avoir les deux versions. Version haute résolution et 50% réduit version normale. Quand vous travaillez sur un écran retina, vous dessinez 2x la taille de la toile, redimensionné avec CSS et sur cette toile, utiliser la haute résolution de l'actif.
Un nouvel article vient d'être publié sur le sujet depuis au html5rocks.com:
Je sais que c'est maintenant un vieux post, mais j'ai pensé le mettre à jour avec la solution que j'ai mis en œuvre.
1: j'ai utilisé deux séries d'images:
en fonction de ce périphérique est utilisé dépend de ce jeu est chargé.
2: je puis redimensionner la zone de travail (c'est la clé)
NON RÉTINE
RÉTINE
Avis que
canvas.style.width
&height
sont les mêmes, peu importe si vous êtes à l'aide de la rétine ou pas.Et c'est vraiment tout y est!