Application mobile: Création de jeux mobiles pour différentes tailles et résolutions d’écran

Comment créer des jeux mobiles pour différentes tailles et résolutions d'écran

Avec tous les différents facteurs de forme d’appareils aujourd’hui, les développeurs multiplateformes sont confrontés au défi de fournir une expérience utilisateur égale à chaque utilisateur. Cela inclut différentes résolutions ainsi que différents aspects
ratios, surtout en ce qui concerne les innombrables fabricants de téléphones Android.

Les principales questions à traiter sont :

Je vais vous montrer comment relever ce défi avec facilité, en utilisant Felgo. La théorie derrière les solutions que je présente peut également être utile si vous utilisez un autre framework, alors je vous suggère quand même de lire ce guide !

Téléchargez Felgo maintenant et créez des jeux et des applications pour n’importe quelle résolution d’écran mobile.

Examinons de plus près les questions ci-dessus, une par une.

Mise à l’échelle du contenu

Notre première question était de savoir comment s’assurer que la logique et la mécanique du jeu sont égales et équitables sur n’importe quel appareil.

Eh bien, nous pourrions réécrire notre code à partir de zéro pour différentes tailles d’écran. Ou nous pourrions recalculer toutes les valeurs x, y, largeur, hauteur, vitesse, etc. en fonction de la taille de l’écran au moment de l’exécution.

Et non ?

Oui, cela ressemble à beaucoup de travail. Nous voulons avoir une base de code unique, facile à lire et à maintenir. Ainsi, à la place, nous pouvons utiliser un principe ordonné appelé Mise à l’échelle du contenu.

Cela signifie en gros que vous concevez votre jeu une fois pour la résolution la plus basse que vous souhaitez prendre en charge (appelée résolution logique), et que vous l’augmentez simplement dans son ensemble sur des résolutions plus grandes, pour offrir un jeu égal.
vivre. Avec Felgo, la résolution logique par défaut est de 480×320 (pour le mode paysage). Par exemple. un iPhone 4 a une résolution de 960×640, c’est exactement le double de la résolution, il est donc facile de faire évoluer le jeu et il fonctionnera parfaitement
tenir dans l’écran de l’appareil.

Avec Felgo, le composant Scene s’occupe automatiquement de ce mécanisme de mise à l’échelle.

 import Felgo 3.0
 import QtQuick 2.0

 GameWindow {
   

   Scene {
     
     

     
     
     
     

     Image {
       anchors.centerIn: parent
       width: 50
       height: 50
       source: "https://felgo.com/web-assets/balloon.png"
     }
   }
 }

Adapter la SD à la HD

D’accord, celui-là était facile. Cependant, que se passe-t-il si vous prenez une image avec 40×40 et que vous la redimensionnez par ex. doubler sa taille ? Bon, ça va devenir flou. Le chapitre suivant traite de cette question (ne vous inquiétez pas, c’est simple comme
bien).

Sélection d’actifs intelligents

Nous voulons éviter que les images ne deviennent floues lors de l’agrandissement de la scène. Une solution simple serait d’utiliser une très grande image, afin qu’elle soit efficacement réduite sur des appareils à plus faible résolution. Par exemple. pour notre image 40×40 dans le jeu,
nous utilisons une image source 160×160, puis nous pouvons facilement redimensionner la scène à 4 fois sa taille logique. Mais cette solution est-elle idéale ? Bien sûr que non, ce chapitre serait bien trop court de cette façon !

Ce qui se passe avec l’utilisation uniquement de grandes images, c’est que nous pourrions manquer de mémoire très rapidement, en particulier sur les appareils bas de gamme. Nous chargeons toutes ces grandes images, même si nous les affichons très petites, c’est un énorme gaspillage
d’une mémoire précieuse. Une très bonne solution consiste à charger une version différente de votre image, en fonction de la taille dont elle a besoin sur l’appareil actuel. Cette technique est très courante dans le développement mobile, et Felgo la prend en charge dans
d’une manière élégante, avec le composant MultiResolutionImage.

 import Felgo 3.0
 import QtQuick 2.0

 GameWindow {
   

   Scene {
     
     

     
     

     Row {
       spacing: 10
       anchors.centerIn: parent

       Image {
         width: 50
         height: 50
         source: "https://felgo.com/web-assets/balloon.png"
       }
       
       MultiResolutionImage {
         width: 50
         height: 50
         source: "https://felgo.com/web-assets/balloon-multi.png"
       }
     }
   }
 }

