Share
Det er mange spill der ute med ruskede, urealistiske bevegelser, og det kan bare gjøre en ting i ditt produkt: gjør det unappealing til publikum. Men jevn bevegelse er ikke vanskelig å oppnå - la oss komme på jobb!
La oss se på det endelige resultatet vi vil jobbe for:
Dette er en rettferdig veiledning, så oppsettet vil også være rett fram.
Opprett et nytt ActionScript 3.0 Flash-prosjekt. Scenens størrelse og farge spiller ingen rolle, bare bruk det du er komfortabel med.
Jeg bruker FlashDevelop for koding, men også dette kan gjøres i noen AS-editor, som Flash Pro (eller noen tekstredigerer, kanskje Notisblokk;)). Så opprett en Klassefil, pass på at koden din ser ganske mye ut som min; se nedenfor. Jeg ringte min "Bevegelse". (Hvis du bruker Flash Pro, sjekk denne veiledningen for å opprette en klasse.)
pakke import flash.display.Sprite; offentlig klasse Bevegelse utvider Sprite offentlig funksjon Bevegelse (): void
Når du er ferdig, må du kontrollere at klassen din er knyttet til Flash-prosjektet som hovedklassen.
Så etter at du har koblet Movement Class til dokumentet ditt, definer du variablene som jeg gjorde nedenfor
pakke import flash.display.Sprite; importere flash.events.Event; offentlig klasse Bevegelse utvider Sprite // Objektet som vil flytte privat var firkant: Sprite; // Maksimal hastighet privat var _max: Nummer = 10; // Variablene som skal brukes for å flytte torget privat var dx: Nummer = 0; privat var dy: tall = 0; offentlig funksjon Bevegelse (): void // Lytt for lagt til sceneventyr addEventListener (Event.ADDED_TO_STAGE, init); privat funksjon init (e: Event): void removeEventListener (Event.ADDED_TO_STAGE, init); // Opprette en ny Sprite og trekk inn i en firkantet kvadrat = ny Sprite (); square.graphics.beginFill (0x333333); square.graphics.drawRect (0, 0, 30, 30); square.x = scene.stageWidth / 2 - square.width / 2; square.y = scene.stageHeight / 2 - square.height / 2; addChild (firkant);
Dette er stort sett alt vi skal gjøre for å skape objektet. Du kan bruke ditt eget objekt, men for denne enkle bevegelsesopplæringen brukte jeg dette enkle torget.
Hei folkens, dette er Input.as-klassen; Input.as klasse Dette er gutta jeg fortalte deg om - vær snill mot dem! :)
Så hva handler denne klassen om, kanskje du lurer på. I utgangspunktet gjør det din nøkkelhåndteringsjobb for deg. Det legger til en lytter til ENTER_FRAME hendelser - med lav prioritet - og en nøkkellytter som fyller noen private ordbøker. Det bruker også en annen klasse for nøkkelkoder. Du kan ta en titt inn og se selv hvordan det fungerer.
Merk: Klassen Input.as tilhører ikke meg. Det ble skapt av Matthew Bush, som ported Box2D til Flash.
Accentsconagua
// Eksempel på Input.as Klassebruk // Du må alltid initialisere det som dette med sceneparameteren Input.initialize (scene); // Etter initialisering kan du bruke kd (), kp () eller ku () metoder, som // returnerer en boolsk verdi dersom betingelsene er oppfylt. // Disse metodene godtar flere argumenter, // så for en begivenhet kan du bruke flere taster. // Dette gjør det mye enklere å gi økt tilgang til appen din. //e.g Se nedenfor da jeg bruker en samtale for å oppdage UP-pil eller W for å gå opp. Input.kd ("UP", "W"); Så nå som du er kjent med Input.as-klassen, skal vi importere den i vår Movement Class og initialisere den.
pakke import flash.display.Sprite; importere flash.events.Event; importere inngang; offentlig klasse Bevegelse utvider Sprite // Objektet som vil flytte privat var firkant: Sprite; // Maksimal hastighet privat var _max: Nummer = 10; // Variablene som skal brukes for å flytte torget privat var dx: Nummer = 0; privat var dy: tall = 0; offentlig funksjon Bevegelse (): void // Lytt for lagt til sceneventyr addEventListener (Event.ADDED_TO_STAGE, init); privat funksjon init (e: Event): void removeEventListener (Event.ADDED_TO_STAGE, init); // Opprette en ny Sprite og trekk inn i en firkantet kvadrat = ny Sprite (); square.graphics.beginFill (0x333333); square.graphics.drawRect (0, 0, 30, 30); square.x = scene.stageWidth / 2 - square.width / 2; square.y = scene.stageHeight / 2 - square.height / 2; addChild (firkant); // Initialiser Input.as-klassen med handler på scenen Input.initialize (scene); // Legg til oppdateringssløyfen addEventListener (Event.ENTER_FRAME, oppdater); privat funksjon oppdatering (e: Event): void
Jeg bruker en ENTER_FRAME-basert loop for å oppdage nøkkelinngangene; nedenfor er forfriske() metode som er håndteringsfunksjonen for denne hendelsen.
privat funksjon oppdatering (e: Event): void // Key Handler hvis (Input.kd ("A", "LEFT")) // Flytt til venstre hvis (Input.kd ("D", "RIGHT ") // Flytt til høyre hvis (! Input.kd (" A "," LEFT "," D "," RIGHT ")) // Hvis det ikke er noe venstre / høyre trykket hvis .kd ("W", "UP")) // Flytt opp hvis (Input.kd ("S", "DOWN")) // Flytt ned hvis (! Input.kd ("W" "UP", "S", "NED")) // Hvis det ikke er noen opp / ned-handling Dette er ganske rett frem. Oppdag om noen av tastene er trykket, og følg deretter.
Jeg bruker den ternære operatøren mye: verdi = tilstand? sant: false;
Dette er i utgangspunktet en if-setning som er kondensert til en enkelt linje.
For hver nøkkel gjenkjenning bruker jeg denne metoden: hvis verdien er større enn _max sett deretter den til _max; ellers øke eller redusere den aktuelle verdien etter behov. På denne måten holdes det innenfor visse grenser. Enkel, rett?
Nedenfor kan du studere vilkårene:
privat funksjon oppdatering (e: Event): void // Key Handler if (Input.kd ("A", "LEFT")) // Flytt til venstre dx = dx < 0.5 - _max ? _max * -1 : dx - 0.5; if (Input.kd("D", "RIGHT")) //Move to the right dx = dx > _max - 0,5? _max: dx + 0,5; Hvis (! Input.kd ("A", "LEFT", "D", "RIGHT")) // Hvis det ikke er noe venstre / høyre, trykkes hvis (dx> 0.5) dx = dx < 0.5 ? 0 : dx - 0.5; else dx = dx > -0,5? 0: dx + 0,5; hvis (Input.kd ("W", "UP")) // Flytt dy = dy < 0.5 - _max ? _max * -1 : dy - 0.5; if (Input.kd("S", "DOWN")) //Move down dy = dy > _max - 0,5? _max: dy + 0,5; hvis (! Input.kd ("W", "UP", "S", "DOWN")) // Hvis det ikke er noen opp / ned-tiltak hvis (dy> 0.5) dy = dy < 0.5 ? 0 : dy - 0.5; else dy = dy > -0,5? 0: dy + 0,5; // Etter alt, bruk disse til objektet square.x + = dx; square.y + = dy; Hvis du ikke er kjent med den ternære operatøren, ta et stykke papir og en penn og skriv ut noen av dem inn hvis ... annet format; Det er en fin øvelse for å få tak i det som skjer.
Husk at jeg manipulerer dx og dy variabler, og bare angi de faktiske x- og y-verdiene på slutten. Dette hjelper oss med å lage bevegelsesvæsken; det er ikke jerking rundt som vi endrer sine verdier direkte gjennom funksjonen ...
Fortsett, test det! Se hvor snill det er i bevegelse?
Greit. Alt er riktig, flyter flytende - men ute av scenen! Nedenfor har jeg lagt til kollisjonsdeteksjonsbetingelsene.
privat funksjon oppdatering (e: Event): void // Key Handler if (Input.kd ("A", "LEFT")) // Flytt til venstre dx = dx < 0.5 - _max ? _max * -1 : dx - 0.5; if (Input.kd("D", "RIGHT")) //Move to the right dx = dx > _max - 0,5? _max: dx + 0,5; Hvis (! Input.kd ("A", "LEFT", "D", "RIGHT")) // Hvis det ikke er noe venstre / høyre, trykkes hvis (dx> 0.5) dx = dx < 0.5 ? 0 : dx - 0.5; else dx = dx > -0,5? 0: dx + 0,5; hvis (Input.kd ("W", "UP")) // Flytt dy = dy < 0.5 - _max ? _max * -1 : dy - 0.5; if (Input.kd("S", "DOWN")) //Move down dy = dy > _max - 0,5? _max: dy + 0,5; hvis (! Input.kd ("W", "UP", "S", "DOWN")) // Hvis det ikke er noen opp / ned-tiltak hvis (dy> 0.5) dy = dy < 0.5 ? 0 : dy - 0.5; else dy = dy > -0,5? 0: dy + 0,5; // Grensdetektering hvis (square.x - dx < 0 || square.x + dx + square.width > stage.stageWidth) // x akse deteksjon hvis (square.y - dy < 0 || square.y + dy + square.height > stage.stageHeight) // y akse deteksjon // Etter alt, bruk disse til objektet square.x + = dx; square.y + = dy; Det leter etter grenser på en mer presis måte, ved å sjekke om kantene på torget rammer grensene (før dette, var det bare å sjekke midtpunktet av torget mot grensene).
Flott. Nå må vi legge til koden for å få firkanten til å hoppe av grensene. Hva jeg gjør for det er multipliser med -1 aksen verdien dx eller dy. Men det er ikke nok! Hvis hastigheten er ganske rask, vil firkanten komme gjennom margene eller bare gå på mutter. Så før vi multipliserer, må vi sette objektet x eller y for å være det samme som grensen det møtes.
Så hvis x objekt.x = 0; og multipliser deretter dx med -1.
// Margin deteksjon hvis (square.x - dx < -dx || square.x + dx + square.width > stage.stageWidth) // x akse deteksjon square.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 akse deteksjon square.y = square.y - dy < -dy ? 0 : stage.stageHeight - square.height; dy *= -1;
Test det nå! Bouncy rett? :)
For å gjøre det enda bedre, fortsett å eksperimentere med forskjellige verdier - som i stedet for å multiplisere med -1, prøv -0.7 og se resultatene.
Så du møtte Input.as-klassen, fikk vite hvordan du skulle jobbe med det, og gjorde en fin væskebevegelse på bare noen få minutter. Jeg tror dette teller som en flott tid!
Vennligst legg igjen dine kommentarer nedenfor og andre spørsmål, jeg vil gjerne svare.
Men hvis du støter på et problem, må du sjekke to ganger koden din, sammenligne den med kildefilen, og hvis du ikke kan få det til å fungere, kan du gjerne stille et spørsmål.
