Afrikaans (Afrikaans) translation by Meyria (you can also view the original English article)
Volg die reguit- vorentoe stappe van hierdie Premium Tutorial om 'n vermaaklike shoot-up met Flash en AS3 te skep.
Stap 1: Kort Oorsig
Met behulp van voorafgemaakte sprites en die Flash Tools, sal ons 'n mooi grafiese koppelvlak skep wat deur verskeie ActionScript 3 klasse aangedryf sal word.
Die gebruiker sal in staat wees om 'n ruimteskip te beheer en verskeie vyande te skiet terwyl hy in die ruimte reis.
Stap 2: Flash Dokument Instellings
Maak Flash oop en skep 'n 320 pixels wye, 480 pixels lang dokument. Stel die raampunt op 24fps.
Stap 3: Interface
Ons koppelvlak sal bestaan uit verskeie sprites, teksvelde en fliekklemme.
Gaan voort na die volgende stappe en ons sal kyk hoe om dit te skep.
Stap 4: Agtergrond
Die agtergrond sal baie eenvoudig wees, aangesien die sterre gegenereer word met behulp van ActionScript.
Skep 'n 320x480 pk reghoek en vul dit met swart. Jou kan 'n effense radiale gradiënt byvoeg.
Gebruik die Rigspaneel (Cmd K) om dit in die verhoog te sentreer.
Stap 5: Sprites
Ek het 'n wonderlike biblioteek in die demo van hierdie handleiding gebruik, dit is deel van die SpriteLib deur Flying Yogi.
Stap 6: Sprite MovieClips
Voer die sprites in op die verhoog (Cmd+ R), sit dit in MovieClips, en pas die rame aan om 'n lekker animasie te vertoon.
Langkah 7: Skor TextField
'N Dinamiese teksveld sal nodig wees om die spel telling te vertoon. Gebruik die teksinstrument (T) om een te skep; noem dit scoreTF en plaas dit in die onderste linkerhoek van die verhoog.
Stap 8:Voeg Lettertipe in
Om 'n persoonlike font in 'n dinamiese teksveld te gebruik, moet jou dit in jou aansoek insluit. Kies die teksveld en gebruik Eiendom paneel se Embed ... knoppie om die nodige karakters by te voeg.
Step 9: Alert View
Die Alert View sal gewys word wanneer die gebruiker 'n spelstaat bereik (wen, verloor). Gebruik die gewenste skrif om 'n eenvoudige skerm te skep met twee dinamiese teksvelde; noem hulle titleTF en msgTF, verander die kassie na 'n MovieClip en stel sy klas naam in op AlertView.
Stap 10: Klink
Ons gebruik Klankeffekte om die gevoel van die spel te verbeter. Jou kan die geluide wat in hierdie voorbeeld gebruik word in Soungle.com gebruik met die sleutelwoorde ruimte, ontploffing en laser.
Stap 11: Tween Nano
Ons sal 'n ander tween enjin gebruik van die standaard wat in Flash ingesluit word. Dit sal verhoogde prestasie verhoog en makliker wees om te gebruik.
Jou kan Tween Nano aflaai van sy amptelike webwerf.
Stap 12: Nuwe ActionScript Klas
Skep 'n nuwe (Cmd + N) ActionScript 3.0 klas en stoor dit as Main.as in jou klasmap.
Stap 13: Klas Struktuur
Skep jou basiese klasstruktuur om jou kode te begin skryf.
package
{
import flash.display.Sprite;
public class Main extends Sprite
{
public function Main():void
{
// constructor code
}
}
} Stap 14: Vereiste Klasse
Dit is die klasse wat ons moet invoer vir ons klas om te werk; Die invoer richtlijn maak ekstern gedefinieerde klasse en pakkette beskikbaar vir jou kode.
import flash.display.Sprite; import flash.ui.Mouse; import com.greensock.TweenNano; import com.greensock.easing.Expo; import flash.events.MouseEvent; import flash.events.Event; import flash.utils.Timer; import flash.events.TimerEvent;
Stap 15: Veranderlikes
Dit is die veranderlikes wat ons sal gebruik, lees die kommentaar in die kode om meer van hulle te weet.
private var stars:Sprite; // Will store the stars background private var starsCopy:Sprite; //Another version of the stars background private var ship:Ship; private var bullets:Vector.<Sprite> = new Vector.<Sprite>(); //Will hold the bullets in stage private var enemies:Array = new Array(); //Will hold the enemies in stage private var timer:Timer = new Timer(500); //The time in which a new enemy will appear private var alertView:AlertView; private var lives:Vector.<Sprite>; //Will store the lives graphics private var boss:Boss; private var bossHealth:int = 20; private var laserSound:Laser = new Laser(); private var bossSound:UFO = new UFO(); private var exSound:Explosion = new Explosion();
Stap 16: Konstruksie Kode
Die konstruktor is 'n funksie wat loop wanneer 'n voorwerp uit 'n klas geskep word. Hierdie kode is die eerste wat uitgevoer moet word wanneer jou 'n voorwerp of 'n voorwerp maak met die Dokument Klas.
Dit noem die nodige funksies om die spel te begin. Gaan die funksies na in die volgende stappe.
public final function Main():void<br />{
buildStars(200); //This function starts the game creation
} Stap 17: Bou Sterre
Die buildStars() metode gebruik die Star MC in die biblioteek om 'n agtergrond met willekeurig geplaasde sterre te skep. Twee sprites word geskep om beide van hulle te verdeel en beweging te simuleer, met dieselfde truuk as in this parallax scrolling tutorial.
private final function buildStars(n:int):void
{
stars = new Sprite();
for(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
} Stap 18: Voeg Skeep
Hierdie funksie skep 'n voorbeeld van die Ship MC in die biblioteek en plaas dit op die verhoog met 'n netjiese animasie.
private final function addShip():void
{
ship = new Ship();
ship.x = stage.stageWidth * 0.5;
ship.y = stage.stageHeight + ship.height;
addChild(ship);
TweenNano.to(ship, 2, {y: (stage.stageHeight - ship.height) - 10, ease:Expo.easeOut, onComplete:listeners()});
addLives();
} Stap 19: Voeg Lewe by
Deur die Ship MC te hergebruik, word drie skeepsvliegtuie as 'n lewensaanwyser by die verhoog gevoeg. Die skepe word by 'n Vector gevoeg om later na die spel te kyk.
private final function addLives():void
{
lives = new Vector.<Sprite>();
for(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);
}
} Stap 20: Voeg Luisteraars by
Hierdie lyne sal die nodige luisteraars by die verhoog en timer voeg; dit sluit in Muis gebeurtenisse, Timer gebeure en en EnterFrame gebeure wat die spel sal elke raamwerk opdateer.
private final function listeners(action:String = 'add'):void
{
if(action == 'add')
{
stage.addEventListener(MouseEvent.MOUSE_MOVE, moveShip);
stage.addEventListener(MouseEvent.MOUSE_DOWN, shoot);
timer.addEventListener(TimerEvent.TIMER, addEnemy);
stage.addEventListener(Event.ENTER_FRAME, update);
timer.start();
}
else
{
stage.removeEventListener(MouseEvent.MOUSE_MOVE, moveShip);
stage.removeEventListener(MouseEvent.MOUSE_DOWN, shoot);
timer.removeEventListener(TimerEvent.TIMER, addEnemy);
stage.removeEventListener(Event.ENTER_FRAME, update);
timer.stop();
}
} Stap 21: Skuif Skip
Die speler se skip sal muis beheer word, die volgende funksie hanteer die volgende:
private final function moveShip(e:MouseEvent):void
{
ship.x = mouseX;
} Stap 22: Skiet
Ons skip sal kolletjies kan skiet om hulleself te vernietig en te beskerm teen vyande. Hierdie funksie sal elke keer as die gebruiker die verhoog kliek en 'n koeël voor die skip plaas wat later deur die update() funksie verskuif sal word. Dit speel ook 'n skietklank.
private final function shoot(e:MouseEvent):void
{
var bullet:Bullet = new Bullet();
bullet.x = ship.x;
bullet.y = ship.y - (ship.height * 0.5);
laserSound.play(); //Play sound
bullets.push(bullet);
addChild(bullet);
} Stap 23: Voeg Vyand toe
Dit sou nie 'n shooter wees sonder om iets te skiet nie. Die vyande word geskep deur die volgende funksie, 'n Timer word gebruik om elke 500 millisekondes 'n vyand te maak (jou kan die waarde verander in die veranderlikes stap) wat later deur die update() funksie beweeg word.
private final function addEnemy(e:TimerEvent):void
{
var enemy:Enemy = new Enemy();
enemy.x = Math.floor(Math.random() * (stage.stageWidth - enemy.width));
enemy.y = -enemy.height;
enemies.push(enemy);
addChild(enemy);
} Stap 24: Alert View
Die Alert View wys die speler se inligting oor die status van die spel, dit word gewys wanneer 'n speletjie gebeurtenis bereik word.
Twee parameters word in hierdie funksie gebruik:
- t: Die waarskuwingstitel
- m: 'N kort boodskap
private final function alert(t:String, m:String):void
{
listeners('remove');
/* Create and show alert */
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, restart);
addChild(alertView);
} Stap 25: Update
Die update() funksie word uitgevoer in elke raam, dit hanteer al die spelbewegings en botsings. Dit is die game loop funksie vir hierdie speletjie. Kyk na die volgende stappe om sy gedrag te sien.
private final function update(e:Event):void
{
//code
} Stap 26: Skuif Agtergrond
Die agtergrond word elke raam beweeg om ruimtevaart te simuleer; wanneer die onderste sterre sprite die verhooglimiet bereik, word dit na die bokant teruggetrek en 'n lus geskep.
stars.y += 5;
starsCopy.y += 5;
if(stars.y >= stage.stageHeight - 20)
{
stars.y = -stars.height;
}
else if(starsCopy.y >= stage.stageHeight - 20)
{
starsCopy.y = -stars.height;
} Stap 27: Beweeg Bullets
Die volgende reëls kode kyk of daar koeëls in die verhoog is; indien waar, word die koeëls opwaarts verskuif; Wanneer 'n koeël nie meer sigbaar is nie, word dit vernietig.
if(bullets.length != 0)
{
for(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);
}
}
} Stap 28: Boss
Ons sal 'n groot en slegte baas by die spel voeg. Wanneer die gebruiker sekere punte bereik, sal die baas verskyn:
if(int(scoreTF.text) == 500 && boss == null)
{
boss = new Boss();
bossSound.play();
boss.x = stage.stageWidth * 0.5;
boss.y = -boss.height;
TweenNano.to(boss, 3, {y: 80});
addChild(boss);
} Stap 29: Skuif Vyande
Die vyande word ook elke raam verskuif. Hierdie kode vind al die vyande in die verhoog met behulp van die skikking en beweeg hulle 5px afwaarts.
if(enemies.length != 0)
{
for(var j:int = 0; j < enemies.length; j++)
{
/* Move enemies */
enemies[j].y += 5; Stap 30: Vyand- Skip Botsing
Hier kyk ons of 'n vyand bots met die speler se skip; As dit wel gebeur, word 'n reeks aksies uitgevoer wat begin met die ontploffingsklank:
/* if enemy hits player */
if(enemies[j].hitTestObject(ship))
{
exSound.play(); Stap 31: Vernietig Vyand
Nadat die geluid gespeel is, word die vyand van die verhoog en die skikking verwyder, en is ingestel op nul om dit (uiteindelik) uit die geheue te verwyder.
/* Remove enemy */ removeChild(enemies[j]); enemies[j] = null; enemies.splice(j, 1);
Stap 32: Verwyder Live
Een van die lewensentoon se ikone sal ook op dieselfde manier verwyder word as die vyand.
/* Remove Live */ removeChild(lives[lives.length-1]); lives[lives.length-1] = null; lives.splice(lives.length-1, 1);
Stap 33: Toets vir Spel Oor
Dan kyk ons na die lewensnommer, as die speler uit lewens is, gebruik ons die waarskuwingsmetode om 'n waarskuwing aan te dui wat die spel aandui. As daar nog lewens beskikbaar is, word die skip in die verhoog geanimeer.
/* If no lives left, game over */
if(lives.length == 0)
{
alert('Game Over', 'Click to continue');
}
else
{
/* Tween Ship */
ship.y = stage.stageHeight + ship.height;
TweenNano.to(ship, 2, {y: (stage.stageHeight - ship.height), ease:Expo.easeOut});
} Stap 34: Hit Boss
Die volgende kode hanteer die baas botsings, dit gebruik dieselfde metode wat gebruik word in die vyand skip botsing. Hier gebruik ons bossHealth veranderlik om te bepaal wanneer die baas verslaan word.
for(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');
} Stap 35: Bullet-Enemy Collision
Nog 'n botsing opsporing kode. Die koeëls in die skikking word getoets vir botsing met die vyande; Wanneer dit gebeur, word albei van die verhoog en hul skikkings verwyder.
/* if bullet hits enemy */
if(bullets.length != 0 && enemies[j] != null && bullets[k].hitTestObject(enemies[j]))
{
exSound.play(); //Play sound
removeChild(enemies[j]);
enemies[j] = null;
enemies.splice(j, 1);
removeChild(bullets[k]);
bullets[k] = null;
bullets.splice(k, 1);
scoreTF.text = String(int(scoreTF.text) + 50); //Add score to the textfield in stage
} Stap 36: Herbegin Funksie
Die herstart funksie() word deur die waarskuwing() funksie genoem, dit hanteer die nodige operasies om die spel te herstel en weer te begin.
private final function restart(e:MouseEvent):void
{
//code
} Stap 37: Verwyder Sprites
Die eerste deel van die herbegin() funksie hanteer die sprites. Die volgende reëls van kode verwyder al die beelde uit die verhoog.
/* Remove Graphics */
removeChild(ship);
ship = null;
for(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;
} Stap 38: Verwyder Alert
Die volgende deel van herbegin() verwyder die Alert View vanaf die verhoog:
/* Remove Alert */ removeChild(alertView); alertView = null;
Stap 39: Herstel telling/Boss Health
In die volgende deel van herbegin() word die telling en baasgesondheidsveranderlikes herstel:
/* Reset Score */ scoreTF.text = '0'; /* Reset Boss Health */ bossHealth = 50;
Stap 40: Oproep Herbegin Metode
Ten slotte, aan die einde van herbegin(), noem ons die metode wat alles begin:
/* Restart */ buildStars(200);
Stap 41: Dokument Klas
Voeg die klas naam by die Klas veld in die afdeling Publiseer in die Eienskappe paneel om die FLA te assosieer met die Hoof dokument klas.
Konklusie
Jou het geleer hoe om 'n Space Shooter-spel met al sy basiese kenmerke te skep, probeer om dit uit te brei met behulp van wat jou reeds weet!
Ek hoop jou het hierdie tutoriaal gehou, dankie dat jou lees!
