Share
În acest Tutorial Premium, vom învăța cum să combinăm mai multe clase și competențe ActionScript 3 pentru a crea un fantastic joc de fotografiere.
Folosind Flash Tools vom crea o grafică bună, care va fi alimentată de mai multe clase ActionScript 3 cum ar fi MouseCursor, Tween Nano, Sprite, Timeri și alte evenimente.
Utilizatorul va putea introduce numele unui jucător și va distruge un număr predefinit de dartboard-uri înainte de terminarea jocului.
Deschideți Flash și creați un document înalt de 720 de pixeli și 480 de pixeli înălțime. Setați rata cadrelor la 24fps.
O interfață colorată cu aspect frumos va alimenta codul nostru, aceasta implică mai multe forme, butoane, cursoare personalizate și multe altele.
Continuați cu pașii următori pentru a afla cum să creați această interfață grafică.
Un gradient radial albastru va fi cerul.
Selectați instrumentul Rectangle (R) și creați un dreptunghi de 720x335 px, utilizați panoul de culori pentru a aplica un fundal radial #EFFDFE, # 7FD7FF.
Trei forme principale vor fi folosite pentru nori, restul va fi duplicat filmul MovieClips.
Utilizați Instrumentul Oval (O) pentru a crea cercuri și ovale de diferite dimensiuni, după ce ați obținut forma de nor care vă place, colorați-le folosind acest gradient fill # F1FBFF, # C3ECFF. Utilizați instrumentul de transformare a gradientului (F) pentru a roti gradientul.
Să adăugăm niște munți la scenă.
Utilizați instrumentul Rectangle pentru a crea două dreptunghiuri de-a lungul scenei, utilizați acest gradient pe ele # 8DB400, # CFF500.
Cu instrumentul de selectare (V), apucați colțurile dreptunghiului și le dați o formă mai puțin pătrată.
Utilizați aceeași tehnică numai de această dată trăgând din laturile dreptunghiurilor (veți avea o curbă în cursorul mouse-ului), utilizați instrumentul Transformare gradient pentru a roti gradientul.
Acesta este graficul de iarbă pe care îl vom crea. Este realizat din trei sau patru forme diferite în culori diferite.
Utilizați instrumentul Rectangle pentru a crea un dreptunghi și utilizați tehnica munților pentru a începe modificarea formei. Puteți vedea cum a fost creată iarba uitându-se la următoarea imagine:
Odată ce ai prima formă de iarbă, trebuie să modifici culorile și dimensiunile, apoi le-ai pus împreună și ai terminat.
Graficul de la sol este destul de simplu, un fundal colorat # 5F4123, cu unele roci # 3A2814.
Fundalul dvs. ar trebui să arate astfel:
Panoul de informații va afișa numele jucătorului, precum și scorul curent. Să începem prin crearea fundalului.
Utilizați instrumentul Primitiv dreptunghi pentru a crea un dreptunghi de 230x40 px, #CCCCCC, alfa 60% și așezați-l așa cum se vede în imagine.
Duplicați forma și modificați-o la 225x30 px, # 000000, alfa 70%. Centurați noua formă în fundal gri.
Transformați noua formă în MovieClip și denumiți-o infoBg.
Utilizați instrumentul Text (T) pentru a crea două câmpuri text dinamice și a le plasa în fundal.
Acesta este formatul folosit pentru numele jucătorului: Walway Rounded, 28pt, # 6CA8E6, nume de instanță: numele jucatorului.
Câmpul de text din lateral este: Walkway rounded, 32pt, #FFFFFF, name instance: scor.
Cursorul personalizat este compus dintr-o serie de dreptunghiuri rotunjite și un cerc.
O privire la următoarea imagine vă va oferi o mai bună înțelegere a modului în care a fost făcută.
Dartboard-ul este unul dintre elementele principale ale jocului, este obiectivul de a distruge.
Utilizați instrumentul Oval pentru a crea un cerc de 80x80 px cu acest gradient liniar # 697368, # 060604.
Duplicați forma, redimensionați-o la 64x64 px și schimbați gradientul la # F6F6F6, #DDDDDD.
Utilizați Instrumentul Oval Primitive pentru a crea un cerc de 46x46 px și pentru a modifica raza interioară la 75.00. Utilizați din nou gradientul negru.
Duplicați cercul alb, redimensionați-l la 18x18 px și completați-l cu # AF4F50.
Conversia Formelor în MovieClip și denumirea acestora dartboard, asigurați-vă că verificați Exportați pentru ActionScript cutie.
Un numărător de lovituri va fi în colțul din stânga sus al scenei.
Utilizați același format din câmpul TextName player, modificați culoarea în # FEE75C. Câmpul text dinamic este numit hit-uri.
Acesta este panoul de nume, nimic greu despre asta.
Acesta va fi primul lucru care va fi arătat jucătorului. Acesta conține un nume de text de intrare numit nameField și dartboard-ul folosit ca buton numit beginButton.
Vom reda un sunet când se lovește un dartboard. Există multe site-uri unde puteți descărca efecte sonore și muzică online, puteți obține efectul folosit în tutorial aici.
Pentru a folosi sunetul trebuie mai întâi să îl importăm în bibliotecă. Apăsați Cmd + R, navigați la sunetul pe care l-ați descărcat și faceți clic pe Deschidere.
Deschideți biblioteca și faceți clic dreapta pe pictograma de sunet, selectați Proprietăți și marchează Exportați pentru ActionScript cutie.
Aceasta termină faza grafică, permiteți începerea acțiunii ActionScripting!
Creați o nouă clasă ActionScript 3.0 (Cmd + N) și salvați-o ca Main.as în dosarul dvs. de clasă.
Vom folosi un motor tween diferit de cel implicit inclus în bliț, ceea ce va crește performanța (este și mai ușor de utilizat). Puteți descărca Tween Nano de pe site-ul său oficial.
Cuvântul cheie al pachetului vă permite să vă organizați codul în grupuri care pot fi importate de alte scripturi. Se recomandă să le numim începând cu o literă mică și să folosim intercaps pentru următoarele cuvinte, de exemplu: myClasses. Este, de asemenea, obișnuit să le denumiți utilizând site-ul companiei: com.mycompany.classesType.myClass.
În acest exemplu, folosim o singură clasă, deci nu este necesar să creați un folder de clase.
pachet
Acestea sunt clasele pe care trebuie să le importăm pentru ca clasa noastră să funcționeze import directiva face ca clasele și pachetele definite extern să fie disponibile pentru codul dvs..
import flash.display.Sprite; import flash.ui.Mouse; import com.greensock.TweenNano; importul flash.events.MouseEvent; importul flash.events.Event; import flash.utils.Timer; import flash.events.TimerEvent;
Aici declarăm clasa utilizând clasă definirea cuvântului cheie urmat de numele pe care îl dorim pentru clasă, amintiți-vă că trebuie să salvați fișierul utilizând acest nume.
extinde cuvântul cheie definește o clasă care este o subclasă a unei alte clase. Subclasa moștenește toate metodele, proprietățile și funcțiile, astfel încât le putem folosi în clasa noastră.
clasa publică principală extinde Sprite
Acestea sunt variabilele pe care le vom folosi, citiți comentariile din cod pentru a afla mai multe despre fiecare.
privat var gridY: Array = Array nou (); // Stochează coordonatele y în care un dartboard poate fi poziționat privat var gridX: Array = Array nou (); // Stochează coordonatele x în care un dartboard poate fi poziționat privat var xPos: int = 0; // Ultima pozitie x folosita de un dartboard privat var yPos: int = 0; // Pozitia cea mai recenta folosita de dartboard-uri private dartboard: Array = new Array (); // Stochează dartboard-urile sprites privat var smack: SmackSound = nou SmackSound (); // Sunetul care va fi redat când un dartboard este distrus temporar privat: Timer = timer nou (3000); // Cantitatea de timp de așteptare înainte de a schimba dartboard-urile în ecranul privat var currentDartboards: int = 0; // Dartboardurile afișate deja în stadiu, verifică nivelul de completare a nivelului privat la nivel de completareComplete: int = 30; // Dartboard-urile care trebuie afișate pentru a finaliza nivelul privat var varPanel: ScorePanel = new ScorePanel (); // O instanță a panoului de scoruri
Constructorul este o funcție care rulează atunci când un obiect este creat dintr-o clasă, acest cod este primul care se execută atunci când faceți o instanță a unui obiect sau executați utilizând Clasa de documente.
Se numește funcțiile necesare pentru a începe jocul. Verificați aceste funcții în pașii următori.
funcția publică principală (): void startCustomCursor (); namePanelHandler (); updateScore (); bg.addEventListener (MouseEvent.MOUSE_DOWN, addHits);
Această funcție animă panoul Nume în etapă și adaugă un ascultător butonului pentru a seta numele în câmpul Text când este activat.
funcția privată numePanelHandler (): void namePanel.beginButton.stop (); numePanel.beginButton.addEventListener (MouseEvent.MOUSE_UP, setPlayerName); TweenNano.from (numePanel, 0.5, y: -namePanel.height / 2);
Setează numele scris în câmpul text al panoului de nume în câmpul Nume jucător în panoul Informații.
funcția privată setPlayerName (e: MouseEvent): void smack.play (); namePanel.beginButton.gotoAndPlay (3); playerName.text = numePanel.nameField.text; TweenNano.to (numePanel, 0.5, y: stage.stageHeight + namePanel.height / 2, onComplete: beginGame);
Următoarea funcție face cursorul personalizabil draggable, de asemenea, ascunde cursorul implicit al mouse-ului.
funcția privată startCustomCursor (): void Mouse.hide (); cursor.startDrag (true);
Aceasta este o funcție importantă, calculează zona de scenă și creează o grilă bazată pe dimensiunea Dartboard (80px).
Vom utiliza matricele rezultate mai târziu pentru a împiedica apariția dartboard-urilor în fața celuilalt.
funcția privată calculateGrid (): void gridX = []; gridY = []; pentru (var h: int = 1; h <= (stage.stageHeight - 160) / 80; h++) //The - reduces invisible/used area gridY.push(80 * h); for (var v:int = 1; v <= (stage.stageWidth - 160) / 80; v++) gridX.push(80 * v);
Următoarea funcție va crea și adăuga dartboard-urile create de Cantitate parametru.
Urmează această logică:
funcția privată addRandomDartboards (suma: int): void calculateGrid (); pentru (var i: int = 0; i < amount; i++) var dartboard:Dartboard = new Dartboard(); dartboard.stop(); xPos = gridX[Math.floor(Math.random() * gridX.length)]; yPos = gridY[Math.floor(Math.random() * gridY.length)]; dartboard.x = xPos + 40; dartboard.y = yPos + 40; gridX.splice(gridX.indexOf(xPos), 1); gridY.splice(gridY.indexOf(yPos), 1); dartboard.addEventListener(MouseEvent.MOUSE_DOWN, destroyDartboard); addChild(dartboard); TweenNano.from(dartboard, 0.6, rotationY: 180); TweenNano.from(dartboard, 0.6, scaleX: 0.4); TweenNano.from(dartboard, 0.6, scaleY: 0.4); dartboards.push(dartboard); setChildIndex(cursor, (numChildren - 1)); currentDartboards++;
Această funcție gestionează animația pentru un darboard care a fost lovit, de asemenea, elimină dartboard-ul din tabloul dartboard-urilor și adaugă altele dacă nu mai există clipuri în scenă.
Scorurile și scorurile animațiilor sunt tratate și aici.
funcția privată distrugeDartboard (e: MouseEvent): void smack.play (); // Sunetul de sunet e.target.removeEventListener (MouseEvent.MOUSE_DOWN, destroyDartboard); e.target.gotoAndPlay (3); e.target.addEventListener (Event.ENTER_FRAME, removeDartboard); dartboards.splice (dartboards.indexOf (e.target), 1); // Eliminați din matrice dacă (dartboards.length == 0) // Adăugați noi darboards dacă toate au fost distruse timer.stop (); addRandomDartboards (5); timer.start (); / * Actualizare scoruri, hit-uri și redare animație lovit * / updateScore (1); updateHits (1); var plusOne: ScorePlus = noul ScorePlus (); plusOne.x = e.target.x; plusOne.y = e.target.y + plusOne.height; addChild (plusone); TweenNano.from (plusOne, 0,5, scaleX: 0,5); TweenNano.from (plusOne, 0,5, scaleY: 0,5, onComplete: removeScoreGFX, onCompleteParams: [plusOne]);
Elimină scorul "+1" din movieclip.
funcția privată removeScoreGFX (target: Sprite): void removeChild (target);
Verifică dacă animația darboard sa încheiat și o înlătură dacă este adevărată.
funcția privată removeDartboard (e: Event): void if (e.target.currentFrame == 8) e.target.removeEventListener (Event.ENTER_FRAME, removeDartboard); removeChild (e.target ca Sprite);
Adaugă scorul indicat la textul TextField.
funcția privată updateScore (addToScore: int = 0): void score.text = String (int (score.text) + addToScore);
Se adaugă 1 la scorul loviturilor, aceasta se numește atunci când un dartboard este distrus.
funcția privată updateHits (addToHits: int = 0): void hits.text = String (int (hits.text) + addToHits); TweenNano.from (rezultate, 0,3, y: -5);
Adaugă scorul total de lovituri la scorul TextField.
funcția privată addHits (e: MouseEvent): void score.text = String (int (score.text) + int (hits.text)); hits.text = "0";
Inițiază jocul.
Creează dartboard-uri, elimină panoul de nume al jucătorilor și pornește cronometrul.
funcția privată beginGame (restart: Boolean = false): void if (! restarting) removeChild (numePanel); addRandomDartboards (5); timer.addEventListener (TimerEvent.TIMER, removeRemainingListeners); timer.start ();
Îndepărtează dartboard-urile care nu au fost lovite și adaugă altele noi dacă nivelul nu este complet.
funcția privată removeRemaining (): void pentru (var i: int = dartboards.length-1; i> = 0; i--) removeChild (dartboard-uri [i]); dartboards.length = i; dacă (dartboards.length == 0 &&Dartboards current < levelComplete) addRandomDartboards(5); timer.start(); else if (dartboards.length == 0 && currentDartboards >= levelComplete) // Dacă nivelul este complet levelCompleted ();
Dacă toate tablourile dartboard admise au fost afișate în stadiu, această funcție va fi executată.
Calculează scorul final, ascunde panoul de informații și arată ScorePanel.
funcția privată de nivelComplet (): void score.text = String (int (score.text) + int (hits.text)); hits.text = "0"; score.visible = false; playerName.visible = false; TweenNano.to (infoBg, 0,5, x: -infoBg.width / 2); scorePanel.x = stage.stageWidth + scorePanel.width / 2; scorePanel.y = stage.stageHeight / 2; scorePanel.myScore.text = score.text; scorePanel.playAgain.addEventListener (MouseEvent.MOUSE_UP, reporniți); addChild (scorePanel); setChildIndex (cursor, (numChildren - 1)); TweenNano.to (scorPanel, 0,5, x: stage.stageWidth / 2);
Următoarele linii fac posibilă repornirea. Veți găsi tot ce este explicat în comentarii.
restartarea funcției private (e: MouseEvent): void score.visible = true; // ascunde scorul score.text = "0"; // Setează scorul la 0 playerName.visible = true; // Afișează din nou numele jucătorului scorePanel.playAgain.removeEventListener (MouseEvent.MOUSE_UP, restart); // Îndepărtează ascultătorul de la butonul din panoul de scor TweenNano.to (infoBg, 0.5, x: infoBg.width / 2); // Animă panoul de informații și panoul de scor TweenNano.to (ScorePanel, 0.5, x: stage.stageWidth + scorePanel.width / 2, pecomplet: removeScorePanel); currentDartboards = 0; // resetează lista curentă de dartsboard beginGame (true); // începe jocul
Îndepărtează panoul de scor din stadiul când animația este finalizată.
funcția privată removeScorePanel (): void removeChild (scorePanel);
Vom folosi clasa de documente în acest tutorial, dacă nu știți cum să o utilizați sau sunteți puțin confuză vă rugăm să citiți acest QuickTip.
Acum sunteți gata să vă testați jocul, mergeți la Flash și apăsați Cmd + Return, verificați dacă totul funcționează conform așteptărilor și distrați-vă!
Rezultatul final este un joc plin de culoare și distractiv, încercați să-l personalizați, ce despre un port Android?
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
Accentsconagua