Il ne vous reste plus qu’à fournir des images de différentes tailles parmi lesquelles choisir, généralement 3 versions, pour les résolutions SD, HD et HD2.

  • SD : L’image avec la taille logique utilisée dans votre jeu
  • HD : double la taille de l’image SD
  • HD2 : Double la taille de l’image HD (-> 4 fois SD)

Dans votre dossier d’actifs, à côté de vos images normales (SD), vous pouvez faire un +hd dossier et un +hd2 dossier, et placez-y vos images, afin que MultiResolutionImage puisse les trouver.

Bulle des sélecteurs de fichiers

Si vous ne fournissez pas d’asset en résolution hd ou hd2, le dossier suivant est choisi automatiquement. Vous pouvez donc commencer le prototypage pendant le développement avec une seule version d’image et créer les autres résolutions
plus tard.

Prise en charge de la commutation d’image dynamique et indépendance de la densité

Pour résumer cela, Felgo ajoute la prise en charge de la commutation d’image dynamique en fonction de la densité et de la taille de l’écran. Cela vous permet de :

  • Économisez de la mémoire graphique : en fonction de la taille de l’écran, la meilleure image correspondante est sélectionnée pour éviter les images mises à l’échelle et floues, et pour économiser de la mémoire par rapport à une approche où les images à plus haute résolution sont toujours utilisées.
  • Améliorez les temps de chargement : comme l’image la mieux dimensionnée est sélectionnée, vous obtenez un temps de chargement idéal de l’image utilisée.
  • Travaillez avec la taille logique de l’image dans votre GameWindow et votre scène pour simplifier le positionnement multi-résolution et pour utiliser la mise à l’échelle du contenu.

Jusqu’ici tout va bien, passons maintenant aux appareils avec des rapports d’aspect différents, car jusqu’à présent nous n’avons regardé que 3:2 (480×320, 960×640, …).

Gérer les proportions

Aujourd’hui, en particulier sur Android, nous avons une grande variété de ratios d’appareils, de 4:3 à 16:9 et n’importe quoi entre les deux. Voici quelques exemples:

Ratio d’aspectRésolutionsExemples d’appareils
4:31024×768iPad 1, iPad 2
2048×1536iPad 3
3:2480×320iPhone 3GS et versions antérieures, appareils Android
960×640iPhone 4, iPhone 4S
16:10800×480Appareils Android, WindowsPhone7
1280×800Tablettes Android comme Google Nexus 7, Samsung Galaxy Tab 10.1, Motorola Xoom, Asus Eee Pad Transformer
17:101024×600Tablettes Android comme Samsung Galaxy Tab 7
16:9640×360Appareils Symbian3 comme Nokia C7
854×480Appareils Android
1136×640iPhone 5
1280×720HTC One Mini, Samsung Galaxy S3
1334×750iPhone 6/6S, iPhone 7/7S
1920×1080iPhone 6 Plus, iPhone 7 Plus, Google Nexus 5, Samsung Galaxy S5
2560×1440Samsung Galaxy S7

Votre scène logique a un rapport hauteur/largeur constant, qui par défaut est de 3:2 (480×320). Maintenant, nous devons d’abord décider comment nous voulons intégrer cette scène dans un autre rapport hauteur/largeur. Il existe différents types de modes d’échelle que je veux
vous montrer, bien qu’il n’y en ait qu’un qui nous intéresse vraiment.

Mode d’échelle de la boîte aux lettres

C’est le mode d’échelle le plus courant. Le contenu est mis à l’échelle uniformément (c’est-à-dire avec la même valeur pour les échelles x et y) de sorte que le plus petit côté s’adapte à l’affichage. Ce paramètre
entraîne un espace restant sur les bordures, en fonction du rapport hauteur/largeur de l’appareil. Si la taille logique de la scène est de 480×320 par exemple et que la résolution de l’appareil est de 1024×640 (ratio 16:10), les xScale et yScale utilisés sont 2 et
il y a 1024 – (480 * 2) = 64 pixels de bordure sur les côtés gauche et droit ensemble.

