Easy, Fluid Keyboard Bevegelse i AS3 med inngangs Class
3
Del
Del
Share < .no> Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av
Det er mange spill der ute med jerky, urealistiske bevegelser, og som kan gjøre bare en ting til ditt produkt.: Gjør det lite appellerende for publikum. Men jevn bevegelse er ikke vanskelig å oppnå - la oss komme til å jobbe
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot:
Trinn 1: Sette opp Miljøvern
Dette er en rett frem opplæringen, slik at innstillingen opp vil også være rett frem
Opprett en ny. Actionscript 3.0 Flash Project. Scenen størrelse og farge spiller ingen rolle, bare bruk det du er komfortable med.
Jeg bruker FlashDevelop for koding, men også dette kan gjøres i alle AS editor, som Flash Pro (eller en hvilken som helst tekst editor, kanskje Notepad;)). Så, opprette en klasse fil, sørg for at koden din ser ganske mye som mine; se nedenfor. Jeg ringte mine "Movement". (Hvis du bruker Flash Pro, sjekk ut denne guiden for å lage en klasse.)
Pakke {import flash.display.Sprite; public class Movement strekker Sprite {offentlig funksjon Movement (): void {}}.}
Når du er ferdig, sørg for at klassen er knyttet til Flash prosjektet som hoved Class
Trinn 2: Lag Square og variabler
Så etter at du har koblet den Movement Class til dokumentet, definere variablene som jeg gjorde under
pakke {import flash.display.Sprite; import flash.events.Event; public class Movement strekker Sprite {//Objektet som vil flytte private Var torget: Sprite; //Den maksimale hastigheten private Var _max: Number = 10; //Variablene som kommer til å bli brukt til å flytte plassen private Var dx: Antall = 0; private Var dy: Antall = 0; offentlig funksjon Movement (): void {//Lytt for ekstra å iscenesette arrangementet addEventListener (Event.ADDED_TO_STAGE, init); } Private funksjon init (e: Hendelses): void {removeEventListener (Event.ADDED_TO_STAGE, init); //Opprette en ny Sprite og tegne inni en firkant kvadrat = new Sprite (); square.graphics.beginFill (0x333333); square.graphics.drawRect (0, 0, 30, 30); square.x = stage.stageWidth /2 - square.width /2; square.y = stage.stageHeight /2 - square.height /2; addChild (firkant); }}}
Dette er ganske mye alt det vi skal gjøre for å skape objektet. Du kan bruke din egen objekt, men for enkel bevegelse tutorial Jeg brukte denne enkel firkantet
Trinn 3:. Vi presenterer Input.as Class
Hei folkens, dette er det inngang. som klasse; Input.as klasse er det disse gutta jeg fortalte deg om - være snill mot dem! :)
Så hva er denne klassen handler om, kan du lurer på. I utgangspunktet er det ikke din nøkkel håndtering jobben for deg. Det legger en lytter til ENTER_FRAME hendelser - med lav prioritet - og en nøkkel lytteren som fyller noen private Ordbøker. Også den bruker en annen klasse for nøkkelkoder. Du kan ta en titt på innsiden og se selv hvordan fungerer
. Merk: Input.as Class ikke tilhører meg. Det ble skapt av Matthew Bush, som portet Box2D til Flash
//Eksempel på Input.as Class bruk //Du må alltid initial det som dette med scenen parameterInput.initialize (stadium),. //Etter initialisering du kan bruke kd (), kp () eller ku () metoder, som //returnerer en boolsk verdi dersom vilkårene er oppfylt .//Disse metodene godta flere argumenter, //så for en hendelse kan du bruke flere nøkler. //Dette gjør det mye lettere å gi et løft av tilgjengelighet til app .//f.eks Se nedenfor som jeg bruker én samtale for å oppdage pil opp eller W for å gå up.Input.kd ("UP", "W");
Trinn 4:. Importere klassene
Så nå som du er kjent med Input.as klasse, vi kommer til å importere det i vår bevegelse klasse og initialisere den
pakken { import flash.display.Sprite; import flash.events.Event; importere Input; public class Movement strekker Sprite {//Objektet som vil flytte private Var torget: Sprite; //Den maksimale hastigheten private Var _max: Number = 10; //Variablene som kommer til å bli brukt til å flytte plassen private Var dx: Antall = 0; private Var dy: Antall = 0; offentlig funksjon Movement (): void {//Lytt for ekstra å iscenesette arrangementet addEventListener (Event.ADDED_TO_STAGE, init); } Private funksjon init (e: Hendelses): void {removeEventListener (Event.ADDED_TO_STAGE, init); //Opprette en ny Sprite og tegne inni en firkant kvadrat = new Sprite (); square.graphics.beginFill (0x333333); square.graphics.drawRect (0, 0, 30, 30); square.x = stage.stageWidth /2 - square.width /2; square.y = stage.stageHeight /2 - square.height /2; addChild (firkant); //Initialiser Input.as klasse med behandleren på scenen Input.initialize (scene); //Legg refresh sløyfe addEventListener (Event.ENTER_FRAME, refresh); } Private funksjon refresh (e: Hendelses): void {}}}
Trinn 5: Håndtering av nøkkeldata
Jeg bruker en ENTER_FRAME basert sløyfe for å avdekke de viktigste inngangene; Nedenfor er refresh () metode som er behandleren funksjon for denne hendelsen
privat funksjon refresh (e: Hendelses):. void {//Key Handler om (Input.kd ("A", "LEFT")) { //Flytt til venstre} if (Input.kd ("D", "HØYRE")) {//Flytt til høyre} if (! Input.kd ("A", "venstre", "D", " HØYRE ")) {//Hvis det ikke er venstre /høyre trykkes} if (Input.kd (" W "," UP ")) {//Flytt opp} if (Input.kd (" S "," ned " )) {//Flytt ned} if (! Input.kd ("W", "UP", "S", "ned")) {//Hvis det ikke er opp /ned handling}}
Trinn 6: Forklare Beregninger - Håndtere Velocity
Dette er ganske rett frem. . Oppdage om noen av tastene trykkes, så handle deretter
Jeg bruker trefoldig operatør mye: value = tilstand? sant: false;
Dette er i utgangspunktet en if-setning som er blitt kondensert til en enkelt linje
For hver tast deteksjon, jeg bruker denne metoden. hvis verdien er større enn _max så sette den lik _max; Ellers inkrement eller dekrement den bestemte verdien. På denne måten er det holdes innenfor visse grenser. Enkelt, ikke sant?
Nedenfor kan du studere forholdene:
privat funksjon refresh (e: Hendelses): void {//Key Handler om (Input.kd ("A", "LEFT")) {//Move til venstre dx = dx < 0,5 - _max? _max * -1: DX - 0,5; } If (Input.kd ("D", "HØYRE")) {//Flytt til høyre dx = dx > _max - 0.5? _max: dx + 0,5; } If (Input.kd ("A", "venstre", "D", "RIGHT")) {//Hvis det ikke er venstre /høyre trykkes if (dx > 0,5) {dx = dx < 0,5? 0: dx - 0,5; } Else {dx = dx > -0,5? 0: dx + 0,5; }} If (Input.kd ("W", "UP")) {//Flytt opp dy = dy < 0,5 - _max? _max * -1: dy - 0,5; } If (Input.kd ("S", "ned")) {//Flytt ned dy = dy > _max - 0.5? _max: dy + 0,5; } If {//Hvis det ikke er opp /ned handling if (dy > 0,5) (Input.kd ("W", "UP", "S", "ned")) {dy = dy < 0,5? 0: dy - 0,5; } Else {dy = dy > -0,5? 0: dy + 0,5; }} //Etter alt dette, gjelder disse til objektet square.x + = dx; square.y + = dy;}
Hvis du er ukjent med trefoldig operatør, ta et stykke papir og en penn og skrive ut noen av dem inn hvis ... annet format; det er en stor oppgave å ta fatt med at skjer.
Husk jeg manipulere dx og dy variabler, og bare sette selve x- og y-verdier ved utgangen. Dette hjelper oss med å få bevegelse væsken; det er ikke krampetrekninger rundt som vi endre sine verdier direkte gjennom funksjon ..
Gå på, teste det! Se hvor pent det er å flytte
Trinn 7: Håndtering Boundary Kollisjoner
OK. Alt er rett, flytte flyter bedre - men ut av scenen! Nedenfor har jeg lagt kollisjonen deteksjons forhold
privat funksjon refresh (e: Hendelses):. Void {//Key Handler om (Input.kd ("A", "LEFT")) {//Flytt til venstre dx = dx < 0,5 - _max? _max * -1: DX - 0,5; } If (Input.kd ("D", "HØYRE")) {//Flytt til høyre dx = dx > _max - 0.5? _max: dx + 0,5; } If (Input.kd ("A", "venstre", "D", "RIGHT")) {//Hvis det ikke er venstre /høyre trykkes if (dx > 0,5) {dx = dx < 0,5? 0: dx - 0,5; } Else {dx = dx > -0,5? 0: dx + 0,5; }} If (Input.kd ("W", "UP")) {//Flytt opp dy = dy < 0,5 - _max? _max * -1: dy - 0,5; } If (Input.kd ("S", "ned")) {//Flytt ned dy = dy > _max - 0.5? _max: dy + 0,5; } If {//Hvis det ikke er opp /ned handling if (dy > 0,5) (Input.kd ("W", "UP", "S", "ned")) {dy = dy < 0,5? 0: dy - 0,5; } Else {dy = dy > -0,5? 0: dy + 0,5; }} //Boundary deteksjon if (square.x - dx < 0 || square.x + dx + square.width > stage.stageWidth) {//x-aksen deteksjon} if (square.y - dy < 0 || square.y + dy + square.height > stage.stageHeight) {//y-aksen deteksjon} //Etter alt dette, gjelder disse til objektet square.x + = dx; square.y + = dy;}
Det ser for grenser på en mer presis måte, ved å sjekke om kantene på torget traff grensene (før dette ble det bare sjekke midten av plassen mot grensene).
Great. Nå må vi legge til koden for å gjøre plassen bounce off grensene. Hva jeg gjør for det er multiplisere med -1 aksen verdien dx eller dy. Men det er ikke nok! Hvis hastigheten er ganske rask, så plassen vil komme gjennom marginene eller bare gå nøtter. Så før vi multipliserer vi må sette x- eller y av objektet å være den samme som grensen at det oppfyller
Så hvis x object.x = 0.; og deretter multiplisere dx med -1
//Margin detectionif. (square.x - dx < -dx || square.x + dx + square.width > stage.stageWidth) {//x-aksen deteksjon torget .x = square.x - dx < -dx? 0: stage.stageWidth - square.width; dx * = 1;} if (square.y - dy < -dy || square.y + dy + square.height > stage.stageHeight) {//y-aksen deteksjon square.y = square.y - dy < -dy? 0: stage.stageHeight - square.height; dy * = 1;}
Test det nå! Hoppe rett? :)
For å gjøre det enda bedre, gå på å eksperimentere med ulike verdier - som i stedet for å multiplisere med -1, prøv -0,7 og se resultatene
Konklusjon
.
Så du møtte Input.as Class, må vite hvordan de skal jobbe med det, og gjorde en fin flytende bevegelse i løpet av få minutter. Jeg tror dette teller som en flott tid!
Legg igjen dine kommentarer nedenfor og andre spørsmål, jeg vil gjerne svare.
Men hvis det oppstår problemer kan du sjekke to ganger koden din, sammenligne det med kildefilen og hvis du ikke kan gjøre det arbeidet, gjerne legge inn et spørsmål.