Share
De două ori pe lună, revizuim câteva postări preferate ale cititorilor noștri de-a lungul istoriei Activetuts +. Acest tutorial a fost publicat pentru prima oară în februarie 2010.
În acest tutorial veți crea o clasă de scor reutilizabile, care va conta până la noul total când vor fi adăugate puncte (în loc de a sări până la scorul nou). Vom acoperi atât creația grafică, cât și codul.
În unele jocuri când câștigi puncte, vei vedea că scorul tău va ajunge imediat la noul total. Cred că este mult mai răcoros dacă scorul se măsoară unul câte unul, astfel încât jucătorul să poată "ridica puncte". Asta vom face aici.
Iată un exemplu de clasă de scor în acțiune:
Ideea principală din spatele acestui tutorial este să vă învăț cum să programați funcția "numărare în sus", dar vă voi arăta, de asemenea, cum să creați un afișaj LED rece, văzut în previzualizare. Vom începe prin proiectarea numerelor:
Creați un nou fișier Flash (ActionScript 3.0). Setările filmului dvs. vor varia în funcție de joc. Pentru acest demo îmi înființez filmul ca 500x300, fundal negru și 30 fps.
Creați un nou simbol Movie Clip (Inserare> Simbol nou). Dați acestui simbol numele "cifră".
În interiorul clipului video digital utilizați instrumentul Text pentru a adăuga un număr 0 la simbol. Folosesc un font numit Digital Readout, dar orice font cu LED-uri ar trebui să funcționeze.
Setați dimensiunea textului la 40 pt și faceți o culoare galbenă / portocalie (# F4C28B). Setați formatul paragrafului la centrat.
Adăugați două filtre de strălucire separate în câmpul de text. Setați culoarea în roșu (# FF0000) pentru ambele și setați rezistența ambelor la 200%.
Bifați caseta de validare Inner Glow pentru una și setați Blur la 2px. Lăsați celălalt la 5px Blur.
Puteți folosi o altă culoare dacă doriți (albastru sau verde ar arăta amândurora). Trick-ul de a face să arate realist este de a face culoarea textului puțin spălate și setați strălucirea la o culoare mai saturate. Acest lucru face să pară că emit lumină.
Creați cadre cheie pe cadrele 1-10 ale clipului video digital. O modalitate ușoară de a face acest lucru este selectarea cadrelor 1-10 (faceți clic pe cadrul 1, apoi faceți clic pe butonul Shift 10) și apăsați F6.
Ar trebui să aveți acum 10 cadre, fiecare cu un cadru cheie cu câmpul de text 0 stralucitor. Treceți prin fiecare cadru și modificați numerele astfel încât să aveți cifrele 0-9. Cadrul 1 va avea "0", cadrul 2 va avea "1", cadrul 3 va avea "2", etc.
Denumiți acest strat "numere".
Vom adăuga acum o stare "off" pentru numerele LED-urilor, astfel încât veți putea vedea segmentele nelistate ale afișajului LED.
Copiați cele 8 cifre (în cadrul 9). Creați un nou strat denumit "fundal". Cu noul strat selectat, utilizați funcția Lipire pe loc (Editare> Lipire pe poziție) pentru a lipi cele 8 cifre în poziția exactă ca cea pe care am copiat-o.
Îndepărtați strălucirea de la noua cifră nouă și schimbați culoarea în gri închis (# 333333). Adăugați un filtru de estompare cu Blur setat la 3px. Mutați acest strat sub stratul "numere".
Acum puteți curăți prin cadre și să vedeți cum segmentele neuniforme ale LED-ului se află în spatele fiecărui număr.
Creați un nou strat denumit "acțiuni". Deschideți panoul Acțiuni și adăugați o acțiune stop () la cadrul 1.
Acest lucru va menține ecranul afișând "0" până când nu îl vom spune altfel.
De ce introducem manual fiecare cifră pe propriul cadru, în loc să folosim un câmp de text dinamic? Buna intrebare.
Motivul principal este că acest lucru îl face mai flexibil pentru actualizarea graficii mai târziu. Dacă doriți să schimbați designul și să utilizați bitmap-urile pentru numere sau să aveți fiecare cifră afișată într-un alt font sau culoare, acest lucru face ușor acest lucru.
De asemenea, dacă designerii și dezvoltatorii lucrează împreună la un proiect, este mai bine să creeze lucruri într-un mod care să le ofere designerilor un acces facil la cât mai multă grafică posibil.
Simt că această configurare nu face decât să utilizeze text dinamic.
Creați un nou clip video numit "Scor". Verificați "Export pentru ActionScript" și setați numele clasei la "Scor", de asemenea.
Trageți clipul video digital din Bibliotecă în clipul video Scor. Duplicați clipul digital (Edit> Duplicate) de șase ori (astfel încât aveți șapte cifre) și spațiu-le în mod egal.
Deoarece avem doar șapte cifre, scorul maxim pe care îl vom putea afișa este de 9.999.999. Dacă jocul dvs. va trebui să găzduiască scoruri mai mari, adăugați mai multe cifre în consecință.
Adăugați un spațiu mai mic între fiecare a treia cifră pentru a permite separatorii de virgulă.
Selectați clipul cinematografic din stânga și dați-i numele de instanță "digit1". Denumeste-l pe urmatorul la dreapta "digit2", apoi "dig3" si asa mai departe.
Creați un nou strat numit "virgule".
Cel mai simplu mod de a obține virgulele să pară exact ca numerele este să intri într-unul dintre clipurile digitale și să copiați unul dintre câmpurile de număr numerice.
Înapoi în interiorul clipului video Scor, lipiți câmpul text în stratul virgulă și schimbați numărul într-o virgulă. Duplicați-l și mutați-l de câte ori aveți nevoie.
Pentru fondul de scoruri vom adăuga un dreptunghi simplu rotunjit.
Creați un nou strat denumit "fundal" și plasați-l în spatele numerelor și straturilor virgine. Selectați instrumentul dreptunghi și faceți clic pe opțiune (faceți clic pe Alt) pe scenă. Efectuați un dreptunghi 200px x 40px cu colțuri de 3px (faceți-vă mai mult dacă aveți mai multe cifre). Faceți umplerea neagră și cursa 1px gri (# 666666).
Din anumite motive, Flash distorsionează întotdeauna loviturile pe dreptunghiuri rotunjite. Pentru a obține acest lucru, selectați cursorul și alegeți Modificați> Formă> Conversie linii în Umpleri. Acest lucru transformă cursa dintr-o linie într-o formă plină și nu va mai denatura.
Dacă credeți că este vorba despre o soluție totală de soluție pentru funcționalitatea de bază care ar fi trebuit să fie stabilită cu ani în urmă, vă solicit să contactați Adobe și să îi informați.
Ce grafică ar fi completă fără un strălucire iPhone-esque?
Creați un nou strat peste tot ceea ce altceva numește "strălucire". Adăugați un nou dreptunghi rotunjit, puțin mai mic decât cel de fundal. De data aceasta nu-i dați nici un accident vascular cerebral și umple-l cu un gradient alb de la 20% Alpha la 0% Alpha.
Creați un nou fișier Actionscript numit "Score.as". Salvați-l în același director ca fișierul dvs. principal Flash. Din moment ce numele acestei clase și numele clasei de export a videoclipului Scorul nostru sunt aceleași, Flash le va conecta automat.
Adăugați acest cod în fișierul Score.as:
pachet import flash.display.MovieClip; importul flash.events.Event; clasa publică Scorul extinde MovieClip // Funcția publică CONSTRUCTOR Scor ()
Aceasta este doar o coajă goală a unei clase pentru moment. Trebuie să extindem clasa MovieClip deoarece această clasă este legată de un clip video din bibliotecă, deci trebuie să importem și clasa MovieClip. Vom folosi evenimentul ENTER_FRAME, deci importăm și clasa Eveniment.
Adăugați aceste două linii la clasa Score chiar deasupra funcției constructorului.
privat const SPEED: int = 1; // cat de repede se conta numarul const NUM_DIGITS: int = 7; // câte cifre există în scor
Acestea sunt două constante - un fel de setări pentru clasă.
Acum, să adăugăm câteva variabile. Puneți aceste sub constantele:
privat var _totalScore: int = 0; privat var _displayScore: int = 0;
Aceste variabile vor conține cele două versiuni diferite ale scorului nostru. "_totalScore" va fi scorul real. "_displayScore" va fi numărul care este în prezent
fiind afișate pe ecranul LED. Dacă adaug 50 la scor, _totalScore va fi imediat 50, dar _displayScore va fi 1, apoi 2, apoi 3, până când ajunge la 50.
Dacă vreți să cunoașteți scorul efectiv (cum ar fi să trimiteți la tabelele cu scoruri mari), veți folosi _totalScore deoarece _displayScore ar putea să nu fie corect.
Folosesc subliniere la începutul numelor variabilelor pentru a indica că acestea sunt variabile private.
Deci, dacă _totalScore este o variabilă privată, cum vom accesa din afara clasei Score? Vom folosi o metodă "accessor" sau "getter".
Adăugați această metodă sub funcția constructor:
// public accessor pentru funcția totalScore publică get totScore (): int return _totalScore;
Această metodă returnează pur și simplu valoarea variabilei _totalScore. Ne dă o modalitate de a accesa acea valoare fără a fi nevoie să o expunem ca o variabilă publică.
Vom avea nevoie de o modalitate de a adăuga puncte la scor. Adăugați această metodă:
// adăuga o sumă la scorul funcției publice add (suma: int): void _totalScore + = suma; addEventListener (Eveniment.ENTER_FRAME, updateScoreDisplay); // începe afișarea numărului de afișări
Această metodă acceptă o sumă "întreg" pe care o adaugă la variabila _totalScore. A doua linie pornește un eveniment ENTER_FRAME care apelează o metodă numită updateScoreDisplay la fiecare cadru. Vom adăuga acest lucru în continuare.
Acum adăugați metoda updateScoreDisplay. Aici se va întâmpla toată funcționalitatea răcoritoare. Trebuie să accepte un eveniment de când este apelat de la un eveniment ENTER_FRAME.
// aceasta rulează fiecare cadru pentru a actualiza funcția privată updateScoreDisplay (e: Event): void
Acum, să adăugăm câteva funcționalități. Primul lucru pe care această metodă îl va face este să crească variabila _displayScore cu suma stabilită în constanta SPEED:
// incrementați scorul afișat cu valoarea vitezei _displayScore + = SPEED;
Există o problemă potențială aici. Ce se întâmplă dacă viteza noastră este setată la 10 și încercăm să adăugăm 5 la scor? DisplayScore va fi mai mare decât totalScore. Să adăugăm câteva linii pentru a repara că:
// asigurați-vă că scorul afișat nu este mai mare decât scorul efectiv dacă (_displayScore> _totalScore) _displayScore = _totalScore;
Acest lucru verifică dacă displayScore este mai mare decât totalScore și dacă da, setează displayScore să fie egal cu totalScore.
Apoi trebuie să adăugăm zerouri de conducere la scor. Vom face acest lucru transformând displayScore într-un String și adăugând zerouri până când lungimea este egală cu numărul de cifre definite de constanta NUM_DIGITS:
var scorStr: String = String (_displayScore); // cast displayScore ca un String // adauga zerouri in timp ce (scoreStr.length < NUM_DIGITS) scorStr = "0" + scorStr;
Acum, pentru a afișa efectiv scorul pe care îl vom relua prin fiecare dintre clipurile noastre digitale (amintiți-vă că am denumit apoi "digit1", "digit2" etc.) și utilizați numărul corespunzător din șirul de scoruri pentru a seta numărul cadrului clamă:
// introduceți și actualizați fiecare cifră pentru (var i: int = 0; i < num_cifre; i ++) var num = int (scorulStr.charAt (i)); aceasta ["cifră" + (i + 1)]. gotoAndStop (num + 1); // setați cifra mc la cadrul drept
Metoda charAt preia caracterul dintr-un String la poziția specificată. Acest lucru ne permite să mergem caracterul după caracter prin șirul de scoruri.
Parantezele din următorul rând ne permit să creăm dinamic numele clipului. Codul, acest [ "cifre" + (i + 1)] accesează clipul cu numele "digit1" sau "digit2" etc., în funcție de valoarea eu.
Folosim numărul numerelor "num + 1" deoarece numerele de cadre sunt decalate cu 1 din cifrele pe care le conțin (cadru 1 arată 0, cadru 2 arată 1 etc.)
Ultimul lucru pe care trebuie să-l facem în această metodă este verificarea pentru a vedea dacă displayScore și totalScore sunt egale. Dacă da, putem elimina ascultătorul și nu mai sunăm pentru această metodă.
// dacă scorul de afișare este egal cu scorul total, eliminați evenimentul de intrare dacă (_totalScore == _displayScore) removeEventListener (Event.ENTER_FRAME, updateScoreDisplay);
Dacă v-ați pierdut oriunde în acel pas, puteți verifica fișierele sursă pentru a vedea clasa finalizată.
Pentru a utiliza această clasă, trageți clipul de înregistrare Scor din Biblioteca pe scenă și dați-i numele de instanță "myScore". Puteți adăuga puncte la scorul dvs. folosind această linie în clasa de documente:
myScore.add (50);
Puteți vedea un exemplu de acest lucru în fișierele sursă. Adăugez la scor când se dau clic pe butoanele barei de protecție, dar probabil veți fi apelați la adăugarea () atunci când apar evenimente din joc.
Dacă trebuie să cunoști scorul jucătorului, poți obține totalul scorului folosind:
myScore.totalScore
Aceasta va apela metoda accessor și va returna valoarea _totalScore.
Acum aveți o clasă de scor reutilizabile care se poate utiliza în oricare dintre jocurile dvs..
Cred că aspectul cu LED-uri este cool, dar ar trebui să modifici cu siguranță designul pentru a se potrivi aspectului jocului tău. Iată câteva idei pentru desene sau modele diferite pentru a vă începe:
Vă mulțumim că ați citit acest tutorial. Dați-mi voie să știu ce credeți!
Accentsconagua