Create en Pinball-Style Rolling Score Counter Class
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + Kursene vil bli redusert til bare $ 3. Ikke gå glipp av.
To ganger i måneden, vi besøker noen av våre lesere favoritt innlegg fra hele historien Activetuts +. Denne opplæringen ble første gang publisert i februar 2010.
I denne opplæringen vil du opprette en gjenbrukbar Score klasse som teller opp til den nye totalsummen når poengene legges (i stedet for å hoppe opp til den nye stillingen). Vi dekker grafikk samt kode.
Endelig resultat Forhåndsvisning
I noen spill når du får poeng, vil du se resultatet umiddelbart hoppe til den nye total. Jeg tror det er mye kulere hvis poengsummen teller opp en etter en, slik at spilleren kan "samle opp poeng". Det er det vi skal gjøre her
Her er et eksempel på stillingen klassen i aksjon.
Hovedideen bak denne opplæringen er å lære deg hvordan å programmere "telle opp" funksjonalitet , men jeg vil også vise deg hvordan du lager den kule LED display sett i forhåndsvisningen. Vi vil starte med å utforme tallene:
Trinn 1: Sett opp din Flash File
Opprett en ny Flash-fil (Actionscript 3.0). Dine filminnstillinger vil variere avhengig av spillet ditt. For denne demoen jeg setter opp min film som 500x300, svart bakgrunn, og 30 fps
Trinn 2:. Opprett Digit Symbol
Opprett en ny Movie Clip symbol (Insert > New Symbol). Gi dette symbolet navnet "siffer"
Trinn 3:. Opprett Digit Tekst Feltet
Inni sifret filmklipp bruke tekstverktøyet for å legge til et nummer 0 til symbolet. Jeg bruker en font som heter digital avlesning, men noen LED-style font skal fungere.
Angi tekststørrelsen 40 pt og gjøre det til en lys gul /orange farge (# F4C28B). Sett Avsnitt Format til sentrert
Trinn 4:. Legg Gløder
Legg til to separate gløden filtrene til tekstfeltet. Sett farge til rød (# FF0000) for begge og sette styrke for begge til 200%.
Sjekk Inner Glow kryss ved ett og sette Blur til 2PX. La den andre på 5px Blur.
Du kan bruke en annen farge hvis du ønsker (blå eller grønn ville både se kul). Trikset med å få det til å se realistisk er å gjøre tekstfargen litt vasket ut og sette de gløder til en mer mettet farge. Dette gjør at det ser ut som det er emitting lys
Trinn 5:. Legg til flere numre
Opprett keyframes på rammer 1-10 av sifret filmklipp. En enkel måte å gjøre dette på er å velge rammer 1-10 (klikk ramme 1, deretter Skift-klikk ramme 10) og trykk på F6.
Du skal nå ha 10 rammer, hver med et nøkkelbilde med glødende 0 tekstfeltet. Gå gjennom hver ramme og endre tallene så du har sifrene 0-9. Ramme en vil ha "0", ramme 2 vil ha "en", ramme 3 vil ha "2", osv
Navn dette laget "tall".
Trinn 6 : Legg LED bakgrunns
Vi vil nå legge til en "off" state for LED-tall, så vil du være i stand til å se de ubelyste segmenter av LED-displayet
Kopier. 8-sifret (i rammen 9). Lag et nytt lag som heter "bakgrunn". Med det nye laget valgt bruk Paste in Place (Edit > Lim på plass) for å lime inn 8 siffer i den nøyaktige posisjonen som den vi kopierte
Fjern gløder fra den nye 8 siffer og endre fargen. til mørk grå (# 333333). Legg et blur filter med Blur satt til 3px. Flytt dette laget under "tall" lag
Nå kan du skrubbe gjennom rammene og se hvordan de ubelyste segmentene i LED showet bak hvert tall
Trinn 7:.. Legg Stopp Handling
Lag en ny layer som heter "tiltak". Åpne Handlinger panelet og legge til et stopp () handling på ramme 1.
Dette vil holde skjermen viser "0" før vi forteller det ellers
Trinn 8:. Hvorfor Frames ?
Hvorfor er vi manuelt sette tallene på sin egen ramme i stedet for å bruke et dynamisk tekstfelt? Godt spørsmål.
Den viktigste grunnen er at dette gjør det mer fleksibelt for å oppdatere grafikken senere. Hvis du ønsker å endre utformingen og bruke punktgrafikk for tallene, eller har hvert siffer vises i en annen skrift eller farge dette gjør det enkelt å gjøre det.
Også, hvis designere og utviklere jobber sammen på en Prosjektet er det best å lage ting på en måte som gir designere enkel tilgang til så mye av grafikken som mulig
Jeg føler dette oppsettet gjør at mer enn å bruke dynamisk tekst
Trinn 9..: Opprett Score Movie Clip
Opprett en ny filmklipp som heter "Score". Sjekk 'Eksport for Action' og satt klassen navn til "Score" også.
Dra sifret filmklipp fra Biblioteket inn i Score filmklipp. Duplisere sifret klippet (Edit > Duplicate). Seks ganger (slik at du har syv siffer) og plass dem jevnt
Siden vi bare har syv sifre maksimal score vi vil være i stand til å vise er 9.999.999. . Hvis spillet må imøtekomme høyere score legge flere sifre tilsvar
Legg til litt mer plass mellom hvert tredje siffer for å tillate komma separatorer
Trinn 10:. Navn på Digit Klipp
Velg den lengst til venstre sifret filmklipp og gi det forekomstnavnet "digit1". Nevne den neste til høyre "digit2", deretter "digit3" og så videre
Trinn 11:.. Legg Komma
Lag et nytt lag som heter "komma"
Den enkleste måten å få komma til å se ut akkurat som tallene er å gå inn i en av siffer klipp og kopier en av talltekstfeltene.
Tilbake inni Score filmklipp, lime tekstfeltet inn den komma lag, og endre nummeret til et komma. Kopiere det og flytte den så mange ganger du trenger
Trinn 12:.. Legg en bakgrunns
For Score bakgrunn vil vi bare legge en enkel avrundet rektangel Anmeldelser
Lag et nytt lag som heter "bakgrunn" og plassere det bak tallene og komma lag. Velg rektangelverktøyet og Tilvalg-klikk (Alt-klikk) på scenen. Gjør et rektangel 200px x 40px med 3PX hjørner (lage din lenger hvis du har flere siffer). Gjør fyllet svart og hjerneslag 1px grå (# 666666).
For noen grunn Flash forvrenger alltid slag på avrundede rektangler. For å komme rundt dette, velger hjerneslag og velg Modify > Shape > Konverter Lines til Fyller. Dette konverterer slag fra en linje til en fylt form og det vil ikke lenger forvrenge.
Hvis du tror dette er en total hack av en midlertidig løsning for grunnleggende funksjonalitet som burde vært fikset år siden, oppfordrer jeg deg til kontakt Adobe og la dem vite
Trinn 13:. Legg Shine
Hva grafisk ville være komplett uten noen iPhone-esque glans
Lag et nytt lag over? alt annet kalles "shine". Legg til en ny avrundet rektangel, litt mindre enn bakgrunns en. Denne gangen gir det ingen strek og fyll den med en hvit gradient fra 20% Alpha til 0% Alpha
Trinn 14:. Opprett Score Class
Opprett en ny Actionscript-fil med navnet "Score.as". Lagre den i samme katalog som hoved Flash-fil. Siden navnet på denne klassen og eksport Class navnet på vår Score filmklipp er de samme, vil Flash automatisk koble dem
Legg denne koden til Score.as filen:.
Pakke {import flash. display.MovieClip; import flash.events.Event; public class Score strekker MovieClip {//CONSTRUCTOR offentlig funksjon Score () {}}}
Dette er bare et tomt skall av en klasse for nå. Vi må utvide MovieClip klasse siden denne klassen er knyttet til et filmklipp i biblioteket, slik at vi også nødt til å importere MovieClip klasse. Vi skal bruke ENTER_FRAME hendelsen, så vi importerer Event klassen også
Trinn 15:. Legg variabler og konstanter
Legg disse to linjene til Score klassen like over . konstruktøren funksjon
privat konst SPEED: int = 1; //Hvor fort å countprivate const NUM_DIGITS: int = 7; //Hvor mange siffer det er i score
Dette er to konstanter -. Slags som innstillinger for klassen
Den første, SPEED, styrer hvor fort poengsummen teller. Jeg har det satt til å telle én etter én, men hvis spillet bruker høyere score dette kan være for treg. Du kan endre dette til 5 eller 10 eller 50 for å telle opp av disse trinn.
Nå la oss legge til et par variabler. Sette disse rett under konstanter:
private Var _totalScore: int = 0; privat Var _displayScore: int = 0;
Disse variablene vil holde de to forskjellige versjoner av vårt poeng. "_totalScore" vil være den faktiske resultatet. "_displayScore" vil være antall som er i ferd
blir vist på LED-displayet. Hvis jeg legger 50 til stillingen, vil _totalScore umiddelbart være 50, men _displayScore vil være en, deretter to, deretter tre, til den når 50.
Hvis du noen gang trenger å vite den faktiske score (som å sende til høy score boards) vil du bruke _totalScore siden _displayScore kanskje ikke være nøyaktig.
Jeg bruker understrek i begynnelsen av variabelnavn for å betegne at disse er private variabler. Så hvis _totalScore er en privat variabel, hvordan skal vi få tilgang til fra utenfor Score klassen? Vi vil bruke en "tilbehør" eller "getter" metoden Legg denne metoden under konstruktøren funksjon: Vi trenger en måte å legge til punkter i partituret. Legg denne metoden: Denne metoden tar et heltall "mengde" som det legger til _totalScore variabel. Den andre linjen starter en ENTER_FRAME hendelse som kaller en metode som kalles updateScoreDisplay hver ramme. Vi vil legge til at neste Nå kan du legge en den updateScoreDisplay metode. Det er der alle de kule teller opp funksjonalitet som vil skje. Det er behov for å akseptere en hendelse siden det er å bli kalt fra en ENTER_FRAME hendelse Nå la oss legge til noe funksjonalitet. Det første denne metoden vil gjøre er å øke den _displayScore variabel av hvor mye vi satt i vår SPEED konstant: Det er et potensielt problem her skjønt. Hva om vår hastighet er satt til 10, og vi prøver å legge til 5 til stillingen? Den displayScore vil være høyere enn den totalScore. La oss legge til et par linjer til å fikse det: Det sjekker om displayScore er høyere enn totalScore og hvis så, setter displayScore å være lik den totalScore. Neste vi må legge til nuller til stillingen. Vi vil gjøre dette ved å konvertere displayScore til en streng og legge nuller inntil lengden er lik antall sifre definert av NUM_DIGITS konstant: Nå til å faktisk vise resultatet vi kommer til å sløyfe gjennom hver av våre tall klipp (husker vi heter da "digit1", "digit2", osv) og bruke det tilsvarende tallet fra stillingen strengen å sette rammen antall klippet: charAt metoden henter karakter fra en streng på angitt posisjon. Dette lar oss gå tegn for tegn gjennom poengsum strengen. De parentes i neste linje tillate oss å dynamisk lage klippet navn. Koden, denne ["siffer" + (i + 1)] Vi bruker "num + 1" som rammenummeret fordi rammenummer er motvirket av en fra tallene de inneholder (ramme 1 viser 0, ramme 2 viser 1 osv) Det siste vi trenger å gjøre i denne metoden er å sjekke for å se om displayScore og totalScore er like. I så fall kan vi fjerne lytteren og slutte å kalle denne metoden for nå. Hvis du har mistet noe i det skrittet du kan sjekke ut kildefilene for å se det ferdige klassen Å. bruke denne klassen dra Score filmklipp fra Biblioteket på scenen og gi den forekomsten navnet "myScore". Du kan legge poeng til poengsummen din ved hjelp av denne linjen i dokumentet Klasse: Du kan se et eksempel på dette i kildefilene. Jeg legger til resultatet når støtfanger knappene er klikket, men du vil mer sannsynlig være å kalle legge til () når hendelser i spillet forekomme. Hvis du trenger å vite spillerens score du kan få totalScore ved å bruke: Dette vil ringe accessor metode og returnere verdien av _totalScore Du har nå en gjenbrukbar telling Score klasse. som du kan bruke i noen av spillene dine. Jeg tror LED look er kult, men du bør definitivt endre design som passer utseendet på spillet ditt. Her er et par ideer til ulike design for å komme i gang: Takk for at du leser denne opplæringen. La meg vite hva du synes! Anmeldelser
< hr>
Trinn 16: Tilsett totalScore
Accessor Metode
//offentlig tilbehør for totalScorepublic funksjon få totalScore (). Int {return _totalScore;} < p> Denne metoden returnerer ganske enkelt verdien av den variable _totalScore. Det gir oss en måte å få tilgang til denne verdien uten å avsløre det som en offentlig variabel
Trinn 17:. Tilsett legge
Metode
//legge et beløp til scorepublic funksjonen add (beløp: int): void {_totalScore + = beløp; addEventListener (Event.ENTER_FRAME, updateScoreDisplay); //Start displayet telle opp}
Trinn 18:. Tilsett updateScoreDisplay
Metode
//dette går hver ramme for å oppdatere scoreprivate funksjon updateScoreDisplay (e: Hendelses):. Void {}
//øke displayet poengsum av hastigheten amount_displayScore + = SPEED;
//sørge displayet score er ikke høyere enn den faktiske scoreif (_displayScore & gt; _totalScore) {_displayScore = _totalScore;}
Var scoreStr: String = String (_displayScore); //Cast displayScore som en String //legge ledende zeroswhile (scoreStr.length & amp; lt; NUM_DIGITS) {scoreStr = & quot; 0 & quot; + ScoreStr;}
//sløyfe gjennom og oppdatere hver digitfor (var i: int = 0; i & amp; lt; NUM_DIGITS; i ++) {var num = int (scoreStr.charAt (i )); dette. [& quot; sifret & quot; + (i + 1)] gotoAndStop (num + 1); //setter sifret mc til den rette rammen}
åpner klippet med navnet "digit1" eller "digit2", etc., avhengig av verdien av i
.
//Hvis skjermen poengsum er lik den totale poengsummen fjerne enterframe eventif (_totalScore == _displayScore) {removeEventListener (Event.ENTER_FRAME, updateScoreDisplay);}
Trinn 19: The Score Class i bruk
myScore.add (50);
myScore.totalScore
Konklusjon