Avec hyperPad, vous pouvez créer votre projet pour plusieurs appareils et tailles d'écran. En matière de prise en charge des différents appareils, il existe deux types de projets : Projets spécifiques à un appareil et Projets universels.

Projets spécifiques à un appareil : Créez une version séparée de votre projet pour chaque plateforme que vous souhaitez prendre en charge. Lorsque vous créez votre projet, vous spécifiez un seul appareil pour votre projet. Par exemple, si vous souhaitez créer uniquement un jeu pour iPad, sélectionnez SEULEMENT l'iPad (4:3) lors de la création de votre projet.

Projets universels : Prenez en charge plusieurs appareils avec un seul projet. Lorsque vous créez votre projet, sélectionnez plus d'un appareil cible. Cela signifie que le même projet peut fonctionner à la fois sur iPhone et iPad sans avoir deux versions séparées.

Il y a des avantages et des inconvénients à chacune des approches. Pour les projets qui nécessitent un contrôle total de l'écran et de ce que vous souhaitez voir en tout temps, une approche spécifique à un appareil peut être bénéfique. Cependant, cela implique de recréer votre jeu/projet pour chaque nouvelle plateforme.

Le bénéfice des projets universels est que vous devez créer votre jeu ou votre application une seule fois. Cependant, vous avez moins de contrôle sur ce qui apparaît à l'écran. Par exemple, sur un appareil plus large, vous pouvez voir plus de contenu qui autrement ne serait pas visible. hyperPad propose certains outils et comportements pour contrôler certains éléments, mais parfois vous avez simplement besoin d'un contrôle total et un projet spécifique à un appareil a plus de sens.

Cet article couvre principalement les projets universels, car vous traitez avec plusieurs rapports d'aspect et appareils. Pour les projets spécifiques à un appareil, c'est aussi simple que de vous assurer que votre contenu s'adapte dans la zone verte sur le toile.

Créer un projet universel

Lorsque vous créez un nouveau projet, vous êtes invité à sélectionner les appareils que vous souhaitez prendre en charge. Par défaut, seul l'iPad (4:3) est sélectionné. Vous pouvez appuyer sur les autres appareils pour activer leur prise en charge également. Si vous avez sélectionné plus d'un appareil, votre projet est considéré comme un "Projet universel".

Cycler les appareils

Lorsque vous sélectionnez plusieurs appareils à prendre en charge, cela signifie que vous devez vous assurer que le contenu de votre projet s'adapte à l'écran pour chaque appareil / rapport d'aspect.

La zone rectangulaire verte sur la toile est l' espace d'écran visible. Tout ce qui est placé dans l'espace d'écran visible sera vu lorsque votre projet est en cours d'exécution. Gardez à l'esprit que chaque appareil que vous avez activé lors de la création du projet a son propre espace d'écran visible.

Pour vous assurer que votre contenu s'adapte à l'espace d'écran visible pour chaque zone, appuyez sur l'icône Cycle Device dans la palette d'outils.

Rappelez-vous, certains appareils comme l'iPhone ont plusieurs tailles d'écran et rapports d'aspect. Si vous développez un projet pour ces appareils et souhaitez prendre en charge une version plus ancienne d'iOS, vous devez vous assurer que votre contenu fonctionne sur chaque version de cet appareil. Donc, si vous sélectionnez l'iPhone, vous devez vous assurer que votre contenu s'adapte à l'espace d'écran de l'iPhone 4 (3:2) et à l'espace d'écran de l'iPhone 5, 6, 6+ (16:9).

Concevoir votre projet pour plusieurs appareils

En règle générale, lorsque vous développez un jeu ou une application, vous voulez éviter de tout refaire pour chaque projet. Avec les Projets Universels, vous pouvez utiliser un design astucieux pour minimiser le travail que vous devez refaire.

hyperPad a toutes les tailles d'écran qui commencent à partir du coin inférieur gauche, puis s'agrandissent vers le haut et vers la droite pour les appareils plus grands. Si vous gardez cela à l'esprit, de nombreux jeux peuvent être créés une fois.

Lorsque vous concevez votre scène, concevez votre contenu principal pour s'adapter à l'appareil le plus petit, et votre arrière-plan pour s'adapter au plus grand. Lors de la création de votre projet, la plus grande taille est étiquetée comme la "Résolution de conception". En faisant cela, de nombreux projets apparaissent automatiquement magnifiques sur tous les appareils.

Par exemple, vous souhaitez créer un jeu de plateforme qui fonctionne à la fois sur iPhone et iPad. Vous pouvez concevoir le niveau principal (obstacles au sol, etc.) pour s'adapter à l'écran le plus petit de l'iPhone (rapport d'aspect 16:9), puis faire en sorte que votre arrière-plan s'adapte au plus grand appareil (iPad). Sur le plus petit iPhone, le jeu apparaîtra exactement comme vous l'avez conçu. Pour les appareils plus grands (iPad 4:3 ou Bureau 16:10), le jeu montrera plus de contenu vertical en haut. Puisque vous avez fait en sorte que votre arrière-plan s'adapte à la plus grande taille, il y a toujours quelque chose de visible et vous ne vous retrouvez pas avec un espace noir vide.

