Transmiterea ușoară, fluidă a tastaturii în AS3 cu clasa de intrare

Există o mulțime de jocuri acolo cu mișcări ciudate, nerealiste și care pot face un singur lucru pentru produsul dvs.: fac ca acesta să nu fie atrăgătoare pentru public. Dar mișcarea netedă nu este greu de realizat - să trecem la muncă!


Rezultatul final al rezultatelor

Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:


Pasul 1: Configurați mediul

Acesta este un tutorial direct, astfel încât înființarea va fi, de asemenea, direct.

Creați un nou proiect ActionScript 3.0 Flash. Mărimea și culoarea scenei nu contează, ci doar folosiți ceea ce sunteți confortabil.

Eu folosesc FlashDevelop pentru codificare, dar, de asemenea, acest lucru se poate face în orice editor AS, cum ar fi Flash Pro (sau orice editor de text, poate Notepad;)). Deci, creați un fișier de clasă, asigurați-vă că codul dvs. arată destul de mult ca al meu; Vezi mai jos. Mi-am chemat "Mișcarea". (Dacă utilizați Flash Pro, consultați acest ghid pentru a crea o clasă.)

 pachet import flash.display.Sprite; clasa publica Mișcarea extinde Sprite funcția publică Mișcarea (): void 

După ce ați terminat, asigurați-vă că clasa dvs. este conectată la proiectul Flash ca clasă principală.


Pasul 2: Creați pătratul și variabilele

Deci, după ce ați conectat Clasa mișcărilor la documentul dvs., definiți variabilele așa cum am făcut mai jos

 pachet import flash.display.Sprite; importul flash.events.Event; clasa publica Mișcarea extinde Sprite // Obiectul care se va deplasa privat var square: Sprite; // Viteza maximă privată var _max: Number = 10; // Variabilele care urmează să fie aplicate pentru a muta pătratul privat var dx: Number = 0; private var dy: Număr = 0; funcția publică Mișcarea (): void // Ascultă pentru adăugat la evenimentul stage addEventListener (Event.ADDED_TO_STAGE, init);  funcția privată init (e: Eveniment): void removeEventListener (Event.ADDED_TO_STAGE, init); // Crearea unui nou Sprite și desen în interiorul unui pătrat pătrat = Sprite nou (); square.graphics.beginFill (0x333333); square.graphics.drawRect (0, 0, 30, 30); square.x = stadiul.stajului Width / 2 - square.width / 2; square.y = stadiu.setapeHeight / 2 - square.height / 2; addChild (pătrat); 

Acest lucru este aproape tot ceea ce vom face pentru crearea obiectului. Puteți utiliza propriul obiect, dar pentru acest tutorial simplu de mișcare am folosit acest pătrat simplu.


Pasul 3: Introducerea clasei Input.as

Bună ziua, aceasta este clasa Input.as; Input.as Class sunt tipii despre care ti-am spus - fii dragut de ei! :)

Deci, despre ce este vorba această clasă, vă puteți întreba. Practic, lucrează pentru dvs. de lucru cheie pentru manipulare. Acesta adaugă un ascultător la evenimentele ENTER_FRAME - cu prioritate scăzută - și un ascultător cheie care umple unele Dicționare private. De asemenea, utilizează o altă clasă pentru codurile cheie. Puteți să aruncați o privire înăuntru și să vă vedeți cum funcționează.

Notă: Clasa Input.as nu îmi aparține. A fost creat de Matthew Bush, care a transmis Box2D la Flash.

 // Exemplu de utilizare a clasei Input.as // Trebuie sa il initializati intotdeauna ca aceasta cu parametrul stage Input.initialize (etapa); // După inițializare, puteți folosi metode kd (), kp () sau ku (), care // returnează o valoare booleană dacă sunt îndeplinite condițiile. // Aceste metode acceptă mai multe argumente, // pentru un singur eveniment puteți folosi mai multe chei. // Acest lucru face mult mai ușor să oferiți o mai mare accesibilitate aplicației dvs. //e.g Consultați mai jos, deoarece folosesc un apel pentru a detecta săgeata sus sau W pentru a merge în sus. Input.kd ("UP", "W");

Pasul 4: Importați clasele

Deci, acum că sunteți familiarizați cu clasa Input.as, o vom importa în clasa noastră de mișcări și o vom inițializa.

 pachet import flash.display.Sprite; importul flash.events.Event; importul de import; clasa publica Mișcarea extinde Sprite // Obiectul care se va deplasa privat var square: Sprite; // Viteza maximă privată var _max: Number = 10; // Variabilele care urmează să fie aplicate pentru a muta pătratul privat var dx: Number = 0; private var dy: Număr = 0; funcția publică Mișcarea (): void // Ascultă pentru adăugat la evenimentul stage addEventListener (Event.ADDED_TO_STAGE, init);  funcția privată init (e: Eveniment): void removeEventListener (Event.ADDED_TO_STAGE, init); // Crearea unui nou Sprite și desen în interiorul unui pătrat pătrat = Sprite nou (); square.graphics.beginFill (0x333333); square.graphics.drawRect (0, 0, 30, 30); square.x = stadiul.stajului Width / 2 - square.width / 2; square.y = stadiu.setapeHeight / 2 - square.height / 2; addChild (pătrat); // Initializeaza clasa Input.as cu manipulator pe scena Input.initialize (etapa); // Adăugați bucla de reîmprospătare addEventListener (Event.ENTER_FRAME, reîmprospătare);  refresh funcția privată (e: Event): void 

