Pdf downloaden Pdf downloaden

Flash is een populair format voor browsergames zoals je die aantreft op sites van bijvoorbeeld Newgrounds en Kongregate. Terwijl het Flash-formaat langzamerhand minder wordt gebruikt door het groeiend aantal mobiele apps, worden veel kwaliteitsgames er nog steeds mee gemaakt. Flash gebruikt ActionScript, een gemakkelijk te leren taal waarmee je objecten op je scherm kunt manipuleren. Dit wikiHow-artikel zal je leren hoe je een eenvoudige Flash-game kunt maken.

Deel 1
Deel 1 van 3:

Beginnen met het proces

Pdf downloaden
  1. Voordat je gaat coderen, is het verstandig om ongeveer een ruw idee te hebben van wat de bedoeling is van je spel. Flash is het meest geschikt voor eenvoudige games, dus focus je op het creëren van een spel met slechts een paar bewegingen die de speler kan maken. Probeer een idee te hebben van het genre en animaties voordat je een prototype gaat maken. Zie deze gids voor meer informatie over de planningsfasen van gameontwikkeling. Flashgames zijn vaak als volgt opgebouwd:
    • Endless runners : Bij deze games wordt een karakter automatisch verplaatst en is het aan de speler om over obstakels te springen of andere interactie met het spel aan te gaan. De speler heeft vaak slechts één of twee opties wat betreft besturing.
    • Beat 'em up of Brawlers: Dit zijn meestal side-scrollers waarbij de speler vijanden dient te verslaan om verder te komen. Het karakter van de speler heeft vaak meerdere bewegingsmogelijkheden die uitgevoerd kunnen worden om vijanden te verslaan.
    • Puzzels: Deze spellen vragen de speler puzzels op te lossen om een niveau verder te komen. Ze kunnen variëren van Match-3 stijl. zoals Bejeweled, tot meer complexe puzzels zoals vaak aangetroffen wordt in adventure-games.
    • RPG's: Deze games focussen zich op karakterontwikkeling en progressie, waarbij de speler meerdere omgevingen moet doorlopen met een verscheidenheid aan vijanden. Mogelijke spelmechanica varieert enorm van RPG tot RPG, maar veel ervan zijn 'turn-based'. RPG's kunnen aanzienlijk moeilijker zijn om te coderen dan een eenvoudig actiespel.
  2. Flash is best geschikt voor 2D-spellen. Het is mogelijk 3D-games te maken in Flash, maar dat is zeer geavanceerd en vereist aanzienlijke kennis van de programmeertaal. Bijna elke succesvol spel in Flash is 2D.
    • Flash-games zijn ook het meest geschikt voor korte sessies. Dit is omdat de meeste mensen die Flash-games spelen dit doen als ze een beetje vrije tijd over hebben, zoals tijdens pauzes, wat inhoudt dat sessies over het algemeen niet langer duren dan 15 minuten.
  3. Flash-spellen zijn geprogrammeerd in AS3, en je hebt enige basiskennis nodig van hoe het werkt om een spel met succes te maken. Je kunt een eenvoudig spel maken met een rudimentair begrip van coderen in AS3.
    • Er zijn verschillende boeken over ActionScript beschikbaar op Bol.com en andere online boekenwinkels, naast een groot aantal tutorials en voorbeelden.
  4. Dit programma kost geld, maar het is de beste manier snel Flash-programma's te maken. Er zijn andere opties beschikbaar, waaronder open-sourcesoftware, maar die zijn vaak niet compatible genoeg of vragen meer tijd om dezelfde taken uit te voeren.
    • Flash Professional is het enige programma dat je nodig zult hebben om Flash-games te kunnen maken.
    Advertentie
Deel 2
Deel 2 van 3:

Een eenvoudig spel schrijven

