Share
In deze tutorial bouwen we een heel eenvoudig "keepy-uppy" -spel. Klik op de frisbee om hem skyward te sturen en draai hem dan met je muis om te voorkomen dat hij op de grond valt! Verzamel power-ups om de grootte van de schijf te veranderen.
Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:
Met behulp van vooraf gemaakte grafische elementen creëren we een goed uitziende interface die wordt aangedreven door verschillende ActionScript 3-klassen.
De gebruiker kan een personage over het podium bewegen, upgrade-items verzamelen en zwaartekracht verslaan, je kunt de waarden in de klas aanpassen om het spel aan te passen.
Open Flash en maak een 320 pixels breed, 480 pixels lang document. Stel de beeldsnelheid in op 24 fps.
Er wordt een kleurrijke, mooi uitziende interface weergegeven, met meerdere vormen, knoppen en meer.
De meeste afbeeldingen die we hebben gebruikt, zijn gemaakt in eerdere zelfstudies, dus het is niet nodig om hun creatie op te nemen.
De afbeelding hierboven toont de Namen van exemplaren gebruikt in de MovieClips. Degenen die met een beginnen Hoofdletter zijn Bibliotheek Class Namen en zou niet op het podium moeten staan, er zijn ook twee wolkenclips boven deze graphics, ze worden genoemd wolken en clouds2.
We gebruiken een andere tween-engine dan de standaard die is opgenomen in de flitser, dit zal de prestaties verbeteren en het is gemakkelijker te gebruiken.
Je kan downloaden TweenNano van zijn officiële website. Leer hier hoe je het aan je project kunt toevoegen.
Maak een nieuwe ActionScript 3.0-klasse (Cmd + N) en sla deze op als Main.as in je klasmap.
Maak uw standaard klassenstructuur om te beginnen met het schrijven van uw code.
pakket import flash.display.Sprite; public class Hoofd breidt uit openbare functie Main (): void // constructor code
Dit zijn de klassen die we moeten importeren voor onze klas om te werken, de importeren richtlijn maakt extern gedefinieerde klassen en pakketten beschikbaar voor uw code.
import flash.display.Sprite; import flash.events.MouseEvent; import flash.events.Event; import flash.net.navigateToURL; import flash.net.URLRequest; import com.greensock.TweenNano; import com.greensock.easing.Elastic; import flash.utils.Timer; import flash.events.TimerEvent;
Dit zijn de variabelen die we zullen gebruiken, lees de opmerkingen in de code om meer over hen te weten, sommige van hun namen verklaren zichzelf, dus daar zal geen commentaar zijn.
private var firsttime: Boolean = true; private var zwaartekracht: int = 2; privé var throwSpeed: int; privé var xMouse: int; privé var xSpeed: int; privé var topHeight: int = 40; private var top: Boolean; privé var-score: int = 0; private var scoreVal: int = 1; private var timer: Timer = new Timer (10000); private var cancelBonus: Timer = new Timer (3000); upgrade van privé-var: Sprite;
De constructor is een functie die wordt uitgevoerd wanneer een object is gemaakt op basis van een klasse, deze code is de eerste die wordt uitgevoerd wanneer u een instantie van een object maakt of wordt uitgevoerd met de boedelDocumentklasse.
Het roept de nodige functies op om het spel te starten. Controleer die functies in de volgende stappen.
public function Main (): void addGameListeners ();
In deze functie voegen we de aanvankelijke game-luisteraars toe die nodig zijn om het spel te starten. We hebben ook de buttonMode eigenschap van de frisbee naar true (dit toont de handcursor wanneer de muis erop staat) en verberg de positie-indicator.
private function addGameListeners (): void frisbee.addEventListener (MouseEvent.MOUSE_UP, startFrisbee); frisbee.buttonMode = true; indicator.visible = false;
De eerste zet van de frisbee activeert de timers die verantwoordelijk zijn voor de upgrades en belt de bijwerken functie die de hoofdfunctie van het spel is.
persoonlijke functie-startFrisbee (e: MouseEvent): void frisbee.removeEventListener (MouseEvent.MOUSE_UP, startFrisbee); frisbee.addEventListener (MouseEvent.MOUSE_UP, throwFrisbee); stage.addEventListener (Event.ENTER_FRAME, update); timer.addEventListener (TimerEvent.TIMER, showUpgrade); timer.start (); xSpeed = 0; xMouse = frisbee.mouseX; throwSpeed = 0;
Deze functie reset de variabelen die gebruikt worden om de frisbee te laten bewegen en vallen; het werkt telkens wanneer op de frisbee wordt geklikt.
private function throwFrisbee (e: MouseEvent): void xSpeed = 0; xMouse = frisbee.mouseX; throwSpeed = 0; top = false;
Een getimede functie zal omgaan met de upgrade-bubbels. De timer is in de variabelenverklaring ingesteld om een interval van 10 seconden te hebben. Het eerste wat u moet doen, is een vorige bubbel op het scherm controleren en deze verwijderen als deze er is.
private function showUpgrade (e: TimerEvent): void / * Verwijder vorige sprite * / if (upgrade! = null) removeChild (upgrade); upgrade = null;
De upgrades zijn bubbels die op het scherm verschijnen en die de speler speciale vaardigheden of verbeteringen zullen geven.
De volgende code berekent een willekeurig getal (dit kan 0 of 1 zijn) en geeft een instantisatie van de dubbele upgrade als het cijfer 0 is.
var randomNumber: int = Math.floor (Math.random () * 2); if (randomNumber == 0) upgrade = new Double (); upgrade.name = 'd';
Als het berekende cijfer 1 is, wordt de grote frisbee-upgrade toegevoegd aan de etappe. Er wordt een naam gegeven aan de upgrades om te bepalen of de waarde is wanneer deze wordt geraakt.
else upgrade = new Big (); upgrade.name = 'b'; upgrade.x = Math.floor (Math.random () * stage.stageWidth); // geef een willekeurige x-positie addChild (upgrade);
Een andere getimede functie.
Dit wordt gebeld wanneer de speler grijpers de upgrade-bubble, 3 seconden tellen om het upgrade-effect te beëindigen.
privéfunctie cancelUpgrade (e: TimerEvent): void cancelBonus.stop (); cancelBonus.removeEventListener (TimerEvent.TIMER, cancelUpgrade); scoreVal = 1; // annuleer dubbele punten scoreTF.textColor = 0xffffff; frisbee.scaleX = 1; // Return Scale to normale frisbee.scaleY = 1;
De hoofdfunctie van het spel is het omgaan met de wanden, upgrades en de beweging van de frisbee in elk frame. Omdat het zo'n belangrijke en uitgebreide functie is, zullen we het in het volgende deel van deze spelhandleiding bekijken.
persoonlijke functie-update (e: Event): void
Voeg de klassenaam toe aan de Klasse veld in de Publiceren deel van de eigenschappen panel om de FLA te koppelen aan de hoofddocumentklasse.
De belangrijkste functie van het spel, het zal omgaan met botsingen met de muren, upgrades en de frisbee beweging elk frame, leren hoe het werkt in de volgende stappen.
update van privé-finale functie (e: Event): void
De frisbee wordt verplaatst met de throwSpeed-waarde. Deze waarde zal later in de code veranderen om de frisbee omhoog te laten gaan, wanneer deze variabele 0 is, zal de zwaartekracht naar beneden bewegen naar de frisbee.
frisbee.y - = throwSpeed;
De volgende code controleert of de frisbee het hoogste toegestane punt heeft bereikt, anders neemt de variabele throwSpeed toe om hoger te gaan. Tegelijkertijd wordt de zwaartekracht op de variabele toegepast, waardoor deze uiteindelijk zijn positieve waarde verliest en de frisbee valt.
if (throwSpeed> = topHeight) top = true; if (throwSpeed < topHeight && !top) throwSpeed += 5; if(throwSpeed <= 0) throwSpeed = 0; throwSpeed -= gravity; frisbee.y += gravity * 3;
De x-beweging van de frisbee wordt berekend op basis van het gebied waar de speler op klikt.
if (xMouse < frisbee.width * 0.5) frisbee.x += xSpeed; //click the left side, so move it right if(xMouse > frisbee.width * 0.5) frisbee.x - = xSpeed; // klik aan de rechterkant, dus verplaats deze naar links
xSpeed is de waarde waardoor de frisbee naar links of rechts beweegt.
Deze code vertraagt deze beweging door de waarde ervan af te trekken totdat de maximale hoogte is bereikt.
if (xSpeed < topHeight * 0.01 && !top) xSpeed += 1; if(xSpeed <= 0) xSpeed = 0;
Laten we hier stoppen om een snelle test uit te voeren en ervoor te zorgen dat onze code werkt:
Om de beweging van de frisbee te simuleren, roteren we de een letter erin. (Dit is een filmclip in de Frisbee-filmclip, die een instantienaam van een brief.)
frisbee.aLetter.rotationZ + = 50;
De score neemt toe als de frisbee het podium verlaat en tegen de tijd dat het onzichtbaar is voor de speler. Als je dichter bij de top klikt, zal de behaalde score hoger zijn.
if (frisbee.y < 0) score += scoreVal; scoreTF.text = String(score);
Deze indicator volgt de x-positie van de frisbee terwijl deze zich niet in fase bevindt.
indicator.visible = true; indicator.x = frisbee.x + (frisbee.width * 0.5);
De volgende code verplaatst de initiële achtergrond (als deze niet is verwijderd) en de wolken die opnieuw zullen worden gebruikt in het spel.
if (bg! = null) bg.y + = throwSpeed; clouds.y + = throwSpeed; clouds2.y + = throwSpeed;
De eerste achtergrond verschijnt alleen aan het begin van het spel, dus het wordt verwijderd als de speler het niet langer kan zien.
if (bg! = null && bg.y> stage.stageHeight) removeChild (bg); bg = null;
De wolkenachtergronden verschijnen tijdens de duur van het spel altijd. Wanneer een achtergrond niet langer zichtbaar is, wordt de positie gereset.
if (clouds.y> stage.stageHeight) clouds.y = -280; if (clouds2.y> stage.stageHeight) clouds2.y = -280;
Laten we nog een keer stoppen om een snelle test uit te voeren en ervoor te zorgen dat we score, indicator, rotatie, looping clouds en upgrades hebben (hoewel ze nog niets doen?):
я
Dubbele punten worden toegevoegd aan de score wanneer de 2x upgrade is actief, we veranderen ook de score tekstveldkleur om de wijziging beter zichtbaar te maken.
if (upgrade! = null && frisbee.hitTestObject (upgrade) && upgrade.name == 'd') removeChild (upgrade); upgrade = null; scoreVal = 2; scoreTF.textColor = 0xf3ba35; cancelBonus.addEventListener (TimerEvent.TIMER, cancelUpgrade); cancelBonus.start ();
Wanneer de speler de groot bellen, de schaal van de frisbee wordt met 1 verhoogd, waardoor u gemakkelijker kunt klikken.
if (upgrade! = null && frisbee.hitTestObject (upgrade) && upgrade.name == 'b') removeChild (upgrade); upgrade = null; frisbee.scaleX = 2; frisbee.scaleY = 2;
De huidige upgrade is slechts 3 seconden actief en als die tijd verstrijkt, worden de bevoegdheden ervan geannuleerd.
cancelBonus.addEventListener (TimerEvent.TIMER, cancelUpgrade); cancelBonus.start ();
De moeilijkheid van het spel is de zwaartekracht, deze code verandert de zwaartekracht op basis van de score. Wanneer de score 100 bereikt, neemt de zwaartekracht toe met 0,5.
if (score> = 100 && score < 102) gravity += 0.5;
Onzichtbare wanden worden aan de zijkanten gebruikt om te voorkomen dat de frisbee buiten de arena valt.
if (frisbee.x <= 0)//Left frisbee.x = 0; else if(frisbee.x >= (stage.stageWidth - frisbee.width)) // Right frisbee.x = (stage.stageWidth - frisbee.width);
Als de frisbee helemaal naar beneden valt, is het spel afgelopen.
if (frisbee.y> stage.stageHeight) gameOver ();
De volgende code schakelt alle muisgebeurtenissen uit en stopt de timer, dit voorkomt dat het spel ongewenste activiteiten uitvoert.
private final-functie gameOver (): void frisbee.removeEventListener (MouseEvent.MOUSE_UP, throwFrisbee); stage.removeEventListener (Event.ENTER_FRAME, update); timer.stop (); timer.removeEventListener (TimerEvent.TIMER, showUpgrade);
Deze functie zal het spel stoppen en de uiteindelijke score onthullen, het voegt ook een muisluisteraar toe om het spel te resetten wanneer erop wordt geklikt.
var alert: AlertView = nieuwe AlertView (); alert.buttonMode = true; alert.x = stage.stageWidth * 0.5; alert.y = stage.stageHeight * 0.5; alert.scoreTF.text = score TF.text + '!'; alert.addEventListener (MouseEvent.MOUSE_UP, restart); addChild (alert); TweenNano.from (alert, 0.7, y: -alert.height, ease: Elastic.easeOut);
De volgende functie laadt de swf opnieuw, start een variabele opnieuw, methode en keert terug naar het eerste scherm.
privé laatste functie opnieuw opstarten (e: MouseEvent): void navigateToURL (nieuwe URLRequest (stage.loaderInfo.url), '_level0');
Werden gedaan! Probeer het:
Je hebt een heel leuk spel gemaakt, probeer je eigen functies en afbeeldingen toe te voegen.
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
Accentsconagua