Share
I denne opplæringen skal vi lage et tekstsystem som ligner på det du ser i mange rollespill. Vår klasse vil dynamisk vise et ikon for tegnene som de snakker, og vil skrive hver blokk med tekstbrev med brev.
Her er et eksempel på tekstsystemet vi skal skape:
Opprett en ny Flash-fil (Actionscript 3). Filminnstillingene dine varierer avhengig av spillet ditt. For denne demonstrasjonen setter jeg opp min film som 500x300, med en svart bakgrunn og 30 fps.
Du vil mest sannsynlig vise tekstmodulen over et bilde eller en animasjon fra spillet ditt. For denne demoen bruker jeg bare et bilde jeg kastet sammen med noen av tegnene fra mine spill som står i et snøfelt.
Sett bakgrunnsbildet ditt på et lag som heter "bakgrunn".
Lag en ny MovieClip på scenen (Sett inn> MovieClip) kalt "RPGText."
I symbolegenskapene merker du "Export for Actionscript" og angir klassenavnet til "RPGText". Vi bruker dette klassenavnet senere til å koble koden til denne MovieClip.
Klikk på OK. Hvis du ser en advarsel her at klassdefinisjonen ikke ble funnet, er det OK. Det betyr bare at det ikke er noen kode å lenke til dette symbolet (enda).
Gi din MovieClip forekomstnavnet "rpgText." Husk at når jeg snakker om "RPGText" (store bokstaver), refererer jeg til klassen (eller MovieClip); "rpgText" (små bokstaver) er navnet på en forekomst av den klassen.
Tegn et rektangel inne i det nye RPGText Filmklipp. Dette vil være bakgrunnen for tegnikonene og talebobleen. Design det, men du vil, men det skal spore hele bredden på filmen din og være kort nok til at den ikke dekker for mye av spillet ditt.
Jeg gjorde min 500px bred (for å matche filmen) og 100px høy. Jeg fylte den med en gradient fra # 666666 til # 999999 (mørkegrå til lysere grå).
Raskt tips: For å tegne et rektangel av en bestemt størrelse, velg rektangelverktøyet og Alt-klikk på scenen. Du får en dialogboks der du kan skrive inn dimensjonene til rektangelet.
Lag et nytt lag inne i RPGText MovieClip heter "ikon". Lag en ny MovieClip på dette laget, kalt "characterIcon", og gi det forekomstnavnet "characterIcon."
Inne i characterIcon MovieClip lager to nye lag: "ikoner" og "etiketter". Ikonlaget vil inneholde alle dine tegnikoner (hver på egen keyframe) og etikettlaget vil inneholde rammemerker som vi skal bruke for å vise tegnene på riktig tidspunkt.
Importer (eller tegne i Flash) et ikon for hver av tegnene i spillet ditt som skal snakke. For denne demoen laget jeg en 75x75px JPG for hver av mine tegn. Legg til ikonene til ikoner lag, og lager en ny keyframe for hvert tegn. Ordren der de vises er ikke viktig, men sørg for at hvert ikon er plassert på x: 0, y: 0 slik at de ikke ser ut til å hoppe rundt når du bytter tegn.
Opprett nå en ny keyframe på hver ramme av din etiketter lag. En rask måte å gjøre dette på er å velge alle rammene og trykke F6.
Velg hvert keyframe for etikett en etter en, og legg til en rammemerket som tilsvarer navnet på tegnet som vises i rammen. Hvis du legger til noen få tomme rammer (F5) mellom keyframes, vil det gjøre det enklere å lese rammemerkene, bare sørg for at etiketter keyframes holde opp med din ikoner nøkkelbilder.
Pass på at alle etikettene dine har et unikt navn. Hvis du har to tegn med samme navn, må du skille dem på en eller annen måte ('John_L' og 'John_K' for eksempel).
Gå tilbake til RPGText MovieClip og opprett et nytt lag kalt "textBackground."
Tegn en taleboble. Jeg trakk en enkel boble med firkantede hjørner, men du kan få din utseende, men du vil. Gjør det stort nok til at det fyller det meste av bakgrunnsrektangelet og sitter pent ved siden av tegnikonene dine.
Velg taleboble og konverter den til en MovieClip (Modify> Convert to Symbol). Nå som det er en MovieClip kan vi legge til et dråpeskyggefilter til det. Jeg satte meg til svart, 50% styrke, 5px uskarphet og 1px avstand.
Lag et nytt lag i RPGText MovieClip kalt "tekst". Bruk tekstverktøyet til å tegne en tekstboks. Gjør det tilpas bare innenfor kantene av taleboble grafikken.
Gjør det til et multilint dynamisk tekstfelt med forekomstnavnet "txt." Husk å legge inn skrifttypen hvis du ikke bruker systemtekst. Jeg bruker 13pt Courier.
Vi trenger en måte for spilleren å gå videre til neste tekstblokk når spilleren er ferdig med å lese. La oss legge til en liten "neste" knapp i hjørnet.
Lag et nytt lag i RPGText MovieClip kalt "knappen". Legg til et nytt knappesymbol kalt "b_next." Design de fire tilstandene til knappen din, men du vil. Jeg brukte en liten ned pil som knappesymbolet fordi jeg ser det i mange spill og antar at spillere er kjent med det.
Sett knappen i nederste høyre hjørne på toppen av talebobleen din. Ikke bekymre deg for å gi det et forekomstnavn. Jeg skal forklare hvorfor senere.
Opprett en ny Actionscript-fil kalt "Main.as" og legg til denne koden for å opprette det tomme skallet for klassen:
pakke import flash.display.MovieClip; offentlig klasse Main utvider MovieClip // CONSTRUCTOR public function Main ()
Sett Hoved som Dokumentklasse i Flash-filen. Hvis du vil ha en rask oppdatering på bruk av en Dokument-klasse, er denne Quick Tip fra Michael Williams en av de beste forklaringene jeg har sett.
Hvis du bruker dette i et spill, vil du sannsynligvis velge å sette det andre steder, men for nå legger vi det til dokumentklassen. Legg til denne koden til konstruktørfunksjonen i Hoved klasse:
Accentsconagua
var textBlocks: Array = new Array ("Kid", "Look, a robot!"), ["Abe", "BLEEP-BLOOP. Jeg er en autonom botanisk ingeniør. Du kan ringe meg ABE."] Kid "," Hei Abe. Møt Frosty Snowman. "], [" Frosty "," Happy Birthday! "], [" Abe "," BEEP-BIP. Hei, Frosty. "], [" Abe " Er denne frosken til deg? "], [" Frosk "," Ribbit ... "], [" Kid "," Nei jeg har aldri sett ham før. Er du ikke kald frosk? "], [" Frosk " , "Ribbit ..."]); rpgText.textBlocks = textBlocks; Her oppretter vi et todimensjonalt array (en matrise som inneholder andre arrays) for å holde skriptet for vår scene. Før du endrer noe, ta en titt på hvordan den er strukturert. Hvert array er en egen tekstblokk som inneholder to elementer. Den første er tegnets navn og den andre er teksten som han skal snakke om. Tekstblokkene er oppført i den rekkefølgen de vil vises på scenen.
Den siste linjen sender bare textBlocks array til rpgText MovieClip (husk "rpgText" er forekomstnavnet til RPGText MovieClip på scenen). Mer om dette senere.
Gå videre og rediger denne delen slik at den passer til din scene. Vær ekstra forsiktig med at tegnnavnet samsvarer nøyaktig med navnene du brukte for rammemerkene i characterIcon MovieClip.
Vi er endelig klare til å begynne å skrive koden for RPGText-klassen.
Opprett en ny Actionscript-fil med navnet "RPGText.as" og legg til denne koden:
pakke import flash.events.Event; importer flash.events.MouseEvent; importer flash.display.MovieClip; importere flash.media.Sound; offentlig klasse RPGText utvider MovieClip private const SPEAKER: int = 0; privat const TEXT: int = 1; private var _currentTextBlockIndex: int = 0; private var _currentTextBlock: String; private var _textBlocks: Array; // CONSTRUCTOR offentlig funksjon RPGText ()
Dette er bare et grunnleggende skall for klassen. Det gjør ikke noe enda, men la oss ta en titt på hva som er der:
(Merk: Jeg bruker understreket i mine variable navn for å indikere private variabler.)
Siden vår _textBlocks variabel er privat må vi ha tilgang til denne variabelen fra Hoved klasse der vi setter opp tekstblokkene. Vi gjør det ved å opprette en "setter" -funksjon. Legg dette til RPGText-klassen like under konstruktørfunksjonen:
offentlig funksjon satt tekstBlocker (txt: Array): void _textBlocks = txt;
Den kule tingen om settere i Flash er at vi kan få tilgang til denne funksjonen som om den var en offentlig eiendom til RPGText-klassen. Som er akkurat det vi gjorde på linje 21 i hovedklassen i trinn 11:
rpgText.textBlocks = textBlocks;
Legg til denne funksjonen i RPGText-klassen:
privat funksjon oppdateringText (e: Event): void if (txt.text.length < _currentTextBlock.length) txt.text = _currentTextBlock.substr(0, txt.text.length+1); else removeEventListener(Event.ENTER_FRAME, updateText); fillText();
Dette er kjernefunksjonaliteten til klassen, hvor bokstav for brevskriving finner sted. La oss ta en nærmere titt på hva som skjer her:
Legg til denne funksjonen i RPGText-klassen:
privat funksjon fillText (e: MouseEvent = null): void txt.text = _currentTextBlock; if (_currentTextBlockIndex < _textBlocks.length-1) addEventListener(MouseEvent.CLICK, nextTextBlock);
Hovedformålet med denne funksjonen er å fylle tekst tekstfelt med teksten fra _currentTextBlock (linje 37). Hvis vi lar animasjonen spille gjennom, updateText funksjonen bør ta vare på det, men det er godt å sørge for at ingenting gikk galt. Vi kan også koble denne funksjonen til vår "neste" knapp for å tillate spillere å hoppe over tekstanimasjonen og umiddelbart fylle tekstfeltet med hele tekstblokken.
Legg merke til denne funksjonen godtar en MouseEvent som et argument, men vi setter standardverdien til null. Dette tillater oss å bruke denne funksjonen med en MouseEvent-lytter, siden den vil akseptere arrangementet. Siden vi gir arrangementet en standardverdi, kan vi også ringe funksjonen uten å sende en hendelse som vi gjør på slutten av updateText funksjon.
Etter at vi har fylt tekstfeltet, gjør vi en sjekk for å se om dette er den siste tekstblokken i matrisen (hvis _currentBlockIndex er mindre enn antall elementer i _textBlock array). Hvis ikke, legger vi til en KLIKK lytter for å utløse en funksjon som kalles nextTextBlock som vi skal skrive neste.
Husk når vi opprettet "neste" -knappen, og jeg sa ikke å bekymre deg for å gi det et forekomstnavn? Har du lagt merke til i det siste trinnet hvordan vi festet CLICK-lytteren til hele RPGText MovieClip i stedet for knappen? Dette gjør at spilleren kan klikke hvor som helst på MovieClip for å fremme teksten. Vi trenger egentlig ikke knappen, men jeg liker å sette den inn, så det er noen indikasjon på at du klikker for å fremme teksten.
Selvfølgelig er dette bare en personlig preferanse for meg. Hvis du vil at du kan gi knappen et forekomstnavn og legg CLICK-lytteren til knappen i stedet. Jeg finner bare det større hitområdet for å være lettere å bruke.
Tilbake til virksomheten. Legg til denne funksjonen i RPGText-klassen:
privat funksjon nextTextBlock (e: MouseEvent): void removeEventListener (MouseEvent.CLICK, nextTextBlock); txt.text = ""; // Fjern teksten _currentTextBlockIndex ++; _currentTextBlock = _textBlocks [_currentTextBlockIndex] [TEXT]; // angi teksten characterIcon.gotoAndStop (_textBlocks [_currentTextBlockIndex] [SPEAKER]); // sett tegnikonet addEventListener (Event.ENTER_FRAME, updateText); // begynn å oppdatere teksten addEventListener (MouseEvent.CLICK, fillText);
De tre første linjene er ganske enkle. Fjern MouseEvent-lytteren, fjern tekstfeltet, og øk _currentTextBlockIndex Var å peke til neste tekstblokk.
Linje 47 bruker TEKST konstant for å få gjeldende tekststreng fra _textBlocks array og tilordne den til _currentTextBlock.
Neste bruker vi HØYTTALER konstant for å få navnet på tegnet. Siden tegnnavnene samsvarer med rammemerkene i vår characterIcon MovieClip vi kan bruke gotoAndStop å sende characterIcon MovieClip til rammen som viser det tegnikonet.
Til slutt legger vi til en hendelselytter for å begynne å skrive på den nye tekststrengen og deretter legge til en KLIKK lytter til å kjøre fillText når MovieClip er klikket.
Vi er nesten ferdige, vi trenger bare å legge til en funksjon som vil få alt startet. Vi gjør det med en offentlig funksjon kalt "startText." Siden dette er en offentlig funksjon, la oss sette den nær toppen av RPGText-klassen, like under textBlocks Legger:
offentlig funksjon startText (): void _currentTextBlock = _textBlocks [_currentTextBlockIndex] [TEXT]; characterIcon.gotoAndStop (_textBlocks [_currentTextBlockIndex] [HØYTTALER]); addEventListener (Event.ENTER_FRAME, updateText); addEventListener (MouseEvent.CLICK, fillText);
Ser kjent ut? Denne koden gjør nesten nøyaktig samme ting som nextTextBlock funksjon. Den setter gjeldende tekst- og tegnikon, og legger til hendelseslytterne for updateText og fillText. Siden denne funksjonen bare kjører når teksten starter først, trenger vi ikke å bekymre oss for å rydde tekstfeltet eller øke _currentTextBlockIndex som vi gjorde i nextTextBlock.
Nå har vi en offentlig tilgjengelig måte å starte teksten på. La oss sette den til bruk.
Legg til denne linjen nederst i hovedklassekonstruksjonsfunksjonen:
rpgText.startText ();
Dette kaller bare startText-funksjonen i RPGText-klassen. Det burde få alt til å gå.
Du bør kunne teste filmen nå og se alt som fungerer. Det er bare en ting som mangler skjønt: lyd.
Finn (eller opprett) en lyd som skal spilles etter hvert som teksten skriver inn. Når du velger en lyd for dette, hold den veldig kort, siden denne lyden vil spilles igjen og igjen etter hvert som tekstrene slår på. En liten "boop" eller knappeknapp fungerer best for denne effekten.
Importer lyden inn i biblioteket i Flash-filen din, sjekk "Export for Actionscript" og gi den klassenavnet "TypingSound."
For å få denne lyden til å spille, trenger vi bare å legge til to linjer til RPGText-klassen. Først må vi ordne lyden. Legg denne linjen øverst i klassen under de tre andre private variablene:
private var _typingSound: Sound = new TypingSound ();
Gå nå over til oppdateringstekstfunksjonen og legg til en linje som faktisk spiller lyden hver gang tekstoppdateringene (linje 38 er nye):
privat funksjon oppdateringText (e: Event): void if (txt.text.length < _currentTextBlock.length) txt.text = _currentTextBlock.substr(0, txt.text.length+1); _typingSound.play(); else removeEventListener(Event.ENTER_FRAME, updateText); fillText();
Det er det for demoen. Alt skal fungere på dette punktet, men hvis du vil integrere dette i et spill, har du fortsatt noe arbeid foran deg.
Først, avhengig av hvordan spillet ditt settes opp, vil du sannsynligvis ønske å trekke tekstblokkene ut av dokumentklassen. Du kan ha en sceneklasse du bruker til å konfigurere de individuelle samtalene som oppstår i spillet ditt, eller en Strings-klasse som inneholder all teksten for hver samtale.
For det andre vil du tenke på hvordan og når tekstmodulen vil vises i spillet ditt. Du vil kanskje legge til en tween animasjon som gjør at den glir inn og ut fra bunnen når en samtale starter og slutter. Du vil også lytte etter når samtalen er over, for å enten skjule tekstmodulen eller starte neste samtale.
Siden vi allerede sjekker for å se om den siste tekstblokken er nådd i fillText funksjon, kan du enkelt legge til noe der som håndterer slutten av samtalen.
Jeg inkluderer ikke disse emnene i opplæringen fordi måten du går om disse tingene på, vil være veldig spesifikk for spillet ditt. Dette bør være nok til å komme i gang skjønt.
Jeg håper du likte det! Legg inn en kommentar og gi meg beskjed om hva du synes.