Pasul 5: Manipularea intrărilor de taste

Folosesc o buclă bazată pe ENTER_FRAME pentru detectarea intrărilor cheie; mai jos este reîmprospăta() care este funcția de manipulare pentru acest eveniment.

 Funcția de reîmprospătare a funcțiilor private (e: Event): void // Key Handler dacă (Input.kd ("A", "LEFT")) ") // Mutare în dreapta dacă (Input.kd (" A "," Stânga "," D "," Dreapta " . ("S", "DOWN")) // Deplasați în jos dacă (! Input.kd ("W" "UP", "S", "DOWN")) // Dacă nu există acțiune sus / jos

Pasul 6: Explicarea calculelor - Manipularea vitezei

Acest lucru este destul de drept înainte. Detectați dacă vreuna dintre taste este apăsată, apoi acționați corespunzător.

Folosesc foarte mult operatorul ternar: valoare = condiție? adevarat fals;
Aceasta este în esență o declarație if-condensată pe o singură linie.

Pentru fiecare detectare cheie, folosesc această metodă: dacă valoarea este mai mare decât _max apoi setați-l la egal cu _max; în caz contrar, crește sau scade valoarea respectivă, după caz. În acest fel, este menținut în anumite limite. Simplu, corect?

Mai jos puteți studia condițiile:

 (): void // Key Handler dacă (Input.kd ("A", "LEFT")) // Mutare în stânga 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;  dac = (dx = 0.5) dx = dx dac = (dx = dx) < 0.5 ? 0 : dx - 0.5;  else  dx = dx > -0,5? 0: dx + 0,5;  dacă (Input.kd ("W", "UP")) // Mutare în sus 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;  if (k) (dy = 0.5) dy = dy Dacă nu există acțiune sus / jos dacă (dy = < 0.5 ? 0 : dy - 0.5;  else  dy = dy > -0,5? 0: dy + 0,5;  După toate acestea, aplicați-le pe obiectul square.x + = dx; square.y + = dy; 

Dacă nu sunteți familiarizați cu operatorul ternar, apucați o bucată de hârtie și un stilou și scrieți câțiva dintre ei dacă ... alt format; este un exercițiu minunat de a face față situației.

Ține minte că eu manipulez dx și dy variabile și setați doar valorile reale x și y la sfârșit. Acest lucru ne ajută să facem mișcarea fluidă; nu este jerking în jurul valorii de am schimbat valorile lor direct în întreaga funcție ...

Continuați, testați-l! Vezi cât de frumos se mișcă?


Pasul 7: Manipularea coliziunilor de frontieră

Bine. Totul are dreptate, se mișcă fluid - dar EXIT pe scena! Mai jos am adăugat condițiile de detectare a coliziunii.

 (): void // Key Handler dacă (Input.kd ("A", "LEFT")) // Mutare în stânga 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;  dac = (dx = 0.5) dx = dx dac = (dx = dx) < 0.5 ? 0 : dx - 0.5;  else  dx = dx > -0,5? 0: dx + 0,5;  dacă (Input.kd ("W", "UP")) // Mutare în sus 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;  if (k) (dy = 0.5) dy = dy Dacă nu există acțiune sus / jos dacă (dy = < 0.5 ? 0 : dy - 0.5;  else  dy = dy > -0,5? 0: dy + 0,5;  // Detectarea frontierelor dacă (square.x - dx < 0 || square.x + dx + square.width > stage.stageWidth) // detecția axei x dacă (square.y - dy < 0 || square.y + dy + square.height > stage.stageHeight) // y ax detection După toate acestea, aplicați-le pe obiectul square.x + = dx; square.y + = dy; 

Căutând limitele într-un mod mai precis, verificând dacă marginile pătratului au lovit granițele (înainte de aceasta, a fost doar verificarea centrului pătratului în fața limitelor).

Grozav. Acum trebuie să adăugăm codul pentru a face ca pătratul să sări de la granițe. Ceea ce fac pentru asta este multiplicarea cu -1 a valorii axei dx sau dy. Dar asta nu este de ajuns! În cazul în care viteza este destul de rapidă, atunci pătratul va trece prin margini sau pur și simplu nu se va întâmpla. Așa că, înainte de a se multiplica, trebuie să setăm x sau y-ul obiectului să fie același cu limita pe care o întâlnește.

Deci, dacă x object.x = 0; și apoi înmulțiți dx după -1.

 // Detectarea marjei dacă (square.x - dx < -dx || square.x + dx + square.width > stage.stageWidth) // detecția axei x 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) // detecția axei y square.y = square.y - dy < -dy ? 0 : stage.stageHeight - square.height; dy *= -1; 

Testați-l acum! Bouncy dreapta? :)

Pentru a face chiar mai bine, mergeți la experimentarea cu valori diferite - cum ar fi în loc să multiplicați cu -1, încercați -0,7 și vedeți rezultatele.


Concluzie

Ați întâlnit clasa Input.as, ați ajuns să știți cum să lucrați cu ea și ați făcut o mișcare fluidă în doar câteva minute. Cred că acest lucru este un moment minunat!

Vă rugăm să lăsați comentariile de mai jos și orice alte întrebări, voi răspunde cu bucurie.

Dar, dacă întâmpinați vreo problemă, vă rugăm să verificați de două ori codul dvs., să îl comparați cu fișierul sursă și apoi, dacă nu puteți funcționa, nu ezitați să postați o întrebare.

Cod