Pdf downloaden
  1. Wanneer je een basisspel maakt zijn er verscheidene codestructuren die je gaat gebruiken. Alle AS3-code bestaat uit drie hoofdonderdelen:
    • Variabelen – hiermee sla je gegevens op. Gegevens kunnen bestaan uit getallen, woorden (strings), objecten en meer. Variabelen worden gedefinieerd door de code var en dienen uit één woord te bestaan.
       var 
       playerHealth 
       : 
       Number 
       = 
       100 
       ; 
       // 'var' betekent dat je een variabele definieert. 
       // 'playerHealth' is de  naam van de variabele. 
       // 'Number' is het type gegeven. 
       // '100' is de waarde van de variabele. 
       // Alle regels actionscript eindigen met een puntkomma (;) 
      
    • Event Handlers – Event handlers zoeken naar specifieke dingen die gebeuren, en vertellen dit vervolgens aan de rest van het programma. Dit is essentieel voor de spelersinvoer en herhalende code. Event handlers roepen meestal functies aan.
       addEventListener 
       ( 
       MouseEvent 
       . 
       CLICK 
       , 
       swingSword 
       ); 
       // 'addEventListener()' definieert de event handler. 
       // 'MouseEvent' is de category invoer waarop wordt gewacht. 
       // '.CLICK' is het specifieke 'event' in de categorie MouseEvent. 
       // 'swingSword' is de functie die wordt aangeroepen wanneer het event zich voordoet. 
      
    • Function – Delen van de code toegewezen aan een sleutelwoord welke aangeroepen kan worden. Functies handelen het grootste deel van de programmering van je spel af, en complexe spellen kunnen honderden functies hebben, terwijl simpeler spellen voldoende hebben aan een paar functies. Ze kunnen in elke volgorde staan, omdat ze alleen werken wanneer ze worden aangeroepen.
       function 
       swingSword 
       ( 
       e 
       : 
       MouseEvent 
       ) 
       : 
       void 
       ; 
       { 
       //Je code komt hier 
       } 
       // 'function' is het sleutelwoord dat wordt weergegeven aan het begin van elke functie. 
       // 'swingSword' is de naam van de functie. 
       // 'e:MouseEvent' is een toegevoegde parameter, waarmee je aangeeft dat de functie 
       // wordt aangeroepen door de 'event listener'. 
       // ':void' is de waarde zoals geretourneerd door de functie. Wordt er geen 
       // waarde teruggegeven, gebruik dan ':void'. 
      
  2. Om objecten te maken in Flash gebruik je ActionScript. Om een spel te maken moet je objecten creëren waar de speler een interactie mee aan kan gaan. Afhankelijk van handleidingen die je leest, kunnen objecten worden aangeduid als sprites, actors of movieclips. Voor dit eenvoudig spel maak je een rechthoek.
    • Open Flash Professional als je dit nog niet hebt gedaan. Maak een nieuw ActionScript 3-project.
    • [1]
    • Klik op het gereedschap voor het tekenen van een rechthoek in het gereedschappenvenster. Dit venster 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 Selectie-gereedschap.
  3. Met je gemaakte rechthoek geselecteerd, open je het Wijzigen-menu en selecteer je 'Omzetten naar symbool'. Je kunt ook drukken op de sneltoets F8 . In het venster 'Omzetten naar symbool' geef je het object een makkelijk herkenbare naam, zoals 'vijand'.
    • Zoek het venster Eigenschappen. Aan de bovenkant van het venster zie je een leeg tekstveld met het label 'Instantienaam' wanneer je er met de muisaanwijzer boven blijft zweven. Geef dit dezelfde naam als het symbool ('vijand'). Hiermee maak je een unieke naam waarmee via AS3 code gewerkt kan worden.
    • Elke 'instance' is een apart object dat kan worden beïnvloed door code. Je kunt de reeds gemaakte instanties meerdere keren kopiëren door te klikken op de tab Bibliotheek en de instantie naar de scène te slepen. Telkens wanneer je een instantie toevoegt, zal de naam worden veranderd om aan te geven dat het een afzonderlijk object is ('vijand', 'vijand1', 'vijand2', enz.).
    • Wanneer je verwijst naar objecten in de code, hoef je enkel de instantienaam te gebruiken (in dit geval 'vijand').
  4. Als je eenmaal een instantie hebt gemaakt, kun je de eigenschappen ervan met AS3 aanpassen. Hiermee kun je bijvoorbeeld het object over het scherm bewegen, de grootte ervan wijzigen, etc. Je kunt eigenschappen aanpassen door de instantienaam te typen, gevolgd door een punt, gevolgd door de eigenschap, gevolgd door de waarde:
    • enemy.x = 150; Dit heeft effect op de positie van het vijand-object op de X-as.
    • enemy.y = 150; Dit heeft effect op de positie van het vijand-object op de y-as. De y-as wordt berekend vanaf de bovenkant van de scene.
    • enemy.rotation = 45; Roteert het vijand-object 45° mt de klok mee.
    • enemy.scaleX = 3; Rekt het vijand-object in de breedte op met een factor 3. Een negatieve waarde zal het object omkeren.
    • enemy.scaleY = 0.5; Plat het object tot de helft van de hoogte af.
  5. Deze opdracht retourneert de huidige waarden van specifieke objecten, en is nuttig voor het vaststellen of alles gaat zoals het hoort. De trace-opdracht neem je waarschijnlijk niet op in je uiteindelijke code, maar is nuttig voor debuggen.
  6. Nu je enig begrip hebt van de kernfuncties, kun je een game maken waarin de vijand van grootte verandert, elke keer als je erop klikt, tot de gezondheid van de vijand opraakt. [2]
     var 
     enemyHP 
     : 
     Number 
     = 
     100 
     ; 
     // stel de HP (gezondheid) van de vijand aan het begin in op 100. 
     var 
     playerAttack 
     : 
     Number 
     = 
     10 
     ; 
     // stel de aanvalskracht in van de spelers bij elke klik. 
     enemy 
     . 
     addEventListener 
     ( 
     MouseEvent 
     . 
     CLICK 
     , 
     attackEnemy 
     ); 
     // Door deze functie direct te koppelen aan het vijand-object, 
     // zal de functie alleen worden uitgevoerd wanneer op het object zelf 
     // wordt geklikt, in tegenstelling tot ergens op het scherm klikken. 
     setEnemyLocation 
     (); 
     // Deze roept de volgende functie aan om de vijand 
     // op het scherm te plaatsen. Dit gebeurt wanneer het spel start. 
     function 
     setEnemyLocation 
     () 
     : 
     void 
     { 
     enemy 
     . 
     x 
     = 
     200 
     ; 
     // verplaatst de vijand 200 pixels vanaf links op het scherm 
     enemy 
     . 
     y 
     = 
     150 
     ; 
     // verplaatst de vijand 150 pixels naar beneden vanaf de bovenkant van het scherm 
     enemy 
     . 
     rotation 
     = 
     45 
     ; 
     // roteert de vijand 45 graden met de klok mee 
     trace 
     ( 
     'enemy' 
     s 
     x 
     - 
     value 
     is 
     ', enemy.x, ' 
     and 
     enemy 
     's y-value is' 
     , 
     enemy 
     . 
     y 
     ); 
     // toont de huidige positie van de vijand voor debuggen 
     } 
     function 
     attackEnemy 
     ( 
     e 
     : 
     MouseEvent 
     ) 
     : 
     void 
     // Dit creëert de aanvalsfunctie wanneer er op de vijand wordt geklikt 
     { 
     enemyHP 
     = 
     enemyHP 
     - 
     playerAttack 
     ; 
     // Trekt de aanvalswaarde af van de HP-waarde, 
     // wat resulteert in de nieuwe HP-waarde. 
     enemy 
     . 
     scaleX 
     = 
     enemyHP 
     / 
     100 
     ; 
     // Wijzigt de breedte op basis van de nieuwe HP-waarde. 
     // Het wordt gedeeld door 100 om er een kommagetal van te maken. 
     enemy 
     . 
     scaleY 
     = 
     enemyHP 
     / 
     100 
     ; 
     // Wijzigt de hoogte op basis van de nieuwe HP-waarde 
     trace 
     ( 
     'The enemy has' 
     , 
     enemyHP 
     , 
     'HP left' 
     ); 
     //Geef aan hoeveel HP de vijand nog over heeft 
     } 
    
  7. Zodra je de code hebt gemaakt, kun je je nieuw spel testen. Klik op het menu Besturing en kies Film testen. Je spel zal beginnen, en je kunt klikken op het vijandelijke-object om de grootte ervan te wijzigen. Je trace-uitvoer zal worden weergegeven in het venster Uitvoer.
    Advertentie
