In deze Premium-zelfstudie leren we verschillende ActionScript 3-klassen en -vaardigheden combineren om een fantastisch schietgame-spel te maken.
Met behulp van de Flash Tools zullen we goed uitziende afbeeldingen maken die worden aangedreven door verschillende ActionScript 3-klassen zoals MouseCursor, Tween Nano, Sprite, Timers en andere evenementen.
De gebruiker kan de naam van een speler invoeren en een vooraf bepaald aantal dartboards vernietigen voordat het spel eindigt.
Open Flash en maak een 720 pixels breed, 480 pixels lang document. Stel de beeldsnelheid in op 24 fps.
Een kleurrijke, mooi ogende interface zal onze code van stroom voorzien, dit omvat meerdere vormen, knoppen, aangepaste cursors en meer.
Ga door naar de volgende stappen voor meer informatie over het maken van deze GUI.
Een blauw radiaal verloop is de lucht.
Selecteer het gereedschap Rechthoek (R) en maak een rechthoek van 720x335 px, gebruik het kleurenpaneel om een #EFFDFE, # 7FD7FF radiale achtergrond toe te passen.
Drie hoofdvormen worden gebruikt voor de wolken, de rest wordt gedupliceerd MovieClips.
Gebruik het gereedschap Oval (O) om cirkels en ovalen van verschillende grootte te maken, nadat u de gewenste wolkvorm hebt gekregen, kleur ze in met deze verloopvulling # F1FBFF, # C3ECFF. Gebruik het gereedschap Gradiënttransformatie (F) om het verloop te roteren.
Laten we wat bergen toevoegen aan de scène.
Gebruik het gereedschap Rechthoek om twee rechthoeken over de scène te maken, gebruik dit verloop op # 8DB400, # CFF500.
Grijp met de selectiegereedschap (V) de hoeken van de rechthoek en geef ze een minder gekwadrateerde vorm.
Gebruik dezelfde techniek die je alleen deze keer vanaf de zijkanten van de rechthoeken sleept, (je zult een curve in de muiscursor zien), gebruik het gereedschap Verloop omdraaien om het verloop te roteren.
Dit is de grasafbeelding die we gaan maken. Het is gemaakt van drie of vier verschillende vormen in verschillende kleuren.
Gebruik het gereedschap Rechthoek om een rechthoek te maken en gebruik de bergtechniek om de vorm te wijzigen. Je kunt zien hoe het gras is gemaakt en naar de volgende afbeelding kijken:
Zodra je de eerste grasvorm hebt, moet je nu gewoon de kleuren en groottes aanpassen en ze vervolgens samenvoegen en klaar zijn.
De grafische afbeelding op de grond is vrij eenvoudig, een # 5F4123 gekleurde achtergrond, met enkele # 3A2814 stenen.
Je achtergrond zou er nu als volgt uit moeten zien:
Het infopaneel toont de naam van de speler en de huidige score. Laten we beginnen met het maken van de achtergrond.
Gebruik het Primitive Tool Rechthoek om een rechthoek van 230x40 px, #CCCCCC en alpha 60% te maken en plaats deze zoals te zien in de afbeelding.
Dupliceer de vorm en verander deze in 225x30px, # 000000, alpha 70%. Centreer de nieuwe vorm op de grijze achtergrond.
Converteer de nieuwe vorm naar MovieClip en noem deze infoBg.
Gebruik het tekstgereedschap (T) om twee dynamische tekstvelden te maken en deze op de achtergrond te plaatsen.
Dit is het formaat dat wordt gebruikt voor de spelernaam: Walway Rounded, 28pt, # 6CA8E6, instantienaam: Naam speler.
Het tekstveld aan de zijkant is: looppad afgerond, 32pt, #FFFFFF, exemplaarnaam: partituur.
De aangepaste cursor bestaat uit een reeks afgeronde rechthoeken en een cirkel.
Een blik op de volgende afbeelding geeft u een beter begrip van hoe het is gemaakt.
Het dartboard is een van de belangrijkste elementen in het spel, het is het doelwit om te vernietigen.
Gebruik het gereedschap Ovaal om een cirkel van 80x80 px te maken met deze lineaire verloop # 697368, # 060604.
Dupliceer de vorm, verklein hem naar 64x64 px en verander het verloop naar # F6F6F6, #DDDDDD.
Gebruik het ovale primitieve gereedschap om een 46x46 px-cirkel te maken en de binnenradius te wijzigen in 75.00. Gebruik opnieuw het zwarte verloop.
Dupliceer de witte cirkel, verklein hem naar 18x18 px en vul hem met # AF4F50.
Converteer de vormen naar MovieClip en noem deze Dartbord, zorg ervoor dat u de Exporteren voor ActionScript doos.
Een treffer zal zich in de linkerbovenhoek van het podium bevinden.
Gebruik dezelfde indeling van de playerName Textfield, wijzig de kleur in # FEE75C. Het dynamische tekstveld wordt gebeld treffers.
Dit is het naamvenster, niets moeilijks.
Dit wordt voor het eerst getoond aan de speler. Het bevat een Input TextField genaamd veld Naam en dartboard gebruikt als een knop met de naam beginButton.
We spelen een geluid wanneer een dartbord wordt geraakt. Er zijn veel sites waar u geluidseffecten en muziek online kunt downloaden, u kunt hier het effect krijgen dat in de zelfstudie wordt gebruikt.
Om het geluid te gebruiken, moeten we het eerst in de bibliotheek importeren. Druk op Cmd + R, blader naar het geluid dat je hebt gedownload en klik op Openen.
Open de bibliotheek en klik met de rechtermuisknop op het geluidspictogram, selecteer eigenschappen en markeer de Exporteren voor ActionScript doos.
Dit beëindigt de grafische fase, laat ActionScripting beginnen!
Maak een nieuwe ActionScript 3.0-klasse (Cmd + N) en sla deze op als Main.as in je klasmap.
We gebruiken een andere tween-engine dan de standaard in de flash-modus, dit zal de prestaties verbeteren (het is ook gemakkelijker te gebruiken). Je kunt Tween Nano downloaden van de officiële website.
Met het trefwoord pakket kunt u uw code indelen in groepen die door andere scripts kunnen worden geïmporteerd. Het wordt aanbevolen om ze een naam te geven, te beginnen met een kleine letter en intercaps te gebruiken voor volgende woorden, bijvoorbeeld: mijn lessen. Het is ook gebruikelijk om ze een naam te geven via de website van uw bedrijf: com.mycompany.classesType.myClass.
In dit voorbeeld gebruiken we een enkele klasse, dus het is niet echt nodig om een klassenmap te maken.
pakket
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.ui.Mouse; import com.greensock.TweenNano; import flash.events.MouseEvent; import flash.events.Event; import flash.utils.Timer; import flash.events.TimerEvent;
Hier verklaren we de klas met behulp van de klasse definitie sleutelwoord gevolgd door de naam die we voor de klas willen, onthoud dat je het bestand met deze naam moet opslaan.
De strekt keyword definieert een klasse die een subklasse van een andere klasse is. De subklasse erft alle methoden, eigenschappen en functies, op die manier kunnen we ze in onze klasse gebruiken.
public class Main breidt uit
Dit zijn de variabelen die we zullen gebruiken, lees de opmerkingen in de code voor meer informatie over elke code.
private var gridY: Array = new Array (); // Slaat de y-coördinaat op waarin een dartbord kan worden gepositioneerd. Private var gridX: Array = new Array (); // Slaat de x-coördinaat op waarin een dartbord kan worden gepositioneerd private var xPos: int = 0; // De laatste x-positie die door een dartbord wordt gebruikt. Private var yPos: int = 0; // De laatste y-positie die wordt gebruikt door een dartbord van dartboard voor privévariabelen: Array = new Array (); // Bewaart de dartboards sprites private var smack: SmackSound = new SmackSound (); // Het geluid dat wordt afgespeeld wanneer een dartbord wordt vernietigd privé var timer: Timer = new Timer (3000); // De hoeveelheid tijd die moet worden gewacht voordat de dartboards in het scherm worden gewijzigd private var currentDartboards: int = 0; // De dartboards die al in de fase worden weergegeven, controleren of het niveau is voltooid. Private var levelComplete: int = 30; // De dartboards die worden weergegeven om het level te voltooien. Private var scorePanel: ScorePanel = new ScorePanel (); // Een instantie van een scorepaneel
De constructor is een functie die wordt uitgevoerd wanneer een object wordt gemaakt op basis van een klasse, deze code is de eerste die wordt uitgevoerd wanneer u een exemplaar van een object maakt of wordt uitgevoerd met behulp van de documentklasse.
Het roept de nodige functies op om het spel te starten. Controleer die functies in de volgende stappen.
public function Main (): void startCustomCursor (); namePanelHandler (); updateScore (); bg.addEventListener (MouseEvent.MOUSE_DOWN, addHits);
Met deze functie wordt het naampaneel geanimeerd en een luisteraar toegevoegd aan de knop om de naam in het tekstveld in te stellen wanneer deze is geactiveerd.
persoonlijke functienaamPanelHandler (): void namePanel.beginButton.stop (); namePanel.beginButton.addEventListener (MouseEvent.MOUSE_UP, setPlayerName); TweenNano.from (namePanel, 0.5, y: -namePanel.height / 2);
Stelt de naam geschreven in het tekstveld Naamvenster in naar het veld playerName in het deelvenster Info.
private function setPlayerName (e: MouseEvent): void smack.play (); namePanel.beginButton.gotoAndPlay (3); playerName.text = namePanel.nameField.text; TweenNano.to (namePanel, 0.5, y: stage.stageHeight + namePanel.height / 2, onComplete: beginGame);
De volgende functie maakt de aangepaste cursor versleepbaar, het verbergt ook de standaard muisaanwijzer.
private function startCustomCursor (): void Mouse.hide (); cursor.startDrag (true);
Dit is een belangrijke functie, het berekent het werkgebied en maakt een raster gebaseerd op de grootte van het dartbord (80px).
We zullen de resulterende arrays later gebruiken om te voorkomen dat de dartboards voor elkaar verschijnen.
private function calculateGrid (): void gridX = []; gridY = []; for (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);
De volgende functie zal de dartboards creëren en toevoegen die zijn vastgesteld door de bedrag parameter.
Het volgt deze logica:
persoonlijke functie addRandomDartboards (amount: int): void calculateGrid (); for (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++;
Deze functie verwerkt de animatie voor een geslagen darboard, verwijdert ook het dartboard uit de array dartboards en voegt nieuwe toe als er geen clips meer in de stage staan.
Scores en scores animaties worden hier ook afgehandeld.
private function destroyDartboard (e: MouseEvent): void smack.play (); // Het hitgeluid 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); // Remove from array if (dartboards.length == 0) // Voeg nieuwe darboards toe als ze allemaal zijn vernietigd timer.stop (); addRandomDartboards (5); timer.start (); / * Update scores, hits en speel hitanimatie * / updateScore (1); updateHits (1); var plusOne: ScorePlus = nieuwe 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]);
Verwijdert de Score "+1" filmclip.
private function removeScoreGFX (target: Sprite): void removeChild (target);
Controleert of de darboard-animatie is beëindigd en verwijdert deze indien true.
private function removeDartboard (e: Event): void if (e.target.currentFrame == 8) e.target.removeEventListener (Event.ENTER_FRAME, removeDartboard); removeChild (e.target als Sprite);
Voegt de aangegeven score toe aan de score TextField.
persoonlijke functie updateScore (addToScore: int = 0): void score.text = String (int (score.text) + addToScore);
Voegt 1 toe aan de hitscore, dit wordt genoemd wanneer een dartbord wordt vernietigd.
persoonlijke functie updateHits (addToHits: int = 0): void hits.text = String (int (hits.text) + addToHits); TweenNano.from (hits, 0.3, y: -5);
Voegt de totale hit score toe aan de score TextField.
private function addHits (e: MouseEvent): void score.text = String (int (score.text) + int (hits.text)); hits.text = "0";
Initiates van het spel.
Maakt de dartboards, verwijdert het naampaneel van de speler en start de timer.
private function startGame (restarting: Boolean = false): void if (! restarting) removeChild (namePanel); addRandomDartboards (5); timer.addEventListener (TimerEvent.TIMER, removeRemainingListeners); timer.start ();
Verwijdert de dartboards die niet zijn geraakt en voegt nieuwe toe als het niveau niet compleet is.
private function removeRemaining (): void for (var i: int = dartboards.length-1; i> = 0; i--) removeChild (dartboards [i]); dartboards.length = i; if (dartboards.length == 0 && currentDartboards < levelComplete) addRandomDartboards(5); timer.start(); else if (dartboards.length == 0 && currentDartboards >= levelComplete) // Als niveau voltooid levelCompleted ();
Als alle toegestane dartboards in fase zijn weergegeven, wordt deze functie uitgevoerd.
Het berekent de eindscore, verbergt het infopaneel en toont het ScorePanel.
private function levelCompleted (): 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, restart); addChild (scorePanel); setChildIndex (cursor, (numChildren - 1)); TweenNano.to (scorePanel, 0.5, x: stage.stageWidth / 2);
De volgende regels maken de herstart mogelijk. U vindt alles wat in de opmerkingen wordt uitgelegd.
persoonlijke functie opnieuw opstarten (e: MouseEvent): void score.visible = true; // verbergt de score score.text = "0"; // Stelt de score in op 0 playerName.visible = true; // Weergeeft de spelersnaam scorePanel.playAgain.removeEventListener (MouseEvent.MOUSE_UP, restart); // Verwijdert de luisteraar van de knop in het scorerapport TweenNano.to (infoBg, 0.5, x: infoBg.width / 2); // Animeert het infopaneel en het scorepaneel TweenNano.to (scorePanel, 0.5, x: stage.stageWidth + scorePanel.width / 2, onComplete: removeScorePanel); currentDartboards = 0; // Herstelt de huidige dartboards-lijst beginGame (true); // start het spel
Verwijdert het scorepaneel uit het stadium waarin de animatie voltooid is.
private function removeScorePanel (): void removeChild (scorePanel);
We maken in deze tutorial gebruik van de documentklasse, als je niet weet hoe je het moet gebruiken of een beetje in de war bent, lees dan deze QuickTip.
U bent nu klaar om uw spel te testen !, ga naar Flash en druk op Cmd + Return, controleer of alles werkt zoals verwacht en veel plezier heeft!
Het eindresultaat is een kleurrijk en vermakelijk spel, probeer het aan te passen, hoe zit het met een poort naar Android?
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!