Il componente chiave per creare, manipolare e gestire la grafica in Corona SDK è l'oggetto di visualizzazione. Non solo questo oggetto può essere utilizzato per visualizzare un'immagine da un file, ma, cosa altrettanto importante, consente di raggruppare le immagini insieme. Ciò ti consente di spostare un'intera serie di elementi grafici sullo schermo contemporaneamente e sovrapporre la grafica l'uno sull'altro.
Questo tutorial ti insegnerà le basi dell'uso dei gruppi di visualizzazione per organizzare gli oggetti grafici nel tuo progetto. Ciò verrà dimostrato creando due livelli diversi, uno che rappresenta lo schermo normale e un altro che rappresenta un livello modale da posizionare sopra di esso. Oltre a sovrapporre la grafica, utilizzeremo anche l'oggetto di transizione per spostare l'intero gruppo modale.
Come commercializzare la tua app
Nota: Per seguire questo tutorial, avrai bisogno di due immagini: image1.png e image2.png. Queste possono essere le immagini che scegli, ma il tutorial funzionerà meglio se hai immagini di circa 100 pixel per 100 pixel. Questo ti permetterà di vedere facilmente cosa sta succedendo alle immagini.
Per iniziare, apriremo un nuovo file chiamato main.lua e inizieremo a creare il nostro codice:
displayMain = display.newGroup (); displayFirst = display.newGroup (); displaySecond = display.newGroup (); global_move_x = display.contentWidth / 5;
Questa sezione di codice imposta la nostra libreria ui e dichiara attraverso i gruppi di visualizzazione: displayMain, displayFirst e displaySecond. Li useremo per mettere la nostra grafica in primo piano e poi spostarli. La variabile global_move_x è impostata al 20% della larghezza del display in modo che possiamo vedere il movimento.
function setupScreen () displayMain: insert (displayFirst); displayMain: inserire (displaySecond); displayFirst: toFront (); displaySecond: toFront (); local background = display.newImage ("image1.png", 0,0); displayFirst: inserire (sullo sfondo); background locale = display.newImage ("image2.png", 0,0); displaySecond: inserire (sullo sfondo); fine
La funzione setupScreen mostra come aggiungere gruppi di visualizzazione al gruppo di display principale. Usiamo anche la funzione toFront () per impostare i diversi livelli grafici, con il layer che vogliamo in cima a tutto il tempo dichiarato per ultimo.
In questo esempio, non è realmente necessario spostare il display Primo in primo piano poiché sarà impostato di default al di sotto del gruppo displaySecond, ma è bene prendere l'abitudine di stratificare esplicitamente ciascun gruppo di visualizzazione. La maggior parte dei progetti finirà con più di due livelli.
Abbiamo anche aggiunto un'immagine a ciascun gruppo. Quando avviiamo l'app, la seconda immagine dovrebbe essere in cima alla prima immagine.
function screenLayer () displayFirst: toFront (); fine
Abbiamo già stratificato la nostra grafica con il gruppo displaySecond in cima al gruppo display first. Questa funzione si sposterà Primo in primo piano.
function moveOne () displaySecond.x = displaySecond.x + global_move_x; fine
La funzione moveOne sposta la seconda immagine a destra del 20% della larghezza dello schermo. Quando chiamiamo questa funzione, il gruppo displaySecond sarà dietro il gruppo displayFirst.
function moveTwo () displayMain.x = displayMain.x + global_move_x; fine
La funzione moveTwo sposta entrambe le immagini a destra del 20% rispetto alla larghezza dello schermo. Tuttavia, invece di spostare ciascun gruppo individualmente, utilizzeremo il gruppo displayMain per spostarli entrambi contemporaneamente. Questo è un ottimo esempio di come un gruppo di visualizzazione che contiene più gruppi di visualizzazione può essere utilizzato per manipolare molti elementi grafici contemporaneamente.
schermata SETUP (); timer.performWithDelay (1000, screenLayer); timer.performWithDelay (2000, moveOne); timer.performWithDelay (3000, moveTwo);
Questo ultimo bit di codice dimostra cosa succede quando eseguiamo queste funzioni. Utilizzeremo la funzione timer.performWithDelay per attivare le funzioni ogni secondo dopo l'avvio dell'app. Se non si ha familiarità con questa funzione, la prima variabile è il tempo di ritardo espresso in millisecondi e la seconda è la funzione che si desidera eseguire dopo tale ritardo.
Quando avvii l'app, dovresti avere image2.png in cima a image1.png. La funzione screenLayer si attiva e porta in primo piano image1.png. La funzione moveOne sposterà image2.png da under image1.png e la funzione moveTwo scatterà per ultima, spostando entrambe le immagini contemporaneamente.
Come risolvere un iPad lento
È importante ricordare che ognuno di questi gruppi può contenere decine di immagini. E proprio come la funzione moveTwo spostava entrambe le immagini con una riga di codice, tutte le immagini all'interno di un gruppo assumono i comandi assegnati al gruppo.
Tecnicamente, il gruppo displayMain potrebbe contenere sia gruppi di visualizzazione che immagini. Tuttavia, è buona norma consentire ad alcuni gruppi come displayMain di agire come contenitori per altri gruppi senza immagini al fine di creare un'organizzazione migliore.
Questo tutorial utilizza l'oggetto di visualizzazione. Ulteriori informazioni sull'oggetto di visualizzazione.
Come iniziare a sviluppare App per iPad
