Maak een artilleriegame van Scratch

In deze tutorial bouwen we een spel voor twee spelers in Multimedia Fusion 2. Het bevat aangepaste 360 ​​graden-opnamen en vernietigbare terreinen. Je hebt geen eerdere ervaring met programmeren of game-ontwikkeling nodig om deze tutorial te volgen, en als je geen Multimedia Fusion 2 hebt, kun je de gratis demo proberen.


Speel het spel

Neem om beurten af ​​om naar de andere tank te schieten - Speler Een is aan de linkerkant en Speler Twee aan de rechterkant. Gebruik de muis om te richten; hoe verder het dradenkruis uit je tank komt, hoe krachtiger het schot zal zijn. De eerste speler die geraakt wordt verliest.


Invoering

We beginnen met het opzetten van ons frame zodat het spel soepel verloopt, en dan voegen we onze eerste tank toe. Daarna laten we een aantal kogels schieten die het terrein vernietigen, en tenslotte wordt een andere tank toegevoegd om tegen te concurreren.


Workspace Setup

Begin met het maken van een nieuwe applicatie in Multimedia Fusion 2 (download de demo hier als je die nog niet hebt) en noem die Artillerie spel.

Onder de runtimeopties van de game Stel de Frame rate naar 60 en de Weergavemodus naar Direct3D 9. Dit zijn de standaardconfiguratie-instellingen die ik gebruik bij de meeste spellen omdat ze een soepele gameplay-ervaring bieden en profiteren van hardwareversnelling op de computer van de speler.

Voor deze zelfstudie gebruiken we ook een resolutie van 600x480 welke kan worden gewijzigd in de Window-instellingen. Wijzig de grootte van het frame in 600x480 ook.

Om het een beetje professioneler te maken, zullen we ook het vinkje weghalen Menubalk om te voorkomen dat het in onze game wordt weergegeven.


Stap 1: beginscène maken

Nu we klaar zijn om te gaan, is het tijd om wat activa voor onze game te importeren.

U kunt alle afbeeldingen die ik gebruik in deze zelfstudie gebruiken van de brondownload, of u kunt uw eigen afbeeldingen tekenen als u dat wilt. De afbeeldingen die ik gebruik zijn aangepast van enkele gratis die beschikbaar zijn op OpenGameArt.org

Nadat je de afbeeldingen op je computer hebt opgeslagen, sleep je ze eenvoudig één voor één naar frame 1. Hiermee importeer je ze naar onze game en wordt er een dialoogvenster geopend om het type van elk object in te stellen.

Begin met het importeren van het terrein. Stel het in op een achtergrondobject met zijn Obstakel Type ingesteld op hindernis.

Importeer vervolgens de Tank van Player One als een actief object, evenals Player One's Turret. Geef ze een naam P1Body en P1Turret respectievelijk. Stel de hotspot van het torentje in op (3,3), en de hotspot van de tank naar (16,14). Dit zorgt ervoor dat wanneer we de toren op de tank plaatsen, deze correct is geplaatst en goed draait.

Tip: Om de hotspot te plaatsen, klikt u eerst op het pictogram met het oog erop om het zichtbaar te maken en sleept u vervolgens de hotspot naar het gewenste punt.

Importeer ook de kogel en het dradenkruis als actieve objecten. We zullen de andere tank later importeren. Centreer de hotspot van het draadkruis op (15,15). Verwijder "Create at Start" in de kogel en centreer de hotspot. Zorg ervoor dat het tanktorentje in de juiste volgorde achter het lichaam staat door er met de rechtermuisknop op te klikken en het te verzenden To Back, onder de Bestellen keuze.

Wijzig ten slotte de achtergrondkleur van het frame in een lichtblauw (klik op frame 1 in de werkruimtewerkbalk en wijzig de betreffende eigenschap in het paneel Properties). Gebruik RGB = 115,176,217. Deze kleur zal later van belang zijn als we vernietigbaar terrein toevoegen.

Rangschik de objecten in je frame, zodat ze lijken op hoe ik ze in deze afbeelding heb.


Stap 2: Schiet op een kogel

Hier gaan we onze eerste tank een kogel in een rechte lijn laten schieten. We voegen later zwaartekracht toe aan de kogel, evenals een explosie wanneer deze botst met de grond.

Maak eerst twee veranderbare waarden voor de tank met de naam DistanceToMouse en AngleToMouse: selecteer de tank, klik op het pictogram "A-Z" bovenaan in het venster Properties en klik op "New" onder "Alterable Values". We gebruiken deze om respectievelijk de afstand in pixels en de hoek in graden op te slaan voor de muis.

