How lage UI komponenter for FlashPunk Games
Del
Del
8
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Det er ikke lett å lage UI side av spillet med FlashPunk, da det ikke inneholder noen UI komponenter som knapper eller tekstfelt som standard. Dette er ikke en begrensning, men; det betyr bare at du er helt gratis å opprette UI akkurat som du vil. Men du trenger å vite hvordan du gjør det først! Denne opplæringen vil lære deg hvordan å bygge noen custom UI komponenter, og viser deg de forskjellige måtene du kan tilpasse dem til akkurat passe stilen av spillet.
Forhåndsvisning Endelig resultat
La oss ta en titt på det endelige resultatet vi skal jobbe mot:
Trinn 1: Innledning
Mange FlashPunk brukere har en tendens til å ha problemer med UI side av deres spill. Det finnes ingen "enkel" måte å lage knapper og andre interactible-elementer som tekstfelt eller boksene, for eksempel i FlashPunk. Ingen Button klasse.
Det kan virke av en begrensning, ja, og mange nykommere synes det er litt forvirrende i begynnelsen ... men det er en grunn bak det. Spill, hver og en av dem, har en tendens til å ha et tilpasset brukergrensesnitt unik for seg selv, som design er relatert til mekanikk eller temaet for selve spillet. Du vil ikke se noen god kamp (generelt sett) som har standardvindusknappene for sine kontroller!
Vi kan argumentere for at, i dette tilfellet, kan det være noen klasser providen med bare-bones av funksjonalitet, til det minimum som kreves for enkelte knappene fungerer, og la den grafiske siden til brukeren ... ja, det er sant ... men generalisering vi måtte bruke i disse klassene vil være enten for stor og forvirrende eller for spesifikke og ikke costumizable nok. (tro meg, jeg var ansvarlig for semi-mislykket semi-arbeider Punk.UI prosjektet.) Vi vil lære å kode egne komponenter i stedet!
Så hva denne opplæringen skal vise deg er hvordan å bygge dine egne UI elementer for spillet i FlashPunk, gi dem atferd, og viser noen triks for å gjøre sine grafiske delen med de mest brukte teknikkene ... men husk at hver av dine spill vil trenge en annen UI grafisk-klok!
Som opplæringen er virkelig lang, det er blitt delt inn i flere deler. Denne første delen vil lære deg hvordan å bygge hver komponent, uten eye-candy og costumization. Vi vil innføre disse senere.
For å kode eksempelet SWF med vår UI, vi skal bruke FlashPunk, da dette er en FlashPunk opplæringen, og FlashDevelop for IDE. Hvis du føler deg mer komfortabel med en annen IDE, som FlashBuilder, står du fritt til å bruke det, bare tilpasse bestemte deler av denne opplæringen.
Forrige kunnskap om FlashPunk er nødvendig for å følge denne opplæringen. Dette er ikke en generell FlashPunk tutorial, er dette en UI opplæringen ved hjelp FlashPunk. Hvis du ikke vet FlashPunk, kan du ta en titt på den innledende FlashPunk tutorials på Activetuts + og også sjekke ut den offisielle FlashPunk tutorials
Trinn 2:. Opprett et nytt prosjekt
Åpne FlashDevelop og klikk Prosjekt > Nytt prosjekt for å åpne nye Project-vinduet
Velg Actionscript 3 >.; AS3 Project. For navnet på prosjektet, satt i "FlashPunk UI". For plassering, klikk og naviger til mappen du ønsker å lagre den i. La "lage katalog for prosjektet" boksen valgt, og klikk OK
Trinn 3:. Last ned den nyeste FlashPunk
Gå til den offisielle FlashPunk nettside, FlashPunk.net, og klikk på Last ned-knappen på navigasjonslinjen. Deretter klikker du på "Last ned FlashPunk" linken på toppen av siden. Det burde ta deg til GitHub nettsiden nedlasting. . Klikk på "Last ned .zip" -knappen (eller "Last ned .tar.gz" hvis du foretrekker at format) og lagre filen et sted du vet
Trinn 4: Legg FlashPunk til Våre prosjekt
Nå som vi har lastet ned FlashPunk, må vi legge det til vårt prosjekt. For å gjøre dette, vil vi bare kopiere "net" mappen fra FlashPunk zip til vår "src" -mappen i vårt prosjekt, som vanlig
Trinn 5:. Starte motoren
Vi må initial FlashPunk i vårt dokument klasse nå, så det tar kontroll over spillet vårt, som på hver FlashPunk prosjekt. Vi gjør det ved å gjøre vårt dokument klasse forlenge Engine klassen, og kaller super med de nødvendige parameterne. Vi vil gi vår søknad en størrelse på 550x400 piksler. Ikke glem å høyreklikke på prosjektet vårt, gå til Egenskaper og konfigurere dimensjonene til 550x400 piksler samt
pakke {import net.flashpunk.Engine.; public class Hoved strekker Engine {offentlig funksjon main (): void {super (550, 400); }}}
Trinn 6: Opprette Our World
Nå må vi lage en FlashPunk verden til å holde våre enheter. Vi vil plassere hver UI komponent vi skaper der, så vi kan teste dem. I en reell sak, ville hver av våre Meny States være en annen verden, så vel som selve spillet. Så vi vil skape en ny klasse som vil forlenge Verden Da vil vi fortelle vår Motor Det første vi skal bygge er vår Button komponent. Hver komponent vi kommer til å gjøre vil være en Entity, som det er den mest logiske steg for å gjøre noe i FlashPunk som vil leve i en verden. Først av alt, vi vil lage en ny mappe inne i " src "-mappen, for å holde ting litt organisert. Vi vil kalle denne mappen "ui", og vil holde alle våre komponenter. Deretter oppretter vi en klasse der heter Button, som vil forlenge Entity. Pakken blir ui, som det er inne i ui mappen Nå vil vi legge til en ny instans av denne Button klasse i vår verden, slik at vi kan se det fungerer ... Når vi er ferdig med det, som i øyeblikket er det en usynlig Entity. Så, legg dette i vår TestWorld klassen, og ikke glem å importere Button klassen bruker import ui.Button; For å gjøre vårt knappen synlig, vil det trenge en grafisk. Jeg har laget et bilde for vår Button, som du kan bruke fritt, men du kan også lage din egen grafisk hvis du vil: Lagre som "button.png" uten komma i en ny mappe som heter " gfx ", som ligger inne i en eiendeler mappe som vil være i roten av prosjektet (på samme nivå på src mappe). Nå må vi sette inn denne knappen grafikken i spillet vårt. For å gjøre dette, vil vi legge inn bildet og så fortelle FlashPunk å bruke det som vår grafikk. For å holde ting litt organisert, vil vi legge inn alt vi trenger i en ny klasse kalt eiendeler. Dette er hva jeg pleier å gjøre på alle mine prosjekter, og det fungerer som en sjarm! Så vi vil fortsette å skape en ny aktivaklasse, og legge den grafiske som en public static konstant, slik at vi får tilgang til den fra utsiden: Til slutt vil vi fortelle FlashPunk å bruke dette som den grafiske vår Button. Vi kan bruke det som et bilde eller som et stempel. Forskjellen er, bilde vil forbruke mer minne, men vil tillate oss å forvandle det grafiske, og Stamp vil forbruke mindre minne, men vil ikke tillate noen transformasjon i det hele tatt, med mindre de brukes manuelt direkte til BitmapData. Vi vil nå bruke et stempel, som vi ikke trenger å forandre på knappen ennå. . Legge denne til vår Button klassen, og ikke glem å importere Stamp Hvis du tester prosjektet nå, vil du se vår grafiske mot verden, men å klikke på det vil ikke gjøre noe. Vi vil legge til noen oppførsel nå For å gjøre en Entity svare på museklikk på FlashPunk, trenger vi bare å: kontrollere musen er over foretaket og se om musen ble sluppet denne rammen. Det andre trinnet er veldig enkelt, vi må bare sjekke verdien av mouseReleased variabel i Input klassen, men for den andre, må vi gjøre en kollisjon test mellom et punkt (mus koordinater), og enheten, og å gjøre det, vi må definere foretaket kollisjon. For øyeblikket vil vi bruke en hitbox, som det er det enkleste alternativet Så her er koden oppnå alt det vi sa, med en forklaring nedenfor. Noen av dere har kanskje lagt merke denne klassen ville prestere bedre hvis vi sjekket musen staten først og deretter sjekke kollisjonen, men som vi er nødt til å legge til hover grafikk, vi ville ha til å endre det tilbake til dette, så vi skal la det på denne måten. Hvis du teste spillet nå, bør det se ut dette, men med knapp grafisk: Akkurat nå er vår Button veldig kjedelig, og det ikke viser noen tegn til interaktivitet, bortsett fra sin tilbakeringing. Det er på tide å legge til noen grafikk for å vise ulike tilstander:. Normal, hover, og ned Først av alt, må vi lage forskjellige grafikk for hver, så la oss få jobbe! Du kan hente disse to jeg har gjort, eller rett og slett lage din egen. Sett dem i gfx mappe med navnene button_hover.png og button_down.png. Deretter vil vi legge dem i vår Eiendeler klassen. Nå må vi holde disse grafikk sted i vår -knappen, og bytte til den riktige når det trengs . Så vi vil opprette tre variabler å holde normal, den ned, og hover grafikk henholdsvis, og slå de grafiske egenskapene til hver av de tre som passer Før du foretar den grafiske atferd, vil vi gjøre noe annet. Vi trenger å holde styr på noen data som også vil løse et lite problem: hvis jeg trykker muse utenfor knappen, og deretter gå til knappen og slipper museknappen, vil den oppdage som et museklikk. Vi vil ikke ha det. Så vi vil skape en ny beskyttet boolsk kalt klikket, som vil bare fortelle oss om musen først ble presset over på knappen eller ikke anbefale beskyttet Var normal: Grafisk;. beskyttet Var hover: Grafisk; beskyttet Var ned: Grafisk; beskyttet Var klikket: Boolean = false; Da vil vi bruke følgende endringer på oppdateringsfunksjonen: først inne i kollisjon sjekk, hvis musa ble trykket denne rammen (Input.mousePressed) vi vil sette klikket boolsk å true . Deretter på sjekken for den frigjorte museknappen, vil vi også se etter klikket variabel, så vi vil bare oppdage en knapp klikk om musen ble trykket mens over det før. Endelig ute av kollisjonen sjekk, setter vi klikket til false når musen er utgitt For grafikken selv, må vi først tenkt oppførselen vi har i tankene. Når musen er over grafikken og det er ikke trykket, vil vi vise hover Inne på knappen kollisjon sjekken vi sjekker også om museknappen blir trykket i øyeblikket. Vi vil sjekke at du bruker klikket variabel, og ikke den Input.mouseDown variabel, fordi vi ønsker å være sikker på at vi viser trykket grafisk musen har blitt klikket mens over knappen, ikke når du klikker utenfor knappen og deretter dratt på toppen av det. I tilfelle musen blir trykket, vil vi vise ned I det andre paret av sjekker, når musen ikke er over knappen, sjekker vi først om musen har blitt klikket. Hvis det har, vil vi vise hover Her kan du se hvordan det skal se i øyeblikket, men med din egen grafikk i stedet. Hvis du tenker på det, er en avkrysnings egentlig ikke så forskjellig fra en knapp. Den eneste forskjell, bortsett fra den grafiske, er de også har en tilstand som avgjør om de er merket eller ikke. Faktisk en avkrysnings og en trykknapp - som er en knapp som holdes nede til du klikker på det igjen - er de samme Av den grunn er veldig lett å lage en avkrysningsboks hvis vi vet hvordan de skal lage. en knapp. Alt vi trenger å legge til en ekstra variabel som er slått på hvert klikk, og med et par ekstra kontroller på de grafiske endringer, der vi bestemmer hvilken versjon av grafikken for å vise:. Innsjekket eller ukontrollert en Jeg har også lyst til å lære deg noe ekstra som vi gjør av i boksen. For knappen, skapte vi grafikken i forskjellige filer, men hva hvis vi vil at alle statene i samme grafikk? Det er ganske enkelt, vi trenger bare å bruke clipRect eiendom bilde klassen, som vi vil vise når du tilordner våre avmerkingsboksen grafikk. Så, som boksene og knappene har så mange funksjoner, er det logisk at vi ønsker vår avkrysnings klasse å forlenge knappen klassen. Men, hvis vi gjorde det med den gjeldende koden, ville vi måtte erstatte hele oppdateringsfunksjonen til hensyns vår avkrysnings sjekket tilstanden på grafikk endringer. Dermed før du oppretter vår Markerings klassen, vil vi refactor vår Button klassen litt før, så ting er enklere og renere for oss For å være i stand til å sette inn sjekket betraktning når våre grafikk endres, er alt vi trenger å gjøre abstrakte grafikken endring. Så i stedet for å sette grafikken direkte i oppdateringsfunksjonen, vil vi ringe en annen funksjon som forteller hvilken tilstand vi ønsker, og at funksjonen vil gjøre selve grafikken bryteren. Funksjonen vi vil skape vil bli kalt changeState, og vil akseptere ett argument som et heltall, staten. 0 betyr normal, 1 betyr hover og 2 vil bety ned. Som vi kunne få litt forvirret og glemmer betydningen av disse tallene lett (vel, ikke i dette tilfellet, men denne teknikken kan være nyttig for deg i andre, mer kompliserte tilfeller), vil vi lage noen konstanter som vil holde dette verdier i stedet . Først oppretter vi disse konstanter på vår Button Klasse: Så vi erstatte alle de grafiske endringene å ringe vår ennå-å-være-laget funksjon: Til slutt vi lage funksjonen, ved hjelp av en bryter uttalelse med tre tilfeller: Nå er vi klare til å enkelt kode vår avkrysnings! Men først ... Som vi forklarte før, vil vi plassere alle avmerkingsboksen grafikk i en enkelt fil, slik at du kan se begge teknikker (separat filer eller samme filene) og velge hvilket du foretrekker Rekkefølgen av filen vil være som følger:. normal - hover - ned; den øverste raden vil være ukontrollert stater og den nederste vil være de sjekket stater. Du kan bruke din egen grafikk eller laste ned denne ene vi tilbyr. Ikke glem å lagre grafikk som checkbox.png inne i gfx-mappen. Nå skal vi legge den til vår Eiendeler klassen slik at vi kan bruke den. Til slutt vil vi lage vår Markerings klasse og oppsett variablene som inneholder grafikk. . Så, først vil vi skape avmerkingsboksen klassen i ui-mappen, og gjøre det utvide vår Button Deretter vil vi legge til tre flere variabler som inneholder sjekket grafikk. Ukontrollert grafikk vil være ved det normale, hover og ned variabler vi allerede har Og nå skal vi fylle dem, som bilder, slik at vi kan feste dem ved hjelp av clipRect variabel. Denne variabelen aksepterer en flash rektangel, som er en klasse med x, y, bredde og høyde egenskaper. Så, når bilde ser vi en clipRect, det vil beskjære seg selv ved hjelp av denne informasjonen. Det er hvordan det vil se ut i mitt tilfelle. Du må kanskje tilpasse verdiene, slik at de passer dine egne grafikk dimensjoner: Hvis du tar en titt på koden, kan du se at vi til slutt blir også tildele vår grafikken til normal tilstand, og endre størrelsen vår hitbox å matche avmerkingsboksen grafikk. Nå skal vi legge av i boksen inn i vår verden og se hvordan det ser ut! Legg dette i vår TestWorld klasse: Nå teste prosjektet ... hei, vent! Vår avkrysnings fungerer akkurat som en vanlig knapp, betyr det sjekker ikke og fjern seg selv! Vi har ikke lagt atferd ennå, det er det vi skal gjøre nå Først av alt, må vi opprette en offentlig boolean som vil holde sjekket tilstanden til vår Button. Det vil bli kalt ... oh, overraskelse! krysset av. Så ... Nå må vi slå denne variabelen hver gang vi klikker av i boksen. Den enkleste måten å gjøre dette er å overstyre klikk-funksjon, og slå den, så legg dette i vår Checkbox: Men, hvis vi teste prosjektet, av i boksen vil ikke endre ennå. Vi må gjøre en siste endring: foreta en sjekk når du stiller grafikken å endre den til den sjekket eller ukontrollert versjon. For å gjøre det, trenger vi bare å overstyre changeState funksjon vi refactored før: Så først sjekker vi sjekket eiendommen. Hvis det er sant, sjekker vi staten vi bare endret til, og sett den til vår tilsvar sjekket grafikk. Ellers, hvis avmerkingsboksen ikke er merket, kaller vi vår Button versjon av changeState, som rett og slett setter grafikken til ukontrollert tilstand. Ved å bruke super der, må vi skrive mindre kode å gjøre det samme problemet! Yay! Hvis vi teste prosjektet, kan vi se av i boksen fungerer nå. Det skal se slik ut, men med din egen grafikk: Hvis vi tenker over det, er praktisk talt det samme som en avkrysningsboks en alternativknapp. Den eneste forskjellen er, mens boksen er helt uavhengig fra de andre boksene, er en radiobutton del av en gruppe, og i denne gruppen, kan bare ett medlem kontrolleres på samme tid, så vi er nødt til å håndtere det. Så, i stedet for å gjøre radioknappen åpne og lukke seg, det vil si den gruppen det er behov for å bli sjekket, og konsernet vil fjerne avkryssing alle de andre radioknapper, og sjekk vår ... og hva som er i gruppen? I utgangspunktet vil radioknappen konsernet være en spesiell klasse med en Array (vel, i vårt tilfelle en AS3 Vector) som inneholder alle radioknapper som tilhører gruppen. Den vil også inneholde metoder for å legge til og fjerne knapper fra gruppen Først av alt, men vi vil gjøre grafikken for våre radioknapper ... Vi vil gjøre grafikken for radioknappen på samme måte som vi gjorde det for sjekkheftet. Du kan lage din egen costumized grafisk hvis du vil, men hvis ikke, kan du bruke dette. Lagre grafikk som "radiobutton.png" i gfx-mappen. Nå skal vi legge den til vår Eiendeler klassen slik at vi kan bruke den. Etter at vi skaper vår radiobutton klasse som vil forlenge radioknappen, og vi vil sette opp grafikken på samme måte som vi gjorde det før Det er på tide å gjøre radioknappen gruppen selv nå. Klassen vil holde alle radioknapper i en Vektor av radioknapper. Det vil også ha følgende metoder: legge til (), for å legge til en ny radioknappen, addList (), for å legge til flere radioknapper i ett trinn, fjern () for å fjerne en radioknapp, removeList (), tilsvarende addList (), men for å fjerne, og RemoveAll (), for å fjerne alle radioknappene fra gruppen samtidig. Det vil også ha en getAt () metoden, for å få en radio knapp ved indeksen, og en getIndex (), for å få indeksen på en knapp. Vi vil ikke bruke mye tid på å forklare disse metodene, som de er grunnleggende operasjoner for arrays. Så, når du oppretter en radiobutton, vil det be om en alternativknapp gruppe som parameter, og det vil bli lagt til automatisk der hvis tilgjengelig. Også når du fjerner radioknappen fra verden, det vil også bli fjernet fra sin gruppe. Til slutt, når den klikkes, det vil ikke gjøre noe av seg selv, men kaller en intern metode for gruppen, som vil bli kalt klikk (). Denne metoden vil fjern alle radioknappene og sjekke den som kalles metoden. Først av alt, skaper vi gruppen. Jeg har gitt noen kommentarer for å forklare et par ting, men som det er bare grunnleggende operasjoner med en rekke, vil jeg ikke forklare alt: Nå vil vi gjøre våre radioknapper be om en gruppe på konstruktøren, og legge seg på det når gitt: Til slutt vil vi legge knappene på verden, slik at vi kan teste dem. Vi vil legge til 3 knapper i en gruppe, og to i en annen Hvis du tester det nå, radioknappene vil fortsatt oppføre seg som normale boksene. Det er på tide å endre på det nå Først av alt må vi overstyre klikk funksjon av radioknappen, og i stedet for å kalle inn koden der er på kontrollboksen ved hjelp av super, vil vi kaller fremdeles-å-være-laget klikk funksjon av vår radiobutton gruppe ... oops! Hvordan skal vi kalle denne funksjonen, hvis vi ikke har fått en henvisning til gruppen? En enkel løsning vil være å sette en referanse fra gruppen gitt på konstruktøren men ... da vi ikke vil være i stand til å endre grupper, og alle metodene vi kan se i konsernet vil være ubrukelig. Nå legger vi dette på følgende metoder for radioknappen gruppen:
, heter TestWorld
, i vår "src" -mappen
pakke {import net.flashpunk.World.; public class TestWorld strekker Verden {offentlig funksjon TestWorld () {super (); }}}
klassen til å gå til vår TestWorld
ved oppstart ved å overstyre init
funksjon. ! Ikke glem å importere klassen FP fra net.flashpunk
styre offentlig funksjon init (): void {super.init (); FP.world = new TestWorld; }
Trinn 7: The Button Entity
pakke ui {import net.flashpunk.Entity.; public class Button strekker Entity {offentlig funksjon Button (x: Antall = 0, y: Number = 0) {super (x, y); }}}
styre offentlig funksjon begynne (): void {super.begin (); legge (ny Button (10, 10)); }
Trinn 8: Grafisk for Vår Button
pakke {public class Eiendeler {[Bygg (kilde = "../assets/gfx /button.png ")] public static konst BUTTON: Klasse; }}
offentlig funksjon Button (x: Antall = 0, y: Number = 0) {super (x, y); grafisk = new Stamp (Assets.BUTTON); }
Trinn 9: Legge Interaktivitet
Pakke ui {import net.flashpunk.Entity; import net.flashpunk.FP; import net.flashpunk.graphics.Stamp; import net.flashpunk.utils.Input; public class Button strekker Entity {offentlig funksjon Button (x: Antall = 0, y: Number = 0) {super (x, y); grafisk = new Stamp (Assets.BUTTON); setHitboxTo (grafisk); } Overstyre offentlig funksjon oppdateringen (): void {super.update (); if (collidePoint (x, y, world.mouseX, world.mouseY)) {if (Input.mouseReleased) klikk (); }} Beskyttet funksjon klikk (): void {FP.screen.color = Math.random () * 0xFFFFFF; spore ("klikk!"); }}}
Linje 22:. Vi sjekker om musen posisjon i den verden vi er kolliderer med foretaket
Linje 24:.. Hvis muse ble sluppet denne rammen, kaller vi klikkefunksjons
Lines 28-32: Denne koden vil bli utført når klikkes. Det vil spore et klikk meldingen og endre bakgrunnsfarge, så vi merker at knappen er trykket på.
Trinn 10: Hold markøren og Down Graphics
Button_hover.png
button_down.png
[ ,,,0],embed (kilde = "../assets/gfx/button.png")] public static konst BUTTON: Klasse; [Bygg (kilde = "../assets/gfx/button_down.png")] public static konst BUTTON_DOWN: Klasse; [Bygg (kilde = "../eiendeler /gfx /button_hover.png")] public static konst BUTTON_HOVER: Klasse;
beskyttet Var normal. Graphic; beskyttet Var hover: Grafisk; beskyttet Var ned: Grafisk; offentlig funksjon Button (x: Antall = 0, y: Number = 0) {super (x, y); normal = new Stamp (Assets.BUTTON); hover = new Stamp (Assets.BUTTON_HOVER); ned = new Stamp (Assets.BUTTON_DOWN); grafisk = normal; setHitboxTo (grafisk); }
Trinn 11: Løs et lite insekt
styre offentlig funksjon oppdatering (). Void {super.update (); if (collidePoint (x, y, world.mouseX, world.mouseY)) {if (Input.mousePressed) klikket = true; if (klikket & & Input.mouseReleased) klikk (); } If (Input.mouseReleased) klikket = false;}
Trinn 12: Tilordne Hover og Down Graphics
tilstand. Hvis musen er over grafikken og den er trykket, vil vi vise trykket
tilstand. Hvis brukeren trykker på knappen og, mens du holder museknappen nede, flytter musen ut av knappen kollisjon, vil vi vise hover
tilstand, imitere AS3 er Simple atferd. I alle andre tilfeller vil vi vise normal
staten
styre offentlig funksjon oppdatering (). Void {super.update (); if (collidePoint (x, y, world.mouseX, world.mouseY)) {if (Input.mousePressed) klikket = true; if (klikket) grafisk = ned; annet grafisk = hover; if (klikket & & Input.mouseReleased) klikk (); } Else {if (klikket) grafisk = hover; annet grafisk = normal; } If (Input.mouseReleased) klikket = false; }
staten, hvis ikke, hover
staten, fordi musen vil være over den knappen, men det vil ikke bli presset.
tilstand som vi sa før. Hvis ikke, normal
staten vil bli vist
Trinn 13: Avkrysnings
Trinn 14:. Refactoring Vår Button
beskyttet const NORMAL: int = 0; beskyttet konst HOVER: int = 1; beskyttet konst NED: int = 2;
styre offentlig funksjon oppdateringen (): void {super.update (); if (collidePoint (x, y, world.mouseX, world.mouseY)) {if (Input.mousePressed) klikket = true; if (klikket) changeState (NED); annet changeState (HOVER); if (klikket & & Input.mouseReleased) klikk (); } Else {if (klikket) changeState (HOVER); annet changeState (NORMAL); } If (Input.mouseReleased) klikket = false; }
beskyttet funksjon changeState (state: int = 0): void {switch (stat) {case NORMAL: grafisk = normal; gå i stykker; case HOVER: grafisk = hover; gå i stykker; case NED: grafisk = ned; gå i stykker; }}
Trinn 15: Markerings Graphics
[Bygg (kilde = ".. /assets/gfx/button.png ")] public static konst BUTTON: Klasse; [Bygg (kilde = "../assets/gfx/button_down.png")] public static konst BUTTON_DOWN: Klasse; [Bygg (kilde = "../assets/gfx/button_hover.png")] public static konst BUTTON_HOVER: Klasse; [Bygg (kilde = "../assets/gfx/checkbox.png")] public static konst CHECKBOX: Klasse;
pakke ui {public class Markerings strekker Button {offentlig funksjon Markerings (x: Antall = 0, y: Number = 0) { super (x, y); }}}
beskyttet Var normalChecked. Graphic; beskyttet Var hoverChecked: Grafisk; beskyttet Var downChecked: Grafisk; offentlig funksjon Checkbox (x: Antall = 0, y: Number = 0) {super (x, y); }
offentlig funksjon Markerings (x: Antall = 0, y: Number = 0) {super (x, y); normal = new Image (Assets.CHECKBOX, nytt rektangel (0, 0, 38, 34)); hover = new Image (Assets.CHECKBOX, nytt rektangel (38, 0, 38, 34)); ned = new Image (Assets.CHECKBOX, nytt rektangel (76, 0, 38, 34)); normalChecked = new Image (Assets.CHECKBOX, nytt rektangel (0, 34, 38, 34)); hoverChecked = new Image (Assets.CHECKBOX, nytt rektangel (38, 34, 38, 34)); downChecked = new Image (Assets.CHECKBOX, nytt rektangel (76, 34, 38, 34)); grafisk = normal; setHitboxTo (normal); }
Trinn 16: Legge Vår Checkbox
styre offentlig funksjon begynne (): void {super.begin (); legge (ny Button (10, 10)); legge (ny Markerings (20, 140)); }
Trinn 17:. Kontrollere og bort krysset i ruten
beskyttet Var normalChecked: Grafisk; beskyttet Var hoverChecked: Grafisk; beskyttet Var downChecked: Grafisk; offentlig Var sjekket: Boolean = false;
styre beskyttet funksjon klikk (): void {sjekket = sjekket; super.click (); }
styre beskyttet funksjon changeState (state: int = 0): void {if (sjekket) {switch (stat) {case NORMAL: grafisk = normalChecked; gå i stykker; case HOVER: grafiske = hoverChecked; gå i stykker; case NED: grafiske = downChecked; gå i stykker; }} Else {super.changeState (stat); }}
Trinn 18: Radio Knapper
Trinn 19:. Radiobutton Grafikk
[Bygg (kilde = "../assets/gfx /button.png ")] public static konst BUTTON: Klasse; [Bygg (kilde = "../assets/gfx/button_down.png")] public static konst BUTTON_DOWN: Klasse; [Bygg (kilde = "../assets/gfx/button_hover.png")] public static konst BUTTON_HOVER: Klasse; [Bygg (kilde = "../assets/gfx/checkbox.png")] public static konst CHECKBOX: Klasse; [Bygg (kilde = "../assets/gfx/radiobutton.png")] public static konst Radiobutton: Klasse;
pakke ui {import flash.geom.Rectangle.; import net.flashpunk.graphics.Image; public class Radiobutton strekker Markerings {offentlig funksjon radiobutton (x: Antall = 0, y: Number = 0) {super (x, y); normal = new Image (Assets.RADIOBUTTON, nytt rektangel (0, 0, 39, 44)); hover = new Image (Assets.RADIOBUTTON, nytt rektangel (39, 0, 39, 44)); ned = new Image (Assets.RADIOBUTTON, nytt rektangel (78, 0, 39, 44)); normalChecked = new Image (Assets.RADIOBUTTON, nytt rektangel (0, 44, 39, 44)); hoverChecked = new Image (Assets.RADIOBUTTON, nytt rektangel (39, 44, 39, 44)); downChecked = new Image (Assets.RADIOBUTTON, nytt rektangel (78, 44, 39, 44)); grafisk = normal; setHitboxTo (normal); }}}
Trinn 20: Radiobutton Gruppe
pakke ui {public class RadioButtonGroup {offentlige Var knapper. Vector < radiobutton > = New Vector. ≪ radiobutton >; offentlig funksjon RadioButtonGroup (... knapper) {//vi legge knappene oppgitt til konstruktøren, om noen if (knapper) addList (knapper); } Offentlig funksjon legge (knapp: radiobutton): void {buttons.push (knapp); } Offentlig funksjon addList (... knapper): void {if avkastning, (knapper!) if (knapper [0] er Array || knappene [0] er Vector. < radiobutton >) {//hvis parameteren er en matrise eller vektor av radioknapper, legger vi på knappene i vektor /matrise for hver (var b: Radiobutton i knapper [0]) legge til (b); } Else {//hvis parametrene er rett og slett en kommaseparert liste med knapper, legger vi dem i stedet for hver (var r: radiobutton i knapper) legge (r); }} Offentlig funksjon remove (knapp: radiobutton): void {buttons.splice (getIndex (knapp), 1); } Offentlig funksjon removeList (... knapper): void {if avkastning, (knapper!) if (knapper [0] er Array || knappene [0] er Vector. < radiobutton >) {//hvis parameteren er en matrise eller vektor av radioknapper, fjerner vi knappene i vektor /matrise for hver (var b: Radiobutton i knapper [0]) fjerne (b); } Else {//hvis parametrene er rett og slett en kommaseparert liste med knapper, fjerner vi dem i stedet for hver (var r: radiobutton i knapper) fjerne (r); }} Offentlig funksjon RemoveAll (): void {//raskeste måten å fjerne en vektor buttons.length = 0; } Offentlig funksjon getAt (indeks: int): Radiobutton {return knappene [index]; } Offentlig funksjon getIndex (knapp: radiobutton): int {return buttons.indexOf (knapp); }}}
offentlig funksjon radiobutton (x: Antall = 0, y: Number = 0, gruppen: RadioButtonGroup = null) {super (x, y); if (gruppe) group.add (denne); normal = new Image (Assets.RADIOBUTTON, nytt rektangel (0, 0, 39, 44)); hover = new Image (Assets.RADIOBUTTON, nytt rektangel (39, 0, 39, 44)); ned = new Image (Assets.RADIOBUTTON, nytt rektangel (78, 0, 39, 44)); normalChecked = new Image (Assets.RADIOBUTTON, nytt rektangel (0, 44, 39, 44)); hoverChecked = new Image (Assets.RADIOBUTTON, nytt rektangel (39, 44, 39, 44)); downChecked = new Image (Assets.RADIOBUTTON, nytt rektangel (78, 44, 39, 44)); grafisk = normal; setHitboxTo (normal); }
styre offentlig funksjon begynne (): void {super.begin ();. legge (ny Button (10, 10)); legge (ny Markerings (20, 140)); Var GRUPPE 1: RadioButtonGroup = new RadioButtonGroup (); legge (ny radiobutton (20, 200, GRUPPE 1)); legge (ny radiobutton (20, 250, GRUPPE 1)); legge (ny radiobutton (20, 300, GRUPPE 1)); Var gruppe 2: RadioButtonGroup = new RadioButtonGroup (); legge (ny radiobutton (200, 200, gruppe 2)); legge (ny radiobutton (200, 250, gruppe 2)); }
Trinn 21:. Radiobutton Klikk Opptreden
< p> Hva vi skal gjøre i stedet er først legge en variabel på radioknappen som vil referere til sin gruppe, og vi vil sette dette på den ekstra metode for gruppen. Vi vil også sette den til null når du fjerner den knappen:
public class radiobutton strekker Markerings {intern Var gruppe: RadioButtonGroup; //[...] Alle metodene i radioknappen klassen ble utelatt for brevety. }
offentlig funksjon legge (knapp: radiobutton): void {button.group = dette; buttons.push (knapp); } Offentlig funksjon remove (knapp: radiobutton): void {button.group = null; buttons.splice (getIndex (knapp), 1); Jippi! Takk!