Deel 3
Deel 3 van 3:

Geavanceerde technieken leren

Pdf downloaden
  1. ActionScript is gebaseerd op Java, en gebruikt een vergelijkbaar pakketsysteem. Met pakketten kunnen je variabelen, constanten, functies en andere informatie opslaan in afzonderlijke bestanden, en deze bestanden vervolgens importeren in je programma. Dit is met name handig als je een pakket wilt gebruiken dat iemand anders heeft ontwikkeld, waardoor je spel gemakkelijker is om te ontwikkelen.
    • Zie dit artikel voor meer info over hoe pakketten werken in Java.
  2. Als je een spel maakt met meerdere afbeeldingen en geluidsfragmenten, dan heb je een mappenstructuur nodig voor je spel. Hierdoor wordt het gemakkelijk om de verschillende game-elementen op te slaan, evenals de verschillende pakketten die je wilt aanroepen.
    • Maak een basismap voor je project. In de basismap staat een 'img'-map voor al het beeldmateriaal dat je gebruikt, een 'snd' map voor al het geluidsmateriaal, en een 'src' voor al je pakketten en code.
    • Maak een 'Game'-map in de 'src'-map, voor het opslaan van je bestand met constanten.
    • Deze specifieke structuur is niet noodzakelijk, maar is een gemakkelijke manier om je werk en materialen te organiseren, vooral voor grotere projecten. Voor het eenvoudige spel zoals hierboven is uiteengezet, heb je geen mappen nodig.
  3. Een spel zonder geluid of muziek wordt snel saai voor de speler. Je kunt geluid toevoegen aan Flash-objecten met behulp van het hulpprogramma Lagen. Kijk op wikiHow voor meer informatie.
  4. Als je spel een heleboel waarden heeft die hetzelfde blijven tijdens het spel, kun je een bestand maken om deze constanten in op te slaan op één plaats, zodat je ze gemakkelijk kunt aanroepen. Constanten kunnen waarden zijn zoals de zwaartekracht, de snelheid van de speler en elke andere waarde die je mogelijk herhaaldelijk moet aanroepen. [3]
    • Als je een Constants-bestand maakt, moet het in een map in je project worden geplaatst en vervolgens geïmporteerd als pakket. Bijvoorbeeld, laten we zeggen dat je een Constants.as-bestand hebt gemaakt en in je spel-directory plaatst. Om dit te importeren, gebruik je de volgende code:
       package 
       { 
       import 
       Game 
       . 
       *; 
       } 
      
  5. Hoewel veel ontwikkelaars de code voor hun games niet zullen onthullen, zijn er diverse tutorials voor projecten en andere open projecten waarmee je de code kunt bekijken en kunt nagaan hoe die samenwerkt met spelobjecten. Dit is een geweldige manier om sommige van de meer geavanceerde technieken te leren die kunnen helpen om je spel zich van andere te laten onderscheiden.
    Advertentie

Over dit artikel

Deze pagina is 2.275 keer bekeken.

Was dit artikel nuttig?

Advertentie