Maak vervolgens vijf veranderbare waarden voor de opsommingsteken:

  • TempX
  • Tempy
  • XSpeed
  • YSpeed
  • InitialSpeed

Deze waarden worden gebruikt om de bewegingsinformatie van de kogel op te slaan en onze aangepaste 360 ​​graden-beweging te implementeren.

Het is tijd om wat code te schrijven. We beginnen met het eenvoudig plaatsen van het torentje en het richten op de muis.

Voeg het Advanced Direction Object toe aan je game via Insert> New Object. We gebruiken het voor het berekenen van de hoek en afstand tot de muis vanuit onze tank.

Tip: Als je de demo van Multimedia Fusion 2 gebruikt, heb je mogelijk geen toegang tot het Advanced Direction Object dat beschikbaar is in Bonus Pack 1. In dit geval, om de hoek tussen twee objecten te berekenen, kun je eenvoudig deze formule gebruiken:
360-ATan2 (YMouse-Y ("P1Body"), XMouse-X ("P1Body"))
… in plaats van:
Distance ("Advanced Direction Object", X ("P1Body"), Y ("P1Body"), XMouse, YMouse)

Voeg vervolgens de volgende code toe in de gebeurteniseditor (bekijk dit via Weergave> Gebeurteniseditor):

+ Altijd
- [P1Body] Stel DistanceToMouse in op:
Distance ("Advanced Direction Object", X ("P1Body"), Y ("P1Body"), XMouse, YMouse)
- [P1Body] Stel AngleToMouse in op:
Richting ("Advanced Direction Object", X ("P1Body"), Y ("P1Body"), XMouse, YMouse)
- [P1Turret] Stel de positie in op (0,0) vanaf P1Body
- [P1Turret] Angle To AngleToMouse ("P1Body") instellen
- [Crosshair] X-coördinaat instellen op XMouse
- [Crosshair] Y-coördinaat op YMouse instellen

Als je nu je spel uitvoert, zou je moeten zien dat het tanktorentje nu naar het draadkruis wijst en dat het draadkruis zich op de muiscursor bevindt.

Laten we nu een kogel schieten. Voeg de volgende code toe:
+ Klikken van gebruikers met linkerknop
- [Create] Maak een kogel op (0,0) vanaf P1Body
- [Bullet] Stel TempX in op X ("Bullet")
- [Bullet] Stel TempY in op Y ("Bullet")
- [Bullet] Stel InitialSpeed ​​in op Min (DistanceToMouse ("P1Body") / 17.0, 15)
- [Bullet] Stel XSpeed ​​in op Cos (AngleToMouse ("P1Body")) * InitialSpeed ​​("Bullet")
- [Bullet] Stel YSpeed ​​in op Sin (AngleToMouse ("P1Body")) * InitialSpeed ​​("Bullet") * - 1

+ Altijd
- [Bullet] XSpeed ​​("Bullet") toevoegen aan TempX ("Bullet")
- [Bullet] Voeg YSpeed ​​("Bullet") toe aan TempY ("Bullet")
- [Bullet] X-positie instellen op TempX ("Bullet")
- [Bullet] Y-positie instellen op TempY ("Bullet")

Als je je spel uitvoert (via het menu Uitvoeren), zou je moeten zien dat de tank een kogel schiet in een rechte lijn zonder zwaartekracht.

Dus wat doet deze code??

Eerst maken we een kogel in het lichaam van de tank. Vervolgens gebruiken we de waarden TempX en Tempy om de huidige positie van de kogel op te slaan. We hebben de beginsnelheid van de Bullet ingesteld op de afstand van de tank tot de muis, met een maximaal vermogen van 15. (De afstand wordt gedeeld door 17,0 om de sterkte te verlagen.) Dit zijn slechts waarden die ik eenvoudig heb verzonnen na enkele testen. Je kunt zelf met deze twee waarden spelen om te veranderen hoe snel de kogel afvuurt.

We berekenen vervolgens de XSpeed en YSpeed vanuit de hoek en kracht met behulp van trigonometrie. Maak je geen zorgen als je de wiskunde achter hoe dit werkt niet begrijpt!

Eindelijk, in de Altijd gebeurtenis we continu de positie van de opgeslagen bullet bijwerken TempX en Tempy door de kogels toe te voegen XSpeed en YSpeed respectievelijk.

Waarom gebruiken TempX en Tempy?