Squaby différents appareils ont étendu les bordures noires

Une image d’arrière-plan avec un ratio de 3:2 aura des bordures noires sur différents ratios.

Nous pouvons facilement nous occuper des bordures noires, que je vais vous montrer dans une minute. Mais permettez-moi juste de mentionner rapidement les autres modes d’échelle possibles, que nous ne recommandons cependant pas d’utiliser dans la plupart des cas.

Autres modes d’échelle

zoomToBiggerSide Mode d’échelle

Ce mode s’adapte uniformément à la plus grande valeur des paramètres xScale et yScale calculés. Des parties de la scène logique seront à l’extérieur de l’écran lorsque l’appareil a un rapport hauteur/largeur différent de celui de la scène logique. Cette
n’est pas adapté aux jeux qui nécessitent que toute la scène logique soit à l’écran comme les jeux de tower defense, car vous ne seriez alors pas en mesure de construire des tours sur les bords et donc d’avoir une situation injuste pour les joueurs avec
différents rapports d’aspect ! Si la taille logique de la scène est de 480×320 par exemple et que la résolution de l’appareil est de 1024×640 (ratio 16:10), les xScale et yScale utilisés sont de 2,13 car 1024 / 480 = 2,13 qui est plus grand que 640 /
320 = 2
.

Squaby différents appareils zoomtobiggerside

Des parties de notre scène logique sont rognées (par exemple le chemin en haut), le jeu devient injouable.

zoomMode d’échelle non uniforme

Avec ce scaleMode, votre scène logique sera mise à l’échelle pour correspondre exactement à l’écran, ce qui conduit à des facteurs d’échelle inégaux pour x et y si l’écran a un
rapport d’aspect que la scène logique. Le résultat est que l’image d’arrière-plan et le contenu sont déformés, ce qui sera visuellement gênant. Dans de rares cas, la distorsion n’est pas évidente (par exemple, lorsque seule une image en dégradé
est utilisé comme arrière-plan), mais la plupart du temps, vous voulez éviter cette situation et utiliser plutôt letterbox ou zoomToBiggerSide scaleModes.

Rapports d'aspect de la scène Squaby

Distorsions visuelles en étirant la scène originale 3:2 de manière non uniforme, aux rapports d’aspect 4:3 ou 16:9.

aucun Mode d’échelle

Ce mode n’effectue aucune mise à l’échelle du contenu. Ainsi, les images et les polices affichées auront toujours la taille de la scène logique et ne seront pas adaptées à la taille de l’écran. Cela peut être utilisé si vous voulez rouler votre propre échelle
paramètres ou charger différentes mises en page en fonction de la taille d’écran donnée.

Utilisation du mode d’échelle de la boîte aux lettres pour couvrir tout l’écran

Bon, revenons à notre mode d’échelle de choix. Comme nous nous en souvenons, nous faisons tenir toute la scène dans l’appareil, avec des bordures possibles sur différents rapports d’aspect.

Squaby différents appareils ont étendu les bordures noires

Au lieu de simplement laisser cet espace libre noir, il peut être utilisé pour les images d’arrière-plan afin d’afficher du contenu supplémentaire qui se trouve en dehors de la scène logique et donc uniquement visible sur les appareils qui ont un rapport hauteur/largeur différent.
Gardez à l’esprit de ne mettre dans l’espace libre que des graphiques qui ne sont pas pertinents pour le jeu, car ils pourraient ne pas être visibles sur des appareils avec des ratios différents !

Ainsi, au lieu de créer un arrière-plan au format 3:2, créez-en un pour s’adapter également à tous les ratios « pire des cas » 4:3 et 16:9.

Arrière-plan étendu de différents appareils Squaby

