Hoe maak je een Flash-spel: 4 stappen (met afbeeldingen)

Inhoudsopgave:

Hoe maak je een Flash-spel: 4 stappen (met afbeeldingen)
Hoe maak je een Flash-spel: 4 stappen (met afbeeldingen)

Video: Hoe maak je een Flash-spel: 4 stappen (met afbeeldingen)

Video: Hoe maak je een Flash-spel: 4 stappen (met afbeeldingen)
Video: How to Redeem STEAM Wallet Gift Card Code / Steam Instant Digital Code? 2024, Mei
Anonim

Flash is een populair formaat voor browservideogames, zoals sites als Newgrounds en Kongregate. Hoewel het Flash-formaat vaak onderbenut wordt in mobiele toepassingen, zijn er nog steeds veel kwaliteitsgames die met Flash worden gemaakt. Flash gebruikt ActionScript, een taal die gemakkelijk te leren is en controle geeft over objecten op het scherm. Zie stap 1 hieronder om te leren hoe u een basis Flash-spel maakt.

Stap

Deel 1 van 3: Aan de slag

381698 1
381698 1

Stap 1. Ontwerp het spel

Maak voordat je begint met coderen een globaal idee van je game. Flash is het meest geschikt voor eenvoudige games, dus concentreer je op het maken van games met heel weinig gameplay-mechanica. Definieer het genre en de spelmechanica voordat u met het prototype begint. Veelvoorkomende flashgames zijn:

  • Eindeloze loper: het spel beweegt automatisch personages. Spelers moeten over obstakels springen of interactie hebben met het spel. Spelers hebben meestal maar één of twee besturingsopties.
  • Fighters: Het spel is meestal side-scrolling. Spelers moeten de vijand verslaan om verder te kunnen. Het personage van de speler heeft verschillende bewegingen om de vijand te verslaan.
  • Puzzels: Spelers moeten puzzels oplossen om elk niveau te verslaan. Beginnend met de stijl van het samenbrengen van drie-of-a-kind-objecten zoals Bejeweled, tot complexe puzzels zoals avonturenspellen.
  • RPG: De game richt zich op karakterontwikkeling en voortgang. Spelers bewegen zich door veel verschillende situaties en verschillende soorten vijanden. De gevechtsmechanismen lopen sterk uiteen, maar veel van deze typen zijn turn-based. RPG's zijn aanzienlijk moeilijker te coderen dan eenvoudige actiegames.
381698 2
381698 2

Stap 2. Begrijp wat de voordelen van flits zijn

Flash is het meest geschikt voor 2D-games. Flash kan worden gemaakt om 3D-spellen te maken, maar het is erg ingewikkeld en vereist meer kennis. Bijna elk succesvol Flash-spel heeft een 2D-formaat.

Flash-games zijn ook het meest geschikt voor snelle sessies. Dit komt omdat de meeste spelers spelen wanneer ze weinig vrije tijd hebben, zoals pauzes, wat betekent dat gamesessies meestal maximaal 15 minuten duren

381698 3
381698 3

Stap 3. Maak uzelf vertrouwd met de taal ActionScript3 (AS3)

Flash-games zijn geprogrammeerd in AS3 en je moet enige basiskennis hebben van hoe ze werken om succesvol te zijn in het maken van games. U kunt eenvoudige spellen maken met een basiskennis van code in AS3.

Er zijn veel ActionScript-boeken beschikbaar op Amazon en andere winkels, samen met een verscheidenheid aan tutorials en happenings op internet

381698 4
381698 4

Stap 4. Download Flash Professional

Dit programma is een beetje prijzig, maar het is erg goed om snel flash-programma's te maken. Er zijn verschillende andere programma-opties, waaronder open source-opties, maar deze zijn over het algemeen minder compatibel of doen er langer over om dezelfde taak uit te voeren.

Flash Professional is het enige programma dat je nodig hebt om games te maken

Deel 2 van 3: Basisspellen schrijven

381698 5
381698 5

Stap 1. Begrijp de basisbouwstenen van AS3-code