We moeten onze tussenposities opslaan in veranderbare waarden voor aangepaste bewegingen, aangezien Multimedia Fusion 2 dit niet gebruikt drijvers (cijfers met decimale punten) voor de coördinaten - het maakt gebruik van gehele getallen (hele getallen).

Als u probeert de X-positie van de Bullet in te stellen X ("Opsommingsteken") + 0.2 je zult zien dat het nergens heen zal bewegen, omdat 0.2 naar beneden afgerond wordt naar 0, en vandaar dat de Kogel op zijn huidige positie staat.


Stap 3: voeg zwaartekracht toe

Nu we een kogel kunnen schieten, moeten we zwaartekracht toevoegen om de kogel te laten vallen zodra deze het kanon van de tank verlaat.

Ten eerste hebben we een plaats nodig om een ​​aantal waarden op te slaan die in ons spel worden gebruikt, zoals de kracht van de zwaartekracht. In een MMF2-spel zijn er tal van plaatsen om dit soort informatie op te slaan. Sommige mensen geven er de voorkeur aan om een ​​specifiek object te maken alleen maar om waarden vast te houden. In deze tutorial gaan we Global Values ​​gebruiken - waarden die overal beschikbaar zijn gedurende het hele spel - om onze belangrijke waarden te behouden.

Ga naar de algemene waarden voor uw toepassing (klik op de toepassing in de werkbalk van uw werkruimte en selecteer vervolgens het pictogram "A-Z" in het venster Eigenschappen) en maak een nieuwe waarde: Y_Gravity.

Tip: Als u uw code leesbaarder wilt maken, kunt u ook een andere globale waarde toevoegen Maximale snelheid en gebruik het in plaats van "15.0" waar we het berekenen InitialSpeed voor de kogel. Hiermee kunt u eenvoudig het maximale vermogen wijzigen zonder dat u uw code overal moet bewerken waar deze verschijnt.

MMF2 staat niet toe dat je drijvers in Globale waarden typt, en omdat we willen dat onze zwaartekracht kleiner is dan één, moeten we deze in code instellen:

Nu moeten we eenvoudigweg deze zwaartekracht aan de YSpeed ​​van de kogel op elk frame toevoegen.

Voeg de regel toe:

+Altijd
- [Opsommingsteken] Voeg Y_Gravity toe aan YSpeed

U kunt dubbelklikken op een gebeurtenis om de lijstmodus te openen en de volgorde van de gebeurtenisacties te wijzigen. Plaats de nieuwe regel tussen de bestaande acties zoals ik hier heb gedaan.

Wanneer je het spel uitvoert, moet je tank een kogel schieten die terugvalt naar de grond.


Stap 4: Vernietig het terrein

Vervolgens moeten we de kogel gaten laten maken in de grond wanneer deze ermee botst. Om dit te doen, gaan we profiteren van de "Add to Backdrop" -functie van Multimedia Fusion.

Toevoegen aan achtergrond plakt de afbeelding van een actief object permanent in de achtergrond wanneer de game actief is. Dit kan van invloed zijn op het feit of een bepaald deel van de achtergrond botsingen registreert of niet. Wat we gaan doen is een "gat" -vorm hebben die een cirkel in de achtergrond snijdt die even groot is als de explosie-animatie die ermee gepaard gaat.

Voeg een gat toe

Importeren explosion_hole.png als een actief object door het in het frame te slepen. Centreer zijn hotspot op (32,32).

Importeren explosion_graphic_1.png als een ander actief object. Wanneer wordt u gevraagd of u wilt importeren explosion_graphic_2.png, enz., kies Ja.

Centreer ook de hotspots op deze explosieve grafische frames.

De code voor het toevoegen van vernietigbaar terrein is vrij eenvoudig. Wanneer een kogel tegen de achtergrond botst, hoeven we alleen het gatobject te maken en dit aan de achtergrond toe te voegen.

Maak het gat wanneer de bullet botst met de achtergrond:

Voeg het gat op de achtergrond toe als "Geen obstakel" (zodat kogels er doorheen kunnen gaan):

Creëer ook een grafische explosie (een die laat zien waar de kogel sloeg) en vernietig de kogel aan het einde. We kunnen het gat ook vernietigen als het eenmaal is toegevoegd aan de achtergrond:

Vernietig ten slotte de grafische explosie wanneer deze klaar is met het afspelen van de animatie:

Als je het spel uitvoert, zou je nu een tank moeten hebben die kan richten en schieten op het terrein, explosies kan creëren en gaten kan achterlaten.