Les appareils modernes avec des écrans bord à bord ont même un rapport plus large que 16:9. Par exemple, l’iPhone X est livré avec une résolution de 2436×1125 pixels pour le mode paysage. Cela donne les tailles suivantes pour l’arrière-plan
images:

Type d’imageTaille du rapport 3:2 non modifiéeTaille d’arrière-plan suggérée
Dakota du Sud480×320694×360
HD960×6401388×720
hd21920×12802776×1440

Ainsi, avec ces tailles d’arrière-plan, votre jeu fonctionnera sur tous les appareils et toutes les résolutions d’écran.

 import QtQuick 2.0
 import Felgo 3.0

 GameWindow {

   Scene {
     
     MultiResolutionImage {
       
       anchors.centerIn: parent
       source: "https://felgo.com/web-assets/background-multi.jpg"
     }
   }
 }

Si vous vous demandez comment ces nombres magiques pour les images d’arrière-plan ont été calculés : à partir d’un ratio de 3:2, le pire des cas pour l’étirement horizontal sera le ratio 2436:1125 de l’iPhone X. Ainsi, l’iPhone X large
ratio est 1,443555 fois plus grand que le ratio 3:2 pour le xScale. Une multiplication de 480×1.443555 équivaut à 692,9, ce qui est arrondi à 693px – cependant, pour éviter les calculs de 1px, par ex. au centrage, la taille minimale est de 694px.
La pire caste pour l’étirement vertical est le rapport 4:3, qui est 1,125 fois plus grand pour le yScale et 320×1.125 équivaut à 360 pixels. C’est le point de départ pour les graphismes sd, pour les versions hd il est simplement doublé
chaque côté et hd2 4 fois la taille sd. Je recommande de créer le jeu avec une taille de scène logique avec un ratio de 3:2, car il se situe au milieu des extrêmes. Si nous commençons avec une taille de scène logique 16:9 par exemple, il
serait beaucoup d’espace perdu pour un rapport 4:3, alors qu’avec le rapport 3:2 suggéré, l’espace restant est également réparti pour tous les autres rapports.

Noter: Vous pouvez télécharger un modèle de photoshop pour votre expérience et le zone de sécurité ici. C’est à ça que ça ressemble:

Modèle de fond Felgo

Nous avons également préparé un petit exemple de code pour inspecter le rapport hauteur/largeur et les bordures sur votre téléphone mobile :

 import QtQuick 2.0
 import Felgo 3.0

 GameWindow {

   Scene {
     id: scene
     

     
     Rectangle {
       anchors.centerIn: scene
       width: scene.width
       height: scene.gameWindowAnchorItem.height
       color: "blue"
     }
     
     Rectangle {
       anchors.centerIn: scene
       width: scene.gameWindowAnchorItem.width
       height: scene.height
       color: "red"
     }
     
     Rectangle {
       anchors.fill: scene
       color: "cyan"
     }
   }
 }

Optimisez votre interface utilisateur pour utiliser l’espace d’écran disponible

Position relative par position à l’écran

Bien que la scène logique et toutes les entités doivent être positionnées dans les limites de la scène logique, vous souhaiterez placer des éléments HUD contenant des étiquettes ou des menus en fonction de la position absolue de l’écran et non par rapport à
la scène logique. Ainsi, par exemple, la partition ou le texte des vies doit toujours être sur le bord de l’écran et non ancré à la scène logique.

L’image suivante montre un menu du bas et une étiquette de score et de vie positionnée (ou ancrée) par rapport à la logique scène (la zone lumineuse). La deuxième image montre la même chose, mais par rapport à la filtrer avec un 4:3
rapport.

Squaby ancré à la scène

Squaby ancré à l'écran

Le menu du bas, le score et l’étiquette des vies sont ancrés par rapport à l’écran, ce qui est la meilleure approche pour les éléments HUD.

Felgo propose la propriété Scene::gameWindowAnchorItem de la Scene pour accomplir cela. L’exemple suivant montre comment utiliser les ancres
avec le gameWindowAnchorItem, pour positionner votre HUD le long des bords de l’écran.

Exemple de positionnement par rapport à l’écran et à la mise à l’échelle du contenu à l’aide de Felgo

