Supporter plusieurs résolutions d'écran

1
  • 4 favoris

Garder l'interface utilisateur en place

Souvent, votre jeu contient des éléments d'interface utilisateur comme la vie, les munitions ou toutes autres informations qui doivent rester à la même place sur l'écran.

Pour mettre tout ça en place, créez un nouveau calque (layer) et réglez son Parallax à 0,0. Si vous ne souhaitez pas que l'interface utilisateur s'agrandisse avec le jeu, réglez également son Scale rate à 0.

Assurez vous que tous les éléments composants votre interface utilisateurs, sont placés sur ce calque. Placez-les sur le bord haut gauche du "layout", dans le rectangle en pointillé qui représente la zone de la fenêtre. Ils devraient désormais rester à la même place, comme le "Score" des images de la page précédente.

Le comportement Anchor

Si vous placez un objet en bas a droite de la fenêtre et que vous la redimensionnez, notez que votre objet ne bouge pas. Pour faire en sorte qu'il reste en bas a droite vous pouvez utiliser le comportement "Anchor" (Anchor behavior) pour ancrer votre élément à une position de l'écran.

Notez que le comportement Anchor est prévu pour être utiliser sur les éléments d'un calque qui ne défile pas, donc avec un "parallax" réglé sur 0,0 comme vue plus haut.

En réglant les options Left edge et Top edge sur Window right ou Window bottom* vous alignerez les éléments sur le bord droit, bas, ou bas droite de la fenêtre. Par défaut, l'alignement est réglé sur haut gauche.

Si des éléments doivent devenir plus large ou plus haut lorsque la fenêtre s'agrandit, vous pouvez les ancrer en utilisant Right edge et Bottom edge. Si vous ne souhaitez pas agrandir vos éléments, laissez la valeur None*.

Autres fonctionnalités utiles

Les expressions système WindowWidth et WindowHeight retournent la taille de la fenêtre en pixels. Vous pouvez afficher ou masquer des éléments selon la taille de la fenêtre, activer des fonctionnalités pour les très petits écrans ou changer l'interface utilisateur pour les grands écrans.

Les expressions systèmes ViewportLeft, ViewportRight, ViewportTop et ViewportBottom retournent les coordonnées d'un calque passé en paramètre. Pour centrer un élément, positionnez le comme ceci : (ViewportLeft("Layer") + ViewportRight("Layer")) / 2 et (ViewportTop("Layer") + ViewportBottom("Layer")) / 2.

En plein écran en mode Scale, les limites du "layout" peuvent poser problème avec le défilement. Dans ce cas, essayez de régler l'option Unbounded scrolling sur Yes et limitez vous même le défilement (en entourant par exemple votre "layout" d'objets avec un comportement "Solid")

Passage en plein écran pendant le jeu

L'objet Browser object possède une action Request fullscreen pour le passage en plein écran. Cette action fonctionne aussi si l'option Fullscreen in browser est sur Off.

Pour des raisons de sécurité, Request fullscreen ne fonctionne qu'a la suite d'une action de l'utilisateur comme l'appui sur une touche ou un Click sur un bouton.

Soyez sur de tout tester !

Il est conseillé de tester votre jeu sur plusieurs appareils pour vérifier son fonctionnement. Il est courant de modifier l'apparence de l'interface utilisateur en fonction de la taille de l'écran. C'est quelque chose d'assez complexe à réaliser. Mais pour un jeu plus simple, la même interface utilisateur pour très bien fonctionner sur toutes les tailles d'écrans. Tout dépend du type de jeu.

Vous pouvez aussi tester par Wifi ou sur le réseau local : previewing on a local network. Ce procédé rendra les tests en condition réelle plus simple et rapide.

La plus grande taille d'écran est le 2048 x 1536 sur la troisième génération d'iPad et la plus petite ce situe autour des 320 x 480 sur iPhone 3 et précédent. La gamme de résolutions existantes est énorme ! Soyez sur de toutes les tester. Il serait dommage que le jeu soit injouable car des boutons ont disparu ou soient devenu trop petit pour être utilisés !

  • 0 Comments

  • Order by
Want to leave a comment? Login or Register an account!