Nøkkelkomponenten til å lage, manipulere og administrere grafikk i Corona SDK er skjermobjektet. Ikke bare kan dette objektet brukes til å vise et bilde fra en fil, kanskje like viktig, det lar deg gruppere bildene dine sammen. Dette lar deg flytte et helt sett med grafikk rundt skjermen samtidig og laggrafikk over hverandre.
Denne opplæringen vil lære deg grunnleggende om å bruke visningsgrupper for å organisere de grafiske objektene i prosjektet. Dette vil bli demonstrert ved å lage to forskjellige lag, en som representerer det vanlige skjermbildet og en annen som representerer et modallag som legges på toppen av det. I tillegg til å lagre grafikken, bruker vi også overgangsobjektet til å flytte hele modalgruppen.
Slik markedsfører du din app
Merk: For å følge med denne opplæringen, trenger du to bilder: image1.png og image2.png. Disse kan være noen bilder du velger, men opplæringen fungerer best hvis du har bilder rundt 100 piksler med 100 piksler. Dette vil tillate deg å enkelt se hva som skjer med bildene.
For å komme i gang, åpner vi en ny fil som heter main.lua og begynner å bygge vår kode:
displayMain = display.newGroup (); displayFirst = display.newGroup (); displaySecond = display.newGroup (); global_move_x = display.contentWidth / 5;
Denne delen av koden setter opp vårt ui-bibliotek og erklærer seg gjennom skjermgrupper: displayMain, displayFirst og displaySecond. Vi bruker disse til første lag vår grafikk og flytter dem. Global_move_x-variabelen er satt til 20% av skjermens bredde slik at vi kan se bevegelsen.
funksjon setupScreen () displayMain: sett inn (displayFirst); displayMain: innsats (displaySecond); displayFirst: toFront (); displaySecond: toFront (); lokal bakgrunn = display.newImage ("image1.png", 0,0); displayFirst: innsats (bakgrunn); lokal bakgrunn = display.newImage ("image2.png", 0,0); displaySecond: innsats (bakgrunn); slutt
SetupScreen-funksjonen viser hvordan du legger til visningsgrupper i hoveddisplaygruppen. Vi bruker også funksjonen toFront () til å sette opp de forskjellige grafiske lagene, med laget vi vil ha på toppen hele tiden deklarert sist.
I dette eksemplet er det egentlig ikke nødvendig å flytte displayet Først til forsiden siden det vil være standard for å være under displaySecond-gruppen, men det er godt å bli vant til å eksplisitt legge hver skjermgruppe. De fleste prosjekter vil ende opp med mer enn to lag.
Vi har også lagt til et bilde for hver gruppe. Når vi starter appen, bør det andre bildet være på toppen av det første bildet.
funksjon screenLayer () displayFirst: toFront (); slutt
Vi har allerede lagret grafikken vår med displaySecond-gruppen øverst på displayetFirst gruppe. Denne funksjonen vil flytte displayet Først til forsiden.
funksjon moveOne () displaySecond.x = displaySecond.x + global_move_x; slutt
MoveOne-funksjonen flytter det andre bildet til høyre med 20% av skjermbredden. Når vi kaller denne funksjonen, vil displaySecond-gruppen ligge bak displayetFirst gruppe.
funksjon moveTwo () displayMain.x = displayMain.x + global_move_x; slutt
MoveTwo-funksjonen flytter begge bildene til høyre med 20% av skjermbredden. I stedet for å flytte hver gruppe hver for seg, bruker vi displayMain-gruppen til å flytte dem begge samtidig. Dette er et godt eksempel på hvordan en skjermgruppe som inneholder flere skjermgrupper kan brukes til å manipulere mange grafikker samtidig.
setupScreen (); timer.performWithDelay (1000, screenLayer); timer.performWithDelay (2000, moveOne); timer.performWithDelay (3000, moveTwo);
Denne siste koden viser hva som skjer når vi kjører disse funksjonene. Vi bruker funksjonen timer.performWithDelay for å brenne av funksjonene hvert sekund etter at appen er startet. Hvis du ikke er kjent med denne funksjonen, er den første variabelen tiden til forsinkelse uttrykt i millisekunder, og den andre er funksjonen vi vil løpe etter den forsinkelsen.
Når du starter appen, bør du ha image2.png på toppen av image1.png. ScreenLayer-funksjonen brann og bringer image1.png til forsiden. MoveOne-funksjonen vil flytte image2.png ut fra under image1.png, og moveTwo-funksjonen brann sist, samtidig som begge bildene flyttes.
Slik løser du en langsom iPad
Det er viktig å huske at hver av disse gruppene kan ha dusinvis av bilder i dem. Og akkurat som moveTwo-funksjonen flyttet begge bildene med en linje med kode, vil alle bilder i en gruppe ta kommandoer gitt til gruppen.
Teknisk sett kan DisplayMain-gruppen ha både skjermgrupper og bilder som finnes i den. Det er imidlertid en god praksis å la noen grupper som displayMain fungere som beholdere for andre grupper uten bilder for å skape bedre organisasjon.
Denne opplæringen gjør bruk av skjermobjektet. Lær mer om skjermobjektet.
Slik kommer du i gang Utvikling av iPad-apper