Lors de la cyclage entre les différents appareils, remarquez que l'espace d'écran visible ne change pas en largeur. hyperPad utilise une résolution personnalisée pour garder les largeurs cohérentes sur tous les appareils. Seule la hauteur change, montrant plus ou moins de contenu verticalement.

Voici un tableau qui représente les différents rapports d'aspect et résolutions des appareils.

Rapports d'aspect	Icône	Appareils	Résolution de conception
4:3		iPad, iPad Pro	2048 px x 1536 px
16:9		iPhone 5, iPhone 5S, iPhone 6, iPhone 6 plus, iPhone 6S. iPhone 6S Plus, iPod 5e génération, iPod 6e génération	2048 px x 1158 px
3:2		iPhone 3GS, iPhone 4, iPhone 4S, iPod 4e génération	2046 px x 1364 px
16:10		Ordinateurs de bureau	2048 px x 1280 px

Remarque concernant les anciens iPhones (3GS, iPhone 4, 4S et iPod 4e Génération) : Ces appareils utilisent un rapport d'aspect de 3:2. Pour maintenir la largeur de tous les appareils cohérente, l'espace d'écran visible pour les appareils 3:2 est en réalité plus haut que celui des appareils iPhone 5, 6+ (16:9) plus grands. Si vous souhaitez développer pour l'iPhone et prendre en charge iOS 9 et inférieur, vous DEVEZ également vous assurer que votre projet s'adapte à l'espace d'écran 3:2.

Si vous souhaitez uniquement prendre en charge iOS 10 et supérieur, alors vous n'avez pas à vous soucier de l'adaptation de votre contenu à l'espace d'écran 3:2.

Importer des ressources

hyperPad met automatiquement à l'échelle votre projet pour qu'il ait fière allure sur tous les appareils. Pour que votre projet reste beau sur tous les appareils, vous devez toujours importer vos images pour qu'elles s'adaptent à la Résolution de conception. La Résolution de conception est donnée en retina, donc lorsque vous importez des images, une image non-retina sera automatiquement générée pour vous.

Par exemple, si vous importez une image de 512x512 pixels, une image de 256x256 pixels sera créée pour vous.

Notez également que la résolution de conception est mesurée en pixels. Sur l'appareil réel, tout est mesuré en points. Cela signifie que 2048x1536 pixels correspond effectivement à 1024x768 points (sur un appareil retina).

Positionnement Absolu et Relatif

Il existe deux façons de positionner des objets dans hyperPad. Absolu et Relatif. Les positions absolues placent un objet à un emplacement pixel spécifique sur la toile et sont mesurées en mètres. Les positions relatives placent votre objet en fonction du pourcentage de l'espace d'écran visible.

Avec des positions absolues, vos objets peuvent apparaître hors écran pour les appareils plus petits. Cela se produit parce que le système de coordonnées ne change pas en fonction de chaque appareil (1 mètre est le même sur un iPhone, un iPad, et tout autre appareil).

Avec des positions relatives, votre objet apparaîtra à la même position relative peu importe l'appareil. Donc, si vous placez votre objet au milieu de votre écran, il sera au milieu pour l'iPhone, l'iPad, et tout appareil plus grand comme un téléviseur ou un ordinateur.

Par défaut, tout objet que vous placez sur des couches régulières utilisera des positions absolues, et tout objet placé sur les couches UI est réglé sur des positions basées sur un pourcentage. De cette façon, vous n'avez pas à vous soucier de vos boutons, barres de santé ou joysticks qui sont hors écran pour chaque appareil.

Dans le gif ci-dessous, vous pouvez voir l'effet des positions relatives. Les signes "Tap" et la main utilisent des positions relatives et restent toujours au milieu pour chaque appareil.

Pour changer le type de positionnement de votre objet, sélectionnez votre objet et dans les Propriétés de l'objet, passez à l'onglet Transform et appuyez sur l'icône "%" sur le champ de position. Cela transformera votre position actuelle en un pourcentage de l'écran.

Si vous parcourez vos appareils pris en charge depuis la palette d'outils, vous pouvez voir vos objets relatifs rester à l'intérieur de l'espace d'écran visible.

Pour garder un objet complètement centré, les positions X et Y devraient être à 50%.

Actions personnalisées basées sur la taille de l'écran

Parfois, vous voulez que votre projet ait un aspect et une sensation légèrement différents pour chaque appareil. Par exemple, vous voulez que bouton soit uniquement disponible sur l'iPad et pas sur l'iPhone.

Pour cela, vous pouvez utiliser le comportement "Obtenir Écran" pour déterminer la taille de l'écran actuel, et avec un comportement SI pour cacher le bouton sur l'iPhone.

Dans l'exemple ci-dessus, vous utiliseriez Obtenir Écran, puis afficher le Ratio d'Aspect à un comportement SI, qui vérifie si c'est un iPhone (16:9).

Ensuite, utilisez le comportement de masquer graphique pour cacher le bouton si la taille de l'écran est de 16:9.

Plusieurs tailles d'écran et appareils