L’exemple ci-dessus peut être implémenté avec le code suivant dans Felgo :

 import QtQuick 2.0
 import Felgo 3.0

 GameWindow {
   
   
   screenWidth: 1024
   screenHeight: 768

   Scene {
     id: scene

     
     

     property int score: 0
     property int lives: 50

     Rectangle {
       anchors.fill: parent.gameWindowAnchorItem
       color: "white"
     }

     Text {
       text: "Score " + scene.score
       anchors {
         top: scene.gameWindowAnchorItem.top
         left: scene.gameWindowAnchorItem.left
         leftMargin: 5
       }
     }

     Text {
       text: "Lives " + scene.lives
       anchors {
         top: scene.gameWindowAnchorItem.top
         right: scene.gameWindowAnchorItem.right
         rightMargin: 5
       }
     }

     Rectangle {
       color: "grey"
       height: 40
       anchors {
         bottom: scene.gameWindowAnchorItem.bottom
         left: scene.gameWindowAnchorItem.left
         right: scene.gameWindowAnchorItem.right
       }
     }
   }
 }

Alignement de scène

Par défaut, la scène logique est centrée dans l’écran, distribuant des bordures possibles égales à gauche et à droite, ou en haut et en bas. Cependant, il y a des cas où vous voudrez peut-être changer cela, et par ex. aligner la scène sur
le bas de l’écran, avec des bordures verticales en haut uniquement.

Pour ce cas, la propriété d’alignement de scène peut être utilisée, à la fois avec la valeur par défaut center:

  • sceneAlignmentX peut avoir l’une des valeurs center, left ou right
  • sceneAlignmentY peut avoir l’une des valeurs center, top, ou bottom

Téléchargez Felgo maintenant et créez des jeux et des applications pour n’importe quelle résolution d’écran mobile.

Composants de gestion multi-résolutions de Felgo

Ce qui suit est une liste de composants Felgo utiles pour gérer différentes tailles d’écran et une explication rapide de ceux-ci.

Composant GameWindow

Le composant GameWindow permet de changer de résolution et de rapport hauteur/largeur tout en testant sur le bureau pendant l’exécution. Cela le rend idéal pour tester à quoi ressemblera le jeu sur
différents appareils. Les différentes résolutions peuvent être basculées en appuyant sur les boutons du clavier ctrl(cmd)+1-7. Le plein écran peut être modifié en appuyant sur le bouton du clavier ctrl(cmd)+F.

Composant de scène

Le composant Scene représente la scène logique, qui est mise à l’échelle à l’écran en fonction du scaleMode (la boîte aux lettres est la valeur par défaut
réglage).

Composant MultiResolutionImage

Pour le composant MultiResolutionImage, les bons sélecteurs de fichiers Felgo sont automatiquement sélectionnés en fonction de
le facteur d’échelle de la scène. Ce sera soit le dossier par défaut, +hd ou +hd2.

Composants Sprite

Les composants AnimatedSprite et SpriteSequence prennent en charge l’utilisation des bons sélecteurs de fichiers Felgo.

Composants de l’emballeur de texture

Felgo prend en charge l’utilisation de TexturePacker, le principal outil de création de feuilles de sprite.

Les feuilles de sprite avec TexturePacker vous offrent les avantages suivants :

  • Réduire la taille des textures sur le stockage et dans la mémoire.
  • Accélérez le processus de dessin pour améliorer les performances et permettre une fréquence d’images plus élevée.
  • Exportez vos sprites pour SD, HD et HD2 en un seul clic.

Les références

Ce sujet a également été couvert par d’autres, et je souhaite partager quelques références précieuses avec vous si vous souhaitez approfondir ce sujet :

Où aller en partant d’ici

Vous pouvez mettre en pratique les concepts appris de ce didacticiel en créant un vrai jeu.

Consultez ces tutoriels pour apprendre à créer un jeu Felgo :

Pour un autre didacticiel sur l’indépendance de la densité et la prise en charge multi-écrans, consultez Prise en charge de plusieurs tailles d’écran et densités d’écran avec Qt et Felgo.

#Création #jeux #mobiles #pour #différentes #tailles #résolutions #décran