Flash is een populair formaat voor browsergebaseerde videogames die te zien zijn op sites zoals Newgrounds en Kongregate. Hoewel het Flash-formaat langzaam minder wordt gebruikt in het licht van de groeiende mobiele apps, worden er nog steeds veel kwaliteitsgames mee gemaakt. Flash maakt gebruik van ActionScript, een gemakkelijk te leren taal die u controle geeft over de objecten op uw scherm. Dit wikiHow-artikel leert je hoe je een basis Flash-game kunt maken.
Stappen
Deel 1 van 3: Het proces starten
Stap 1. Ontwerp je spel
Voordat je begint met coderen, is het handig om een globaal idee te hebben van wat je met je game wilt doen. Flash is het meest geschikt voor eenvoudige games, dus concentreer je op het maken van een game met slechts een paar mechanismen waar de speler zich zorgen over hoeft te maken. Probeer een basisgenre en een aantal mechanica in gedachten te hebben voordat je begint met het maken van prototypes. Raadpleeg deze handleiding voor meer informatie over de planningsfasen van de ontwikkeling van videogames. Veelgebruikte Flash-games zijn onder meer:
- Eindeloze lopers: deze spellen verplaatsen het personage automatisch en de speler is verantwoordelijk voor het springen over obstakels of andere interactie met het spel. De speler heeft meestal maar een of twee opties als het gaat om besturing.
- Brawlers: dit zijn meestal side-scrolling en geven de speler de opdracht om vijanden te verslaan om vooruitgang te boeken. Het personage van de speler heeft vaak verschillende bewegingen die ze kunnen uitvoeren om vijanden te verslaan.
- Puzzels: deze spellen vragen de speler om puzzels op te lossen om elk niveau te verslaan. Deze kunnen variëren van Match-3-stijl, zoals Bejeweled, tot complexere puzzels die typisch zijn voor Adventure-games.
- RPG's: deze games richten zich op karakterontwikkeling en -progressie, en laten de speler door meerdere omgevingen met verschillende soorten vijanden bewegen. De gevechtsmechanica varieert enorm van RPG tot RPG, maar veel zijn turn-based. RPG's kunnen aanzienlijk moeilijker te coderen zijn dan een eenvoudig actiespel.
Stap 2. Ontdek waar Flash in uitblinkt
Flash is het meest geschikt voor 2D-games. Het is mogelijk om 3D-spellen in Flash te maken, maar het is zeer geavanceerd en vereist aanzienlijke kennis van de taal. Bijna elke succesvolle Flash-game is 2D geweest.
Flash-games zijn ook het meest geschikt voor snelle sessies. Dit komt omdat de meeste Flash-gamespelers spelen wanneer ze wat vrije tijd hebben, zoals tijdens pauzes, wat betekent dat gamesessies doorgaans 15 minuten of minder duren
Stap 3. Maak uzelf vertrouwd met de taal ActionScript3 (AS3)
Flash-spellen zijn geprogrammeerd in AS3 en je moet enige basiskennis hebben van hoe het werkt om met succes een spel te kunnen maken. U kunt een eenvoudig spel maken met een rudimentair begrip van het coderen in AS3.
Er zijn verschillende boeken over ActionScript beschikbaar op Amazon en andere winkels, samen met een groot aantal zelfstudies en voorbeelden online
Stap 4. Download Flash Professional
Dit programma kost geld, maar is de beste manier om snel Flash-programma's te maken. Er zijn andere opties beschikbaar, waaronder open-sourceopties, maar deze zijn vaak niet compatibel of doen er langer over om dezelfde taken uit te voeren.
Flash Professional is het enige programma dat je nodig hebt om games te maken
Deel 2 van 3: Een basisspel schrijven
Stap 1. Begrijp de basisbouwstenen van AS3-code
Wanneer je een basisspel maakt, zijn er verschillende codestructuren die je gaat gebruiken. Elke AS3-code bestaat uit drie hoofdonderdelen:
-
Variabelen - Zo worden uw gegevens opgeslagen. Gegevens kunnen getallen, woorden (tekenreeksen), objecten en meer zijn. Variabelen worden gedefinieerd door de code var en moeten één woord zijn.
var playerGezondheid:Getal = 100; // "var" geeft aan dat u een variabele definieert. // "playerHealth" is de naam van de variabele. // "Nummer" is het type gegevens. // "100" is de waarde die aan de variabele is toegewezen. // Alle actionscript-regels eindigen op ";"
-
Event-handlers - Event-handlers zoeken naar specifieke dingen die gebeuren en vertellen de rest van het programma. Dit is essentieel voor spelerinvoer en herhalende code. Event handlers doen typisch een beroep op functies.
addEventListener(MouseEvent. CLICK, swingSword); // "addEventListener()" definieert de gebeurtenishandler. // "MouseEvent" is de invoercategorie waarnaar wordt geluisterd. // ". CLICK" is de specifieke gebeurtenis in de categorie MouseEvent. // "swingSword" is de functie die wordt aangeroepen wanneer de gebeurtenis plaatsvindt.
-
Functie - Secties code die zijn toegewezen aan een trefwoord dat later kan worden opgeroepen. Functies verwerken het grootste deel van de programmering van je game, en complexe games kunnen honderden functies hebben, terwijl eenvoudigere games er misschien maar een paar hebben. Ze kunnen in elke volgorde staan, omdat ze alleen werken als ze worden opgeroepen.
functie swingSword (e:MouseEvent):void; { //Uw code komt hier } // "function" is het sleutelwoord dat aan het begin van elke functie verschijnt. // "swingSword" is de naam van de functie. // "e:MouseEvent" is een toegevoegde parameter die aangeeft dat de functie // wordt aangeroepen vanuit de gebeurtenislistener. // ":void" is de waarde die door de functie wordt geretourneerd. Als er geen waarde // wordt geretourneerd, gebruik dan:void.
Stap 2. Maak een object aan
ActionScript wordt gebruikt om objecten in Flash te beïnvloeden. Om een game te maken, moet je objecten maken waarmee de speler kan communiceren. Afhankelijk van de handleidingen die u aan het lezen bent, kunnen objecten sprites, acteurs of filmclips worden genoemd. Voor dit eenvoudige spel maak je een rechthoek.
- Open Flash Professional als je dat nog niet hebt gedaan. Maak een nieuw ActionScript 3-project.
- Klik op het tekengereedschap Rechthoek in het deelvenster Gereedschappen. Dit paneel kan zich op verschillende locaties bevinden, afhankelijk van de configuratie van Flash Professional. Teken een rechthoek in je Scene-venster.
- Selecteer de rechthoek met het gereedschap Selecteren.
Stap 3. Wijs eigenschappen toe aan het object
Met uw nieuw gemaakte rechthoek geselecteerd, opent u het menu Wijzigen en selecteert u "Converteren naar symbool". U kunt ook op F8 drukken als snelkoppeling. Geef het object in het venster "Converteren naar symbool" een gemakkelijk herkenbare naam, zoals "vijand".
- Zoek het venster Eigenschappen. Boven aan het venster ziet u een leeg tekstveld met het label 'Instance name' wanneer u de muisaanwijzer erop plaatst. Geef het dezelfde naam als toen je het naar een symbool ("vijand") converteerde. Dit creëert een unieke naam waarmee kan worden gecommuniceerd via AS3-code.
- Elke "instantie" is een afzonderlijk object dat door code kan worden beïnvloed. U kunt de reeds gemaakte instantie meerdere keren kopiëren door op het tabblad Bibliotheek te klikken en de instantie naar de scène te slepen. Elke keer dat u er een toevoegt, wordt de naam gewijzigd om aan te geven dat het een afzonderlijk object is ("vijand", "vijand1", "vijand2", enz.).
- Wanneer u naar de objecten in de code verwijst, hoeft u alleen maar de instantienaam te gebruiken, in dit geval "vijand".
Stap 4. Leer hoe u de eigenschappen van een instantie kunt wijzigen
Als je eenmaal een instance hebt gemaakt, kun je de eigenschappen aanpassen via AS3. Hiermee kunt u het object over het scherm verplaatsen, het formaat wijzigen, enzovoort. U kunt eigenschappen aanpassen door de instantie te typen, gevolgd door een punt ".", gevolgd door de eigenschap, gevolgd door de waarde:
- vijand.x = 150; Dit heeft invloed op de positie van het vijandelijke object op de X-as.
- vijand.y = 150; Dit heeft invloed op de positie van het vijandelijke object op de Y-as. De Y-as wordt berekend vanaf de bovenkant van de scène.
- vijand.rotatie = 45; Draait het vijandelijke object 45° met de klok mee.
- vijand.schaalX = 3; Rekt de breedte van het vijandelijke object uit met een factor 3. Een (-) getal zal het object omdraaien.
- vijand.schaalY = 0,5; Knijpt het object tot de helft van zijn hoogte.
Stap 5. Onderzoek de opdracht trace()
Deze opdracht retourneert de huidige waarden voor specifieke objecten en is handig om te bepalen of alles naar behoren werkt. Misschien wilt u het Trace-commando niet in uw uiteindelijke code opnemen, maar het is handig voor het opsporen van fouten.
Stap 6. Bouw een basisspel met de bovenstaande informatie
Nu je een basiskennis hebt van de kernfuncties, kun je een spel maken waarin de vijand van grootte verandert elke keer dat je erop klikt, totdat hij geen gezondheid meer heeft.
var vijandHP:Getal = 100; // stelt de HP (gezondheid) van de vijand aan het begin in op 100. var playerAttack:Number = 10; // stelt de aanvalskracht van de spelers in wanneer ze klikken. vijand.addEventListener(MouseEvent. CLICK, attackEnemy); // Door deze functie rechtstreeks aan het vijandelijke object toe te voegen, // gebeurt de functie alleen wanneer op het object zelf // wordt geklikt, in plaats van ergens op het scherm te klikken. setEnemyLocation(); // Dit roept de volgende functie op om de vijand // op het scherm te plaatsen. Dit gebeurt wanneer het spel begint. functie setEnemyLocation ():void {vijand.x = 200; // verplaatst de vijand naar 200 pixels vanaf de linkerkant van het scherm vijand.y = 150; // verplaatst de vijand 150 pixels naar beneden vanaf de bovenkant van het scherm vijand.rotation = 45; // roteert de vijand 45 graden met de klok mee trace("vijand x-waarde is", vijand.x, "en vijand y-waarde is", vijand.y); // Toont de huidige positie van de vijand voor debuggen } function attackEnemy (e:MouseEvent):void // Dit creëert de aanvalsfunctie voor wanneer op de vijand wordt geklikt { vijandHP = vijandHP - playerAttack; // Trekt de aanvalswaarde af van de HP-waarde, // wat resulteert in de nieuwe HP-waarde. vijand.scaleX = vijand HP/100; // Wijzigt de breedte op basis van de nieuwe HP-waarde. // Het wordt gedeeld door 100 om er een decimaal van te maken. vijand.schaalY = vijand HP/100; // Verandert de hoogte op basis van de nieuwe HP-waarde trace("De vijand heeft", vijand HP, "HP links"); //Voer uit hoeveel HP de vijand nog heeft}
Stap 7. Probeer het uit
Nadat je de code hebt gemaakt, kun je je nieuwe game testen. Klik op het menu Besturing en selecteer Film testen. Je spel begint en je kunt op het vijandelijke object klikken om de grootte te wijzigen. Uw Trace-outputs worden weergegeven in het Output-venster.
Deel 3 van 3: Geavanceerde technieken leren
Stap 1. Leer hoe pakketten werken
ActionScript is gebaseerd op Java en gebruikt een zeer vergelijkbaar pakketsysteem. Met pakketten kunt u variabelen, constanten, functies en andere informatie in afzonderlijke bestanden opslaan en deze bestanden vervolgens in uw programma importeren. Deze zijn vooral handig als je een pakket wilt gebruiken dat iemand anders heeft ontwikkeld, waardoor je spel gemakkelijker te maken is.
Raadpleeg deze handleiding voor meer informatie over hoe pakketten werken in Java
Stap 2. Bouw uw projectmappen op
Als je een game maakt met meerdere afbeeldingen en geluidsfragmenten, moet je een mappenstructuur voor je game maken. Hiermee kunt u gemakkelijk uw verschillende elementen opslaan, evenals verschillende pakketten opslaan waarop u een beroep kunt doen.
- Maak een basismap voor uw project. In de basismap zou je een "img"-map moeten hebben voor al je kunstitems, een "snd"-map voor al je geluidsitems en een "src"-map voor al je spelpakketten en code.
- Maak een map "Game" in de map "src" om uw constanten-bestand op te slaan.
- Deze specifieke structuur is niet nodig, maar is een gemakkelijke manier om uw werk en materialen te organiseren, vooral voor grotere projecten. Voor het eenvoudige spel dat hierboven is uitgelegd, hoeft u geen mappen aan te maken.
Stap 3. Voeg geluid toe aan je spel
Een spel zonder geluid of muziek zal snel saai worden voor de speler. U kunt geluid aan objecten toevoegen aan Flash met behulp van het gereedschap Lagen. Zie deze handleiding voor meer details.
Stap 4. Maak een Constants-bestand
Als je spel veel waarden heeft die tijdens het spel hetzelfde blijven, kun je een constanten-bestand maken om ze allemaal op één plek op te slaan, zodat je ze gemakkelijk kunt aanroepen. Constanten kunnen waarden bevatten zoals zwaartekracht, spelersnelheid en elke andere waarde die u mogelijk herhaaldelijk moet gebruiken.
-
Als u een Constants-bestand maakt, moet het in een map in uw project worden geplaatst en vervolgens als pakket worden geïmporteerd. Laten we bijvoorbeeld zeggen dat u een Constants.as-bestand maakt en dit in uw Game-map plaatst. Om het te importeren, zou u de volgende code gebruiken:
pakket {import Game.*; }
Stap 5. Kijk naar de games van andere mensen
Hoewel veel ontwikkelaars de code voor hun games niet zullen onthullen, zijn er verschillende projecthandleidingen en andere open projecten waarmee je de code kunt zien en kunt zien hoe deze samenwerkt met game-objecten. Dit is een geweldige manier om enkele geavanceerde technieken te leren die je spel kunnen laten opvallen.