Stap 5: voeg een andere speler toe

Eindelijk gaan we een andere speler aan onze game toevoegen. We gaan de code die we al hebben voor onze eerste tank kopiëren en deze op een andere toepassen. We hebben ook een nieuwe globale variabele nodig om bij te houden wiens wending dat is.

Voeg Player Two's Graphics toe

Importeer het tanklichaam en het torentje van speler twee op dezelfde manier als bij speler een. Plaats de tweede tank aan de rechterkant van het frame.

Kopieer in de gebeurteniseditor de code voor de eerste tank naar de tweede tank. U moet ook de veranderbare waarden maken DistanceToMouse en AngleToMouse in de tank van de tweede speler. Ik heb opmerkingen aan mijn code toegevoegd om het gemakkelijker te kunnen zien. Als je vastloopt, volg je gewoon het eerste deel van deze tutorial, maar doe je het voor de tweede tank.

Als je nu het spel uitvoert, vuren beide tanks tegelijk op naar het dradenkruis.

Maak nieuwe variabelen

Maak twee nieuwe globale variabelen genaamd CurrentPlayerTurn en TurnCooldown.

TurnCooldown wordt gebruikt om te voorkomen dat de tanks tegelijk vuren. Wanneer een speler schiet, stellen we deze cooldown in op een kleine waarde, die tot nul zal tellen, en we zullen niet toestaan ​​dat de andere speler schiet tot deze waarde nul bereikt.

We zullen gebruiken CurrentPlayerTurn = 0 om de beurt van speler One en CurrentPlayerTurn = 1 om de beurt van Speler Twee te vertegenwoordigen.

Onder de schietcode van Player One met Gebruiker klikt met de linkerknop, voeg de voorwaarde toe CurrentPlayerCooldown = 0 zodat een tank alleen naar de muis kijkt en kan vuren als deze draaicontrole heeft. Gebruik hiervoor de voorwaarde "Vergelijk met een globale waarde":

Voeg ook de voorwaarde toe TurnCooldown = 0 om ervoor te zorgen dat de opname is afgekoeld voordat je probeert te schieten.

Nog twee acties toevoegen aan set de TurnCooldown tot een kleine waarde van 3, en de CurrentPlayerTurn naar 1-CurrentPlayerTurn. (Dit betekent dat als CurrentPlayerTurn is 0, het wordt ingesteld op 1 en als het 1 is, wordt het ingesteld op 0.)

Nadat je dit allemaal hebt gedaan, moet je code er als volgt uitzien:

Dupliceer dezelfde code voor speler twee, maar wijzig de voorwaarde om de beurt van speler twee weer te geven CurrentPlayerTurn = 1

En voeg ten slotte nog een voorwaarde toe om onze cooldown te verlagen wanneer deze groter is dan nul:

Als je het spel nu speelt, zou je in staat moeten zijn om beide tanks op elkaar te schieten, waarbij elke slag de beurt van de huidige tank afwisselt.


Stap 6: Win conditie toevoegen

Nu dat we kunnen schieten, alles wat we moeten doen is een manier toevoegen om elkaar op te blazen! Dit is vrij eenvoudig. We hoeven alleen maar te detecteren of een explosie een tank overlapt en als dat zo is, vernietigen we de tank en laten we niemand meer ontbranden.

Voeg de volgende code toe:

+ [Explosion_Graphic] overlapt [P1Body]
- Vernietig [P1Body]
- Vernietig [P1Turret]
- Stel CurrentPlayerTurn in op -1

+ [Explosion_Graphic] overlapt [P2Body]
- Vernietig [P2Body]
- Vernietig [P2Turret]
- Stel CurrentPlayerTurn in op -1

Zo ziet de code eruit voor Player One:

Het vernietigen van de spelers en hun torentjes spreekt voor zich. We hebben de CurrentPlayerTurn naar -1 zodat de spelers niet meer kunnen vuren (zoals de omstandigheden vereisen CurrentPlayerTurn om gelijk te zijn aan 0 of 1).

Als je je spel uitvoert, zou je in staat moeten zijn elkaar om de beurt te fotograferen totdat een van jullie opblaast!


Conclusie

Nu heb je een volledig functionele tankgame voor twee spelers waarmee je met je vrienden kunt spelen. Vanaf hier kun je dingen toevoegen zoals willekeurige windsnelheid die van invloed is op de baan van de kogel, nieuwe wapens, geluiden, deeltjeseffecten en meer!

Veel plezier ermee!