Het basisspel heeft verschillende codestructuren. AS3-code bestaat uit drie hoofdonderdelen:

  • Variabelen - Dit gaat over hoe gegevens worden opgeslagen. Gegevens kunnen getallen, woorden (tekenreeksen), objecten en meer zijn. Variabelen worden gedefinieerd door de var-code en moeten uit één woord bestaan.

    var playerGezondheid:Getal = 100; // "var" geeft aan dat u een variabele definieert. // "playerHealth" is de naam van de variabele. // "Nummer" is het gegevenstype. // "100" is de waarde die aan de variabele is toegewezen. // Alle actionscript-regels eindigen op ";"

  • Event-handler - event-handler zoekt naar bepaalde dingen die zijn gebeurd en stelt vervolgens de rest van het programma op de hoogte. Dit is belangrijk voor spelerinvoer en herhaalde code. Event-handlers roepen meestal functies aan.

    addEventListener(MouseEvent. CLICK, swingSword); // "addEventListener()" definieert een gebeurtenishandler. // "MouseEvent" is de invoercategorie waarnaar wordt geluisterd. // ". CLICK" Is een opgegeven gebeurtenis in de categorie MouseEvent. // "swingSword" is de functie die wordt aangeroepen wanneer de gebeurtenis plaatsvindt.

  • Functie - Een stukje code dat is toegewezen aan een trefwoord en later kan worden opgeroepen. Functies verwerken de meeste spelprogrammering en een complex spel kan honderden functies hebben. Functies kunnen in willekeurige volgorde staan, omdat ze alleen werken als ze worden aangeroepen.

    functie swingSword(e:MouseEvent):void; { //Uw code 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 is aangeroepen vanuit de gebeurtenislistener. // ":void" is de waarde die door de functie wordt geretourneerd. // Als er geen waarde wordt geretourneerd, gebruik dan:void.

381698 6
381698 6

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 spelers kunnen communiceren. Afhankelijk van de gids die u leest, kunnen objecten sprites, acteurs of films worden genoemd. Voor dit eenvoudige spel maak je een rechthoek.

  • Open Flash Professional. Maak een nieuw ActionScript 3-project.
  • Klik op het tekengereedschap Rechthoek in het deelvenster Gereedschappen. Dit paneel bevindt zich mogelijk op een andere locatie, afhankelijk van de Flash Professional-configuratie. Teken een rechthoek in het scènevenster.
  • Selecteer de rechthoek met het gereedschap Selecteren.
381698 7
381698 7

Stap 3. Stel de eigenschappen van het object in

Selecteer de nieuw geselecteerde rechthoek, ga naar het menu Wijzigen en selecteer "Converteren naar symbool". U kunt ook op F8 drukken als snelkoppeling. Geef het object in het venster "Converteren naar symbool" een gemakkelijk herkenbare naam, bijvoorbeeld "vijand".

  • Zoek het venster Eigenschappen. Boven aan het venster ziet u een leeg tekstveld met het label "Instance name" wanneer u de muis erover beweegt. Geef het dezelfde naam als toen je er een symbool van maakte ("vijand"). Hierdoor ontstaat een unieke naam voor interactie via de AS3-code.
  • Elke "gebeurtenis" is een afzonderlijk object dat door de code kan worden beïnvloed. U kunt gebeurtenissen kopiëren die meerdere keren zijn gemaakt door op het tabblad Bibliotheek te klikken en ze naar de scène te slepen. Elke keer dat een gebeurtenis wordt toegevoegd, verandert de naam ervan om aan te geven dat het object afzonderlijk is ("vijand", "vijand1", "vijand2", enz.).
  • Als je in code naar een object verwijst, gebruik dan gewoon de naam van de gebeurtenis, in dit geval "vijand".
381698 8
381698 8

Stap 4. Leer hoe u de eigenschappen van een gebeurtenis kunt wijzigen

Nadat het evenement is gemaakt, kunt u de eigenschappen ervan instellen via AS3. Hiermee kunt u objecten verplaatsen, het formaat ervan wijzigen, enzovoort. U kunt een eigenschap 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 vijandelijke objecten op de X-as.
  • vijand.y = 150; Dit heeft invloed op de positie van vijandelijke objecten op de Y-as. De Y-as wordt berekend vanaf de bovenkant van de scène.
  • vijand.rotatie = 45; Draait vijandelijke objecten 45° met de klok mee.
  • vijand.schaalX = 3; Rekt de breedte van het vijandelijke object uit met een veelvoud van 3. Het (-) teken zal het object omdraaien.
  • vijand.schaalY = 0,5; Wijzigt de hoogte van het object in de helft van de huidige hoogte.
381698 9
381698 9

Stap 5. Neem de opdracht trace() in acht

Deze opdracht retourneert de huidige waarde van het opgegeven object en is handig om te bepalen of alles naar behoren werkt. U zult het Trace-commando waarschijnlijk niet in uw uiteindelijke code opnemen, maar het kan handig zijn om de bron van de mislukte code te lokaliseren.

381698 10
381698 10

Stap 6. Bouw het basisspel met behulp van de bovenstaande informatie

U heeft nu een basiskennis van de kernfuncties. Je kunt een spel maken waarbij elke keer dat er op een vijand wordt geklikt, de grootte zal afnemen, totdat de vijand is vernietigd

var vijandHP:Getal = 100; // Stelt de HP (gezondheid) van de vijand in op 100 aan het begin van het spel. var playerAttack:Number=10; // Stelt de hoeveelheid aanvalskracht van de speler in bij het klikken. vijand.addEventListener(MouseEvent. CLICK, attackEnemy); // Door deze functie rechtstreeks aan het vijandelijke object toe te voegen, // deze functie treedt alleen op wanneer op het object zelf wordt geklikt // en niet wanneer er ergens op het scherm wordt geklikt. setEnemyLocation(); // Roept de volgende functie op om de vijand // op het scherm te plaatsen. Dit gebeurt wanneer het spel start. functie setEnemyLocation():void {vijand.x = 200; // Verplaats de vijand 200 pixels vanaf de linkerkant van het scherm vijand.y = 150; // Verplaats de vijand 150 pixels naar beneden vanaf de bovenkant van het scherm vijand.rotation = 45; // Draai 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 om de bron van de fout te vinden } function attackEnemy (e:MouseEvent):void // Creëert een aanvalsfunctie wanneer op de vijand wordt geklikt { vijandHP = vijandHP - playerAttack; // Trekt aanvalswaarde af van HP-waarde, // Genereert nieuwe HP-waarde. vijand.scaleX = vijand HP/100; // Wijzig de breedte op basis van de nieuwe HP-waarde. // De waarde wordt gedeeld door 100 en vervolgens geconverteerd naar een decimaal. vijand.scaleY=vijandHP/100; // Verander hoogte op basis van nieuwe HP-waarde trace ("Vijanden hebben", vijand HP, "HP resterende"); // Geeft weer hoeveel HP de vijand nog heeft }

381698 11
381698 11

Stap 7. Probeer het

Als je eenmaal hebt gecodeerd, kun je dit nieuwe spel testen. Klik op het menu Besturing en selecteer Film testen. Het spel begint en je kunt op een vijandelijk object klikken om het formaat te wijzigen. De traceeruitvoer wordt weergegeven in het uitvoervenster.

Deel 3 van 3: Geavanceerde technieken leren

381698 12
381698 12

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 het programma importeren. Dit is vooral handig als je pakketten wilt gebruiken die andere mensen hebben ontwikkeld die het bouwen van games gemakkelijker maken.

Zoek naar een handleiding op Wikihow voor meer details over hoe pakketten werken in Java

381698 13
381698 13

Stap 2. Bouw de projectmap op

Als je een spel maakt dat afbeeldingen en geluidsfragmenten bevat, maak dan een mappenstructuur in het spel. U zult het gemakkelijker vinden om verschillende soorten elementen op te slaan, evenals om verschillende pakketten op te slaan om te bellen.

  • Maak een basismap voor uw project. Maak in de basismap een map "img" voor alle art-assets, een map "snd" voor alle sound-assets en een map "src" voor alle game- en codepakketten.
  • Maak een map "Games" in de map "src" om het constanten-bestand op te slaan.
  • Deze specifieke structuur is niet vereist, maar maakt het gemakkelijker om het werk van alle materialen te organiseren, vooral voor grotere projecten. Voor het hierboven beschreven eenvoudige spel hoef je geen mappen aan te maken.
381698 14
381698 14

Stap 3. Voeg geluid toe aan het spel

Games zonder geluid of muziek zullen spelers snel vervelen. U kunt geluid aan objecten toevoegen met het gereedschap Lagen.

381698 15
381698 15

Stap 4. Maak het bestand Constanten aan

Als je game veel waarden heeft die tijdens het spel hetzelfde blijven, kun je een constanten-bestand maken om ze allemaal op één plek te verzamelen, zodat ze gemakkelijk kunnen worden opgeroepen. Constanten kunnen waarden bevatten zoals zwaartekracht, spelersnelheid en andere waarden die mogelijk herhaaldelijk moeten worden aangeroepen.

  • Als u een Constants-bestand hebt gemaakt, plaatst u het in een map in het project en importeert u het als pakket. Stel dat u een Constants.as-bestand maakt en dit in de map games plaatst. Gebruik de volgende code om het te importeren:

    pakket {import Game.*; }

381698 16
381698 16

Stap 5. Kijk naar het spel van anderen

Hoewel veel ontwikkelaars hun gamecode niet bekendmaken, zijn er verschillende zelfstudieprojecten en andere open source-projecten waarmee je code kunt bekijken en interactief kunt werken met game-objecten. Dit is een geweldige manier om een verscheidenheid aan geavanceerde technieken te leren die je spel kunnen laten opvallen.

Aanbevolen: