Tutoriel Faulty Flap

Annexe. Construire pour différents ratios d'affichage

Comme vous le savez déjà, il existe une grande variété de ratios d'écran. Avec un design bien pensé il est possible de tous les supporter.
Parce qu'il est important que chaque joueur profite d'un gameplay identique, quelle que soit la plate-forme ou l'appareil utilisé, la Fenêtre de l'Application utilise une Largeur fixe de 480 pixels.
En utilisant plus de 480 pixels le jeu deviendrait plus facile. Inversement, en utilisant moins de 480 pixels le jeu deviendrait plus difficile. Cela n'est pas acceptable.

Alors évidemment, pour tenir compte des divers ratios d'affichage, nous allons modifier la Hauteur de la Fenêtre de l'Application.

Admettons que nous voulons utiliser un ratio d'affichage de 4:3. Nous devons alors fixer la Hauteur de la Fenêtre de l'Application à 640 pixels (l'orientation de notre jeu est Portrait).
Dans les Propriétés de l'Application > onglet Fenêtre modifiez la Hauteur à 640 pixels et répondez 'Non' dans boîte de dialogue. Nous ne voulons pas modifier la Taille de notre Scène.

Lancez l'application. C'est étrange, nous ne voyons plus le sol.

C'est parce que désormais la Fenêtre de l'Application affiche uniquement la partie supérieure de notre Scène, les 640 pixels du haut exactement. Ne vous inquiétez pas, c'est assez facile à corriger.

Voici notre tout dernier événement. Dans l'Éditeur de liste d'événements ajoutez l'événement suivant dans le groupe Game.Init:

Game.Init
// Centrer l'affichage verticalement
En début de scène
	: Centrer l'affichage en Y = Frame Height / 2

Que se produit-il avec cet événement? Au début du jeu nous centrons verticalement l'affichage dans la Scène. C'est en quelque sorte un défilement vertical initial.

Note: Frame Height est une expression disponible sous l'objet Contrôle du storyboard. Elle retourne la Hauteur de la Scène en pixels.

Lancez l'application. Grâce à ce dernier événement notre jeu s'affiche correctement, quelle que soit la valeur utilisée pour la Hauteur de la Fenêtre de l'Application.

Essayez par vous-même, voici quelques valeurs pour vous aider:
480 x 864 (ratio 9:5) 1,8:1
480 x 853,33 (ratio 16:9) 1,78:1
480 x 768 (ratio 16:10) 1,6:1
480 x 720 (ratio 3:2) 1,5:1
480 x 640 (ratio 4:3) 1,33:1

Capture d'écran du jeu montrant la partie de l'image utilisée par différents rapports d'affichage

En construisant pour des ordinateurs de bureau, Windows, Mac ou Flash, je vous recommande d'utiliser un ratio d'affichage de 4:3 ou 3:2. Parce que notre jeu utilise une orientation Portrait, le joueur serait probablement ennuyé de voir une Fenêtre d'Application plus haute.

En construisant pour des appareils mobiles, iOS ou Android, je vous recommande d'utiliser la Hauteur de l'Application initiale de 864 pixels, en conjonction avec l'option d'affichage Étirer avec dépassement. Cette option se trouve dans les Propriétés de l'Application > onglet Options iOS / Android. De cette façon l'Application est mise à l'échelle pour utiliser toute sa Largeur (il est important que chaque joueur profite d'un gameplay identique), tandis que les parties supérieures et inférieures sont simplement coupées si nécessaire. Taille unique!

En construisant pour HTML5 je recommande d'utiliser un ratio d'affichage de 3:2 ou 16:10. Ces ratios ne sont pas trop larges et conviendront bien à la plupart des appareils: ordinateurs de bureau, mobiles ou tablettes. Si des barres horizontales sont nécessaires, elles ne prendront pas trop de place.

Pour une explication plus détaillée de l'option d'affichage Étirer avec dépassement, veuillez consulter l'Aide > Distribuer votre application > iOS/Android > Propriétés.

Merci de penser à l'environnement avant d'imprimer ce document

Découvrez Clickteam Fusion 2.5

Partagez ce tutoriel