Share
Procesarea este una dintre cele mai puternice biblioteci disponibile astăzi pentru a crea operele de artă algoritmică vizuale, atât 2D cât și 3D. Acesta este open source, bazat pe Java, și vine cu o mare varietate de funcții orientate spre a face desen și pictura cu cod atât distractiv și ușor.
Folosind biblioteca de bază a procesării în aplicațiile Android, poți să creezi grafice și animații de înaltă performanță fără a trebui să te ocupi de API-urile OpenGL sau Canvas de la Android. De obicei, nici măcar nu trebuie să vă deranjezi cu sarcini de nivel scăzut, cum ar fi gestionarea firelor, crearea de bucle de render sau menținerea ratelor cadrelor.
În acest tutorial, vă vom arăta cum să adăugați procesarea la o aplicație Android și vă vom prezenta câteva dintre cele mai utile funcții.
Procesarea vine cu propriul mediu de dezvoltare integrat, care poate fi folosit pentru a crea aplicații Android. Cu toate acestea, dacă sunteți deja dezvoltator de aplicații Android, sunt sigur că preferați să utilizați versiunea Android Studio. Deci, mergeți mai departe și descărcați cea mai recentă versiune a modului de procesare Android.
În fișierul ZIP pe care l-ați descărcat, veți găsi un fișier numit processing-core.zip. Extrageți-l și redenumiți-l procesare-core.jar utilizând linia de comandă sau exploratorul de fișiere al sistemului de operare.
În sfârșit, adăugați fișierul JAR ca fiind una dintre dependențele proiectului dvs. Android Studio plasându-l în interiorul aplicaţia ale modulului libs pliant.
Acum aveți tot ce aveți nevoie pentru a începe să utilizați procesarea.
Aproape toată funcționalitatea de bază a Procesului este disponibilă prin PApplet clasa, care în mod esențial servește ca o pânză pe care o puteți trage. Prin extinderea acesteia, veți avea acces ușor la toate metodele pe care le poate oferi.
val myCanvas = obiect: PApplet () // Mai mult cod aici
Pentru a configura pânza, trebuie să o înlocuiți (Setări) metodă. În interiorul metodei, puteți specifica două detalii de configurare importante: dimensiunile dorite ale panzei și dacă ar trebui să utilizeze motorul de randare 2D sau 3D. Pentru moment, să facem panza la fel de mare ca ecranul dispozitivului și să folosim motorul de randare 2D implicit. Pentru a face acest lucru, puteți apela ecran complet() metoda de scurtături.
suprascrie setările distractive () fullScreen ()
(Setări) este o metodă specială care este necesară numai atunci când nu utilizați propriul IDE al procesorului. Vă sugerez să nu adăugați niciun cod suplimentar la acesta.
Dacă doriți să inițializați orice variabile sau să schimbați parametrii care se referă la desen - cum ar fi culoarea de fundal a panzei sau numărul de cadre pe care ar trebui să le afișeze pe secundă - ar trebui să utilizați înființat() în schimb. De exemplu, următorul cod vă arată cum să utilizați fundal() metodă pentru a schimba culoarea de fundal a pânzei la roșu:
Accentsconagua
suprascrie distractiv setup () background (Color.parseColor ("# FF8A80")) // Material Red A100Deoarece panza nu este încă o parte a unei activități, nu veți putea să o vedeți atunci când executați aplicația. Pentru a afișa pânza, trebuie mai întâi să creați un container pentru aceasta în fișierul XML de aspect al activității. A LinearLayout widget sau a FrameLayout widget-ul poate fi containerul.
A PApplet instanța nu poate fi adăugată direct în containerul pe care l-ați creat. Trebuie să o plasați în interiorul a PFragment instanță și apoi apelați setview () metodă a PFragment exemplu pentru al asocia cu containerul. Următorul cod vă arată cum să faceți acest lucru:
// Plasați pânza în interiorul fragmentului val myFragment = PFragment (myCanvas) // Afișați fragmentul myFragment.setView (canvas_container, this)
În acest moment, dacă rulați aplicația, ar trebui să puteți vedea o pânză goală care să acopere întregul ecran al dispozitivului.
Acum că sunteți în stare să vedeți pânza, să începem desenul. Pentru a desena în interiorul pânzei, trebuie să ignorați a desena() metodă a PApplet subclasa pe care ați creat-o mai devreme.
suprascrie remiză distractivă () // Mai mult cod aici
S-ar putea să nu par imediat evident, dar Prelucrare, în mod implicit, încearcă să apeleze a desena() de câte ori de 60 ori în fiecare secundă, atâta timp cât panza este afișată. Asta inseamna ca poti sa creezi cu usurinta atat grafica, cat si animatia.
Procesarea are o varietate de metode intuitiv numite care vă permit să desenați primitive geometrice, cum ar fi puncte, linii, elipse și dreptunghiuri. De exemplu, RECT () metoda trage un dreptunghi, iar elipsă() metoda trage o elipsă. Amandoua RECT () și elipsă() metodele așteaptă argumente similare: coordonatele X și Y ale formei, lățimea ei și înălțimea acesteia.
Următorul cod vă arată cum să desenați un dreptunghi și o elipsă:
rect (100f, 100f, 500f, 300f) // Coltul din stânga sus este la elipsa (100,100) (350f, 650f, 500f, 400f) // Centrul este la (350,650)
Multe dintre metode sunt supraîncărcate, permițându-vă să modificați ușor formele de bază. De exemplu, prin trecerea unui al cincilea parametru la RECT () metoda, o rază de colț, puteți desena un dreptunghi rotunjit.
rect (100f, 900f, 500f, 300f, 100f) // Rază de colț de 100 de pixeli
Dacă rulați aplicația acum, ar trebui să vedeți ceva de genul:
Dacă doriți să modificați culoarea de margine a formei, puteți apela accident vascular cerebral() metodă și să treacă culoarea dorită ca argument. În mod similar, dacă doriți să umpleți formele cu o anumită culoare, puteți apela completati() metodă. Ambele metode ar trebui să fie chemate înainte de a trage de fapt forma.
Următorul cod trage un triunghi albastru cu un contur verde:
(100F, 1600f, 300f, 1300f, 500f, 1600f) (300)
Dacă rulați aplicația acum, veți putea vedea triunghiul albastru, dar veți observa că orice altă formă a devenit albastră.
Dacă motivul nu este deja evident pentru dvs., amintiți-vă că a desena() metoda se numește repetat. Aceasta înseamnă că orice parametru de configurație pe care îl modificați în timpul unui ciclu de desen va avea un efect asupra ciclurilor de desenare ulterioare. Deci, pentru a vă asigura că toate formele dvs. sunt desenate cu culorile potrivite, este o idee bună să specificați întotdeauna în mod explicit culoarea fiecărei forme pe care o desenați, chiar înainte de ao desena.
De exemplu, prin adăugarea următorului cod la începutul a desena() , puteți face din nou celelalte forme albe.
// Setați umplerea și cursa în alb și negru // înainte de a desena plimbați dreptunghiurile și elipsele (Color.BLACK) (Color.WHITE)
În acest moment, panza va arăta astfel:
Cu procesarea, manipularea evenimentelor touch este extrem de ușoară. Nu aveți nevoie de niciun manipulator de evenimente. Tot ce trebuie să faceți este să verificați dacă o variabilă booleană este denumită mousePressed este adevărat să știți când utilizatorul atinge ecranul. După ce confirmați faptul că utilizatorul atinge ecranul, puteți utiliza funcția mouseX și mousey variabile pentru a determina coordonatele X și Y ale atingerii.
De exemplu, următorul cod desenează un nou dreptunghi ori de câte ori utilizatorul atinge pânza.
// Verificați dacă utilizatorul atinge pânza în cazul în care (mousePress) // Specificați umplerea culorilor și umplerea culorilor (Color.RED) (Color.RED) , 100f, 100f)
Dacă rulați acum aplicația dvs. și glisați degetul pe ecran, ar trebui să vedeți o mulțime de dreptunghiuri galbene fiind trase.
Înainte de a merge mai departe, iată un sfat rapid: dacă în orice moment doriți să ștergeți pânza, puteți să apelați pur și simplu fundal() din nou.
fundal (Color.parseColor ("# FF8A80")) // Material Roșu A100Numai până acum puteți ajunge cu simple primitive. Dacă sunteți interesat să creați o lucrare complicată și complexă, probabil veți avea nevoie de acces la pixelii individuali ai pânzei.
Apelând loadPixels () , puteți încărca culorile tuturor pixelilor panzei într-un tabel numit pixeli. Prin modificarea conținutului matricei, puteți modifica foarte eficient conținutul panzei. În sfârșit, odată ce ați terminat modificarea matricei, trebuie să vă amintiți să apelați updatePixels () metoda de a face noul set de pixeli.
Rețineți că pixeli matricea este o matrice unidimensională, întregă a cărei dimensiune este egală cu produsul lățimii și înălțimii panzei. Deoarece panza este bidimensională, convertirea coordonatelor X și Y ale unui pixel într-un index valid al matricei implică utilizarea următoarei formule:
// index = xCoordonate + yCoordonate * widthOfCanvas
Următorul exemplu de cod, care stabilește culoarea fiecărui pixel al pânzei pe baza coordonatelor X și Y, vă va ajuta să înțelegeți mai bine cum să utilizați pixeli matrice:
suprascrie distracție () loadPixels () // Load array // loop prin toate coordonatele valide pentru (y în 0 ... height - 1) pentru (x în 0 ... lățime - 1) // Calculați indexul index index = x + x * lățime // Actualizează pixelul la index cu un nou pixel color [index] = Color.rgb (x% 255, y% 255, (x * y)% 255) )
Color.rgb () metoda pe care o vedeți mai sus convertește valorile individuale roșii, verzi și albastre la un număr întreg care reprezintă o valoare a unei singure culori înțelese de cadrul de procesare. Simțiți-vă liber să modificați argumentele pe care le transmiteți, dar asigurați-vă că acestea sunt întotdeauna în intervalul 0-255.
Dacă alegeți să executați codul fără modificări, ar trebui să vedeți un model care arată astfel:
Acum știți cum să creați grafică 2D utilizând limba de procesare. Odată cu aptitudinile pe care le-ați învățat astăzi, nu numai că puteți face aplicațiile Android mai atrăgătoare, ci și să creați jocuri de noutate de la zero. Ești limitat doar de creativitatea ta!
Pentru a afla mai multe despre procesarea, vă sugerăm să petreceți ceva timp în navigarea pe paginile de referință oficiale.
Și în timp ce sunteți aici, verificați câteva dintre celelalte postări ale noastre privind dezvoltarea aplicațiilor Android!
