Advanced Character tilpasning for Flash Games
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + Kursene vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen, vil vi gå i dybden av Flash spillfigur tilpasning. Resultatet kan brukes til å gi spillere med evnen til å skape en unik karakter, utover de grunnleggende dress-up alternativer for de fleste spill.
Vi fant denne awesome forfatteren takket FlashGameLicense.com, stedet å kjøpe og selge Flash spill!
Vi vil lære å la brukeren legge til egendefinerte farger til ulike deler av vår karakter, hvordan å legge håndtegnede design å karakterens klær, og hvordan du modifisere en grunnleggende gang animasjon som bruker spillerens endringer
Endelig resultat Forhåndsvisning
Dette er hva du har bygget på slutten av opplæringen.
Fyll områdene karakterens klær med solide farger, legge til detaljer med blyant, deretter trykke "play" og trykk på venstre og høyre for å se ham gå
Trinn 1: Klar Vår Flash Movie
Opprett en ny AS3 Flash Document. Gå inn i eiendommer panel og sørge for at alle innstillingene er de samme som på bildet under:
Trinn 2: Sette opp Vårt viktigste klassen
Neste opprette en ny .as fil som heter CustomCharacter.as (. Sjekk ut denne rask introduksjon til dokumentet klassen hvis du er usikker på hva vi gjør i dette trinnet) Nå skal vi begynne med å tegne vår hovedperson. I denne opplæringen, er det viktig at vi sørger for at vi har hver kroppsdel i en egen MovieClip. Ved å gjøre dette, kan vi basere vår walking animasjon på Tweens som vil fremskynde animasjon prosessen. Vår karakter vil bestå av følgende objekter: et hode, hår, en skjorte, to bein og to armer. Du kan finne hovedpersonen som brukes i denne opplæringen i FLA kilde (nedlasting linken er på toppen av opplæringen). For nå, for å oppmuntre spilleren til å tilpasse karakteren, vil vi begrense fargene på kroppsdeler av karakteren til grå med svart skisserer. Velg hele kroppen, presse F8 for å slå den inn i en enkelt MovieClip og kaller det Spiller Det du har det, vi har nettopp opprettet vår Spiller For å begynne, må vi legge til ColorPicker Neste vi trenger å gjøre alt av Action arbeid. Her er hva vår CustomCharacter La oss gå gjennom dette steg for steg, og starter med konstruktøren funksjon. Først skaper vi en ny Var heter myColorPicker Vi har også legge to hendelsen lyttere. En for når du klikker på spilleren, som veksler synligheten av ColorPicker Hotell og flytter den til musen lokasjon på klikk, og den andre for å sjekke for å se når brukeren har valgt en ny farge, så at vi kan gjøre ColorPicker Dessverre, vi kan ikke bare bruke ColorPicker Hotell og gjøre det endre et objekts farge. Først må vi for ColorPicker Inne i showPicker Vi er nesten klar til å farge våre stedene. Før vi begynner, må vi sørge for at vi kan holde konturene på våre kroppsdeler. For å gjøre dette, må vi identifisere området som trenger en fargeendring. Vi er nødt til å gå inn i MovieClip for hver kroppsdel, og velg den grå fylle området innenfor omrisset. Deretter trykker F8 for å opprette en ny MovieClip av denne grå fyll og kaller det "_____Color" (så for armen MovieClip vi vil kalle det ArmColor Vi er endelig legge farge til søknaden vår. Her er hva prosjektet skal se ut ved slutten av dette trinnet: Application Skjermbilde Alright! La oss gå gjennom dette steg for steg. Til å begynne med, skaper vi en ny MovieClip variabel, myChangedObject Ettersom det er ute av veien, la oss se på vår showPicker () Neste vi endrer vår nye myChangedObject Lar analysere denne lille bit av koden. Først av alt, er det viktig å vite at for å ha en forhåndsvalgt farge, ColorPicker Her er nøkkelen, er vi i hovedsak kommer inne i vår valgt MovieClip myChangedObject myChangedObject /Transform data /Color Transform data /Color Data (RGB) Vi er fortsatt ikke ferdig ennå! Neste la oss se på vår colorChanged () Men trenger vi å legge til en " 0x "til ColorPicker sin Til slutt, vi kommer tilbake til. MyChangedObject .transform.colorTransform bortsett fra denne tiden, er vi faktisk endrer colorTransform Puh, det var forvirrende, men nå at den delen er over, kan vi begynne å legge til nye funksjoner til vårt program Nå som vi har en funksjonell farging app, la oss gå videre å legge litt mer funksjonalitet. Neste, vi skal prøve å gjøre programmet tegne direkte på spillerens kroppsdeler, slik at brukeren kan trekke noen kule design for hans karakter. Som du kan se ovenfor, har jeg satt sammen et panel med to verktøy. For det første har vi en tegning blyant og neste vi en maling bøtte verktøyet. Formålet med denne opplæringen er å ikke sette sammen den UI, men jeg har tatt dem i kilden. Du kan dissekere grafikken hvis du ønsker å lære hvordan de ble laget. Dessuten er dette liksom en forlengelse fra denne opplæringen av Carlos Yanez, som gjør en god jobb med å forklare hvordan man lager en tegning søknad. Akkurat som i at opplæringen, har jeg en grensesnitt som består av to maling bøtte og to blyantbilder. Den ene er grå og den andre er i farger. Den grå man vil gjøre det fargerike bildet synlig for å vise at verktøyet har blitt aktivert. Når ett verktøy er aktivert, den andre vil bli deaktivert. I dette trinnet, er vi bare jobber med å bytte mellom de verktøyene. I løpet av de neste trinnene, vil vi dekke hvordan du får blyant verktøyet til å fungere. Her er hva vår koden skal se ut: Først , kan du se at vi har tatt ut showPicker Hotell og colorChanged Vårt nye program Vi har setup grensesnittet, men et spørsmål gjenstår. Hvordan kan vi velge hvilken farge som skal tegne med for blyant verktøyet? Svaret er enkelt. Vi kan bare flytte vår fargevelger for å være ved siden av blyant verktøyet. Det er ganske enkelt også. Bare legge dette til slutten av enablePencil () Bare for å være sikker på at spilleren ikke bruke ColorPicker ved valg av bøtte verktøyet, kan vi bare legge dette til enableBucket () Vi nærmer oss å være i stand til å trekke på vår karakter, men vi har fortsatt en jobb å gjøre. Snart skal vi begynne maske våre tegninger til filmklipp inne tegnet, slik at de holder seg innenfor omrisset av karakter. For å gjøre dette, først må vi lage en liste over objekter som må maskert. Vi kan gjøre dette i form av en matrise. I motsetning til før, er vi nødt til å gi hver kroppsdel en forekomst navn, så gå tilbake til spilleren filmklipp, og velger hvert objekt én etter én . Gi hvert objekt et navn ("arm1", "leg2", "hår", etc.). Når du er ferdig med det, opprette en matrise i CustomCharacter () konstruktør, som så: Dessverre, som ikke fungerer som planlagt Dette er fordi vi prøver å referere spilleren MovieClip før det er bygget. For å løse dette, trenger vi å referere til den i konstruktøren, også. I utgangspunktet er vi splitte opp den variable i to deler. Den første delen er før konstruktøren når vi oppretter array, slik at det vil være tilgjengelig i hele klassen. Den andre er INSIDE konstruktøren når vi kan tilordne den en verdi Her er et utdrag av vår klasse: For å kunne trekke inn i et objekt, må vi bruke Shape Dette er hva du trenger å legge til bunnen av CustomCharacter () Her er en rask forklaring på hva vi gjør. Vi er i utgangspunktet å lage en for De neste fire linjene er bare for debug testing, liksom som Box2D debug uavgjort. I utgangspunktet er det visning av lilla bokser rundt figurens kroppsdeler. Det eneste å huske på er at vi multiplisere bredden og høyden på hver kroppsdel av tre for å få den bredden og høyden av vår lilla testing boksen, slik at vi vet hver av disse "lerreter" vil være stor nok til å trekke på. Neste vi tildele navnet "figurer" til hver Shape opprettet, og legge den inn i gjeldende element av drawableParts rekke Å starte, Vi må gi våre former en overflate som skal maskeres også. Vi kan ikke bare koble dem til vår kroppsdel MovieClip Gå inn i hår Det neste vi kan legge denne koden til slutten av vår for Test Movie igjen, og akkurat som magi, slår vår spiller lilla, fordi bare den delen av spilleren som er skyggelagt i viser våre debug bokser. Dette betyr at våre tegninger vil holde seg på overflaten som vi trekker på Nå kommer spørsmålet: "Hvordan får jeg tilgang til lerretet < em> myShape La oss gå gjennom dette steg for steg. Denne prosessen er typen som en mus (ja en ekte en) prøver å finne sin ost (vår lerret) fordi Fordi vi tidligere kalt alle våre Shape Nå kan vi begynne å faktisk trekke på spilleren i svart og hvitt. Dette er hva vår største klassen skal se ut ved slutten av opplæringen. Jeg har lagt til kommentarer til alle de endringene jeg har gjort Formålet med denne opplæringen er ikke å dekke tegning på Shape stedene. Som er fullt dekket av Carlos tutorial. Akkurat nå er vi bare lære teknikker for å tegne på riktig objekt. Hvis du er forvirret om hvordan vi har tilgang til riktig form objekt, kan du re-lese Step 12 for full forklaring. Nå kan vi gå videre til å tegne med en farge velges fra ColorPicker La oss begynne med å legge en ny variabel utenfor alle funksjoner, men inne i klassen. Dette er hva vårt program vil bruke til å lagre den gjeldende fargen på blyant. Nå la oss gå ned til vår drawOnPlayer () Dette er i utgangspunktet å fortelle det til å trekke bruke RBG koden vår ColorPicker Her er hva linje med kode skal se ut nå. Til slutt må vi fullføre colorChangedPencil () Dette er rett og slett tildele hexValue eller RBG koden vår ColorPicker I neste trinn, vi kommer til å jobbe med å legge til en ny funksjon i spillet. Dessverre kan vi ikke bare la mye av plassholder rom inne i panelet i tilfelle vi kan Velg alle objekter innenfor vår Alternativer Hold nede Shift Bruk musen verktøyet og strekke hjørnene av vårt panel fylling (den grå farge) samt våre skisserer over skjermen Sørg for å endre noen koordinere basert stedene. For eksempel har vi nå behov for å endre plasseringen av blyanten sin ColorPicker fordi vår Pencil Tool knappen flyttet Som enhver god tegneprogram, trenger vi å gi spilleren en måte å starte sitt prosjekt. Hva er vel bedre enn en restart knapp for de brukerne som ikke kan lage perfekte tegne avgjørelser? La oss begynne med å lage en ny Button Jeg skal bruke denne knappen (Det står i FLA): Plasser en på verktøy Nå kan du legge dette hendelseshåndterer funksjonen til klassen vår: Les kommentarene i funksjon for en trinnvis forklaring på hva vi gjør Hvis du husker fra begynnelsen av opplæringen, målet for denne opplæringen var ikke å skape en dress up spill, men å skape et avansert dress up komponent som skal brukes i spill. Så langt har vi lagt til en dynamisk dress up komponent til den ellers statisk karakter. Neste, er vårt mål å integrere en enkel gang animasjon med vår spiller tilpasning. Dette er bare en demo for å vise deg hvor lett du kan bruke disse tilpasningene i en ekte spill. Til å begynne Jeg har laget en enkel animasjon med tweens. Jeg har i utgangspunktet tweened kroppsdelen MovieClip Her kan du se tidslinjen av spiller Nå
inne i katalog av vårt prosjekt. Dette vil være vårt viktigste klassen. Skriv inn CustomCharacter
inn publisere innstillingene som "Main Class"
Kontroller at CustomCharacter klasse
er som følger
pakke {import flash.display.Sprite..; import flash.display.BitmapData import flash.net.FileReference import flash.display.Loader import flash.display.Bitmap import flash.display.MovieClip import fl.controls.ColorPicker import flash.events.Event import flash.events.MouseEvent public class CustomCharacter strekker Sprite {offentlig funksjon CustomCharacter (): void {}}}
Trinn 3: Lage vår hovedperson
. Sørg for at du setter registreringspunkt hver kroppsdel til øvre venstre hjørne. Nå klikker på den nye spilleren MovieClip på scenen og satt forekomstnavnet til spiller
.
karakter!
Trinn 4: Opprette et ColorPicker
komponent til vårt bibliotek. Gå inn i komponenter panel ved å gå til Vindu > Komponenter. Finn den ColorPicker
klasse og dra den inn i biblioteket panel.
klassen vil se ut etter våre nye endringer.
pakke {import flash.display.Sprite; import flash.display.BitmapData importere flash.events.Event; import flash.net.FileReference import flash.display.Loader import flash.display.Bitmap import flash.display.MovieClip import fl.controls.ColorPicker import flash.events.MouseEvent public class CustomCharacter strekker Sprite {var myColorPicker: ColorPicker = new ColorPicker ( ); offentlig funksjon CustomCharacter (): void {myColorPicker.editable = true; myColorPicker.visible = false; addChild (myColorPicker); player.addEventListener (MouseEvent.CLICK, showPicker) myColorPicker.addEventListener (Event.CHANGE, colorChanged)} privat funksjon colorChanged (e: Hendelses): void {myColorPicker.visible = false; } Private funksjon showPicker (e: MouseEvent): void {myColorPicker.visible = myColorPicker.visible myColorPicker.move (stage.mouseX, stage.mouseY)}}}
. Vi blir så forteller det at det er en forekomst av ColorPicker
klasse ved å ringe = new ColorPicker ()
. Neste vi forteller vår ColorPicker
å være foranderlig og usynlig, slik at vi kan gjøre det dukke opp når vi klikker på spilleren. Deretter legger vi ColorPicker
klasse på scenen, selv om det ikke er synlig.
usynlig igjen
Trinn 5: Skille mellom kropp deler
å skille hvilket objekt du klikker på, slik at den kan bestemme hvilket objekt for å endre. Dette krever hjelp av en av AS3 kraftige MouseEvent funksjoner.
funksjon, vi kan bare bruke e.target
å målrette MovieClip som er virkelig blir klikket på . Vi kan bringe alpha av klikket objekt ned for å bekrefte hvilket objekt vi har å gjøre med. Bare legg koden under til showPicker () -funksjonen. !
e.target.alpha - = 0,5
Trinn 6: Forberedelse til Color
). Endelig satt navnet på forekomsten av hver av disse ____Color objekter til farge
. Nå skal hver kroppsdel har en farge
MovieClip inni den.
Trinn 7: Los Colores (Farger)
pakke {import flash.display.Sprite; import flash.display.BitmapData importere flash.events.Event; import flash.geom.ColorTransform; import flash.net.FileReference import flash.display.Loader import flash.display.Bitmap import flash.display.MovieClip import fl.controls.ColorPicker import flash.events.MouseEvent public class CustomCharacter strekker Sprite {var myColorPicker: ColorPicker = new ColorPicker ( ); Var myChangedObject: MovieClip; offentlig funksjon CustomCharacter (): void {myColorPicker.editable = true; myColorPicker.visible = false; addChild (myColorPicker); player.addEventListener (MouseEvent.CLICK, showPicker) myColorPicker.addEventListener (Event.CHANGE, colorChanged)} privat funksjon colorChanged (e: Hendelses): void {myColorPicker.visible = false; Var myChange: ColorTransform = new ColorTransform (); myChange.color = new uint ("0x" + e.target.hexValue) myChangedObject.transform.colorTransform = myChange} privat funksjon showPicker (e: MouseEvent): void {if (e.target.name == "farge") { myColorPicker.visible =! myColorPicker.visible myColorPicker.move (stage.mouseX, stage.mouseY) myChangedObject = MovieClip (e.target) myColorPicker.selectedColor = uint (myChangedObject.transform.colorTransform.color)}}}}
, for å få tilgang til programmet vårt. Dette er så vår showPicker ()
funksjonen kan fortelle vår colorChanged ()
funksjon som MovieClip sist var klikket på.
funksjon. Som du kan se, har vi lagt en liten brikke for å se om den klikket på objektets navn er "farge". Dette er bare en sjekk for å se om brukeren har faktisk klikket på spillerens disposisjon, sko, eller noe annet som ikke er ment å bli endret.
variabel til å være lik den klikket på objektet, e.target
, slik at vår colorChanged ()
funksjonen kan gjøre de siste endringene. Endelig kan vi fortelle vår ColorPicker product: ( myColorPicker
)
å ha den tidligere valgte fargen forhåndsvalgt. Hvis det er ingen, så vil det som standard svart.
myColorPicker.selectedColor = uint (myChangedObject.transform.colorTransform.color)
klasse har et .selectedColor
variabel. Dette er et tall som kan få en 6-sifret int (0xRRGGBB). I den andre delen, er vi konvertere dataene i parentes til en uint å bli vedtatt på ColorPicker.
, kommer inn i sin forvandle delen (der våre data er lagret), går inn i colorTransform data for transformere data, og trekke ut farge
variabel som holder vår RGB-kode (som vi deretter passere som den valgte fargen på fargevelger). Tenk på det som en katalog:
funksjon. Her skaper vi en ny forekomst av ColorTransform
klasse. Vi blir deretter sette farge
variabel inne i ColorTransform
klassen til den fargen som brukeren har valgt med fargevelgeren.
valgte fargen (e.target.hexValue)
å danne komplett variabel som vi kan gi videre til våre ColorTransform
. Det er fordi hexValue
gir fargene i "RRGGBB" streng format, og vi trenger dem i 0xRRGGBB heltallsformat. Som før, er vi konvertere alle de ekstra data til en ny uint ()
at ColorTransform
kan gjenkjenne
variabel til ny ColorTransform
variabel vi nettopp har laget.
Trinn 8:. Bytte mellom Blyant og maling bøtte
pakke {import flash.display.Sprite; import flash.display.BitmapData importere flash.events.Event; import flash.geom.ColorTransform; import flash.net.FileReference import flash.display.Loader import flash.display.Bitmap import flash.display.MovieClip import fl.controls.ColorPicker import flash.events.MouseEvent public class CustomCharacter strekker Sprite {var myColorPicker: ColorPicker = new ColorPicker ( ); Var myChangedObject: MovieClip; offentlig funksjon CustomCharacter (): void {myColorPicker.editable = true; myColorPicker.visible = false; addChild (myColorPicker); tools.bucket.visible = false; tools.pencil.visible = false; tools.bucket_btn.addEventListener (MouseEvent.CLICK, enableBucket) tools.pencil_btn.addEventListener (MouseEvent.CLICK, enablePencil)} privat funksjon enablePencil (e: MouseEvent): void {tools.bucket.visible = false; tools.pencil.visible = true; player.removeEventListener (MouseEvent.CLICK, showPicker) myColorPicker.removeEventListener (Event.CHANGE, colorChanged)} privat funksjon enableBucket (e: MouseEvent): void {tools.bucket.visible = true; tools.pencil.visible = false; player.addEventListener (MouseEvent.CLICK, showPicker) myColorPicker.addEventListener (Event.CHANGE, colorChanged)} privat funksjon colorChanged (e: Hendelses): void {myColorPicker.visible = false; Var myChange: ColorTransform = new ColorTransform (); myChange.color = new uint ("0x" + e.target.hexValue) myChangedObject.transform.colorTransform = myChange} privat funksjon showPicker (e: MouseEvent): void {if (e.target.name == "farge") { myColorPicker.visible =! myColorPicker.visible myColorPicker.move (stage.mouseX, stage.mouseY) myChangedObject = MovieClip (e.target) myColorPicker.selectedColor = uint (myChangedObject.transform.colorTransform.color)}}}}
hendelsen lyttere, og de er nå bare å bli
lagt til når vi velger maling bøtte alternativer. I stedet har vi lagt til to hendelsen lyttere for hver knapp, som kan kobles til to funksjoner som aktiverer verktøyet vi har klikket på. Funksjonene legge til sine egne hendelsen lyttere og fjerne hendelsen lyttere fra andre verktøy. De kan også ta de riktige grensesnittelementer synlig og usynlig.
Trinn 9: Ved hjelp av en fargevelger For Pencil
funksjon:
myColorPicker.visible = true myColorPicker.move (515, 20); //eller hva koordinatene passer din layout
funksjon:
myColorPicker.visible = false
Trinn 10: En Array of Body Parts
Var drawableParts: Array = [player.arm1, player.arm2, player.leg1, player.leg2, player.head, spiller. skjorte, player.hair];
Feiltype: Feil # 1009: Kan ikke en egenskap eller metode for et null objekt referanse.. på CustomCharacter ()
public class CustomCharacter strekker Sprite {var myColorPicker: ColorPicker = new ColorPicker ();. Var myChangedObject: MovieClip; Var bøtte: Boolean = false Var drawableParts: Array offentlig funksjon CustomCharacter (): void {drawableParts = [player.arm1, player.arm2, player.leg1, player.leg2, player.head, player.shirt, player.hair] myColorPicker .editable = true; myColorPicker.visible = false; addChild (myColorPicker); tools.bucket.visible = false; tools.pencil.visible = false; tools.bucket_btn.addEventListener (MouseEvent.CLICK, enableBucket) tools.pencil_btn.addEventListener (MouseEvent.CLICK, enablePencil)}
Trinn 11: Lage et lerret å trekke på
klasse. Først legger import uttalelse til de andre som
i begynnelsen av vår Hoved
klasse
import flash.display.Shape;.
konstruktør funksjon:
for (var i: int = 0; i < drawableParts.length; i ++) {var myShape: Shape = new Shape () myShape.graphics.lineStyle (1,0x330000); myShape.graphics.beginFill (0x3312FF, 0,5); myShape.graphics.drawRect (0,0, drawableParts [i] .width * 3, drawableParts [i] .height * 3); myShape.graphics.endFill (); myShape.name = "former" drawableParts [i] .addChild (myShape)}
loop som utløser en gang for hvert av elementene i vår array. I loop, skaper vi en ny forekomst av Shape klassen.
Trinn 11:. Maske våre Shapes
, fordi da de vil slå usynlig. Dette er hva vi kan gjøre i stedet.
MovieClip. Høyreklikk på vår farge
MovieClip og klikk "Kopier". Deretter høyreklikker du på et tomrom inne i vår hår
MovieClip og klikk "Lim inn i Place". Nå går inn i egenskapene til vår nye MovieClip og sette forekomstnavnet til maskclip
. Nå gå tilbake til vår spiller
MovieClip og gjenta dette for hvert objekt
sløyfe.
MyShape .mask = drawableParts [i] .maskclip
Trinn 12:. Tilgang Vår Canvas
av hver kroppsdel? " Dessverre er svaret ikke så enkelt. Men kan jeg gå gjennom det steg for steg. Dette Biten knytte oss direkte tilbake til vårt myShape
hvis vi sette det inn i en MouseEvent
. Hvorfor? Vel bare holder på å lese ..
e.target.parent.getChildByName ("figurer")
vi trenger å gå gjennom en haug av svingene for å finne det vi leter etter.
Først skal vi målet for MouseEvent
. Dette kan være gjenstand at musen klikket, løslatt, flyttet over, etc.
Det neste vi kommer til den overordnede av dette objektet. Dette er nødt til å være en kroppsdel MovieClip plakater (for eksempel armen) fordi de eneste klikkbare objekter er enten omrisset eller fylling av Spiller plakater (vi vil sørge for at det er den fylling senere).
Nå som vi er på den kroppsdelen MovieClip
, vi kan bruke getChildByName ("Object Name Here")
å få tilgang til objektet med den gitte navnet.
gjenstander som figurer
, ringer getChildByName ("figurer")
vil gi oss tilgang til dem.
Trinn 13: Svart og hvit farge
pakke {import flash.display.Shape.; import flash.display.Sprite; import flash.display.BitmapData importere flash.events.Event; import flash.geom.ColorTransform; import flash.net.FileReference import flash.display.Loader import flash.display.Bitmap import flash.display.MovieClip import fl.controls.ColorPicker import flash.events.MouseEvent public class CustomCharacter strekker Sprite {var myColorPicker: ColorPicker = new ColorPicker ( ); Var myChangedObject: MovieClip; Var bøtte: Boolean = false Var drawableParts: Array //En boolsk å sjekke for å se om musa er tegning Var tegning: Boolean = false offentlig funksjon CustomCharacter (): void {drawableParts = [player.arm1, player.arm2, spiller. leg1, player.leg2, player.head, player.shirt, player.hair] myColorPicker.editable = true; myColorPicker.visible = false; addChild (myColorPicker); tools.bucket.visible = false; tools.pencil.visible = false; tools.bucket_btn.addEventListener (MouseEvent.CLICK, enableBucket) tools.pencil_btn.addEventListener (MouseEvent.CLICK, enablePencil) for (var i: int = 0; i < drawableParts.length; i ++) {var myShape: Shape = new Shape () myShape.name = "former" drawableParts [i] .addChild (myShape) myShape.mask = drawableParts [i] .maskclip}} privat funksjon enablePencil (e: MouseEvent): void {tools.bucket.visible = false; tools.pencil.visible = true; player.removeEventListener (MouseEvent.CLICK, showPicker) //Fjerne eventListener lagt inn av vår bøtte verktøyet myColorPicker.removeEventListener (Event.CHANGE, colorChanged) //sjekker for å se når vår ColorPicker skifter farge mens Pencil er valgt myColorPicker.addEventListener (Event.CHANGE , colorChangedPencil) //sjekker for å se om musen er ned, opp eller flytte player.addEventListener (MouseEvent.MOUSE_DOWN, drawOnPlayer) player.addEventListener (MouseEvent.MOUSE_UP, dontDrawOnPlayer) player.addEventListener (MouseEvent.MOUSE_MOVE, moveDrawOnPlayer) < /b > myColorPicker.visible = true myColorPicker.move (515, 20); } //Funksjon for å sjekke for bevegelse av musen, mens du tegner privat funksjon moveDrawOnPlayer (e: MouseEvent): void {//Hvis vår musen svever over fylling av spilleren, og hvis vi er faktisk tegning if (e.target. Navnet == "farge" & & tegning) {//Tegn en linje fra den grafiske delen av vår form MovieClip til plasseringen av musen //Vi må bruke ourCanvas.mouseX eller mousey fordi det gir oss lokale koordinatene muse at våre lerret kan bruke e.target.parent.getChildByName("shapes").graphics.lineTo(e.target.parent.getChildByName("shapes").mouseX,e.target.parent.getChildByName("shapes").mouseY); }} Privat funksjon dontDrawOnPlayer (e: MouseEvent): void {//Når du slipper museknappen, slutte å tegne tegning = false; } //Ny funksjon privat funksjon drawOnPlayer (e: MouseEvent): void {//Når du klikker, begynne å tegne tegning = true; //Hvis du klikker på en "farge" MovieClip if (e.target.name == "farge") {//Sett størrelsen på linje 10 og gjøre det svart (0x000000) e.target.parent.getChildByName ("figurer"). graphics.lineStyle (10, "0x000000") //Flytt tegning peker på hvor musen er på (se moveDrawOnPlayer () for mer dybde) e.target.parent.getChildByName("shapes").graphics.moveTo(e.target.parent.getChildByName("shapes").mouseX,e.target.parent.getChildByName("shapes").mouseY); }} Privat funksjon enableBucket (e: MouseEvent): void {tools.bucket.visible = true; tools.pencil.visible = false; myColorPicker.visible = false //Fjern bøtte hendelsen lyttere player.removeEventListener (MouseEvent.MOUSE_DOWN, drawOnPlayer) player.removeEventListener (MouseEvent.MOUSE_UP, dontDrawOnPlayer) myColorPicker.removeEventListener (Event.CHANGE, colorChangedPencil) player.addEventListener (MouseEvent.CLICK, showPicker ) //Se om vår fargen har endret myColorPicker.addEventListener (Event.CHANGE, colorChanged) //Fjern gamle hendelsen lyttere player.removeEventListener (MouseEvent.MOUSE_DOWN, drawOnPlayer) player.removeEventListener (MouseEvent.MOUSE_UP, dontDrawOnPlayer) player.removeEventListener (MouseEvent .MOUSE_MOVE, moveDrawOnPlayer)} //Placeholder funksjon for når vår ColorPicker har valgt en ny blyant farge privat funksjon colorChangedPencil (e: Hendelses): void {} privat funksjon colorChanged (e: Hendelses): void {myColorPicker.visible = false; Var myChange: ColorTransform = new ColorTransform (); myChange.color = new uint ("0x" + e.target.hexValue) myChangedObject.transform.colorTransform = myChange} privat funksjon showPicker (e: MouseEvent): void {if (e.target.name == "farge") { myColorPicker.visible =! myColorPicker.visible myColorPicker.move (stage.mouseX, stage.mouseY) myChangedObject = MovieClip (e.target) myColorPicker.selectedColor = uint (myChangedObject.transform.colorTransform.color)}}}}
Trinn 14: Tegning Med Color
. Dette er ganske lik den prosessen som vi brukte på bøtte verktøyet.
Var pencilColor: String = "000000";
function.Focus din oppmerksomhet på linjen som setter linestyle () av formen vi tegner på. Den andre parameter i funksjonen skal være "0x000000". Endre KUN som parameter til:
uint ("0x" + pencilColor)
mens du legger den "0x" nødvendig for å fullføre . farge
e.target.parent.getChildByName ("figurer") graphics.lineStyle (10, uint ("0x" + pencilColor) )
funksjon, som kalles når en ny blyant farge er valgt. Gå ned til den og legge denne linjen med kode:
pencilColor = e.target.hexValue
til vår pencilColor
variabel
Trinn 15: Utvide Knapper Panel
skje for å legge en annen funksjon. Du kan bruke dette som en rask og skitne måte å forlenge panelet for å få mer plass til andre knapper og verktøy for vår søknad
Trinn 1:. Velg
MovieClip.
Trinn 2:. Shift
tasten og trykk på Venstre
nøkkelen til å skyve MovieClip til venstre
< h3> Trinn 3: Strekk
Trinn 4:. omstille
myColorPicker.move (440, 20);
Trinn 16:. Tilbake vår data
heter Omstart Hotell og legge det til våre verktøy panel.
filmklipp og gi det en forekomst navnet "reset". Neste legge følgende hendelse lytteren til vår konstruktøren funksjon:
tools.reset.addEventListener (MouseEvent.CLICK, resetEverything)
privat funksjon resetEverything (e: MouseEvent) : void {//Looping gjennom alle objektene i vår drawableParts array (alle våre strekkbare objekter) for (var i: int = 0; i < drawableParts.length; i ++) {//Finne og fjerne vår gamle < em > figurer < /em > objekt drawableParts [i] .removeChild (drawableParts [i] .getChildByName ("former")); //Opprette en ny form objekt Var myShape: Shape = new Shape () //Å gi vår nye lerret et navn myShape.name = "figurer" //Legge til våre objekt drawableParts [i] .addChild (myShape) //Maske vår lerret til objektet vi trekke på myShape.mask = drawableParts [i] .maskclip //Finne "farge" MovieClip sin colorTransform eiendom og omstilling til en ny ColorTransform objekt drawableParts [i] .getChildByName ("farge"). transform.colorTransform = new ColorTransform ()}}
Trinn 17: Integrering Animation
s for å gjøre spilleren ser ut som han er på tur. Du kan se animasjonen nedenfor. Husk at hensikten med denne opplæringen er ikke å designe selve animasjonen, men for å lære hvordan du kan integrere den med programmet som vi allerede har bygget. Men, akkurat som de andre elementene i programmet, er animasjonen inkludert i kildekoden.
MovieClip.