Ontwerp en ontwikkel een fantastische Flash Shooting Gallery Game

In deze Premium-zelfstudie leren we verschillende ActionScript 3-klassen en -vaardigheden combineren om een ​​fantastisch schietgame-spel te maken.


Stap 1: Kort overzicht

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.


Stap 2: Documentinstellingen

Open Flash en maak een 720 pixels breed, 480 pixels lang document. Stel de beeldsnelheid in op 24 fps.



Stap 3: Interface


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.


Stap 4: Sky


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.


Stap 5: Wolken

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.




Stap 6: Bergen

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.



Stap 7: Gras

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.



Stap 8: Grond

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:



Stap 9: Infopaneel

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.


Stap 10: Cursor

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.



Stap 11: Dartboard

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.


Stap 12: Hits

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.


Stap 13: Name Panel


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.


Stap 14: Geluid

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.


Stap 15: Geluid exporteren voor ActionScript

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!


Stap 16: Nieuwe ActionScript-klasse

Maak een nieuwe ActionScript 3.0-klasse (Cmd + N) en sla deze op als Main.as in je klasmap.



Stap 17: Tween Nano


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.


Stap 18: Pakket

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 

Stap 19: Importrichtlijn

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;

Stap 20: Declareren en uitbreiden

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

Stap 21: Variabelen

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

Stap 22: Constructor

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); 

Stap 23: Paneel-handler benoemen

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); 

Stap 24: Stel de naam van de speler in

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); 

Stap 25: voeg aangepaste cursor toe

De volgende functie maakt de aangepaste cursor versleepbaar, het verbergt ook de standaard muisaanwijzer.

 private function startCustomCursor (): void Mouse.hide (); cursor.startDrag (true); 

Stap 26: Dartboards-raster

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);  

Stap 27: Willekeurige dartborden toevoegen

De volgende functie zal de dartboards creëren en toevoegen die zijn vastgesteld door de bedrag parameter.

Het volgt deze logica:

  • Bereken het rooster (het doet dit slechts één keer)
  • Maak een nieuwe Dartboard-instantie en voorkom dat deze wordt afgespeeld
  • Gebruik een willekeurige positie uit de posities-arrays
  • Verwijder de laatste positie die is gebruikt om te voorkomen dat er dartborden op dezelfde plaats worden toegevoegd
  • Voeg de destroy listener toe aan het dartboard
  • Voeg dartboard toe aan het podium en animeer het
  • Voeg dartboard toe aan de array dartboards
  • Verkrijg de volgende hoogste diepte (vaak gevraagd in AS3, let op) voor de aangepaste cursor
  • Voeg er een toe aan de weergegeven lijst met dartboards
 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++;  

Stap 28: Vernietig Dartboard

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]); 

Stap 29: Scoregraphics verwijderen

Verwijdert de Score "+1" filmclip.

 private function removeScoreGFX (target: Sprite): void removeChild (target); 

Stap 30: Dartboard verwijderen

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); 

Stap 31: Update Score

Voegt de aangegeven score toe aan de score TextField.

 persoonlijke functie updateScore (addToScore: int = 0): void score.text = String (int (score.text) + addToScore); 

Stap 32: Update Hits

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); 

Stap 33: Hits toevoegen

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"; 

Stap 34: Begin met het spel

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 (); 

Stap 35: Resterende verwijderen

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 (); 

Stap 36: Niveau voltooid

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); 

Stap 37: start opnieuw op

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

Stap 38: Scorepaneel verwijderen

Verwijdert het scorepaneel uit het stadium waarin de animatie voltooid is.

 private function removeScorePanel (): void removeChild (scorePanel); 

Stap 39: Documentklasse


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.


Stap 40: Film testen


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!


Conclusie

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!