Image pour l’article sur les tailles d’écran multiples
Note: Ceci n’est PAS une traduction du tutoriel de Ashley sur scirra.com, il ne s’agit pas d’un tuto en général, mais d’une explication des fonctions permettant d’obtenir ce résultat.
Pourquoi?
Lorsque vous développez un jeu pour appareils mobiles, il faut prendre en compte que souvent la taille de l’écran (en terme de cm) est réduite, et de plus, le contrôle est souvent tactile, il convient donc de faire en sorte que le jeu utilise pleinement la surface disponible à l’écran.
Cela tombe bien, C2 nous donne tout les outils nécessaires, et c’est ce que nous allons voir ensemble^^.
Letterbox Scale, à la poubelle
L’option par défaut pour le « Fullscreen in browser » est letterbox scale, cette option va zoomer le jeu, en rajoutant des bandes noires pour conserver l’aspect ratio, si vous ciblez le mobile, il n’existe pas un unique aspect ratio, et de plus, il y a aussi la barre potentielle du navigateur ou des boutons de navigations qui vont jouer, et enfin, cocoonJS ne supporte pas le letterbox scale (même si c’est plus une contrainte que un argument).
Au final, les bandes noires vont surtout gêner l’utilisateur.
Que faire? Il existe trois options qui permettent d’aller en plein écran:
-Crop: aucun zoom, on affiche juste (cette option est inutile dans 99,9% des cas, elle n’est là que si vous voulez gérer vous-même le scaling).
-Scale inner: Va zoomer le jeu, en montrant autant ou moins du layout(pensez à un rectangle de la taille du layout, dont deux côtés sont collé au layout, les deux autres pouvant se rapprocher l’un de l’autre).
-Scale outer: Va zoomer le jeu, en montrant autant ou plus du layout(pensez à un rectangle de la taille du layout, dont deux côtés sont collé au layout, les deux autres pouvant s’éloigner l’un de l’autre).
Il n’est pas forcément facile d’adapter tous les jeux d’un claquement de doigts, c’est pourquoi je vous conseille de commencer à les gérer dès le début du jeu.
Je vous conseille aussi de voir à changer la valeur de « unbounded scrolling » si votre layout est petit (comme un écran titre par exemple)
Anchor behavior? Sure my lord
Construct 2 possède un behavior assez étrange: Anchor
Il n’est très clair, et possède 4 paramètres notables, je vais les décrire:
Left Edge: En fonction de sa valeur, l’objet possédant ce behavior aura son coté gauche à la même distance par rapport à la gauche ou droite de la partie visible de l’écran, en positionnant l’objet.
Top Edge: En fonction de sa valeur, l’objet possédant ce behavior aura son coté supérieur à la même distance par rapport au haut ou au bas de la partie visible de l’écran, en positionnant l’objet.
Right Edge:Si il n’est pas sur « None », l’objet possédant ce behavior aura son coté droit à la même distance par rapport à la droite de la partie visible de l’écran, en redimensionnant l’objet.
Bottom Edge:Si il n’est pas sur « None », l’objet possédant ce behavior aura son coté inférieur à la même distance par rapport au bas de la partie visible de l’écran, en redimensionnant l’objet.
Donc Left Edge et Top Edge vous permet de fixer la position par rapport à un des coins de l’écran, Right edge et bottom edge vous permet de resize l’objet par rapport aux bords droits et inférieurs.
Le behavior anchor marche mieux dans le cas où les objets en question sont sur un layer qui ne bouge pas (aucune parralaxe)
Avec ces outils, vous avez déjà de quoi replacer vos éléments de manière dynamique sans un seul event. Mais il y a plus fort encore…
Il est l’or, mon viewport, l’or de se re-placer
Si vous préferrez vous passer du behavior anchor, vous pouvez utiliser les expressions suivantes:
ViewportLeft(LayerName)
ViewportRight(LayerName)
ViewportTop(LayerName)
ViewportBottom(LayerName)
Si par exemple vous voulez que un sprite dont l’origine est centrée soit placé au bord inférieur droit de la fenêtre visible:
Set X to:ViewportRight(Self.LayerName)-Self.Width/2
Set Y to:ViewportBottom(Self.LayerName)-Self.height/2
En combinant ces différentes expressions, vous devriez pouvoir faire à peu près tout ce que vous désirez ^^
Et l’orientation?
On ne peux pas lock l’orientation avec C2 tout seul (pas de standard HTML5 pour cela), par contre, l’objet Browser vous permet de connaitre l’orientation actuelle, et donc de réagir en conséquences^^
En espérant que ceci vous soit utile ^^, n’hésitez pas à laisser un commentaire