Nøglekomponenten til at oprette, manipulere og styre grafik i Corona SDK er displayobjektet. Ikke alene kan dette objekt bruges til at vise et billede fra en fil, måske lige så vigtigt, det giver dig mulighed for at gruppere dine billeder sammen. Dette giver dig mulighed for at flytte et helt sæt grafik på skærmen med det samme og lag grafik oven på hinanden.
Denne vejledning vil lære dig det grundlæggende ved at bruge displaygrupper til at organisere de grafiske objekter i dit projekt. Dette vil blive demonstreret ved at skabe to forskellige lag, en som repræsenterer den normale skærm og en anden, der repræsenterer et modal lag, der placeres oven på det. Ud over at lægge grafikken, bruger vi også overgangsobjektet til at flytte hele modalgruppen.
Sådan markedsføres din app
Bemærk: For at følge med i denne vejledning skal du have to billeder: image1.png og image2.png. Disse kan være billeder, du vælger, men tutorialen virker bedst, hvis du har billeder omkring 100 pixels med 100 pixels. Dette giver dig mulighed for nemt at se, hvad der sker med billederne.
For at komme i gang åbner vi en ny fil kaldet main.lua og begynder at opbygge vores kode:
displayMain = display.newGroup (); displayFirst = display.newGroup (); displaySecond = display.newGroup (); global_move_x = display.contentWidth / 5;
Dette afsnit af kode opretter vores ui-bibliotek og erklærer via displaygrupper: displayMain, displayFirst og displaySecond. Vi bruger disse til første lag vores grafik og derefter flytter dem. Global_move_x-variablen er sat til 20% af skærmens bredde, så vi kan se bevægelsen.
funktion setupScreen () displayMain: indsæt (displayFirst); displayMain: Indsæt (displaySecond); displayFirst: toFront (); displaySecond: toFront (); lokal baggrund = display.newImage ("image1.png", 0,0); displayFirst: Indsæt (baggrund); lokal baggrund = display.newImage ("image2.png", 0,0); displaySecond: Indsæt (baggrund); ende
SetupScreen-funktionen viser, hvordan du tilføjer skærmgrupper til hoveddisplaygruppen. Vi bruger også funktionen toFront () til at oprette de forskellige grafiske lag, med det lag, vi ønsker på toppen af det hele, der er erklæret sidst.
I dette eksempel er det ikke rigtig nødvendigt at flytte displayet Først til forsiden, da det vil være standard for at være under displaySecond-gruppen, men det er godt at komme i vane med at eksplicit lægge hver displaygruppe. De fleste projekter vil ende med mere end to lag.
Vi har også tilføjet et billede til hver gruppe. Når vi starter appen, skal det andet billede være oven på det første billede.
funktion screenLayer () displayFirst: toFront (); ende
Vi har allerede lagret vores grafik med displaySecond-gruppen oven på skærmenFørste gruppe. Denne funktion vil flytte displayet Først til forsiden.
funktion moveOne () displaySecond.x = displaySecond.x + global_move_x; ende
MoveOne-funktionen flytter det andet billede til højre ved 20% af skærmens bredde. Når vi kalder denne funktion, står displaySecond-gruppen bag displayet.Første gruppe.
funktion moveTwo () displayMain.x = displayMain.x + global_move_x; ende
MoveTwo-funktionen flytter begge billeder til højre ved 20% af skærmens bredde. I stedet for at flytte hver enkelt gruppe individuelt bruger vi displayMain-gruppen til at flytte dem begge samtidig. Dette er et godt eksempel på, hvordan en skærmgruppe, der indeholder flere skærmgrupper, kan bruges til at manipulere mange grafikker på én gang.
setupScreen (); timer.performWithDelay (1000, screenLayer); timer.performWithDelay (2000, moveOne); timer.performWithDelay (3000, moveTwo);
Denne sidste kode viser, hvad der sker, når vi kører disse funktioner. Vi bruger funktionen timer.performWithDelay til at slukke for funktionerne hvert sekund efter at appen er startet. Hvis du ikke er bekendt med denne funktion, er den første variabel tiden til forsinkelse udtrykt i millisekunder, og den anden er den funktion, vi ønsker at køre efter forsinkelsen.
Når du starter appen, skal du have image2.png oven på image1.png. ScreenLayer-funktionen brænder og bringer image1.png til forsiden. MoveOne-funktionen flytter image2.png ud fra under image1.png, og moveTwo-funktionen brænder sidst, og bevæger begge billeder på samme tid.
Sådan Fixes en langsom iPad
Det er vigtigt at huske, at hver af disse grupper kunne have snesevis af billeder i dem. Og ligesom bevægelsenTwo funktion flyttede begge billeder med en linje af kode, vil alle billeder i en gruppe tage de kommandoer, der gives til gruppen.
Teknisk set kan DisplayMain-gruppen have både skærmgrupper og billeder indeholdt i den. Det er dog en god praksis at lade nogle grupper som displayMain fungere som containere til andre grupper uden billeder for at skabe bedre organisation.
Denne vejledning gør brug af displayobjektet. Lær mere om displayobjektet.
Sådan kommer du i gang Udvikling af iPad Apps
