FlashPunk UI komponenter: Advanced Graphics, Ekstra Skins og polske
en
Del
3
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen vil vi fullføre det vi startet i den første delen av denne UI med FlashPunk mini-serien. Vi vil lære hvordan du kan tilpasse grafikken av våre komponenter, og gjøre noen justeringer for å gjøre våre UI perfekt.
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot:
Pass på at du klikker alt for å se hvordan den reagerer
Del 1: Hvordan Draw
Trinn 1.1: Opprett din eksisterende prosjekt
Hvis du ikke allerede har det, må du huske å laste ned kildekoden fra del en. Åpne prosjektfilen i FlashDevelop (info her), og gjør deg klar til å oppgradere din UI
Trinn 1.2: Tegning Stuff
Det neste skrittet vi trenger å gjøre for å være i stand til utstrakt tilpasse grafikken siden av vår UI er lære å tegne grafikken ting direkte med kode. På momment vi trengte et bilde for hver stat i vår UI (knapp normal, knapp hover, avkrysnings normal umarkert, avkrysnings normal valgt, etc.), så vi trengte en stor mengde bilder. Nå, la oss si at du ønsker en annen farge for hver knapp, eller en annen form for hver enkelt, og valgt tilfeldig ... vi har ikke råd til å ha millioner av bilder: også arbeide for å gjøre dem, og de bruker for mye minne .
Men før du begynner å trekke komponentene selv, må vi først lære å tegne ting å bruke koden i FlashPunk
Trinn 1.3. Forberede en Drawing Test Verden
< p> Først av alt, trenger vi en ny verden for å teste Tegning ting. Opprett en ny World class, kalt DrawWorld, og fortelle Hoved å gå dit når du starter spillet
DrawWorld.as:.
Pakke {import net.flashpunk.World; public class DrawWorld strekker Verden {offentlig funksjon DrawWorld () {}}}
Trinn 1.4: Bruke FlashPunk Drawing utils
FlashPunk Engine har noen utils som lar oss trekke ting til skjermen eller til en BitmapData
Disse funksjonene er:. linje, linePlus, rect, rectPlus, sirkel, circlePlus og kurve (de andre som er vant til å trekke andre typer ting). De 'pluss' versjonene kommer med flere alternativer og gi bedre resultater (ved hjelp av antialiasing), men er mer CPU intensive
Ved hjelp av dem er enkelt.; styre Render metoden din World eller en Entity og kaller disse funksjonene, som dette overstyrt gjengi funksjon for vår DrawWorld, som trekker noen figurer:
styre offentlig funksjon render (): void {super.render (); Draw.line (10, 10, 100, 100, 0x00FF00); Draw.rectPlus (120, 120, 200, 200, 0x9999FF, 1, sann, 2, 10); Draw.circle (100, 100, 50, 0xff0000); Draw.curve (100, 100, 140, 90, 122, 122, 0x00FFFF, 1, 3); }
Trinn 1.5: Det er Slow
Problemet med denne metoden er, det er virkelig Hva vi skal gjøre i stedet er å skape en bitmapData å lagre våre tegninger, deretter trekke dem der en gang eller bare hver gang de endres. Da trenger vi bare å gjengi at bitmapData til skjermen ved hjelp copyPixels, som er en mye raskere måte å gjøre det ... eller vil vi legge til en Stamp, som er en FlashPunk grafikk som gjør nettopp det: tegne en bitmapData til skjermen . For å gjøre Tegn gjøre tegningen til en tilpasset bitmapData stedet for å bruke skjermen, kan vi bruke sin setTarget funksjon. Draw.resetTarget vil gjøre det trekke fremtidige kommandoer til skjermen igjen. Her er vår DrawWorld koden nå. Hvis du tester det, bør resultatet være nøyaktig den samme som før OK. Vi vet hvordan å trekke noen sirkler, linjer, firkanter, og så videre til skjermen og til en BitmapData nå. Saken er at jeg ønsker å lage en pen knapp, ikke en halt knapp laget av en enkel firkant og en sirkel! Det er derfor vi trenger avansert tegning. Avansert tegning er bare noen konsept jeg har gjort opp for å referere til bruker AS3 Drawing API direkte (du vet, når du tegner ved hjelp av grafikk av en Sprite, Shape, etc.) . Prosessen er i utgangspunktet: Først oppretter du en Sprite, slik at vi kan få en Graphics klasse. Deretter trekker vi det vi trenger for å sprite grafikk. Til slutt, gjør vi Sprite til en BitmapData. Ferdig! Ved hjelp av denne prosessen, kan vi trekke avanserte figurer og bruke avanserte fills, som å lage noen fantastiske utseende gradient knapper. Yay! Jeg kommer ikke til å forklare hver enkelt metode av Draw API, som forklarer det er ikke omfanget av denne opplæringen, men det er nok av ressurser på nettet hvis du ikke vet Slik fungerer det. The Drawing API brukes på Graphics klassen. Men du kan ikke lage en Graphics klasse on-the-fly, og du vil ikke være i stand til å "tegne" det hvor som helst. I stedet kan vi skape en Sprite og bruke sin grafikk eiendom for tegning. Så, for å bruke som Sprite som FlashPunk grafisk, vi bare gjøre det til en BitmapData Her er noen eksempelkode, hvor jeg tegner en gradiented rektangel. Resultat:. Vi er nå klar til å tegne nydelig knapper ... men vi kan gå den opp litt og gjøre dem ser enda bedre! For å gjøre det, på toppen av grafikken selv, kan vi legge til filtre for dem. Med Flash, kan vi legge til drop shadow filtre, gløden filtre, skrå filtre, og så videre, lett For å legge til filtre, trenger vi bare å fylle sprite filter array med våre filtre -., Eller hvis vi ønsker å bruke BitmapFilters, vi bruker bd.applyFilter () etter at vi har trukket sprite. La oss legge en indre glød filter og en skygge filter til vår rektangel, og også endre fargen på skjermen, slik at vi kan forhåndsvise det bedre. Koden her: Hvis du forhånds den gjeldende koden, vil du se filtrene se noe ... beskjæres La oss fikse det Først av alt ... hvorfor ser det beskjæres? I utgangspunktet er problemet vårt BitmapData er størrelsen på knappen, men skyggen er større enn knappen. Så, når gjengi sprite til bitmapdata, som skyggen passer ikke BitmapData, det blir beskåret. Den enkleste måten å løse det er rett og slett for å forstørre BitmapData. Vi vil også måtte gi sprite noen x og y offset, som skyggen er litt på toppen og til venstre for knappen også. Vi utlignet også stempelets x og y til negativ korreksjon av grafikktegning. På denne måten knappen koordinater (100, 50) stammer fra avrundet rektangel og ikke fra skyggen, og det er på samme sted som før For eksempel, her har du en pakke med AS3 filter oppsett, med utrolig resultater: Flash Effects Pack. Og en kul statisk forvrengning filter. Statisk Distortion Effect bruker DisplacementMapFilter Det er tusenvis flere av tutorials og effekter ved hjelp av flash-filtre og tegningen API spredt over hele nettet, som du kan bruke til din UI sett. Enda bedre: Hvis du har kunnskap, kan du lage disse fantastiske effekter selv Vi vil plassere dette hjelper funksjon i en base klasse alle elementene i brukergrensesnittet vil forlenges. La oss kalle det Component, plasser den i ui-mappen, og gjøre det forlenge Entity: Nå må vi endre våre ui klasser for å utvide dette i stedet for Entity. Vi trenger bare vil endre Button og TextInput, som Markerings strekker Button så det vil forlenge Component indirekte, og radiobutton strekker Markerings så det samme skjer Tar som base koden vi gjort for å trekke våre kule gradient-y-knappen, vil vi bygge dette helper funksjonen. Her er hvordan ting vil fungere: Component vil ha en beskyttet sprite og g-variabler. På denne måten kan du legge filtrene til Sprite og tegne ting på grafikk. De vil bli holdt i live for alltid, så det er din jobb å rense dem hvis du kommer til å trekke flere ting på samme komponent, og ødelegge dem helt når de ikke trengs lenger. Så, når du ringer denne funksjonen, vil det generere en BitmapData av den angitte størrelsen og tegne sprite til det. Da vil det returnere et stempel som inneholder som BitmapData, klar til bruk! Selv om det finnes allerede en grafisk og sprite egenskaper som kan være cleant og brukes flere ganger, hvis du virkelig trenger å bruke en annen sprite, funksjonen vil være i stand til å få det gjennom en parameter. Som standard vil parametrene peker på sprite medlem av klassen Vi vil ta en annen tilnærming for skinning nå. Base komponenter (Button, boksen, etc.) vil bare holde atferden i seg selv, uten at grafikken. Da kan vi utvide dem (til MenuButton, GameButton, MuteButton, etc.) for å inkludere spesifikk grafisk atferd. Så først av alt må vi fjerne grafisk gjengivelse av våre komponenter. Vi vil også gjøre spilleren innspill størrelsen på komponenter For knappen, først av alt må vi fjerne grafisk kreasjon, og variablene for det. Vi vil også erstatte etiketten: Tekst eiendom med en streng egenskap kalt teksten. . Og vi vil kreve en bredde og høyde for å sette hitbox Deretter fjerner vi renderGraphic funksjon og legg den i Component stedet. Vi tømme changeState funksjon, fordi det vil bli håndtert på hudverktøy klasser. Gjengi overstyring vil også bli fjernet, fordi vi ikke har en etikett til å gjengi. Så, etter oppdateringsfunksjonen, som vi ikke trenger å endre, er alt vi har denne: Vi kunne også legge til en lastState variabel, og sette den på changeState funksjon, i tilfelle våre skins trenger det. Husk, som lastState vil bli satt i changeState funksjon, da overstyrer det vil vi plassere den nye atferden først og gjøre den super samtale på slutten For den boksen, må vi fjerne changeState overstyring og all grafisk kreasjon i konstruktøren. For radioknappen, vil vi bare trenger å fjerne grafisk kreasjon i konstruktøren. . Vi vil også legge til bredde- og høydeparametre på begge klasser Ny Checkbox: Ny radiobutton: For skriving, er alt vi trenger å fjerne textGraphic eiendom, og den ble etablert. Vi vil også legge til en onFocus funksjon slik at vi kan håndtere grafiske endringer for fokus på huden Alt er forberedt på å begynne å bygge våre skins! Men først må vi peke på vår TestWorld igjen. For å gjøre det, må du endre linje i hovedklassen som peker til DrawWorld, og gjøre det vise til TestWorld. Hvis du tester det nå, vil du se en tom verden. Det er å være forventet; vi fjernet all grafikken fra våre komponenter. Ikke bekymre deg, skjønt, vil vi begynne skinning nå Nå er vi 're kommer til å gå gjennom, trinn for trinn, hele prosessen med skinning en komponent, tar som et eksempel på knappen. Vi vil se de mest vanlige teknikkene du trenger når skinning dine egne komponenter: tegne grafikken, og legger til noen fancy animasjoner, noen kule lydeffekter, partikkel eye-candy, og enda noen pixel-perfekt kollisjon teknikker og endre museikonet til et hånd når svever over komponenten. Dette bør i utgangspunktet forberede deg til å være i stand til å flå alle komponenter du vil med din egen stil og uten problem. Vi vil da bruke kunnskapen vi har fått med knappen for å flå boksen og radioknappen, vil vi lære å flå en mer kompleks og annen knapp som skriving, og så får vi bygge en ekstra komponent og huden det. Først av alt vil vi gjøre en knapp viser normal grafikk. Vi vil bruke den samme kule grafikken vi brukt i Draw World. Så, i utgangspunktet, kopierer vi hva vi brukte der og da kaller drawStamp funksjon for å gjøre Sprite bli forvandlet til et stempel, og vi vil sette den til knappen vår grafiske. Før det, men vi trenger å faktisk ha en knapp! Opprett en blå mappe inne i src mappen. Det er der vi skal plassere alle våre flådd komponenter. Vi vil gjøre dem blå, som du kan gjette av navnet. Dette er bare for oss å holde ting organisert. I spillet ditt, vil du sannsynligvis ønske å sette forskjellige mapper med forskjellige skins i din ui mappe, og kaller dem noe sånt menyen, spill, etc. Deretter foreta en BLÅ klasse som strekker Button i det blå mappe: Nå skal vi plassere tegningen koden i konstruktøren: For å teste det, må vi opprette knappen i TestWorld. Så, kommentere eller fjerne alle komponenter laget der, og plassere en ny BLÅ i stedet. Også endre bakgrunnsfargen til en lettere en. Her er min TestWorld begynne funksjon: Hvis du tester prosjektet, vil du se knappene blir trukket! Men de alle er av samme størrelse, selv om vi angitt fettet knappen for å bli veldig stor. La oss gi knappen litt kake Først av alt, jeg har lyst til å flytte funksjonen som trekker på knappen grafiske inn en hjelper funksjon av BLÅ. Holder ting renere Alt vi gjorde er å flytte knappen uavgjort ting fra konstruktøren til en hjelper funksjon. Dette hjelper funksjonen returnerer Stamp, og ber om en bredde og høyde. Vi setter vår grafisk til Stamp returnert. Nå må vi gjøre det faktisk bruke bredden og høyden oppgitt. Alle de endringene vi trenger å gjøre er i matrisen gradient boksen, runde rect tegning og i stempel skapelsen. Stempelet opprettelse må ha en større størrelse, på grunn av filtrene. Her er den endelige koden: Og her er resultatet! De gjør ikke noe når du klikker på dem, men de er faktisk knapper La oss gjøre vårt knappen litt bedre ved å legge til en grense og et gjenskinn av den. Legge til en kantlinje er veldig enkelt. Vi kunne gjøre to ting: bruke en linjestil til knappe grafikk før tegning runden rect, eller bruke et filter. Den tidligere ville gjøre vår knappen ser rart, men, som den indre gløden vil også dekke grensen, så la oss gå for filteret tilnærming. Selv om det er ingen spesifikk BorderFilter i Flash, effekten kan enkelt oppnås med en glød filter som har høy styrke og lav uskarphet. Vi vil legge dette filteret mellom gløden filter og skyggen filter, som dette: Den gjenskinn vil være litt mer komplisert, men vil introdusere oss til et nytt konsept vil du sannsynligvis trenger for dine egne komponenter: flere grafikk. Per nå bare består huden av et enkelt grafisk. Men hva hvis vi må legge mer til det, som en refleks Vi kan ta to tilnærminger:? Ved hjelp av en Graphiclist, eller ved hjelp av renderGraphic fungere våre komponenter har. Vi vil bruke den renderGraphic funksjon fordi vår knappen grafisk vil endre for hover funksjon, mens blende vil forbli den samme. På denne måten har vi ikke å bry oppdatere graphiclist. Hvis du vil tegne blende, er alt vi har å gjøre tegne en semi-transparent stor hvit ellipse, dekker knappen. Så, for å unngå blending dekker alt i verden, kan vi maskere blende sprite hjelp knappen vår grafiske. Her er koden: Og gjengivelsen: Her er sluttresultatet. Vakkert er det ikke For å gjøre hover grafisk, vil vi bruke den samme drawButton funksjon, men vi vil gjøre knappen rød- orangish. For å gjøre det, må vi be om noen fargeparametere på at funksjonen Nå må våre vanlige grafiske samme farger For å få normal /hover bryteren, vil vi lagre hvert grafisk og gjøre korrespondent bryteren i changeState funksjonen. Så først, la oss gjøre en variabel for hvert grafisk og befolke det: Nå bytter vi til korrespondent grafikken på changeState funksjon: Og her er resultatet! Til slutt, interaktive knapper! (... som ikke gjør noe) La oss si at vi ønsker å legge til en tween for hover grafisk, i stedet for å endre grafikken umiddelbart på hover . For å kunne gjøre det, må vi gjøre en endring først. Som å lage en ny stempel og en ny BitmapData hver ramme ville være en sløsing med ressurser, vil vi tilpasse drawButton funksjon for å trekke til en gitt BitmapData stedet. Deretter vil vi bare bruke det BitmapData for en permanent Stamp i vår knappen Nå skaper vi Stamp som vil beholde det. Først vil vi fjerne de aktuelle stemplene vi har fått for de enkelte statene, og bruke denne i stedet Det var det.
treg. Vi tegner de samme tingene om og om igjen, uten grunn, til skjermen. Dette ville være OK hvis ting var i endring hver ramme, men hvis de ikke er det, er det en fullstendig sløsing med ressurser.
pakke {import flash.display.BitmapData.; import net.flashpunk.graphics.Stamp; import net.flashpunk.utils.Draw; import net.flashpunk.World; public class DrawWorld strekker Verden {styre offentlig funksjon begynne (): void {super.begin (); Var bilde: BitmapData = nye BitmapData (300, 300, sant, 0); Draw.setTarget (bildet); Draw.line (10, 10, 100, 100, 0x00FF00); Draw.rectPlus (120, 120, 200, 200, 0x9999FF, 0,5, sann, 2, 10); Draw.circle (100, 100, 50, 0xff0000); Draw.curve (100, 100, 140, 90, 122, 122, 0x00FFFF, 1, 3); addGraphic (nytt stempel (bilde)); }}}
Trinn 1.6: Avansert Tegning
Pakke {import flash.display.BitmapData; import flash.display.Graphics; import flash.display.Sprite; import flash.geom.Matrix; import net.flashpunk.FP; import net.flashpunk.graphics.Stamp; import net.flashpunk.World; public class DrawWorld strekker Verden {styre offentlig funksjon begynne (): void {super.begin (); Var sprite: Sprite = new Sprite; Var g: Grafikk = sprite.graphics; Var gradientMatrix: Matrix = new Matrix (); gradientMatrix.createGradientBox (200, 50, 270 * FP.RAD, 0, 0); g.beginGradientFill ("lineær", [0x6ACFFF, 0x005F8C], [1, 1], [0, 255], gradientMatrix); g.drawRoundRect (0, 0, 200, 50, 20); g.endFill (); Var bd: BitmapData = nye BitmapData (200, 50, sant, 0); bd.draw (sprite); addGraphic (ny Stamp (bd), 0, 100, 50); }}}
Lines 20-21 : Vi skaper en gradient matrise, som er nødvendig for å ha en gradient fyll. Vi gir det størrelsen på våre rektangel, og en rotasjon i radianer (vi konvertere 270 grader til radianer ved å multiplisere med FP.RAD). Som rektangelet vil bli trukket ut (0,0), satt vi tx og ty eiendommer til 0.
Lines 22-24: Vi tegner avrundet rect med gradient fylle å sprite grafikk
.
Lines 26-27: Vi skaper en BitmapData størrelsen på grafikken, og gjengi sprite til det
Linje 29:. Vi skaper et stempel, som gir våre BitmapData som har Sprite gjengitt, og legge til det til verden på (100, 50)
Trinn 1.7: Filter
styre offentlig funksjon begynne (): void {FP.screen.color = 0xD9F2FF; super.begin (); Var sprite: Sprite = new Sprite; Var g: Grafikk = sprite.graphics; Var gradientMatrix: Matrix = new Matrix (); gradientMatrix.createGradientBox (200, 50, 270 * FP.RAD, 0, 0); g.beginGradientFill ("lineær", [0x6ACFFF, 0x005F8C], [1, 1], [0, 255], gradientMatrix); g.drawRoundRect (0, 0, 200, 50, 20); g.endFill (); sprite.filters = [ny GlowFilter (0xFFFFFF, 1, 10, 10, 1, 3, sann), new DropShadowFilter (8, 45, 0, 0,8, 10, 10, 1, 3)]; Var bd: BitmapData = nye BitmapData (200, 50, sant, 0); bd.draw (sprite); addGraphic (ny Stamp (bd), 0, 100, 50); }
Trinn 1.8:.! Quick Fix for Filter Crop
//[...] Sprite.filters = [ny GlowFilter (0xFFFFFF, 1, 10, 10, 1, 3, sann), new DropShadowFilter (8, 45, 0, 0,8, 10, 10, 1, 3)]; Var bd: BitmapData = nye BitmapData (250, 100, sant, 0); Var m: Matrix = new Matrix; m.tx = 20; m.ty = 20; bd.draw (sprite, m); Var stempel: Stempel = new Stamp (bd); stamp.x = -m.tx; stamp.y = -m.ty; addGraphic (stempel, 0, 100, 50);
Trinn 1.9:.! Uendelige muligheter
< p> Som du kan se, å kombinere AS3 Drawing API og dets filtre kan føre til imponerende resultater. Mulighetene er uendelige, hvis du vet godt hvordan det fungerer, så kan det være verdt å lese noen ting om Drawing API og filtre.
Avsnitt 2:. Forbereder Vår UI
Trinn 2.1: refactoring UI Kode
< p> La oss gjennomføre alle de tegne ting til vår UI. Først av alt, så måtte skrive all koden som trengs for å gå fra en Sprite til en BitmapData for hvert element vi trenger å tegne er litt dumt, vil vi bare lage en hjelpefunksjon som vil gjøre det for oss hver gang vi trenger den. På denne måten har vi ikke gjenta kode om og om igjen.
pakke ui {import net.flashpunk.Entity; public class Komponent strekker Entity {public funksjon Komponent (x: Nummer = 0, y: Nummer = 0) {super (x, y); }}}
Trinn 2.2. Helper Funksjon
pakken ui {import flash.display.BitmapData.; import flash.display.DisplayObject; import flash.display.Graphics; import flash.display.Sprite; import flash.geom.Matrix; import net.flashpunk.Entity; import net.flashpunk.graphics.Stamp; public class Component strekker Entity {beskyttet Var sprite: Sprite; beskyttet Var g: Grafikk; offentlig funksjon Komponent (x: Nummer = 0, y: Nummer = 0) {super (x, y); sprite = new Sprite; g = sprite.graphics; _m = new Matrix (); } Private Var _m: Matrix; beskyttet funksjon drawStamp (bredde: Number, høyde: Antall, offsetX: Antall = 0, offsetY: Antall = 0, sprite: Displayobject = null): Stamp {if (sprite == null) sprite = this.sprite; Var bd: BitmapData = new BitmapData (bredde, høyde, sant, 0); _m.tx = offsetX; _m.ty = offsetY; bd.draw (sprite, _m); returnere nye Stamp (bd, -offsetX, -offsetY); }}}
Trinn 2.3: Fjerne grafikk fra UI
Trinn 2.3a. Fjerne grafikk fra Button
public class Button strekker Component {beskyttet konst NORMAL: int = 0; beskyttet konst HOVER: int = 1; beskyttet konst NED: int = 2; offentlig Var klikket: Boolean = false; beskyttet Var tekst: String; offentlig Var tilbakeringing: Function; offentlige Var params: Object; offentlig funksjon Button (x: Antall = 0, y: Number = 0, tekst: String = "", bredde: Number = 150, høyde: Number = 50, tilbakeringing: Function = null, params: Object = null) {super ( x, y); this.callback = tilbakeringing; this.params = params; this.text = tekst; setHitbox (bredde, høyde); } //[...]}
beskyttet funksjon changeState (state: int = 0): void {} beskyttet funksjon klikk (): void {if (tilbakeringing ! = null) {if (params = null) tilbakeringing (params); annet tilbakeringing (); }}
beskyttet Var lastState. Int = 0; beskyttet funksjon changeState (state: int = 0): void {lastState = tilstand; }
Trinn 2.3b: Fjerne Graphics Fra radiobutton
pakke ui {public class Markerings strekker Button {public Var sjekket: Boolean = false; offentlig funksjon Checkbox (x: Antall = 0, y: Number = 0, tekst: String = "", bredde: Number = 150, høyde: Number = 150, tilbakeringing: Funksjon = null, params: Object = null, sjekket: Boolean = false) {super (x, y, tekst, bredde, høyde, tilbakeringing, params); this.checked = sjekket; !} Ride beskyttet funksjon klikk (): void {sjekket = sjekket; if (! tilbakeringing = null) {if (params = null!) tilbakeringing (sjekket, params); annet tilbakeringing (sjekket); }}}}
pakke ui {public class radiobutton strekker Markerings {intern Var gruppe: RadioButtonGroup; offentlig funksjon radiobutton (x: Antall = 0, y: Number = 0, gruppe: RadioButtonGroup = null, tekst: String = "", bredde: Number = 150, høyde: Number = 50, params: Object = null, sjekket: Boolean = false) {super (x, y, tekst, bredde, høyde, null, params, sjekket); if (gruppe) group.add (denne); } Ride beskyttet funksjon klikk (): void {group.click (dette, params); } Overstyre offentlig funksjon fjernet (): void {super.removed (); group.remove (denne); }}}
Trinn 2.3c: Fjerne Graphics Fra TextInput
pakken ui {import flash.events.KeyboardEvent.; import net.flashpunk.FP; import net.flashpunk.utils.Input; import net.flashpunk.utils.Key; public class TextInput strekker Component {beskyttet Var _text: String = ""; beskyttet Var linjer: Boolean = false; public static Var fokus: TextInput; private Var _focused: Boolean = false; offentlig funksjon TextInput (x: Nummer = 0, y: Nummer = 0, tekst: String = "", linjer: Boolean = false, bredde: Nummer = 150, høyde: Nummer = 30) {super (x, y); this.multiline = linjer; this.text = tekst; type = "uiTextInput"; setHitbox (bredde, høyde); } Overstyre offentlig funksjon lagt (): void {super.added (); FP.stage.addEventListener (KeyboardEvent.KEY_DOWN, onkeydown); } Beskyttet funksjon onkeydown (e: KeyboardEvent): void {if (! Verden = FP.world) tilbake; if (TextInput.focus = dette!) tilbake; if (e.keyCode == Key.BACKSPACE) text = _text.substr (0, _text.length - 1); else if (e.keyCode == Key.ENTER & & linjer) tekst + = "\\ n"; } Overstyre offentlig funksjon fjernet (): void {super.removed (); FP.stage.removeEventListener (KeyboardEvent.KEY_DOWN, onkeydown); } Beskyttet funksjon onFocus (fokusert: Boolean): void {} overstyre offentlig funksjon oppdateringen (): void {super.update (); if (TextInput.focus == denne) {if (_focused!) {onFocus (true); _focused = true; }} Else if (_focused) {onFocus (false); _focused = false; } If (Input.mousePressed) {if (collidePoint (x, y, world.mouseX, world.mouseY)) {TextInput.focus = dette; Input.keyString = ""; } Else if (world.collidePoint ("uiTextInput", world.mouseX, world.mouseY)!) TextInput.focus = null; } If (TextInput.focus == denne & &! Input.keyString = "") {tekst + = Input.keyString; Input.keyString = ""; }} Offentlig funksjon få tekst (): String {return _text; } Offentlig funksjon satt tekst (verdi: String): void {_text = verdi; }}}
Trinn 2.4: Forberede Test
Seksjon 3: Skinning en komponent
Trinn 3.1: Skinning Button
Trinn 3.2: Normal Grafisk
pakke blå {import ui.Button; public class BLÅ strekker Button {offentlig funksjon BLÅ (x: Antall = 0, y: Number = 0, tekst: String = "", bredde: Number = 150, høyde: Number = 50, tilbakeringing: Function = null, params: Object = null) {super (x, y, tekst, bredde, høyde, tilbakeringing, params); }}}
offentlig funksjon BLÅ (x: Antall = 0, y: Number = 0, tekst: String = "", bredde: Number = 150 , høyde: Number = 50, tilbakeringing: Function = null, params: Object = null) {super (x, y, tekst, bredde, høyde, tilbakeringing, params); Var gradientMatrix: Matrix = new Matrix (); gradientMatrix.createGradientBox (200, 50, 270 * FP.RAD, 0, 0); g.beginGradientFill ("lineær", [0x6ACFFF, 0x005F8C], [1, 1], [0, 255], gradientMatrix); g.drawRoundRect (0, 0, 200, 50, 20); g.endFill (); sprite.filters = [ny GlowFilter (0xFFFFFF, 1, 10, 10, 1, 3, sann), new DropShadowFilter (8, 45, 0, 0,8, 10, 10, 1, 3)]; grafisk = drawStamp (220, 70, 5, 5); }
styre offentlig funksjon begynne (): void {super.begin (); FP.screen.color = 0xD9F2FF; legge (ny BLÅ (200, 10, "Blue knappen!")); legge (ny BLÅ (20, 100, "Fat knapp", 500, 200)); }
Trinn 3.3:. Button Grafisk Størrelse
public class BLÅ strekker Button {offentlig funksjon BLÅ (x:. Antall = 0, y: Number = 0, tekst: String = "", bredde: Number = 150, høyde: Number = 50, tilbakeringing: Funksjon = null, params: Object = null) {super (x, y, tekst, bredde, høyde, tilbakeringing, params); grafisk = drawButton (bredde, høyde); } Beskyttet funksjon drawButton (bredde: Number, høyde: Number): Stamp {var gradientMatrix: Matrix = new Matrix (); gradientMatrix.createGradientBox (200, 50, 270 * FP.RAD, 0, 0); g.beginGradientFill ("lineær", [0x6ACFFF, 0x005F8C], [1, 1], [0, 255], gradientMatrix); g.drawRoundRect (0, 0, 200, 50, 20); g.endFill (); sprite.filters = [ny GlowFilter (0xFFFFFF, 1, 10, 10, 1, 3, sann), new DropShadowFilter (8, 45, 0, 0,8, 10, 10, 1, 3)]; returnere drawStamp (220, 70, 5, 5); }}
beskyttet funksjon drawButton (bredde: Number, høyde: Number): Stamp {var gradientMatrix: Matrix = new Matrix (); gradientMatrix.createGradientBox (bredde, høyde, 270 * FP.RAD, 0, 0); g.beginGradientFill ("lineær", [0x6ACFFF, 0x005F8C], [1, 1], [0, 255], gradientMatrix); g.drawRoundRect (0, 0, bredde, høyde, 20); g.endFill (); sprite.filters = [ny GlowFilter (0xFFFFFF, 1, 10, 10, 1, 3, sann), new DropShadowFilter (8, 45, 0, 0,8, 10, 10, 1, 3)]; returnere drawStamp (bredde + 20, + 20 høyde, 5, 5); }
Trinn 3.4: Gjenskinn og Border
beskyttet funksjon drawButton (bredde: Number, høyde: Number): Stamp {var gradientMatrix: Matrix = new Matrix (); gradientMatrix.createGradientBox (bredde, høyde, 270 * FP.RAD, 0, 0); g.beginGradientFill ("lineær", [0x6ACFFF, 0x005F8C], [1, 1], [0, 255], gradientMatrix); g.drawRoundRect (0, 0, bredde, høyde, 20); g.endFill (); sprite.filters = [ny GlowFilter (0xFFFFFF, 1, 10, 10, 1, 3, sant), ny GlowFilter (0x00456A, 0,6, 2, 2, 6, 2), ny DropShadowFilter (8, 45, 0, 0.8, 10, 10, 1, 3)]; returnere drawStamp (bredde + 20, + 20 høyde, 5, 5); }
beskyttet Var blending: Stamp; offentlig funksjon BLÅ (x: Antall = 0, y: Number = 0, tekst: String = "", bredde: Number = 150, høyde: Number = 50, tilbakeringing: Function = null, params: Object = null) {super ( x, y, tekst, bredde, høyde, tilbakeringing, params); grafisk = drawButton (bredde, høyde); drawGlare (); } Beskyttet funksjon drawGlare (): void {var maske: Sprite = new Sprite; mask.graphics.copyFrom (g); sprite.filters = []; g.clear (); g.beginFill (0xFFFFFF, 0,25); g.drawEllipse (-Bredde * 0,25, -Høyde * 0,6, bredde * 1,5, høyde); sprite.mask = maske; blending = drawStamp (bredde, høyde * 0,4); }
styre offentlig funksjon render (): void {super.render (); renderGraphic (blending); }
Trinn 3.5:? Hover Grafisk
beskyttet funksjon drawButton. (Bredde: Number, høyde: Antall, topColor: uint, bottomColor: uint, borderColor: uint): Stamp {var gradientMatrix : Matrix = new Matrix (); gradientMatrix.createGradientBox (bredde, høyde, 270 * FP.RAD, 0, 0); g.beginGradientFill ("lineær", [topColor, bottomColor], [1, 1], [0, 255], gradientMatrix); g.drawRoundRect (0, 0, bredde, høyde, 20); g.endFill (); sprite.filters = [ny GlowFilter (0xFFFFFF, 1, 10, 10, 1, 3, sant), ny GlowFilter (borderColor, 0,6, 2, 2, 6, 2), ny DropShadowFilter (8, 45, 0, 0.8, 10, 10, 1, 3)]; returnere drawStamp (bredde + 20, + 20 høyde, 5, 5); }
offentlig funksjon BLÅ (x: Antall = 0, y: Number = 0, tekst: String = "", bredde: Number = 150, høyde: Number = 50, tilbakeringing: Function = null, params: Object = null) {super (x, y, tekst, bredde, høyde, tilbakeringing, params); grafisk = drawButton (bredde, høyde, 0x6ACFFF, 0x005F8C, 0x00456A); drawGlare (); }
beskyttet Var blending: Stamp; beskyttet Var normal: Stamp; beskyttet Var hover: Stamp; offentlig funksjon BLÅ (x: Antall = 0, y: Number = 0, tekst: String = "", bredde: Number = 150, høyde: Number = 50, tilbakeringing: Function = null, params: Object = null) {super ( x, y, tekst, bredde, høyde, tilbakeringing, params); normal = drawButton (bredde, høyde, 0x6ACFFF, 0x005F8C, 0x00456A); hover = drawButton (bredde, høyde, 0xFF8C66, 0xDD0500, 0x550000); grafisk = normal; drawGlare (); }
styre beskyttet funksjon changeState (state: int = 0): void {if (state == lastState) tilbake; bryteren (staten) {case NORMAL: grafisk = normal; gå i stykker; case HOVER: grafisk = hover; gå i stykker; } Super.changeState (stat); }
Trinn 3.6: Hover Animation Forberedelse
beskyttet funksjon drawButton. (Bitmap: BitmapData, bredde: Antall, høyde: Antall, topColor: uint, bottomColor: uint, borderColor: uint): void { g.clear (); Var gradientMatrix: Matrix = new Matrix (); gradientMatrix.createGradientBox (bredde, høyde, 270 * FP.RAD, 0, 0); g.beginGradientFill ("lineær", [topColor, bottomColor], [1, 1], [0, 255], gradientMatrix); g.drawRoundRect (0, 0, bredde, høyde, 20); g.endFill (); sprite.filters = [ny GlowFilter (0xFFFFFF, 1, 10, 10, 1, 3, sant), ny GlowFilter (borderColor, 0,6, 2, 2, 6, 2), ny DropShadowFilter (8, 45, 0, 0.8, 10, 10, 1, 3)]; _m.tx = 5; _m.ty = 5; bitmap.draw (sprite, _m); } Private Var _m: Matrix = new Matrix;
beskyttet Var buttonBmp: BitmapData;. beskyttet Var buttonGraphic: Stamp; gå i stykker; gå i stykker; gå i stykker; gå i stykker; gå i stykker; gå i stykker; gå i stykker; gå i stykker; gå i stykker; gå i stykker; gå i stykker; gå i stykker; gå i stykker; gå i stykker; }