Share
Behandling er en av de kraftigste biblioteker som er tilgjengelige i dag for å lage visuelle algoritmiske kunstverk, både 2D og 3D. Det er åpen kildekode, basert på Java, og leveres med et stort utvalg av funksjoner som er tilpasset å lage tegning og maleri med kode både morsomt og enkelt..
Ved å bruke Behandlings kjernebibliotek i Android-appene dine, kan du opprette grafikk og animasjoner med høy ytelse uten å måtte håndtere Android's OpenGL- eller Canvas APIs. Vanligvis trenger du ikke engang å bry deg med oppgaver på lavt nivå, for eksempel å administrere tråder, opprette gjengeløsninger eller opprettholde bildesatser.
I denne opplæringen vil jeg vise deg hvordan du legger til behandling i en Android-app og introduserer deg til noen av de mest nyttige funksjonene.
Behandlingen kommer med sitt eget integrerte utviklingsmiljø, som kan brukes til å lage Android-apper. Men hvis du allerede er en Android-apputvikler, er jeg sikker på at du foretrekker å bruke Android Studio i stedet. Så fortsett og last ned den nyeste versjonen av Behandlings Android-modus.
Innenfor ZIP-filen du lastet ned, finner du en fil som heter processing-core.zip. Trekk ut det og gi det til behandlingen-core.jar ved hjelp av kommandolinjen eller operativsystemets filutforsker.
Til slutt legger du til JAR-filen som en av avhengighetene til Android Studio-prosjektet ditt ved å plassere det i app modulens libs mappe.
Du har nå alt du trenger for å begynne å bruke behandling.
Nesten alle behandlings kjernefunksjoner er tilgjengelig via PApplet klassen, som i hovedsak tjener som et lerret du kan tegne på. Ved å utvide den får du enkel tilgang til alle metodene den har å tilby.
val myCanvas = objekt: PApplet () // Mer kode her
For å konfigurere lerretet, må du overstyre det innstillinger () metode. Innenfor metoden kan du angi to viktige konfigurasjonsdetaljer: de ønskede dimensjonene på lerretet og om det skal bruke 2D- eller 3D-renderingsmotoren. For nå, la oss lage lerretet så stort som enhetens skjerm og bruk standard 2D rendering motoren. For å gjøre det kan du ringe full skjerm() snarvei metode.
overstyr moroainnstillinger () fullScreen ()
De innstillinger () Metoden er en spesiell metode som bare trengs når du ikke bruker Processing egen IDE. Jeg foreslår at du ikke legger til noe mer kode for det.
Hvis du vil initialisere eventuelle variabler eller endre noen tegningsrelaterte parametere, for eksempel bakgrunnsfargen på lerretet eller antall bilder som skal vises per sekund, bør du bruke setup () metode istedenfor. For eksempel viser følgende kode hvordan du bruker bakgrunn() metode for å endre bakgrunnsfargen på lerretet til rødt:
Accentsconagua
overstyr moroa oppsett () bakgrunn (Color.parseColor ("# FF8A80")) // Material Red A100Fordi lerretet fortsatt ikke er en del av en aktivitet, vil du ikke kunne se den når du kjører appen din. For å vise lerretet må du først opprette en beholder for den inne i aktivitets layout XML-fil. EN LinearLayout widget eller a FrameLayout widget kan være beholderen.
EN PApplet forekomst kan ikke legges direkte til beholderen du opprettet. Du må plassere den inne i a PFragment Installer først og ring deretter setview () metode av PFragment eksempel å knytte det til beholderen. Følgende kode viser hvordan du gjør det:
// Plasser lerret inni fragment val myFragment = PFragment (myCanvas) // Vis fragmentet myFragment.setView (canvas_container, dette)
På dette tidspunktet, hvis du kjører appen, bør du kunne se et tomt lerret som dekker hele skjermen på enheten.
Nå som du kan se lerretet, la oss begynne å tegne. For å trekke inn i lerretet, må du overstyre tegne() metode av PApplet underklasse du opprettet tidligere.
overstyr det morsomme tegnet () // Mer kode her
Det ser kanskje ikke ut til å være åpenbart umiddelbart, men Behandling, som standard, forsøker å ringe tegne() Metode så ofte som 60 ganger hvert sekund, så lenge lerretet vises. Det betyr at du enkelt kan lage både grafikk og animasjoner med det.
Behandling har en rekke intuitivt navngitte metoder som lar deg tegne geometriske primitiver som punkter, linjer, ellipser og rektangler. For eksempel, rect () Metoden tegner et rektangel, og ellipse () Metoden tegner en ellipse. Begge rect () og ellipse () metoder forventer lignende argumenter: X- og Y-koordinatene for formen, dens bredde og dens høyde.
Følgende kode viser hvordan du tegner et rektangel og en ellipse:
rekt (100f, 100f, 500f, 300f) // Øvre venstre hjørne er på (100,100) ellipse (350f, 650f, 500f, 400f) // Center er på (350.650)
Mange av metodene er også overbelastet, slik at du kan endre de grunnleggende formene litt. For eksempel ved å sende en femte parameter til rect () Metode, en hjørne radius, kan du tegne et avrundet rektangel.
rekt (100f, 900f, 500f, 300f, 100f) // Hjørneradius på 100 piksler
Hvis du kjører appen din nå, bør du se noe slikt:
Hvis du vil endre kantfargene på figurene, kan du ringe til slag () metode og passere ønsket farge som et argument for det. På samme måte, hvis du vil fylle figurene med en bestemt farge, kan du ringe til fylle() metode. Begge metodene skal kalles før du faktisk tegner formen.
Følgende kode trekker en blå trekant med en grønn oversikt:
strekk (Color.GREEN) fill (Color.BLUE) trekant (100f, 1600f, 300f, 1300f, 500f, 1600f)
Hvis du kjører appen din nå, kan du se den blå trekant, men du vil også merke at hver annen form også har blitt blå.
Hvis årsaken ikke er åpenbar for deg allerede, husk at tegne() Metoden kalles gjentatte ganger. Det betyr at en hvilken som helst konfigurasjonsparameter du endrer under tegningssyklus, vil påvirke påfølgende tegningssykluser. For å sikre at alle figurene dine er tegnet med de riktige fargene, er det en god ide å alltid spesifisere fargen på hver figur du tegner, like før du tegner den.
For eksempel ved å legge til følgende kode i begynnelsen av tegne() Metode, du kan gjøre de andre formene hvite igjen.
// Sett fyll og strekk til hvitt og svart // før du tegner rektangler og ellipser slag (Color.BLACK) fylling (Color.WHITE)
På dette tidspunktet vil lerretet se slik ut:
Ved behandling er håndtering av berøringshendelser ekstremt lett. Du trenger ikke noen hendelseshåndterer overhodet. Alt du trenger å gjøre er å sjekke om en boolsk variabel heter mousePressed Det er sant å vite når brukeren berører skjermen. Når du har bekreftet at brukeren berører skjermen, kan du bruke mouseX og Mousey variabler for å bestemme X- og Y-koordinatene for berøringen.
For eksempel trekker følgende kode et nytt rektangel hvor brukeren berører lerretet.
// Sjekk om brukeren berører lerretet hvis (mousePressed) // Angi fyll og strekkfarger slag (Color.RED) fyll (Color.YELLOW) // Tegn rektangel rekt (mouseX.toFloat (), mouseY.toFloat () , 100f, 100f)
Hvis du kjører appen din nå og drar fingeren over skjermen, bør du se mange gule rektangler tegnet.
Før vi går videre, er det et raskt tips: Hvis du ønsker å rydde lerretet, kan du bare ringe bakgrunn() metode igjen.
bakgrunn (Color.parseColor ("# FF8A80")) // Material Red A100Det er bare så langt du kan få med enkle primitiver. Hvis du er interessert i å lage komplisert og komplisert kunstverk, trenger du sannsynligvis tilgang til de enkelte piksler av lerretet.
Ved å ringe loadPixels () Metode, du kan laste fargene på alle piksler av lerretet til en oppstilling som heter piksler. Ved å endre innholdet i matrisen, kan du veldig effektivt endre innholdet på lerretet. Til slutt, når du er ferdig med å endre matrisen, bør du huske å ringe updatePixels () metode for å gjengi det nye settet av piksler.
Legg merke til at piksler array er en en-dimensjonal, heltall array hvis størrelse er lik produktet av bredden og høyden på lerretet. Fordi lerretet er todimensjonalt, innebærer å konvertere X- og Y-koordinatene til en piksel til en gyldig indeks for arrayet bruk av følgende formel:
// index = xCoordinate + yCoordinate * widthOfCanvas
Følgende eksempelkode, som angir fargen på hver piksel av lerretet basert på X- og Y-koordinatene, bør hjelpe deg bedre å forstå hvordan du bruker piksler matrise:
overstyr moro tegne () loadPixels () // Load array // loop gjennom alle gyldige koordinater for (y i 0 ... høyde - 1) for (x i 0 ... bredde - 1) // Beregn indeksval index = x + y * bredde // Oppdater piksel ved indeksen med en ny fargepiksler [index] = Color.rgb (x% 255, y% 255, (x * y)% 255) // Render piksler med nye farger updatePixels )
De Color.rgb () Metoden du ser ovenfor konverterer individuelle røde, grønne og blå verdier til et heltall som representerer en enkelt fargeverdi som behandlingsrammen forstår. Du er velkommen til å endre argumenter du sender til den, men sørg for at de alltid ligger innenfor området 0 til 255.
Hvis du velger å kjøre koden uten noen endringer, bør du se et mønster som ser slik ut:
Du vet nå hvordan du lager 2D-grafikk ved hjelp av behandlingsspråket. Med ferdighetene du lærte i dag, kan du ikke bare gjøre Android-appene dine mer attraktive, men også skape fullverdige spill fra bunnen av. Du er begrenset bare av din kreativitet!
For å lære mer om behandling, foreslår jeg at du bruker litt tid på å bla gjennom de offisielle referansessidene.
Og mens du er her, sjekk ut noen av våre andre innlegg på Android app utvikling!
