Utilitzar el Corona SDK per manipular gràfics
El component clau de crear, manipular i gestionar gràfics a Corona SDK és l'objecte de visualització. No només es pot utilitzar aquest objecte per mostrar una imatge d'un fitxer, potser tan important, que us permet agrupar les vostres imatges. Això us permet moure tot el conjunt de gràfics al voltant de la pantalla alhora i gravar els gràfics un sobre l'altre.
Aquest tutorial us mostrarà els conceptes bàsics d'utilitzar grups de visualització per organitzar els objectes gràfics del vostre projecte. Això es demostrarà mitjançant la creació de dues capes diferents, una que representa la pantalla normal i una altra que representa una capa modal per col · locar damunt d'ella. A més de definir els gràfics, també utilitzarem l'objecte de transició per moure tot el grup modal.
Com comercialitzar la vostra aplicació
Nota: Per seguir juntament amb aquest tutorial, necessitaràs dues imatges: image1.png i image2.png. Aquestes poden ser les imatges que trieu, però el tutorial funcionarà millor si teniu imatges de 100 píxels per 100 píxels. Això us permetrà veure fàcilment què està passant amb les imatges.
Per començar, obrirem un nou fitxer anomenat main.lua i començarem a construir el nostre codi:
displayMain = display.newGroup (); displayFirst = display.newGroup (); displaySecond = display.newGroup (); global_move_x = display.contentWidth / 5;Aquesta secció de codi configura la nostra biblioteca ui i es declara a través de grups de visualització: displayMain, displayFirst i displaySecond. Els utilitzarem per col·locar primer els nostres gràfics i, a continuació, moure'ls. La variable global_move_x està establerta en un 20% de l'ample de la pantalla perquè puguem veure el moviment.
funció setup Screen () displayMain: insert (displayFirst); displayMain: insert (displaySecond); displayFirst: toFront (); pantalla Segon: al davant (); background local = display.newImage ("image1.png", 0,0); displayFirst: insert (background); background local = display.newImage ("image2.png", 0,0); display Segon: insert (background); finalLa funció setupScreen mostra com afegir grups de visualització al grup de visualització principal. També utilitzem la funció "ToFront" () per configurar les diferents capes gràfiques, amb la capa que volem a la part superior, tot el temps que es va declarar últimament.
En aquest exemple, realment no és necessari moure el displayFirst cap a la part frontal, ja que estarà per sota del grup SegonSecond, però és bo en fer captar explícitament cada grup de visualització. La majoria de projectes acabaran amb més de dues capes.
També hem afegit una imatge a cada grup. Quan iniciem l'aplicació, la segona imatge ha d'estar al damunt de la primera imatge.
screenLayer () displayFirst function: toFront (); finalJa hem superposat els nostres gràfics amb el grup displaySecond a la part superior de la pantalla. Primer grup. Aquesta funció mourà DisplayFirst cap a la part frontal.
funció moveOne () displaySecond.x = displaySecond.x + global_move_x; finalLa funció moveOne mourà la segona imatge a la dreta en un 20% de l'amplada de la pantalla. Quan truquem a aquesta funció, el grup displaySecond estarà darrere de la pantalla del primer grup.
moveTwo () displayMain.x = displayMain.x + global_move_x; finalLa funció moveTwo mou les dues imatges a la dreta en un 20% de l'amplada de la pantalla. Tanmateix, en lloc de moure cada grup individualment, utilitzarem el grup displayMain per moure'ls tots dos alhora. Aquest és un gran exemple de com es pot utilitzar un grup de visualització que conté diversos grups de visualització per manipular molts gràfics alhora.
setupScreen (); timer.performWithDelay (1000, displayLayer); Timer.performWithDelay (2000, moveOne); timer.performWithDelay (3000, moveTwo);Aquest últim bit de codi demostra el que passa quan executem aquestes funcions. Utilitzarem la funció timer.performWithDelay per disparar les funcions cada segon després d'iniciar l'aplicació. Si no esteu familiaritzat amb aquesta funció, la primera variable és el temps de retard expressat en mil·lisegons i el segon és la funció que volem executar després d'aquest retard.
Quan executeu l'aplicació, heu de tenir image2.png a sobre d'image1.png. La funció ScreenLayer s'activarà i portarà image1.png cap a la part frontal. La funció moveOne mourà image2.png des de sota image1.png, i la funció moveTwo activarà l'última vegada, movent ambdues imatges al mateix temps.
És important recordar que cadascun d'aquests grups podria tenir dotzenes d'imatges en ells. I igual que la funció moveTwo mou totes dues imatges amb una línia de codi, totes les imatges dins d'un grup prendran les ordres donades al grup.
Tècnicament, el grup displayMain podria tenir tant els grups de visualització com les imatges que hi figuren. Tanmateix, és una bona pràctica permetre que alguns grups com displayMain actuen com a contenidors per a altres grups sense cap imatge per crear una millor organització.
Aquest tutorial fa ús de l'objecte de visualització. Obteniu més informació sobre l'objecte de visualització.