Cum să plasați stratul, mutați și aduceți graficul în față

Utilizarea setului SDK Corona pentru a manipula grafica

Componenta cheie a creării, manipulării și gestionării graficelor în SDK Corona este obiectul de afișare. Nu numai că acest obiect poate fi folosit pentru a afișa o imagine dintr-un fișier, poate la fel de important, vă permite să grupați imaginile împreună. Acest lucru vă permite să mutați un întreg set de elemente grafice în jurul ecranului și să plasați unul pe celălalt grafic.

Acest tutorial vă va învăța cum se utilizează grupurile de afișare pentru a organiza obiectele grafice din proiectul dvs. Acest lucru va fi demonstrat prin crearea a două straturi diferite, una reprezentând ecranul normal și altul reprezentând un strat modal pe care să îl plasați pe acesta. În plus față de plasarea graficelor, vom folosi și obiectul de tranziție pentru a muta întregul grup modal.

Cum să vă comercializați aplicația

Notă: Pentru a urmări împreună cu acest tutorial, veți avea nevoie de două imagini: image1.png și image2.png. Acestea pot fi orice imagini pe care le alegeți, dar tutorialul va funcționa cel mai bine dacă aveți imagini de aproximativ 100 de pixeli la 100 de pixeli. Acest lucru vă va permite să vedeți cu ușurință ce se întâmplă cu imaginile.

Pentru a începe, vom deschide un nou fișier numit main.lua și vom începe să construim codul nostru:

displayMain = display.newGroup (); displayFirst = display.newGroup (); displaySecond = display.newGroup (); global_move_x = display.contentWidth / 5;

Această secțiune de coduri stabilește biblioteca noastră ui și declară prin intermediul grupurilor de afișare: displayMain, displayFirst și displaySecond. Vom folosi aceste elemente pentru a ne stratifica grafica si apoi pentru a le muta. Variabila global_move_x este setată la 20% din lățimea afișajului astfel încât să vedem mișcarea.

funcția setupScreen () displayMain: inserați (displayFirst); displayMain: inserare (displaySecond); displayFirst: toFront (); displaySecond: toFront (); fundal local = display.newImage ("image1.png", 0,0); displayFirst: inserare (background); fundal local = display.newImage ("image2.png", 0,0); displaySecond: inserare (background); Sfârşit

Funcția setupScreen demonstrează modul de adăugare a grupurilor de afișare în grupul principal de afișare. De asemenea, folosim funcția toFront () pentru a seta diferitele straturi grafice, cu stratul pe care îl dorim în partea superioară a tuturor timpurilor declarate ultime.

În acest exemplu, nu este cu adevărat necesar să mutați displayFirst în față, deoarece implicit va fi sub grupul de afișare secundară, dar este bine să obțineți obișnuința de a întări în mod explicit fiecare grup de afișare. Majoritatea proiectelor vor avea mai mult de două straturi.

De asemenea, am adăugat o imagine pentru fiecare grup. Când pornim aplicația, cea de-a doua imagine trebuie să se afle deasupra primei imagini.

funcția screenLayer () displayFirst: toFront (); Sfârşit

Ne-am stratificat deja grafica cu grupul de afișare al doilea în partea de sus a grupului de afișare prima. Această funcție se va deplasa afișează prima în față.

funcția moveOne () displaySecond.x = displaySecond.x + global_move_x; Sfârşit

Funcția moveOne va muta a doua imagine spre dreapta cu 20% din lățimea ecranului. Când numim această funcție, grupul de afișare al doilea se va afla în spatele grupului de afișare Prima.

funcția moveTwo () displayMain.x = displayMain.x + global_move_x; Sfârşit

Funcția moveTwo va muta ambele imagini spre dreapta cu 20% din lățimea ecranului. Cu toate acestea, în loc să mișcăm fiecare grup individual, vom folosi grupul displayMain pentru a le mișca pe ambele în același timp. Acesta este un exemplu excelent pentru modul în care un grup de afișare care conține mai multe grupuri de afișare poate fi utilizat pentru a manipula mai multe grafice simultan.

setupScreen (); timer.performWithDelay (1000, screenLayer); timer.performWithDelay (2000, moveOne); timer.performWithDelay (3000, moveTwo);

Acest ultim cod de biți demonstrează ce se întâmplă când executăm aceste funcții. Vom folosi funcția timer.performWithDelay pentru a declanșa funcțiile în fiecare secundă după lansarea aplicației. Dacă nu sunteți familiarizați cu această funcție, prima variabilă este timpul de întârziere exprimat în milisecunde, iar al doilea este funcția pe care dorim să o executăm după această întârziere.

Când lansați aplicația, trebuie să aveți imagine2.png în partea de sus a imaginii.png. Funcția screenLayer se va declanșa și va aduce image1.png în față. Funcția moveOne va muta image2.png afară din imaginea 1.png, iar funcția moveTwo va porni ultima, mutând ambele imagini în același timp.

Cum de a repara un iPad lent

Este important să ne amintim că fiecare dintre aceste grupuri ar putea avea zeci de imagini în ele. Și la fel cum funcția moveTwo a mutat ambele imagini cu o singură linie de cod, toate imaginile dintr-un grup vor lua comenzile date grupului.

Din punct de vedere tehnic, grupul displayMain ar putea avea atât grupuri de afișare, cât și imagini conținute în acesta. Cu toate acestea, este o practică bună să permiteți unor grupuri precum displayMain să acționeze ca recipiente pentru alte grupuri fără imagini pentru a crea o organizare mai bună.

Acest tutorial utilizează obiectul afișajului. Aflați mai multe despre obiectul afișat.

Cum să începeți dezvoltarea aplicațiilor iPad