Théoriquement tous les jeux doivent fonctionner sur des écrans de tailles différentes. Ce peut être des écrans de mobile (qui peuvent eux même varier d'une version à l'autre comme l'iPhone 4S par rapport à l'iPhone 5), des tablettes, un navigateur internet redimensionné, toutes les résolutions supportées par un écran, etc... Même un jeu prévu pour fonctionner sur une taille fixe peut passer en plein écran ce qui signifie qu'il doit tous de même supporter plusieurs tailles d'écrans.
Tous les jeux devraient donc, d'une manière ou d'une autre, supporter plusieurs tailles d'écrans que ce soit pour ordinateur ou mobile. Ce tutoriel vous apprendra les bases du support de plusieurs tailles d'écrans.
La solution rapide : ne pas cibler qu'une seule résolution
Une erreur courante est de ne cibler qu'une seule résolution, comme 1280x720. Cependant, il existe tellement de résolutions différentes qu'il serait ridicule de n'en choisir qu'une seule. Il est préférable de choisir un format puis d'agrandir le jeu pour lui correspondre. Par exemple, au lieu de choisir une résolution de 1280x720, choisir plutôt un format comme le 16/9 (entrez n'importe quelle résolution au format 16/9 comme taille dans les propriétés du projet). Activez Letterbox scale dans la propriété du projet Fullscreen-in-browser et votre jeu devrait maintenant s'afficher pour n'importe quelle résolutions au format 16/9. Si l'affichage n'est pas du 16/9 alors des bandes noires devraient apparaître de chaque côté pour s'adapter. Notez que si vous créez un jeu du style rétro ou les pixels sont apparents, préférez Letterbox integer scale.
Le reste de ce tutoriel couvrira les outils disponibles de façon plus détaillés. Il est bon de le lire même si vous choisissez la solution rapide au dessus.
Utiliser un mode de plein écran
Dans Project Properties, sélectionnez l'un des modes de Fullscreen in Browser.
Avec ce mode positionné sur Off, le jeu apparaît dans une page HTML à la taille définie dans Window size. Cependant, il ne supportera aucune autre résolution d'écran. Si vous utilisez l'action Request fullscreen de l'objet Navigateur, il vous faudra de toute façon supporter plusieurs résolutions.
Crop mode
En mode "crop", l'affichage reste à la même taille, et montrera plus ou moins de votre "layout" suivant la taille de la fenêtre. Les images ci-dessous montrent une petite fenêtre en mode "crop". Le joueur fait la même taille mais le "layout" est moins visible.
Si la fenêtre est agrandie, bien plus de votre "layout" peut être vu. Notez que plus la fenêtre est grande, plus le joueur pourra voir venir les monstres à l'avance.
Ce mode vous permet de contrôler l'agrandissement vous même, ou simplement de ne pas en faire. Cependant ce mode n'est généralement pas bon pour les jeux. Prenez par exemple l'iPhone ou l'iPad qui d'une génération sur l'autre, ont la même taille d’écran mais pas la même résolution. Comme le mode "crop" ne fait pas d'agrandissement, il rendra votre jeu étrangement petit sur des appareils dont l'écran a une plus grande résolution.
Scale mode
Ce mode permet d'adapter l'affichage à la taille de l'écran. Cependant il utilise la taille entière de la fenêtre. Notez comme le joueur apparaît plus petit quand la fenêtre est rétrécie.
Si la fenêtre est agrandie, notez comme le joueur apparaît plus gros. C'est parce que l'affichage a été agrandit alors que la zone qui peut être vue est restée la même. C'est juste dessiné plus gros.
Le problème de ce mode est que comme il utilise la fenêtre entière, le format de cette fenêtre peut changer. Ceci posera problème si le jeu a été pensé en admettant que le format ne changera jamais (ou au moins, ne changera pas trop). Par exemple, si la fenêtre est redimensionnée dans un format qui n'a pas été prévu, le jeu ne s'affiche pas correctement :
Le jeu a été correctement agrandit, mais le format est tellement large que vous pouvez voir au delà du bord droit du "layout". En plus de cela, le joueur peut maintenant voir venir des monstres qu'il n'aurait pas vu dans un autre format, ce peut être considéré comme de la triche. Pour cette raison, il est généralement préférable d'utiliser l'un des modes Letterbox qui affiche des bandes noire sur les bords de l'affichage pour garder le même format.
Si vous ciblez des plateformes ou il ne sera pas possible de redimensionner la fenêtre, vous pouvez utiliser ce mode. Il faudra tous de même faire des ajustements comme dessiner l'arrière plan plus grand que ce qu'il devrait être pour être sur que l'espace vide ne s'affiche pas sur certains écrans et bien entendu tester le jeu pour être sûr que rien d'inattendu ne s'affichera pour certains formats.
Pour plus d'informations, voir la section Un piège courant - les formats ci-dessous.
Letterbox scale mode
Le mode Letterbox scale fonctionne de la même manière que le mode Scale. Cependant, pour éviter le problème des formats, le Letterbox scale affichera des bandes noires sur les bords de l'affichage si le format de la fenêtre est différent du format original. Voici deux exemples :
Comme vous pouvez le voir, le format d'origine est toujours respecté, évitant ainsi les différents problèmes de taille de fenêtre. L'ennui avec ce mode sera que certains utilisateurs perdront de la surface d'affichage du jeu. Malgré tout, ce mode peut être appliqué à pratiquement tous les types de jeu. C'est une façon rapide et facile de pouvoir supporter plusieurs résolutions sous plusieurs formats.
Letterbox integer scale
Ce mode est identique au mode Letterbox scale, conservant le format d'origine mais effectuant le zoom sur une base d'entier. Par exemple il n'agrandira le jeu que pour un multiple entier comme 1x, 2x, 3x, 4x etc... Mais jamais 2.5x. C'est important pour les jeux rétro utilisant le mode Point sampling pour conserver une précision au pixel près lors de l'agrandissement. Ce mode utilise aussi les bandes noires.
Un piège courant - les formats
Letterbox scale ou Letterbox integer scale sont des modes faciles à utiliser pour rendre votre jeu compatible avec une large gamme de résolutions et de formats sans efforts. Ils ont par contre le désavantage de faire apparaître des bandes noires. Ce peut être très gênant pour les utilisateurs de mobiles, qui ont déjà un petit écran et ne veulent pas voir la surface d'affichage encore plus réduite. L'ajout des bandes noires peut ne pas faire très pro aux yeux de certains joueurs qui ce demanderons "Pourquoi l'affichage n'a pas été agrandi pour combler les bandes noires ?".
Pour parer à ce problème, vous devez utiliser le mode Scale plutôt que le mode Letterbox scale. Ce qui signifie que votre jeu doit prendre en charge plusieurs formats.
Il s'agit du même problème que peuvent rencontrer les producteurs d'émissions à la TV. Il y a des téléviseurs de plusieurs formats, 4/3, 16/9 et 16/10. Si un producteur filme une émission seulement en 4/3, il y aura des trous sur les côtés pour les TV en 16/9, voir même le personnel hors champs visible ! De la même manière, si vous dessinez un arrière plan pour un seul format, des trous, voir des choses que vous ne voulez pas montrer au joueur apparaîtrons. Tout ceci peut même arriver si vous ne prenez pas en compte la taille de la barre de statuts comme sur l'iPhone par exemple.
Pour la TV, le problème est réglé de la même manière que vous devriez le faire : tout est filmé pour le format le plus large, le 16/9. L'affichage est ensuite coupé pour les autres formats. Pour vos jeux, vous devez vous assurer de dessiner votre arrière plan plus large (ou plus haut, suivant l'orientation) que la taille de la fenêtre afin d'être sur que rien d'inattendu n’apparaîtra peu importe le format.