Share
Urmați pașii direcți din acest Premium Tutorial pentru a crea un film de distracție cu Flash și AS3.
Folosind sprite pre-fabricate și Flash Tools, vom crea o interfață grafică bună care va fi alimentată de mai multe clase ActionScript 3.
Utilizatorul va putea să controleze o navă spațială și să tragă mai mulți dușmani în timp ce călătoresc în spațiu.
Deschideți Flash și creați un document de 320 pixeli lățime, 480 pixeli înălțime. Setați rata cadrelor la 24fps.
Interfața noastră va fi compusă din mai multe sprite, câmpuri de text și clipuri video.
Continuați cu pașii următori și vom examina modul de creare a acestora.
Fundalul va fi foarte simplu, deoarece stelele sunt generate folosind ActionScript.
Creați un dreptunghi de 320x480 px și completați-l cu negru. Ați adăugat un ușor gradient radial.
Utilizați panoul Align (Cmd + K) pentru a centra în fază.
Am folosit o bibliotecă sprite excelentă în demo-ul acestui tutorial, acestea fac parte din SpriteLib de Flying Yogi.
Importați spritele pe scenă (Cmd + R), le convertiți în MovieClips și reglați cadrele pentru a afișa o animație plăcută.
Pentru a afișa scorul jocului va fi necesar un TextField dinamic. Utilizați instrumentul Text (T) pentru a crea unul; numeste scoreTF și plasați-o în colțul din stânga jos al scenei.
Pentru a utiliza un font personalizat într-un câmp text dinamic, trebuie să îl încorporați în aplicație. Selectați câmpul de text și utilizați Proprietăți panoul Încorporare? pentru a adăuga caracterele necesare.
Vizualizarea Alert va fi afișată atunci când utilizatorul ajunge la o stare de joc (câștigă, pierde). Utilizați fontul dorit pentru a crea un ecran simplu cu două câmpuri text dinamice; numele lor titleTF și msgTF, convertiți caseta la un filmClip și setați numele de clasă la AlertView.
Vom folosi Sound Effects pentru a îmbunătăți sentimentul jocului, puteți găsi sunetele folosite în acest exemplu în Soungle.com utilizând cuvintele cheie spațiu, explozie și laser.
Vom folosi un motor tween diferit de cel implicit inclus în Flash, ceea ce va crește performanța și va fi mai ușor de utilizat.
Puteți descărca Tween Nano de pe site-ul său oficial.
Creați o nouă clasă ActionScript 3.0 (Cmd + N) și salvați-o ca Main.as în dosarul dvs. de clasă.
Creați structura claselor de bază pentru a începe să scrieți codul.
pachet import flash.display.Sprite; clasa publică principală extinde Sprite funcția publică Main (): void // code constructor
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; import com.greensock.easing.Expo; importul flash.events.MouseEvent; importul flash.events.Event; import flash.utils.Timer; import flash.events.TimerEvent;
Acestea sunt variabilele pe care le vom folosi, citiți comentariile din cod pentru a afla mai multe despre ele.
staruri private var: Sprite; // va stoca stelele stele priv private varCopy: Sprite; // O altă versiune a fundalului de stele private nav: Navă; galerii private var: Vector.= Vector nou. (); // va ține gloanțele în vrăjile privitoare la variantele private de tip var: Array = array nou (); // va ține inamicii în etapa privată timer: Timer = timer nou (500); // Ora în care un nou inamic va apărea privat var alertView: AlertView; var privat: Vector. ; // Va stoca viețile grafice private var șef: Boss; privat var bossHealth: int = 20; privat var laserSound: laser = nou Laser (); private var bossSound: UFO = OZN nou (); private var exSound: Explozie = Explozie nouă ();
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ă finală Principal (): void
buildStars (200); // Aceasta functie incepe crearea jocului
buildStars () metoda folosește Star MC în bibliotecă pentru a crea un fundal cu stele alese în mod aleatoriu. Două sprite sunt create pentru a le îmbina pe ambele și pentru a simula mișcarea, folosind același truc ca și în acest tutorial parallax scrolling.
funcția finală privată buildStars (n: int): void stars = new Sprite (); pentru (var i: int = 0; i < n; i++) var star:Star = new Star(); star.alpha = Math.random() * 1; star.scaleX = Math.random() * 1; star.scaleY = star.scaleX; star.x = Math.floor(Math.random() * stage.stageWidth); star.y = Math.floor(Math.random() * stage.stageHeight-20); stars.addChild(star); /* Create another stars sprite to make animation */ starsCopy = new Sprite(); for(var j:int = 0; j < n; j++) var star2:Star = new Star(); star2.alpha = Math.random() * 1 + 0.2; star2.scaleX = Math.random() * 1; star2.scaleY = star.scaleX; star2.x = Math.floor(Math.random() * stage.stageWidth); star2.y = Math.floor(Math.random() * stage.stageHeight-20); starsCopy.addChild(star2); starsCopy.y = -stage.stageHeight; addChild(starsCopy); addChild(stars); addShip(); //Add ship (player) to stage
Această funcție creează o instanță a navei MC în bibliotecă și o plasează pe scenă cu o animație elegantă.
funcția finală privată addShip (): void ship = new Ship (); ship.x = stage.stageWidth * 0.5; ship.y = stage.stageHeight + ship.height; addChild (navă); TweenNano.to (navă, 2, y: (stadiu.stageHeight-ship.height) - 10, ușurință: Expo.easeOut, onComplete: ascultători ()); addLives ();
Reutilizând MC-ul navei, trei scuturi de nave sunt adăugate la scenă ca indicator de viață. Navele sunt adăugate la un Vector pentru a verifica jocul mai târziu în joc.
funcția finală privată addLives (): void lives = new Vector.(); pentru (var i: int = 0; i < 3; i++) var live:Ship = new Ship(); live.stop(); live.width = 16; live.height = 16; live.x = (stage.stageWidth - live.width * 0.7) - (5 * i+1) - live.width * i; live.y = stage.stageHeight - live.height * 0.7; addChild(live); lives.push(live);
Aceste linii vor adăuga ascultătorii necesari la scenă și cronometru; acest lucru include evenimentele mouse-ului, evenimentele Timer și evenimentele EnterFrame care vor actualiza jocul în fiecare cadru.
ascultători de funcții finale private (acțiune: String = 'add'): void if (action == 'add') stage.addEventListener (MouseEvent.MOUSE_MOVE, moveShip); stage.addEventListener (MouseEvent.MOUSE_DOWN, trageți); timer.addEventListener (TimerEvent.TIMER, addEnemy); stage.addEventListener (Event.ENTER_FRAME, actualizare); timer.start (); altceva stage.removeEventListener (MouseEvent.MOUSE_MOVE, moveShip); stage.removeEventListener (MouseEvent.MOUSE_DOWN, trageți); timer.removeEventListener (TimerEvent.TIMER, addEnemy); stage.removeEventListener (Event.ENTER_FRAME, actualizare); timer.stop ();
Nava jucătorului va fi controlată de mouse-ul, următoarea funcție se ocupă de faptul că:
funcția privată finală moveShip (e: MouseEvent): void ship.x = mouseX;
Nava noastră va fi capabilă să tragă gloanțe pentru a distruge și a se proteja de dușmani. Această funcție va funcționa de fiecare dată când utilizatorul face clic pe scenă și va plasa un glonț în fața navei, care va fi ulterior mutat de către Actualizați() funcţie. De asemenea, redă un sunet de fotografiere.
funcția finală a funcției finale (e: MouseEvent): void var bullet: Bullet = Bullet nou (); bullet.x = ship.x; bullet.y = navă.y - (nava.height * 0.5); laserSound.play (); // juca sunet bullets.push (glont); addChild (glonț);
Nu ar fi un shooter fără ceva de filmat. Dușmanii sunt creați de următoarea funcție, un cronometru este folosit pentru a crea un inamic la fiecare 500 de milisecunde (puteți schimba acea valoare în pasul variabilelor) care este ulterior mutat de către Actualizați() funcţie.
funcția finală privată addEnemy (e: TimerEvent): void var inamic: Enemy = Enemy new (); enemy.x = Math.floor (Math.random () * (stage.stageWidth - inamic.width)); enemy.y = -enemy.height; enemies.push (inamic); addChild (inamic);
Alert View afișează informații despre starea jocului, acesta fiind afișat când se ajunge la un eveniment de joc.
În această funcție se folosesc doi parametri:
Accentsconagua
alarmă finală a funcției finale (t: String, m: String): void listeners ('remove'); / * Crearea și afișarea unei alerte * / alertView = new AlertView (); alertView.x = stage.stageWidth * 0.5; alertView.y = stage.stageHeight * 0.5; alertView.titleTF.text = t; alertView.msgTF.text = m; alertView.addEventListener (MouseEvent.MOUSE_UP, reporniți); addChild (alertView); Actualizați() funcția este executată în fiecare cadru, se ocupă de toate mișcările jocului și de coliziuni. Este funcția de joc pentru acest joc. Uitați-vă la pașii următori pentru a vedea comportamentul acestuia.
actualizarea funcției finale private (e: Event): void // code
Fundalul este mutat la fiecare cadru pentru a simula călătoria spațiului; atunci când sprite-ul inferior al stelelor atinge limita de scenă, este mutat înapoi în sus, creând o buclă.
stars.y + = 5; starsCopy.y + = 5; dacă (stars.y> = stage.stageHeight - 20) stars.y = -stars.height; altfel dacă (starsCopy.y> = stage.stageHeight - 20) starsCopy.y = -stars.height;
Următoarele linii de cod verifică dacă există gloanțe în stadiu; dacă este adevărat, gloanțele sunt deplasate în sus; când un glonț nu mai este vizibil, este distrus.
dacă (bullets.length! = 0) pentru (var i: int = 0; i < bullets.length; i++) bullets[i].y -= 10; /* Destroy offstage bullets */ if(bullets[i].y < 0) removeChild(bullets[i]); bullets[i] = null; bullets.splice(i, 1);
Vom adăuga un sef mare și rău la joc. Când utilizatorul atinge un anumit punctaj, șeful va apărea:
dacă (int (scoreTF.text) == 500 && boss == null) șef = nou Boss (); bossSound.play (); boss.x = stage.stageWidth * 0.5; boss.y = -boss.height; TweenNano.to (șeful, 3, y: 80); addChild (sef);
Inamicii sunt, de asemenea, mutat la fiecare cadru. Acest cod găsește toți inamicii din scenă folosind matricea și le mută pe 5px în jos.
dacă (enemies.length! = 0) pentru (var j: int = 0; j < enemies.length; j++) /* Move enemies */ enemies[j].y += 5;
Aici verificăm dacă un dușman se ciocnește cu nava jucătorului; dacă este cazul, se efectuează o serie de acțiuni începând cu sunetul de explozie:
/ * dacă adversarul lovește jucătorul * / dacă (inamicii [j] .hitTestObject (navă)) exSound.play ();
După ce a jucat sunetul, inamicul este scos din scenă și matrice și este setat la nulă pentru a putea (în cele din urmă) să-l elibereze din memorie.
/ * Înlăturați inamicul * / removeChild (inamicii [j]); dușmani [j] = nuli; enemies.splice (j, 1);
Una dintre simbolurile vieții contelui va fi, de asemenea, eliminată în același mod ca și inamicul.
/ * Eliminați Live * / removeChild (trăiește [lives.length-1]); trăiește [lives.length-1] = null; lives.splice (lives.length-1, 1);
Apoi verificăm numărul de vieți, dacă jucătorul nu mai are viață, folosim metoda de avertizare pentru a afișa o alertă care indică jocul, dacă există încă vieți disponibile, nava este animată în scenă.
/ * Dacă nu a mai rămas viața, jocul peste * / dacă (lives.length == 0) alert ("Joc peste", "Faceți clic pentru a continua"); altfel / * Tween Ship * / ship.y = stage.stageHeight + ship.height; TweenNano.to (navă, 2, y: (stadiu.stageHeight-ship.height), ușurință: Expo.easeOut); Următorul cod se ocupă de coliziunile șefului, folosesc aceeași metodă folosită în coliziunea inamicului-navă. Aici folosim bossHealth variabilă pentru a determina când șeful este învins.
pentru (var k: int = 0; k < bullets.length; k++) /* Hit Boss */ if(boss != null && bullets[k].hitTestObject(boss)) exSound.play(); removeChild(bullets[k]); bullets[k] = null; bullets.splice(k, 1); bossHealth--; scoreTF.text = String(int(scoreTF.text) + 50); if(bossHealth <= 0 && boss != null) removeChild(boss); boss = null; alert('You Won', 'Click to continue'); Un alt cod de detectare a coliziunilor. Gloanțele din matrice sunt testate pentru coliziune cu dușmanii; când se întâmplă acest lucru, ambele sunt îndepărtate din scenă și din matrice.
/ * dacă glonțul lovește inamicul * / dacă (bullets.length! = 0 && enemies [j]! = null && goliți [k] .hitTestObject (inamici [j])) exSound.play (); / / Redă sunetul eliminăChild (dușmani [j]); dușmani [j] = nuli; enemies.splice (j, 1); removeChild (gloanțe [k]); gloanțele [k] = null; bullets.splice (k, 1); scoreTF.text = String (int (scoreTF.text) + 50); // adăugați scorul în câmpul de text în etapă
Repornirea funcţie() este numit de către alerta() funcția, se ocupă de operațiile necesare pentru resetarea jocului și repornirea acestuia.
finalizarea funcției finale private (e: MouseEvent): void // code
Prima parte a repornire() funcția gestionează sprites, următoarele linii de cod elimină toate imaginile din scenă.
/ * Eliminați grafica * / removeChild (navă); navă = null; pentru (var i: int = 0; i < bullets.length; i++) removeChild(bullets[i]); bullets[i] = null; bullets.length = 0; for(var j:int = 0; j < enemies.length; j++) removeChild(enemies[j]); enemies[j] = null; enemies.length = 0; for(var k:int = 0; k < lives.length; k++) removeChild(lives[k]); lives[k] = null; lives.length = 0; removeChild(stars); stars = null; removeChild(starsCopy); starsCopy = null; if(boss != null) removeChild(boss); boss = null;
Următoarea parte din repornire() elimină Vizualizarea alertelor din stadiul:
/ * Eliminați alerta * / removeChild (alertView); alertView = null;
În următoarea parte a paginii repornire(), scorurile și variabilele de sănătate ale sefului sunt resetate:
/ * Resetare scor * / scoreTF.text = '0'; / * Resetați Boss Health * / bossHealth = 50;
În cele din urmă, la sfârșitul anului repornire(), numim metoda care începe totul:
/ * Repornire * / buildStars (200);
Adăugați numele clasei la Clasă domeniu în Publica secțiunea din Proprietăți pentru a asocia FLA cu clasa de documente principale.
Ați învățat cum să creați un joc Shooter spațial cu toate caracteristicile sale de bază, încercați să îl extindeți folosind ceea ce deja știți!
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
