Creating en Virtual Joystick for touch-enheter
15
Del
5
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Dette innlegget er en del av en serie som heter GreenSock Tweening Platform.Use Flash Prosjekt Panel bygge en dynamisk AS3 MenuUsing Native flerberøringsbevegelser i Actionscript 3.0
Mange nettbrett og berøringsskjerm enheter har dukket opp, og det er på tide å lage spill som har virtuell joystick støtte på skjermen for enklere gameplay. Les videre og finn ut hvordan du kan opprette en virtuell joystick for spill på berørings aktiverte enheter ..
Forutsetning
Før du kan kompilere kildefilene med denne opplæringen, laste GreenSock er TweenLite bibliotek for AS3 inn i "greensock" undermappe i prosjektmappen. (Omtalt i trinn 18)
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot.
Hvis du har et snev aktivert enhet som støtter Flash, åpne denne siden i det og prøve det ut! Ellers bruker musen til å dra joysticken eller klikk på knappen
Trinn 1:. Opprett en ny AS3 Document
La oss begynne med å lage en ny AS3 dokument i Flash Professional CS5 .
Gå til Dokumentinnstillinger i panelet Egenskaper og kontroller at dokumentformatet (550x400) og bakgrunnsfarge (# 000000) er som vist på bildet nedenfor:
På Properties panel angir et dokument klasse navnet "com.MyApp". Dette er den klassen som vi vil skape som skal representere den viktigste applikasjonen (mer info her). Vi kommer til å lage andre klasser som er spesifikke for styrespaken senere så vi kan inkludere joystick i andre programmer med et par linjer med kode.
Lagre filen som "JoystickApp.fla".
< hr>
Trinn 2: Opprett dokument Class
Nå, klikk på blyantikonet ved siden av klassenavnet som vil utløse redigering av den klassen. Siden det er ingen klasse, vil vi måtte lage den.
Når spurt om å velge programvaren som du vil bruke til å redigere klassen definisjonen, velger Flash Professional. Du skal se den nye klassen definisjonen forhåndsutfylt i en ny Actionscript-fil:
pakke com {import flash.display.MovieClip; public class MyApp strekker MovieClip {offentlig funksjon MyApp () {//konstruktør kode}}}
Lagre denne .as filen som "MyApp.as" i samme mappe som FLA fil under undermappene "\\ com \\" . Merk at du kan gi dine egne navn og mappestrukturer. Strukturen i mappen refererer til strukturen i AS pakke
Trinn 3:. Tegning Basic Joystick og Knott
I dette trinnet, vil vi trekke en grunnleggende sett med sirkler å representere vår Joystick. I senere trinn, skal vi forbedre brukergrensesnittet for å passe våre jazzy behov. Gå videre en tegne en sirkel på scenen av din FLA-fil. Gi det følgende egenskaper. Bredde: 160, Høyde: 160, Farge: #CCCCCC. Plasser den på x: 100, y: 300.
Konverter denne sirkelen til en MovieClip og navngi MovieClip "Joystick". Også ikke glem å velge registreringspunktet som sentrum under konvertering ().
Plasser MovieClip "Joystick" på scenen i nedre venstre hjørne som vist på bildet nedenfor. Dette er bare for en referanse. Vi vil legge til movieclips dynamisk på scenen fra "MyApp" class senere
Tegn en sirkel (mindre) på scenen med verdier Bredde:. 50 piksler, Høyde: 50 piksler. Konvertere det samme til en ny MovieClip og gi den navnet "JoystickKnob". Plasser den på toppen av "Joystick" MovieClip som vist på bildet nedenfor.
Dette er hvordan den grunnleggende versjonen av Joystick vil se ut når vi fullføre alle trinnene. Vi vil dynamisk plassere den i posisjonen som vist ovenfor. Nå som vi har en idé om hvordan det ville se ut, la oss gå videre og skrive manuset for det samme. Du kan nå slette de to movieclips fra scenen
Trinn 4:. Knyt UI til Custom Classes
La oss nå knytte UI vi trakk til sine egendefinerte klasser. Gå til biblioteket og høyreklikk på "Joystick" MovieClip. Velg "Egenskaper".
Sjekk i boksen som sier "Export for Action". Endre Class navn til "com.controls.Joystick". Vi vil skape en undermappe i "com" -mappen og har kode knyttet til kontroller i "com.controls" pakken.
Klikk på blyantikonet ved siden av din klasse navn. Velg "Flash Professional" hvis bedt om redaktøren. En ny .as filen er opprettet med klassenavnet "Joystick", utvidet fra "MovieClip" -klassen.
Gjenta den samme prosessen for den andre MovieClip "JoystickKnob". Gi klassenavnet "com.controls.JoystickKnob".
Lagre de to klassefilene som "Joystick.as" og "JoystickKnob.as" hhv.
Dette er hvordan biblioteket skal se Med de to movieclips knyttet til deres egendefinerte klasser:
Trinn 5: Joystick Knob Class
Det er anbefalt å sette Knob opprinnelse med hensyn til styrespak. Dette vil hjelpe oss å bringe tilbake knott til sin opprinnelige plassering når knotten er dratt et annet sted og løslatt.
For dette vil vi bruke to enkle eiendommer i "JoystickKnob" -klassen.
Emballasjen. kontrollene {import flash.display.MovieClip; public class JoystickKnob strekker MovieClip {private Var _origin_x: Number; private Var _origin_y: Number; offentlig funksjon JoystickKnob () {//konstruktør kode}}}
La oss nå skrive getter og setter-metoder for å lese og skrive _origin_x og _origin_y egenskaper. Legg følgende metoder i "JoystickKnob" class
offentlig funksjon får origin_x (). Number {return _origin_x;} offentlig funksjon satt origin_x (o_x: Number): void {_origin_x = o_x;} offentlig funksjon får origin_y () : Number {return _origin_x;} offentlig funksjon satt origin_y (o_y: Number): void {_origin_y = o_y;}
Legg merke til at funksjonsnavnene ikke har "_" (understrek) i begynnelsen av navnene deres. Dette er fordi vi ville bare navnene til eksterne klasser å være origin_x og origin_y
Trinn 6:. Basic Joystick Class
La oss begynne med å legge parametre til konstruktøren av " Joystick "class. Vi tar imot 2 parametere - left_margin: Antall og bottom_margin: Number. Dette vil hjelpe oss plassere Joystick uansett hvor vi ønsker når vi instantiate MovieClip.
Senere skal vi tildele de to parametrene til de private variabler av "Joystick" class. Din koden skal se ut omtrent slik:
pakken com.controls {import flash.display.MovieClip; public class Joystick strekker MovieClip {private Var my_x: Number; private Var my_y: Number; offentlig funksjon Joystick (margin_left: Antall, margin_bottom: Number) {my_x = margin_left; my_y = margin_bottom; }}}
Vi trenger nå å skrive "initial ()" metoden for å angi posisjonen til Joystick på skjermen. Vi vil også legge til "JoystickKnob" MovieClip dynamisk i denne metoden. Denne metoden inneholder en "Event" type parameter. Ikke bry deg om det ennå. Vi vil komme til det i et minutt.
Rett før du legger til "JoystickKnob" MovieClip dynamisk, må vi importere "JoystickKnob" klassen i denne klassen. Legg til følgende import uttalelse:
import com.controls.JoystickKnob;
Nå som vi har importert "JoystickKnob" class, erklærer en variabel i klassen til å representere knotten
private Var knott: JoystickKnob;.
Nå legger følgende funksjon til klassen
privat funksjon init (e: Hendelses = null). void {this.x = my_x + this.width /2; this.y = stage.stageHeight - my_y - this.height /2; knotten = new JoystickKnob (); knob.x = 0; knob.y = 0; knob.origin_x = 0; knob.origin_y = 0; addChild (knott); //Knob.addEventListener (MouseEvent.MOUSE_DOWN, mousedown); //Stage.addEventListener (MouseEvent.MOUSE_UP, mouseReleased); knob.buttonMode = true;}
Som du ser, har vi plassert den "Joystick" MovieClip på scenen i henhold til de marginene konstruktøren akseptert, og vi har lagt til "knotten" på scenen. Vi har også lagt til noen hendelsen lyttere til "knotten" og "scenen" for MOUSE_DOWN og MOUSE_UP hhv. Vi skal skrive metoder mousedown () og mouseReleased () senere i klassen for å aktivere dra og slippe av knotten. Hendelses lyttere er for tiden kommentert ut; . Ikke glem å uncomment de to linjene etter at vi skrive metodene
Merk at MouseEvent. ≪ EVENT_NAMES > sette å røre hendelser på en touch tablet /enhet. Så det er helt OK å bruke mus hendelser i stedet for touch.
Vi må nå kaller denne metoden fra konstruktøren. I stedet for å kalle metoden blindt, er det en god vane å sjekke for eksistensen av "scenen" og først da kalle dette. Hvis "scenen" eiendom for "Joystick" MovieClip ennå ikke er initialisert av denne tiden (som er et hjørne sak), må init () metode for å bli kalt etter det kan bestemme "scenen" eiendom. Derfor vi kaller init () metoden i under vist måte (legg dette settet med linjer inni konstruktør):
if (scene) {init ();} else {addEventListener (Event.ADDED_TO_STAGE, init);} < p> Vi bør ikke glemme å fjerne den ekstra EventListener. Derfor la oss legge til et par linjer inne i (begynnelsen av) init () -metoden:
if (hasEventListener (Event.ADDED_TO_STAGE)) {removeEventListener (Event.ADDED_TO_STAGE, init);}
Trinn 7: Legg Joystick til Stage
Før vi kjøre denne koden og sjekke resultatet, må vi på å bruke "Joystick" klasse fra innsiden av "MyApp" class. Legg til følgende kode til din konstruktøren av "MyApp" class. Også importer "Joystick" class og erklære en egenskap til å representere "Joystick" MovieClip. Så din "MyApp" klasse skal se slik ut på dette tidspunktet:
pakke com {import flash.display.MovieClip; import com.controls.Joystick; public class MyApp strekker MovieClip {private Var joystick: Joystick; offentlig funksjon MyApp () {joystick = new Joystick (30, 30); addChild (joystick); }}}
Du kan nå utføre og teste appen. Dette ville bare dynamisk legge til "Joystick" MovieClip på scenen forlate 30px margin på venstre og nederst som sendes til konstruktøren. Her er en skjermdump av SWF:
Trinn 8: Legge Interaksjon til Knob
Nå er det på tide å legge samhandling til "JoystickKnob" MovieClip, gjør det flyttbare rundt Joystick s omkrets. I "Joystick" -klassen, uncomment de to hendelsen lyttere som vi kommentert før. Vi skal nå skrive mousedown () og mouseReleased () metoder for "knott".
Vi vil bare legge til en startdrag () -metoden inne i mousedown () -metoden. Gi egenskapene for å angi grensen for "Joystick" MovieClip. Ikke glem å importere klassene flash.geom.Rectangle og flash.events.MouseEvent (hvis du ikke har)
privat funksjon mousedown (event: MouseEvent):. Void {knob.startDrag (falsk, nytt rektangel ( - this.width /2, - this.height /2, this.width, this.height));}
mouseReleased () er en enkel stopdrag () for nå. Vi skal legge til mer kode senere å "animere" back rattet til sin "origin_x" og "origin_y". Akkurat nå, det bare smekker tilbake når du slipper muse
privat funksjon mouseReleased (event: MouseEvent):. Void {knob.stopDrag (); knob.x = knob.origin_x; knob.y = knob.origin_y;}
Du kan nå utføre grunnleggende samspillet av Joystick. Kompilere og kjøre! Her er hvordan det skal oppføre seg:
Trinn 9: Oppdager Knob Movement
La oss prøve og oppdage "knott" bevegelse i Joystick og finne ut hvordan vi ønsker å bruke det til en enkel top-down view sprite.
Når "knott" blir dratt rundt, trenger vi å lese posisjonen til det i forhold til "Joystick" MovieClip og endre sprite. Vi skal lage en sprite senere. For nå, la oss bare lese verdien av knotten posisjon.
For å lese posisjonen til knott mens du drar, må vi inkludere en ENTER_FRAME metode. Legg den under metoden til "Joystick" class:
privat funksjon knobMoved (hendelse: Hendelse): void {trace (knob.x + "," + knob.y);}
Legg til ENTER_FRAME arrangementet lytteren bare før startdrag () skjer inne i mousedown () metode:
privat funksjon mousedown (event: MouseEvent): void {this.addEventListener (Event.ENTER_FRAME, knobMoved); knob.startDrag (falsk, nytt rektangel (- this.width /2, - this.height /2, this.width, this.height));}
Vi ønsker ikke at ENTER_FRAME metode som skal kjøre hele tid. Dette kan vise seg kostbart. Derfor vil vi legge til lytteren bare når du drar starter og fjerne lytteren så snart vi stopdrag (). Tilsett removeEventListener rett etter stopdrag ()
if (this.hasEventListener (Event.ENTER_FRAME)) {this.removeEventListener (Event.ENTER_FRAME, knobMoved);}.
kompilere og kjøre SWF nå å teste ut dette. Lese verdiene i utgangsvinduet.
Trinn 10: Knipser den Knob
Siden det er berøringsskjermer som vi prøver å målrette, er det ingen fysiske følelsen av kontrollene. Derfor er det en klar mulighet for at brukeren kan bare berøre utenfor knott og prøve å dra joysticken rundt. Det er urettferdig og upraktisk å forvente at brukeren til nettopp berøre og dra knotten. For å overvinne dette forvirring, er det en god idé å knipse knotten til stedet der berørings skjer på styrespak.
I dette trinnet, vil vi knipse "knott" MovieClip til det punktet på "Joystick" der selve kontakten kan skje.
I "Joystick" class, legge til følgende private metode:
privat funksjon snapKnob (event: MouseEvent): void {knob.x = this.mouseX; knob.y = this.mouseY; mousedown (null);}
I koden ovenfor, setter vi den "knotten" MovieClip sin x og y koordinater til "Joystick" MovieClip sin mouseX og mousey koordinater. Vi er også ringe mousedown (null) metode for å starte å dra prosessen.
Denne metoden vil bli kalt ved å legge til en hendelse lytteren. La oss gjøre det i init () -metoden. Rett rundt arrangementet lytteren som kaller mousedown () -metoden. Legg til følgende linje i init () -metoden:
this.addEventListener (MouseEvent.MOUSE_DOWN, snapKnob); knob.addEventListener (MouseEvent.MOUSE_DOWN, mousedown), stage.addEventListener (MouseEvent.MOUSE_UP, mouseReleased);
Ifølge koden ovenfor, så snart "Joystick" MovieClip ("dette") får en MOUSE_DOWN hendelse, kaller det snapKnob () -metoden. Inturn, snaps denne metoden "knotten" MovieClip til rørte posisjon. Senere ringer mousedown (null) -metoden, tvinger vi startdrag () prosess slik at brukeren føler at han har rørt bryteren
Trinn 11:. Opprette en Hero MovieClip
Nå at vi har den grunnleggende Joystick arbeids, må vi lage en "Hero" MovieClip å begynne å flytte den i henhold til "knott" posisjonsverdier.
Flytt til FLA filen for nå og tegne en sirkel, som Vist under. Konvertere den til MovieClip og bruke senteret registreringspunktet () igjen. Gi MovieClip navnet "Hero". Du kan velge å gi de egenskaper - Bredde: 30px, Høyde: 30px, Farge: # 0099CC
Også, eksport til Action under konvertering til MovieClip og gi den klassen navnet "com.Hero" Dette er hvordan MovieClip vil se ut når det er konvertert. Vi skal nå fjerne MovieClip fra scenen som vi vil legge til "Hero" MovieClip dynamisk på scenen fra "MyApp" -klassen. Etter at du har eksportert den MovieClip med egendefinert klasse navnet "com.Hero", ikke glem å opprette den nye klassen filen og lagre den i "com" -mappen. La oss åpne "MyApp.as" og legge til "Hero" MovieClip dynamisk. Siden vi har eksportert "Hero" MovieClip fra Library of "JoystickApp.fla", åpne "MyApp.as", import "com.Hero" class og erklære en ny eiendom "helt" og legge til følgende kode før "joystick" MovieClip er instansiert i konstruktøren. Dette er hvordan din "MyApp" klasse skal se slik ut: Merk at vi også har justert den MovieClip til midten av scenen. Hvis du kompilere og kjøre SWF, skal du se "hero" MovieClip i sentrum av scenen Nå, for den "joystick" MovieClip å få tilgang til "helt" MovieClip som er lagt til på scenen, skal vi bruke en enkel metode for å overføre "hero" MovieClip til konstruktøren av "joystick" MovieClip sammen med "margin_left" og "margin_bottom" egenskaper. Åpne "com.controls.Joystick" class. Import "com.Hero" class og legge til en tredje parameter til konstruktøren, som vist nedenfor: Nå, siden vi ønsker denne parameteren til nås over denne klassen, vil vi opprette en privat variabel kalt "helt" i denne klassen: Senere tildele den tredje parameter vi nettopp passert til denne variabelen inne i konstruktøren som vist nedenfor . Det siste trinnet er å passere "hero" MovieClip fra "MyApp" klasse etter at den er lagt, til "joystick" MovieClip mens det blir instansiert. Legg til (pass) den tredje parameteren til "joystick" MovieClip konstruktør På dette punktet, "helten" MovieClip på scenen er tilgjengelig fra "joystick "MovieClip. La oss klargjøre "Hero" klasse for å kunne bevege seg rundt som diktert av "joystick" MovieClip. Vi burde ha opprettet en grunnleggende klasse nå som ser slik ut: Legg følgende egenskaper til klassen. Vi skal gjøre bruk av dem under bevegelsen Som eiendommene er selvforklarende, må du ha forstått hva de brukes til. La oss gå videre til neste skritt og begynne å animere "hero" MovieClip. De fire boolske egenskapene vi lagt brukes til å bestemme hvilken retning Hero er ment å flytte. Vi vil sette disse egenskapene til sant eller usant gjennom "Joystick" class. Før vi gjør det, la oss forberede "Hero" class med evne til å bevege seg Legg en tom metode kalt "heroMove ()" i "Hero" class Vi skal kalle denne metoden gjennom en ENTER_FRAME hendelse lytteren. Legge til hendelsen lytteren i konstruktøren av denne klassen Igjen, vennligst ikke glem å importere generiske klasser som "flash. events.Event ", osv Nå har vi spurte" heroMove () "metoden i" Hero "class å bli kalt på ENTER_FRAME hendelsen. Det er der vi vil sjekke de 4 boolske variabler og flytte Hero tilsvarende. Men før vi gjør det, la oss legge den spesifikke koden i "Joystick" class. Åpne "Joystick.as" filen og gå til metode kalt "knobMoved ()". Vi har sporet uttalelse i den metoden som sporer x og y koordinatene til "knotten" MovieClip. Bytt ut spor uttalelse med følgende uthevede linjer og dine "knobMoved ()" metoden skal se slik ut: Hva vi har gjort i koden ovenfor, er å skille "Venstre eller Høyre" og "opp eller ned" bevegelse relatert kode som det ikke vil være noe scenario der helten ville gå til venstre og Den figuren nedenfor vil forklare den enkle logikken: Figuren over viser to røde stiplede linjene kryssende i sentrum som representerer (0,0) eller "opprinnelse" eller "registreringspunktet" av "joystick" MovieClip <. br> De 4 røde skyggebokser representerer området hvor x og y-verdier av "knott" MovieClip vil bli overlevert til "helten" MovieClip. Også teksten på den røde skyggen bokser viser retninger. De blå rektanglene representerer ett enkelt retning. Mens touch /knott er her, til det bare bestillinger bevege seg i en retning. observere Også 40x40 px kvadrat (grå) i sentrum. De representerer rennesteinen området der hvis "knotten" MovieClip flyttes, skjer det ingenting. Denne renne området er å tilveiebringe en liten fingerbevegelser på skjermen ved berøring uten å forstyrre spillets oppførsel. Siden det ikke er noen fysiske overflaten for brukeren å føle, er dette gutter området er nødvendig, i hvert fall for noen grunnleggende spill, med mindre spillet er ment å være ultra sensitive til styrespak. La oss se på " Venstre eller Høyre "break-up: Her er" Up and Down "break-up: Nå har vi spurte "heroMove ()" metoden i "Hero" class å bli kalt på ENTER_FRAME hendelsen. Det er der vi vil sjekke de 4 Boolske egenskaper "hero" MovieClip og flytte den deretter. Gå videre og omfatte følgende uttalelser i "heroMove ()" metoden for å gjøre det "helt" MovieClip beveger seg i henhold . til grunnleggende knott bevegelse Til slutt, ikke glem å tilbakestille de 4 boolske variablene til "false" i "mouseReleased ()" metoden i "Joystick" Class. Unnlate å gjøre dette vil resultere i konstant bevegelse av "helten" MovieClip selv mens ikke dra knotten (dette blir utløst fra "heroMove ()" metoden fra "Hero" klassen gjennom ENTER_FRAME hendelse). Dette er hvordan din SWF bør oppføre seg. Gå videre og flytte Joystick knott under Vi prøver å ha en ovenfra og ned-spill med en person avbildet vandre rundt. Holde komplekse illustrasjoner og animasjoner fra hverandre, ville vi i det minste ønsker å dekke den retning eller rotasjon av Hero ifølge hans bevegelse. For dette vil vi gjøre en liten tillegg til "helten" MovieClip i FLA-filen. Vi vil legge til noe som ser ut som en nese. Åpne "Hero" symbol i biblioteket og legge til en liten sirkel som skal representere nesen. Nedenfor er zoomet inn versjonen av objektet blir trukket inn i "Hero" symbol og ved siden av det er den faktiske størrelsen visning av MovieClip. La oss nå endre "rotasjon" eiendom av "helten" MovieClip i "Hero" class. Åpne "Hero" klassen og legge til følgende kode i begynnelsen av "heroMove ()" metoden: I koden ovenfor, har vi gjort sjekker for alle 8 retninger og rotert "hero" MovieClip tilsvarende. Kompilere og kjøre koden din nå bør resultere i følgende: Dette avslutter den grunnleggende virkemåten til styrespak og Hero I dette trinnet skal vi forstå hvordan TweenLite bibliotek fungerer og hvor lett vi kan innlemme det i vår demo, slik at vi kan få litt bedre effekt for animasjoner. Vi vil velge å bruke et bibliotek kalt TweenLite utviklet av GreenSock. Dette er en veldig lett vekt tweening motor som er rask for en utvikler og har mindre innvirkning på ytelsen til animasjoner. Nå er det 2 vanlige måter å sette dette biblioteket opp for bruk i dine prosjekter. OR Knytte dynamisk har en fordel. Du kan ende opp med å bruke samme mappe som finnes på noen annen felles sted i mange forskjellige prosjekter. Hvis du velger å kopiere "greensock" -mappen i prosjektets mappe, vil du kunne bruke den kun i det prosjektet. Å gjøre dette til slutt for andre prosjekt kan føre til duplikater av GreenSock bibliotek og hvis selve motoren er utgitt med feilrettinger eller nye funksjoner, må du oppdatere dine lokale mapper for mange ulike prosjekter. Men for denne prosjektet, vil vi bare kopiere mappen til vårt prosjekt beliggenhet. Nå skal vi importere klasser som vi trenger for å begynne å animere det knott. Åpne "Joystick.as" fil og legge denne import uttalelse: La oss legge en enkel animasjon til Knott når det slippes, og trenger å komme tilbake til sin opprinnelse. Dette gjøres i "Joystick.as" file Legg følgende metode for klassen. Nå legger funksjonen kaller å "mover ()" i metoden "mouseReleased ()" på slutten: Don ' t glem å fjerne følgende 2 linjer i "mouseReleased ()" metoden: Nå kan du prøve å dra knotten og frigjøre den fra sentrum . Legg merke til animasjonen i under swf: Siden en Joystick bringer tilbake rattet til sin opprinnelse, legger det også en naturlig rebound effekt. Heldigvis har vi meget mindre arbeid å gjøre for å oppnå dette ved hjelp TweenLite Åpne "Joystick.as" og Import en pakke med TweenLite som gjør at de lettelser effekter. Det er en egenskap som støttes av TweenLite som vil tillate deg å definere hvilken type animasjon. I vårt tilfelle er det den Bounce effekten vi trenger. Så, gå videre og inkludere eiendom "lette" i "TweenLite.to ()" metoden som vist nedenfor: Test nedenfor SWF: The Bug Du må være i stand til å finne en liten svikt eller feil i ovennevnte SWF. Hvis du raskt prøve å trykke "rundt" knappen og slipper den, vil ikke knotten ikke svare. Dette er på grunn av animasjonen. Innen du raskt tappe mer enn en gang, animasjonen som ble utløst fra første springen er ikke over. Uten animasjonen fullført, TweenLite tvinge "knott" for å animere tilbake til sin opprinnelse. The Fix For å fikse dette, må vi tvinge-stopper animasjonen når det er et trykk på "joystick" MovieClip. For å være i stand til å stoppe en animasjon med makt, vi trenger å få identifikator som representerer tween /animasjon vi gjør. Vi starter med å lage en identifikator (variabel) av typen "TweenLite". Lag denne nye variabelen i "Joystick" class: Nå animasjonen vi utfører ved hjelp av "TweenLite.to ()" skal tildeles bli identifisert ved denne egenskapen vi opprettet. Vi må gjøre en liten endring i tween uttalelse. Fjern kallet for "å ()" static metode og endre den til følgende: Den nye eiendommen, "knob_tween" er den vi bruker til tvangs stoppe animasjonen. Gå til metoden "mousedown ()" og legge til følgende utsagn i begynnelsen av metoden: Test og sammenligne SWF nedenfor til den forrige. Tapp raskt på "joystick" MovieClip. Legg merke til endring i atferd Dette dekker den endelige atferden Joystick Til nå har vi bare brukt to flat fargede sirkler å representere en joystick og knott. Jeg vil ikke utdype denne delen av opplæringen som det er subjektivt, og har ingen grenser for hvor kreativ det kan bli. Jeg vil vise deg noen eksempler design som kan tilpasses til denne logikken for å forbedre opplevelsen og utseendet på spillet ditt. Eksempel 1 (skjermbilde) Eksempel 2 (skjermbilde) Vi skal gjennomgå endelige koden som referanse for hver .as fil under MyApp .as JoystickKnob.as
Trinn 12: Legge Hero til Stage
pakke com {import flash.display.MovieClip; import com.controls.Joystick; import com.Hero; public class MyApp strekker MovieClip {private Var joystick: Joystick; private Var helten: Hero; offentlig funksjon MyApp () {hero = new Hero (); hero.x = stage.stageWidth /2; hero.y = stage.stageHeight /2; addChild (helten); joystick = new Joystick (30, 30); addChild (joystick); }}}
Trinn 13:. Passerer Hero MovieClip å Joystick Class
offentlig funksjon Joystick (margin_left: Antall, margin_bottom: Antall, hero_mc: Hero) {
private Var helten: Hero;
helten = hero_mc;
joystick = new Joystick (30, 30, helten);.
Trinn 14: Hero Class
pakken com {import flash.display.MovieClip; public class Hero strekker MovieClip {offentlig funksjon Hero () {}}}
pakken com {import flash.display.MovieClip.; public class Hero strekker MovieClip {private Var walk_speed = 2; offentlig Var move_left: Boolean = false; offentlig Var Move_up: Boolean = false; offentlig Var move_right: Boolean = false; offentlig Var move_down: Boolean = false; offentlig funksjon Hero () {}}}
privat funksjon heroMove (event..: hendelse): void {}
offentlig funksjon Hero () {this.addEventListener (Event.ENTER_FRAME, heroMove);}.
Trinn 15: Forstå Knob Movement
privat funksjon knobMoved (hendelse: Hendelse): void {//VENSTRE ELLER HØYRE if (knob.x > 20) {hero.move_right = true; hero.move_left = false; } Else if (knob.x < -20) {hero.move_right = false; hero.move_left = true; } Else {hero.move_right = false; hero.move_left = false; } //OPP ELLER NED if (knob.y > 20) {hero.move_down = true; hero.move_up = false; } Else if (knob.y < -20) {hero.move_down = false; hero.move_up = true; } Else {hero.move_down = false; hero.move_up = false; }}
høyre eller flytte opp og Selge ned. Så satt vi på "helten" MovieClip sin 4 retnings variabler til sant eller usant basert på x og y posisjoner av "knott" MovieClip i forhold til midten av "joystick" MovieClip.
Trinn 16: Animere Hero
privat funksjon heroMove (hendelse: Hendelse): void {if (move_left) {this.x - = walk_speed; } If (Move_up) {this.y - = walk_speed; } If (move_right) {this.x + = walk_speed; } If (move_down) {this.y + = walk_speed; }}
Privat funksjon mouseReleased ( hendelse: MouseEvent): void {knob.stopDrag (); hero.move_left = false; hero.move_up = false; hero.move_right = false; hero.move_down = false; if (this.hasEventListener (Event.ENTER_FRAME)) {this.removeEventListener (Event.ENTER_FRAME, knobMoved); } Knob.x = knob.origin_x; knob.y = knob.origin_y;}
Trinn 17: Hero Rotation & Retning
privat funksjon heroMove (hendelse: Hendelse): void {if (move_left & & Move_up) {this.rotation = -45; } Else if (move_right & & Move_up) {this.rotation = 45; } Else if (move_left & & move_down) {this.rotation = 225; } Else if (move_right & & move_down) {this.rotation = 135; } Else if (move_right) {this.rotation = 90; } Else if (move_left) {this.rotation = -90; } Else if (Move_up) {this.rotation = 0; } Else if (move_down) {this.rotation = 180; } If (move_left) {this.x - = walk_speed; } If (Move_up) {this.y - = walk_speed; } If (move_right) {this.x + = walk_speed; } If (move_down) {this.y + = walk_speed; }}
Trinn 18:. Legg TweenLite Support
Gå til http://www.greensock.com/tweenlite/og klikk på "Last ned AS3" -knappen på høyre side.
Les og godta vilkårene og betingelsene, og når nedlastingen er ferdig, må du ha greensock-as3.zip.
Pakk det til en mappe.
Finn "com" -mappen inne den utpakkede mappen. Naviger til inne i "com" -mappen.
Kopier denne mappen til prosjektmappen.
Knytt det dynamisk fra hvor enn det er i prosjektet.
Kopier "greensock" -mappen til "com" -mappen på prosjektet. Nedenfor bildet skal hjelpe deg å forstå den endelige plasseringen av "greensock" -mappen.
import com.greensock *;
Trinn 19:. Animere knott
Privat funksjon mover (): void {TweenLite.to (knott, 0.5, {x: knott. origin_x, y: knob.origin_y});}
mover ();
knob.x = knob.origin_xknob.y = knob.origin_y;
Trinn 20: Knob Bounce Effect
Import com.greensock.easing. *;
TweenLite.to (knott, 0.5, {x: knob.origin_x, y: knob.origin_y, letthet : Bounce.easeOut});
private Var knob_tween: TweenLite;
knob_tween = new TweenLite (knott, 0.5, {x: knob.origin_x, y: knob.origin_y, letthet: Bounce.easeOut});
if (knob_tween) {knob_tween.kill ();}
Trinn 21:.. Joystick Re-design on
< p> Eksempel 3 (skjermbilde)
Trinn 22:. Endelig kode
pakke com {import flash.display.MovieClip; import com.controls.Joystick; import com.Hero; public class MyApp strekker MovieClip {private Var joystick: Joystick; private Var helten: Hero; offentlig funksjon MyApp () {hero = new Hero (); hero.x = stage.stageWidth /2; hero.y = stage.stageHeight /2; addChild (helten); joystick = new Joystick (30, 30, helten); addChild (joystick); }}}
pakke com.controls {import flash.display.MovieClip; public class JoystickKnob strekker MovieClip {private Var _origin_x: Number; private Var _origin_y: Number; offentlig funksjon JoystickKnob () {} offentlig funksjon får origin_x (): Antall {return _origin_x; import flash.events.Event; import flash.display.MovieClip; import flash.events.MouseEvent; import flash.geom.Rectangle;