Share
To ganger i måneden besøker vi noen av våre leseres favorittinnlegg fra hele historien til Activetuts +. Denne opplæringen ble først publisert i februar 2010.
I denne opplæringen lager du en gjenbrukbar poengklasse som teller opp til den nye summen når poeng blir lagt til (i stedet for å hoppe opp til den nye poengsummen). Vi vil dekke grafikkopprettelse samt kode.
I noen spill når du får poeng, vil du se poengsummen din umiddelbart hoppe til den nye summen. Jeg tror det er mye kulere hvis poengsummen teller opp en etter en, slik at spilleren kan "rack up points". Det er det vi skal gjøre her.
Her er et eksempel på poengklassen i aksjon:
Hovedideen bak denne veiledningen er å lære deg hvordan du programmerer funksjonen "counting up", men jeg vil også vise deg hvordan du lager den kule LED-skjermen sett i forhåndsvisningen. Vi starter med å designe tallene:
Opprett en ny Flash-fil (ActionScript 3.0). Filminnstillingene dine varierer avhengig av spillet ditt. For denne demonstrasjonen setter jeg opp min film som 500x300, svart bakgrunn og 30 fps.
Opprett et nytt filmklippsymbol (sett inn> nytt symbol). Gi dette symbolet navnet "siffer".
Inne i sifferklippet bruker tekstverktøyet til å legge til et tall 0 til symbolet. Jeg bruker en skrifttype som heter Digital Readout, men en hvilken som helst LED-stil skal fungere.
Still tekststørrelsen til 40 pt og gjør den til en lys gul / oransje farge (# F4C28B). Sett avsnittformatet til sentrert.
Legg til to separate lysfiltre i tekstfeltet. Sett fargen til rød (# FF0000) for begge og sett styrken til begge til 200%.
Marker avmerkingsboksen Inner glød for en og sett Blur til 2px. La den andre stå på 5px uskarphet.
Du kan bruke en annen farge hvis du vil (blå eller grønn vil begge se kule ut). Trikset med å få det til å se realistisk er å gjøre tekstfargen litt vasket ut og sette lysene til en mer mettet farge. Dette gjør at det ser ut som det sender ut lys.
Opprett nøkkelrammer på rammer 1-10 av sifferklippet. En enkel måte å gjøre dette på er å velge rammer 1-10 (klikk ramme 1, deretter Skift-klikk ramme 10) og trykk F6.
Du burde nå ha 10 rammer, hver med en keyframe med ditt glødende 0 tekstfelt. Gå gjennom hver ramme og endre tallene slik at du har tallene 0-9. Ramme 1 vil ha "0", ramme 2 vil ha "1", ramme 3 vil ha "2", osv.
Navn dette laget "tall".
Vi legger nå til en "off" -status for LED-tallene, slik at du kan se de ubelyste segmentene til LED-displayet.
Kopier ditt 8-sifret (i ramme 9). Opprett et nytt lag kalt "bakgrunn". Med det nye laget som er valgt, bruk Lim inn i sted (Rediger> Lim inn i sted) for å lime inn 8-sifret i den nøyaktige posisjonen som den vi kopierte.
Fjern lysene fra det nye 8-sifret og bytt farge til mørkegrå (# 333333). Legg til et uskarpt filter med Blur-settet til 3px. Flytt dette laget under "tall" -laget.
Nå kan du skrubbe gjennom rammene og se hvordan de ubelyste segmentene til LED-en viser bak hvert nummer.
Lag et nytt lag med navnet "handlinger". Åpne Handlingspanelet og legg til en Stopp () -handling på ramme 1.
Dette gjør at displayet viser '0' til vi forteller det ellers.
Hvorfor setter vi manuelt hvert siffer på egen ramme i stedet for å bruke et dynamisk tekstfelt? Godt spørsmål.
Hovedårsaken er at det gjør det mer fleksibelt for å oppdatere grafikken senere. Hvis du ønsket å endre design og bruke bitmap for tallene, eller få hvert siffer vist i en annen skrift eller farge, gjør dette det enkelt å gjøre det.
Også hvis designere og utviklere jobber sammen på et prosjekt, er det best å skape ting på en måte som gir designere enkel tilgang til så mye av grafikken som mulig.
Jeg føler at dette oppsettet gjør det mer enn å bruke dynamisk tekst.
Opprett et nytt filmklipp med tittelen "Score". Sjekk 'Eksporter for ActionScript' og angi klassenavnet til «Score» også.
Dra sifferklippeklippet fra biblioteket til partiturets filmklipp. Kopier sifferklipset (Rediger> Kopier) seks ganger (slik at du har syv siffer) og plasser dem jevnt.
Siden vi bare har syv siffer, er maksimumsresultatet vi kan vise, 9999999. Hvis spillet ditt trenger å ta imot høyere poeng, legg til flere tall tilsvarende.
Legg litt mer plass mellom hvert tredje siffer for å tillate kommaseparatorer.
Velg det venstre sifferklippet og gi det forekomstnavnet "siffer1". Navngi den neste til høyre "digit2", deretter "digit3" og så videre.
Lag et nytt lag kalt "kommaer".
Den enkleste måten å få kommaene til å se akkurat som tallene er å gå inn i et av sifferklipsene og kopiere et av talltekstfeltene.
Sett inn i partiturets filmklipp, lim inn tekstfeltet i komma-laget, og endre nummeret til et komma. Dupliser det og flytt det så mange ganger du trenger.
For resultatbakgrunnen legger vi bare til et enkelt avrundet rektangel.
Lag et nytt lag kalt "bakgrunn" og legg det bak tallene og kommaene. Velg Rektangulærverktøyet og Alternativ-klikk (Alt-klikk) scenen. Lag et rektangel 200px x 40px med 3px hjørner (gjør din lengre hvis du har flere sifre). Gjør fyllingen svart og stroke 1px grå (# 666666).
Av en eller annen grunn forvrenger Flash alltid streker på avrundede rektangler. For å komme seg rundt dette, velg streken og velg Modify> Shape> Convert Lines to Fills. Dette konverterer streken fra en linje til en fylt form, og det vil ikke lenger forvride.
Hvis du mener dette er en total hack av en løsning for grunnleggende funksjonalitet som burde ha blitt løst for mange år siden, oppfordrer jeg deg til å kontakte Adobe og gi dem beskjed.
Hvilken grafikk ville være komplett uten noen iPhone-esque shine?
Lag et nytt lag over alt annet som kalles "skinne". Legg til et nytt avrundet rektangel, litt mindre enn bakgrunnen. Denne gangen gir det ingen slag og fyller den med en hvit gradient fra 20% alfa til 0% alfa.
Opprett en ny Actionscript-fil med navnet "Score.as". Lagre det i samme katalog som din hoved Flash-fil. Siden navnet på denne klassen og eksporter klassenavnet til partituret vårt er det samme, vil Flash automatisk koble dem til.
Legg denne koden til Score.as-filen:
pakke import flash.display.MovieClip; importere flash.events.Event; offentlig klasse poengsum utvider MovieClip // CONSTRUCTOR offentlig funksjon Score ()
Dette er bare et tomt skall av en klasse for nå. Vi må utvide MovieClip-klassen siden denne klassen er koblet til et filmklipp i biblioteket, så vi må også importere MovieClip-klassen. Vi bruker ENTER_FRAME-hendelsen, så vi importerer også hendelsesklassen.
Legg disse to linjene til Score-klassen like over konstruktørfunksjonen.
privat const SPEED: int = 1; // hvor fort å telle privat const NUM_DIGITS: int = 7; // hvor mange sifre er det i poengsummen
Dette er to konstanter - slags innstillinger for klassen.
La oss nå legge til et par variabler. Sett disse bare under konstantene:
private var _totalScore: int = 0; privat var _displayScore: int = 0;
Disse variablene vil holde de to forskjellige versjonene av poengsummen vår. "_totalScore" blir den faktiske poengsummen. "_displayScore" blir nummeret som er for øyeblikket
blir vist på LED-skjermen. Hvis jeg legger til 50 i poengsummen, vil _totalScore umiddelbart være 50, men _ShowScore vil være 1, deretter 2, deretter 3, til den når 50.
Hvis du noensinne trenger å vite den faktiske poengsummen (som å sende til dine high score boards), vil du bruke _totalScore siden _displayScore er kanskje ikke nøyaktig.
Jeg bruker underskrifter i begynnelsen av variabelenavnene for å angi at disse er private variabler.
Så hvis _totalScore er en privat variabel, hvordan vil vi få tilgang fra utenfor Score-klassen? Vi bruker en "accessor" eller "getter" -metode.
Legg til denne metoden under konstruktørfunksjonen:
// offentlig tilgang for totalSkore offentlig funksjon få totaltScore (): int return _totalScore;
Denne metoden returnerer bare verdien av _totalScore-variabelen. Det gir oss en måte å få tilgang til den verdien uten å måtte utsette den som en offentlig variabel.
Vi trenger en måte å legge til poeng på poengsummen. Legg til denne metoden:
// legg til et beløp til poengsummen offentlig funksjon legg til (mengde: int): void _totalScore + = amount; addEventListener (Event.ENTER_FRAME, updateScoreDisplay); // start skjermen teller opp
Denne metoden aksepterer et heltall "beløp" som det legger til _totalScore-variabelen. Den andre linjen starter en ENTER_FRAME-hendelse som kaller en metode som heter updateScoreDisplay hver ramme. Vi legger til det neste.
Legg nå til en oppdateringsScoreDisplay-metode. Dette er hvor alle de kule opptelling funksjonalitet vil skje. Det må godta en hendelse siden den blir hentet fra en ENTER_FRAME-hendelse.
// dette kjører hver ramme for å oppdatere poenget til privat funksjon updateScoreDisplay (e: Event): void
La oss nå legge til noen funksjonalitet. Det første som denne metoden gjør, er å øke _displayScore-variabelen med det beløpet vi angir i vår SPEED-konstant:
// øke skjermresultatet med hastighetsbeløpet _displayScore + = SPEED;
Det er imidlertid et potensielt problem her. Hva om vår fart er satt til 10, og vi prøver å legge til 5 til poengsummen? DisplayScore vil være høyere enn totalScore. La oss legge til et par linjer for å fikse det:
// sørg for at skjermresultatet ikke er høyere enn den faktiske poengsummen hvis (_displayScore> _totalScore) _displayScore = _totalScore;
Det kontrollerer om displayScore er høyere enn totalScore, og hvis så, setter displayScore til å være lik totalScore.
Deretter må vi legge til de ledende nuller til poengsummen. Vi gjør dette ved å konvertere displayScore til en streng og legge til nuller til lengden er lik antall siffer som er definert av NUM_DIGITS-konstanten:
var scoreStr: String = String (_displayScore); // cast displayScore as a string // legg til ledende nuller mens (scoreStr.length < NUM_DIGITS) scoreStr = "0" + scoreStr;
Nå for å faktisk vise poenget, skal vi gå gjennom hvert av våre sifferklipp (husk vi heter "siffer1", "siffer2" osv.) Og bruk det tilsvarende tallet fra poengsummen for å angi rammenummeret til klipp:
// loop gjennom og oppdater hvert siffer for (var i: int = 0; i < består av NUM_DIGITS; i ++) var num = int (scoreStr.charAt (i)); dette ["siffer" + (i + 1)]. gotoAndStop (num + 1); // sett sifferet mc til høyre ramme
CharAt-metoden henter karakteren fra en streng i den angitte posisjonen. Dette lar oss gå karakter for tegn gjennom poengstrengen.
Brakettene i neste linje tillater oss å dynamisk opprette klippetavnet. Koden, denne [ "tallet" + (i + 1)] åpner klippet med navnet "digit1" eller "digit2", etc., avhengig av verdien av Jeg.
Vi bruker "num + 1" som rammenummer fordi rammene er kompensert med 1 fra tallene de inneholder (ramme 1 viser 0, ramme 2 viser 1 osv.)
Det siste vi må gjøre i denne metoden, er å se om displayScore og totalScore er like. Hvis ja, kan vi fjerne lytteren og slutte å ringe denne metoden for nå.
// hvis skjermresultatet er lik totalpoenget, fjern enterframe-hendelsen hvis (_totalScore == _displayScore) removeEventListener (Event.ENTER_FRAME, updateScoreDisplay);
Hvis du ble tapt hvor som helst i det trinnet, kan du sjekke ut kildefilene for å se den fullførte klassen.
Hvis du vil bruke denne klassen, drar du Score-filmklippet fra biblioteket til scenen og gir det forekomstnavnet "myScore". Du kan legge til poeng til poengsummen din ved å bruke denne linjen i dokumentklassen din:
myScore.add (50);
Du kan se et eksempel på dette i kildefilene. Jeg legger til poengsummen når støtfangerknappene klikkes, men du vil sannsynligvis kalle add () når hendelser i spillet ditt oppstår.
Hvis du trenger å vite spillerens poengsum kan du få totalresultatet ved å bruke:
myScore.totalScore
Dette vil ringe tilgangsmetoden og returnere verdien av _totalScore.
Du har nå en gjenbrukbar telling telling klasse som du kan bruke i noen av spillene dine.
Jeg tror LED-utseendet er kult, men du bør definitivt endre design for å passe utseendet til spillet ditt. Her er et par ideer for forskjellige design for å komme i gang:
Takk for at du leste denne opplæringen. Fortell meg hva du tenker!
Accentsconagua