L'objet d'affichage est l'élément clé de la création, de la manipulation et de la gestion des graphiques dans le SDK Corona. Non seulement cet objet peut être utilisé pour afficher une image à partir d'un fichier, mais il est peut-être tout aussi important, il vous permet de regrouper vos images. Cela vous permet de déplacer simultanément tout un ensemble de graphiques sur l'écran et de superposer les graphiques les uns sur les autres.
Ce tutoriel vous apprendra les bases de l’utilisation des groupes d’affichage pour organiser les objets graphiques de votre projet. Cela sera démontré en créant deux couches différentes, l’une représentant l’écran normal et l’autre représentant un calque modal à placer au-dessus de celui-ci. En plus de superposer les graphiques, nous utiliserons également l’objet de transition pour déplacer l’ensemble du groupe modal.
Comment commercialiser votre application
Remarque: Pour suivre ce tutoriel, vous aurez besoin de deux images: image1.png et image2.png. Celles-ci peuvent être n’importe quelle image de votre choix, mais le didacticiel fonctionnera mieux si vous avez des images d’environ 100 pixels sur 100 pixels. Cela vous permettra de voir facilement ce qui se passe avec les images.
Pour commencer, nous allons ouvrir un nouveau fichier appelé main.lua et commencer à construire notre code:
displayMain = display.newGroup (); displayFirst = display.newGroup (); displaySecond = display.newGroup (); global_move_x = display.contentWidth / 5;
Cette section de code configure notre bibliothèque d'interface utilisateur et déclare, via des groupes d'affichage: displayMain, displayFirst et displaySecond. Nous les utiliserons pour superposer d'abord nos graphiques, puis pour les déplacer. La variable global_move_x est définie sur 20% de la largeur de l'affichage afin que nous puissions voir le mouvement.
fonction setupScreen () displayMain: insert (displayFirst); displayMain: insert (displaySecond); displayFirst: toFront (); displaySecond: toFront (); arrière-plan local = display.newImage ("image1.png", 0,0); displayFirst: insérer (arrière-plan); arrière-plan local = display.newImage ("image2.png", 0,0); displaySecond: insert (arrière-plan); fin
La fonction setupScreen montre comment ajouter des groupes d’affichage au groupe d’affichage principal. Nous utilisons également la fonction toFront () pour configurer les différents calques graphiques, avec le calque que nous voulons au-dessus de tous les temps déclarés.
Dans cet exemple, il n'est pas vraiment nécessaire de déplacer displayFirst au premier plan car il sera par défaut en dessous du groupe displaySecond, mais il est bon de prendre l'habitude de superposer explicitement chaque groupe d'affichage. La plupart des projets se termineront avec plus de deux couches.
Nous avons également ajouté une image à chaque groupe. Lorsque nous démarrons l'application, la deuxième image devrait être au-dessus de la première image.
fonction screenLayer () displayFirst: toFront (); fin
Nous avons déjà superposé nos graphiques avec le groupe displaySecond en haut du groupe displayFirst. Cette fonction déplacera displayFirst au premier plan.
function moveOne () displaySecond.x = displaySecond.x + global_move_x; fin
La fonction moveOne déplace la seconde image vers la droite de 20% de la largeur de l'écran. Lorsque nous appelons cette fonction, le groupe displaySecond sera derrière le groupe displayFirst.
function moveTwo () displayMain.x = displayMain.x + global_move_x; fin
La fonction moveTwo déplace les deux images vers la droite de 20% de la largeur de l'écran. Cependant, au lieu de déplacer chaque groupe individuellement, nous utiliserons le groupe displayMain pour les déplacer simultanément. Ceci est un excellent exemple de la manière dont un groupe d'affichage contenant plusieurs groupes d'affichage peut être utilisé pour manipuler plusieurs graphiques à la fois.
setupScreen (); timer.performWithDelay (1000, screenLayer); timer.performWithDelay (2000, moveOne); timer.performWithDelay (3000, moveTwo);
Ce dernier morceau de code montre ce qui se passe lorsque nous exécutons ces fonctions. Nous utiliserons la fonction timer.performWithDelay pour les activer toutes les secondes après le lancement de l'application. Si vous ne connaissez pas cette fonction, la première variable est le délai de temporisation exprimé en millisecondes et la seconde, la fonction que nous souhaitons exécuter après ce délai.
Lorsque vous lancez l'application, vous devez avoir image2.png au-dessus de image1.png. La fonction screenLayer se déclenche et ramène image1.png au premier plan. La fonction moveOne déplacera image2.png de sous image1.png, et la fonction moveTwo se déclenchera en dernier, déplaçant les deux images en même temps.
Comment réparer un iPad lent
Il est important de se rappeler que chacun de ces groupes pourrait contenir des dizaines d'images. Et tout comme la fonction moveTwo a déplacé les deux images avec une seule ligne de code, toutes les images d'un groupe prennent les commandes données au groupe.
Techniquement, le groupe displayMain pourrait contenir à la fois des groupes d’affichage et des images. Cependant, il est recommandé de laisser certains groupes tels que displayMain agir en tant que conteneurs pour d'autres groupes sans aucune image afin de créer une meilleure organisation.
Ce tutoriel utilise l'objet display. En savoir plus sur l'objet d'affichage.
Comment se lancer dans le développement d'applications iPad
