Share
Bekijk deze Premium-zelfstudie om een leuk puzzelspel te maken, geïnspireerd door Frenzic, met behulp van Flash en ActionScript 3.
In de bovenstaande demo vul je de buitenste vakken met gekleurde vierkanten. Je krijgt meer punten voor het vullen van een doos met vierkanten die allemaal dezelfde kleur hebben.
Met behulp van de Flash-tekengereedschappen maken we een goed uitziende grafische interface die wordt aangedreven door verschillende ActionScript 3-klassen.
De speler kan op vier verschillende locaties klikken om de kleurblokken op de vierkanten te sorteren, er worden meer punten verdiend als u een vierkant vult met een enkele blokkleur.
Open Flash en maak een 320 pixels breed, 480 pixels lang document. Stel de beeldsnelheid in op 24 fps.
Er zal een kleurrijk uitziende interface worden getoond, dit gaat over meerdere vormen, knoppen, geluiden en meer.
Ga door naar de volgende stappen voor meer informatie over het maken van deze GUI.
Selecteer het gereedschap Rechthoek (R) om een rechthoek van 320x480px # 0D6191, # 001217 te maken en in het werkgebied te centreren. Gebruik hetzelfde gereedschap om een zwarte lijn van 2x480px in te pakken met 20% alfa, druk op CMD + D om het meerdere keren te dupliceren en spreid de lijnen uit om het effect in bovenstaande afbeelding te krijgen.
Selecteer het tekstgereedschap (T), selecteer een goed uitziend lettertype en schrijf de titel van je spel. Ik heb dit formaat gebruikt: Orbitron Bold, 60pt, # A3FF24. U kunt een eenvoudig gloeifilter toevoegen om het er beter uit te laten zien.
Gebruik dezelfde techniek om twee knoppen te maken, lijn ze uit op het midden en benoem ze startB en creditsB. Alles converteren naar een Filmclip en stel de naam in TitleView; Markeer de Exporteren voor ActionScript vak en verwijder de clip van het werkgebied.
Dit zal het zijn GameView. Voeg de achtergrond toe MC naar het podium en maak er twee Dynamische tekstvelden en plaats ze zoals getoond in de afbeelding. Geef de tekstvelden een naam livesTF en scoreTF.
Gebruik de Rechthoekgereedschap (R) om een vierkant van 70x70px te maken en dit te vullen met het achtergrondverloop, het naar MC te converteren en op CMD + D te drukken om het te dupliceren, zodat je er in totaal vijf hebt. Gebruik het uitlijnpaneel om ze te plaatsen zoals in de afbeelding wordt getoond.
De instantienamen moeten overeenkomen met hun posities - dat wil zeggen: omhoog omlaag links rechts en het centrum zal zijn mainHolder.
Gebruik dezelfde techniek als in de laatste stap om drie blokken van 30x30px te maken, converteer ze naar MC en geef ze een naam op basis van de kleur: OrangeBlock, PurpleBlock en GreenBlock. Vergeet niet om het te markeren Exporteren voor ActionScript doos.
Er wordt een melding weergegeven wanneer u uw hele leven verliest en de uiteindelijke score wordt weergegeven. Gebruik de Rechthoek primitief gereedschap om het te maken en het te vullen met deze lineaire gradiënt: # 000000 tot # 333333. Stel de naam van het exemplaar in op AlertView en markeer de Exporteren voor ActionScript doos.
Dit scherm is eenvoudig te maken omdat we al alle grafische weergaven hebben. Stel de naam van het exemplaar in op CreditsView en markeer de Exporteren voor ActionScript doos.
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 kunt Tween Nano downloaden van de officiële website.
We gebruiken Geluidseffecten om het gevoel van het spel te verbeteren, je kunt de geluiden die in dit voorbeeld worden gebruikt in Soungle.com vinden met de sleutelwoorden klok en gezoem. Voeg ze toe aan uw bibliotheek, met klassennamen van Klok, Bell4, en gezoem, respectievelijk.
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 com.greensock.TweenNano; import com.greensock.easing.Bounce; import flash.utils.Timer; import flash.events.TimerEvent; import flash.net.navigateToURL; import flash.net.URLRequest;
Dit zijn de variabelen die we zullen gebruiken, lees de opmerkingen in de code om meer over hen te weten, sommige van hun namen spreken voor zich, dus er zal daar geen commentaar zijn.
private var titleView: TitleView = new TitleView (); private var credits: CreditsView; private var blockColor: Vector.= nieuwe Vector. (); // Slaat de beschikbare kleuren op die worden gebruikt voor het maken van nieuwe blokinstances private var-blokken: Vector. = nieuwe Vector. (); // Hiermee worden alle blokken in het scherm opgeslagen om ze op elk moment te kunnen gebruiken: persoonlijke var-posities: Vector. = nieuwe Vector. (); // Houdt de mogelijke blokken op posities private var currentXPosition: int; private var currentYPosition: int; private var eventTarget: Object; // Gebruikt om toegang te krijgen tot het evenementdoel van de plaatsfunctie private var timer: Timer = new Timer (3000); // Je hebt 3 seconden om het blok in het midden te plaatsen privé var lives: int = 5; privé var-score: int = 0; private var bell: Bell = new Bell (); private var bell4: Bell4 = nieuwe Bell4 (); private var buzz: Buzz = new Buzz ();
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 instantie van een object maakt of (wanneer in de documentklasse) de eerste is die wordt uitgevoerd wanneer het project wordt geladen.
Het roept de nodige functies op om het spel te starten. Controleer die functies in de volgende stappen.
public final function Main (): void // code?
We beginnen met het toevoegen van de TitleView naar het podium; als we dit niet doen, is het eerste getoonde scherm de GameView.
addChild (titleView);
De blockColor vector wordt gebruikt om een nieuw exemplaar van het geselecteerde blok te maken; de parameters zijn de blokken die we in de vorige stappen hebben gemaakt.
De standen vector slaat het mogelijke op X en Y posities die een blok kan hebben; dit mengen geeft ons de uiteindelijke positie ten opzichte van de mainHolder MC.
Accentsconagua
blockColor.push ('oranje', 'groen', 'paars'); positions.push (5, 35); startButtonListeners (); In deze functie voegen we de muisluisteraars toe aan de knoppen in de titelweergave. Deze brengen ons naar het spelscherm of het creditsscherm.
private final function startButtonListeners (action = 'add'): void if (action == 'add') titleView.creditsB.addEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.startB.addEventListener (MouseEvent.MOUSE_UP, showGameView); else titleView.creditsB.removeEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.startB.removeEventListener (MouseEvent.MOUSE_UP, showGameView);
Het credits scherm wordt getoond wanneer de gebruiker op de credits knop klikt, een muis luisteraar wordt toegevoegd aan de volledige MC om het te verwijderen.
privé finale functie showCredits (e: MouseEvent): void credits = new CreditsView (); addChild (credits); TweenNano.from (credits, 0.3, x: stage.stageWidth, onComplete: function (): void titleView.visible = false; credits.addEventListener (MouseEvent.MOUSE_UP, hideCredits););
Wanneer op het creditsscherm wordt geklikt, wordt het uit het werkgebied getweend en verwijderd.
private finale functie hideCredits (e: MouseEvent): void titleView.visible = true; TweenNano.to (credits, 0.3, x: stage.stageWidth, onComplete: function (): void credits.removeEventListener (MouseEvent.MOUSE_UP, hideCredits); removeChild (credits); credits = null;);
Wanneer de Begin knop is ingedrukt, de titelweergave is getweend en verwijderd waardoor de gameweergave wordt onthuld.
private finale functie showGameView (e: MouseEvent): void TweenNano.to (titleView, 0.3, y: -titleView.height, onComplete: function (): void startButtonListeners ('rmv'); removeChild (titleView); titleView = nul; ); counter.gotoAndStop (1); addListeners (); Laten we hier stoppen om een snelle test uit te voeren en ervoor te zorgen dat onze schermschakelaar code werkt (test eerst Credits, zodat je terug kunt gaan). Stel de documentklasse van uw FLA in Hoofd.
Vergeet niet dat de mijlpalen zijn opgenomen in de bronbestanden, dus als dit om een of andere reden niet in dit bestand voorkomt, kijk dan eens naar de bron om te zien wat dat kan veroorzaken.
Ga terug naar de code en voeg de volgende functie toe. Er wordt een muisluisteraar aan de vierkanten toegevoegd, zodat u erop kunt klikken om het huidige blok te plaatsen.
private finale functie addListeners (): void up.addEventListener (MouseEvent.MOUSE_UP, placeBlock); right.addEventListener (MouseEvent.MOUSE_UP, placeBlock); down.addEventListener (MouseEvent.MOUSE_UP, placeBlock); left.addEventListener (MouseEvent.MOUSE_UP, placeBlock);
Deze arrays worden gemaakt binnen de vierkante MovieClips, ze worden gebruikt om de blokken, kleuren en posities binnen elk vierkant te registreren.
De letters vertegenwoordigen de volgende posities:
Ga verder met de addListeners () functie:
/ * Maak een array voor elke container om te bepalen wanneer deze vol is en de blokken kleuren * / up.blocks = []; right.blocks = []; down.blocks = []; left.blocks = []; / * Maak een Boolean voor elke container om te voorkomen dat blokken in dezelfde positie worden geplaatst * / up.a = false; right.a = false; down.a = false; left.a = false; up.b = false; right.b = false; down.b = false; left.b = false; up.cc = false; right.c = false; down.c = false; left.c = false; up.d = false; right.d = false; down.d = false; left.d = false; newBlock (true);
Deze code kiest een willekeurige blokkleur uit de Vector, deze wordt gebruikt om het eigenlijke blok te tonen. Een parameter wordt gebruikt om te bepalen of de timer die begint met tellen zal worden geactiveerd.
private final function newBlock (firstTime: Boolean = false): void / * New Block * / var randomBlock: int = Math.floor (Math.random () * 3); var block: Sprite; switch (blockColor [randomBlock]) case 'orange': block = new OrangeBlock (); breken; case 'green': block = new GreenBlock (); breken; case 'purple': block = new PurpleBlock (); breken; standaard: trace ('BlockColor Error'); breken; Na het selecteren van de blokkleur, wordt de positie berekend waar deze wordt geplaatst met behulp van de standen Vector en vervolgens toegevoegd aan de blokkenvector en de fase. Ga verder met de newBlock () functie:
currentXPosition = posities [Math.floor (Math.random () * 2)]; currentYPosition = posities [Math.floor (Math.random () * 2)]; block.x = mainHolder.x + currentXPosition; block.y = mainHolder.y + currentYPosition; blocks.push (blok); addChild (blok);
Voordat we verder gaan met het spel, moeten we controleren of het nieuw gemaakte blok daadwerkelijk in een vierkante container kan worden geplaatst. De volgende code controleert elke containergroep om te zorgen dat er een lege positie beschikbaar is in een van de vakken waar het blok kan worden geplaatst; als dat niet het geval is, wordt het blok vernietigd en wordt de functie opnieuw opgeroepen om een ander te genereren.
/ * Controleer of er een beschikbare ruimte is om het blok * / var positie te verplaatsen: Array = [currentXPosition, currentYPosition]; if (String (positie) == '5,5' && up.a && right.a && down.a && left.a) removeChild (block); blok = null; newBlock (); else if (String (positie) == '35, 5 '&& up.b && right.b && down.b && left.b) removeChild (block); blok = null; newBlock (); else if (String (position) == '5,35' && up.c && right.c && down.c && left.c) removeChild (block); blok = null; newBlock (); else if (String (positie) == '35, 35 '&& up.d && right.d && down.d && left.d) removeChild (block); blok = null; newBlock ();
Als je een andere lay-out voor je spel hebt gebruikt, zorg er dan voor dat je de waarde die je aan het controleren bent verandert (dus niet '35, 35', omdat de blokken van je spel niet noodzakelijk op dat moment verschijnen).
De timer begint te tellen wanneer de functie voor de eerste keer wordt aangeroepen.
if (firstTime) / * Start Timer * / timer.addEventListener (TimerEvent.TIMER, timesUp); timer.start (); counter.play (); // beëindig de functie newBlock ()
Drie seconden worden gegeven om een blok in een vierkante container te plaatsen, als die tijd verstrijkt en het blok zich nog steeds in het middenvierkant bevindt, wordt een leven verwijderd.
privé definitieve functie timesUp (e: TimerEvent): void / * Live * / lives verwijderen--; livesTF.text = String (levens); buzz.play ();
Na het verwijderen van de levensduur wordt het blok in het middenvak vernietigd en wordt een nieuw blok gegenereerd. Deze code controleert ook of de speler geen levens heeft en roept een functie op die we later zullen schrijven.
/ * Ongebruikt blok verwijderen * / var i: int = blocks.length - 1; removeChild (blokken [i]); blokken [i] = null; blocks.splice (i, 1); / * Controleer of uit levens * / if (levens < 1) alert(); else /* Next Block */ newBlock();
Laten we nog een pauze nemen om te zien hoe onze code werkt:
Deze functie wordt uitgevoerd wanneer de speler op een van de containervierkanten klikt. Het controleert in feite of de juiste positie beschikbaar is om het vierkant te plaatsen en plaatst het als het waar is. De functie in de volgende stap wordt aangeroepen wanneer het blok wordt geplaatst.
private laatste functie placeBlock (e: MouseEvent): void var i: int = blocks.length - 1; eventTarget = e.target; / * Controleer of positie beschikbaar is * / var positie: Array = [currentXPosition, currentYPosition]; if (String (position) == '5,5' &&! e.target.a) blokkeert [i] .x = e.target.x + positie [0]; blokkeert [i] .y = e.target.y + positie [1]; e.target.a = true; blockPlaced (); else if (String (position) == '35, 5 '&&! e.target.b) blokkeert [i] .x = e.target.x + positie [0]; blokkeert [i] .y = e.target.y + positie [1]; e.target.b = true; blockPlaced (); else if (String (position) == '5,35' &&! e.target.c) blokkeert [i] .x = e.target.x + positie [0]; blokkeert [i] .y = e.target.y + positie [1]; e.target.c = true; blockPlaced (); else if (String (position) == '35, 35 '&&! e.target.d) blokkeert [i] .x = e.target.x + positie [0]; blokkeert [i] .y = e.target.y + positie [1]; e.target.d = true; blockPlaced ();
Nogmaals, u moet mogelijk de waarden die hier worden gecontroleerd, wijzigen om de positie van uw blokken aan te passen.
Wanneer het blok in de container wordt geplaatst, voegen we het blok toe aan de array die de opgeslagen blokken in die container bijhoudt. Dit helpt ons te bepalen wanneer de container vol is.
private laatste functie blockPlaced (): void var i: int = blocks.length - 1; / * Blokkeer blok naar container blokken array * / eventTarget.blocks.push (blokken [i]);
Elk geplaatst blok verhoogt de score met één. Als de doos vol is, wordt de score met 50 verhoogd en als de doos volledig door een enkele kleur wordt gevuld, wordt de totale score met 200 verhoogd.
scoren ++;
Een kort geluidssignaal geeft aan dat het blok is geplaatst.
bell.play ();
De volgende code controleert of de container is gevuld door een enkel kleurenblok met behulp van de containergroep. Het verhoogt de score met 200, speelt het overeenkomstige geluid af en stuitert de container als een visueel teken. Het wist ook de variabelen in de container.
/ * Als de container vol is en elk blok dezelfde kleur heeft * / if (eventTarget.blocks.length == 4 && String (eventTarget.blocks [0]) == String (eventTarget.blocks [1]) && String (eventTarget. blocks [1]) == String (eventTarget.blocks [2]) && String (eventTarget.blocks [2]) == String (eventTarget.blocks [3])) score + = 200; bell4.play (); TweenNano.from (eventTarget, 0.4, x: eventTarget.x - 5, ease: Bounce.easeOut, onComplete: function (): void for (var j: int = 0; j < 4; j++) removeChild(eventTarget.blocks[j]); eventTarget.blocks = []; ); eventTarget.a = false; eventTarget.b = false; eventTarget.c = false; eventTarget.d = false;
Deze code wordt uitgevoerd als de container vol is, maar de blokken binnenin niet dezelfde kleur hebben.
/ * Als de container vol is, maar blokken zijn verschillende kleuren * / else if (eventTarget.blocks.length == 4) bell4.play (500, 2); score + = 50; TweenNano.from (eventTarget, 0.4, x: eventTarget.x - 5, ease: Bounce.easeOut, onComplete: function (): void for (var j: int = 0; j < 4; j++) removeChild(eventTarget.blocks[j]); eventTarget.blocks = []; ); eventTarget.a = false; eventTarget.b = false; eventTarget.c = false; eventTarget.d = false;
Nadat de volledige containers zijn gewist, wordt de score ingesteld op het tekstveld op het werkgebied, wordt de timer gereset en wordt een ander blok opgeroepen.
scoreTF.text = String (score); timer.stop (); timer.start (); counter.gotoAndPlay (1); newBlock ();
De waarschuwingsfunctie wordt uitgevoerd als de speler geen levens meer heeft; het toont de bereikte eindscore en voegt een luisteraar toe om terug te keren naar het titelscherm.
privé laatste functie alert (): void timer.stop (); counter.gotoAndStop (1); var alert: AlertView = nieuwe AlertView (); alert.messageBox.msgTF.text = 'Score:' + String (score); alert.addEventListener (MouseEvent.MOUSE_UP, restart); addChild (alert); TweenNano.from (alert.messageBox, 0.7, y: -alert.messageBox.height, ease: Bounce.easeOut);
De volgende functie laadt de swf opnieuw, herstart een variabele, methode en keer terug naar de Titelscherm.
privé laatste functie opnieuw opstarten (e: MouseEvent): void navigateToURL (nieuwe URLRequest (stage.loaderInfo.url), '_level0');
Je hebt een erg vermakelijk spel ingepakt, probeer je eigen functies en afbeeldingen toe te voegen.
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
