Maak een Match-3-game in Construct 2 animaties en blokwisseling

In het vorige artikel in deze serie hebben we tijd besteed aan het instellen van ons spel, zodat we alle benodigde afbeeldingen hadden en willekeurig een raster met blokken voor de speler uitzetten. Met die systemen op zijn plaats, gaan we nu aan de basisfunctionaliteit werken en de speler de mogelijkheid geven om het speelveld te manipuleren.


Final Game Demo

Hier is een demo van de game waaraan we werken in deze serie:




1. Animatie toevoegen

We beëindigden de vorige tutorial nadat elke blokweergave als een andere kleur werd weergegeven. Ik dacht dat het goed zou zijn om van die exacte plek af te komen en te beginnen met het toevoegen van animatie aan de blokken, zodat de afbeeldingen veranderen op basis van wat de speler doet of deed. De eerste animatie die we zullen toevoegen is een mouse-over-evenement.

Voeg eerst een toe muis bezwaar tegen Layout 1. Ga dan terug naar Evenementblad 1 en voeg een nieuwe toe Evenement.

 Evenement: Muis> Cursor is voorbij object Object = Blokkering Actie: Blokkeren> Frame-waarde instellen = (Block.Color-1) * 3 + 2

Als je nu in het spel gaat, zou het beeld voor de blokken moeten veranderen als je erover beweegt, en teruggaan als je je cursor weg beweegt.

We hebben nog een animatie-evenement om te maken:

 Gebeurtenis: Blok> Is Boolean-instantie variabelenset Instantie-variabele = IsMatched Actie: Blokkering> Framewaarde instellen = (Block.Color-1) * 3 + 3

We moeten er ook voor zorgen dat wanneer u de muisaanwijzer over een gekoppeld blok beweegt, het beeld niet verandert, dus voeg een andere voorwaarde toe aan de gebeurtenis muisaanwijzer die we hebben gemaakt:

 Voorwaarde: omkeren: blokkeren> Is Booleaanse instantievariabele ingesteld Instance variabele = IsMatched

Omkeren betekent dat de zweefafbeelding alleen wordt gebruikt als het blok geen deel uitmaakt van een overeenkomst. Aangezien we nog geen aanpassingssysteem hebben, zou u geen veranderingen moeten zien, maar naarmate we verdergaan, zal dit evenement een rol gaan spelen.

Met alle drie deze evenementen op zijn plaats zou uw evenementenblad er nu als volgt uit moeten zien:



2. Twee aangrenzende blokken verwisselen

Het volgende waar we aan zullen werken, is de speler de mogelijkheid geven om aangrenzende blokken te ruilen. Om dit systeem te laten werken, zullen we een combinatie van arrays en functies gebruiken, dus als je ze nog niet eerder in C2 hebt gebruikt, raadpleeg dan de handleiding voor meer informatie.

Waar we naartoe werken

Voordat ik uitleg over het maken van het systeem, wil ik dat je ziet wat we maken en in het kort uitleggen hoe het werkt. Speel hieronder de demo om te zien hoe het systeem eruit zal zien. Om blokken te verwisselen, klik en sleep ze gewoon op een aangrenzende plek in een van de vier windrichtingen.

Klik om de demo te laden.

U zou moeten opmerken dat wanneer u een blok begint te slepen, er vier gekleurde vierkanten verschijnen bovenop de blokken die er direct naast liggen. Wanneer je het blok loslaat, is er een gebeurtenis die controleert of het blok een van deze gekleurde vierkanten overlapt.

Als het blok een van de gekleurde vierkanten overlapt, wordt het blok dat je hebt verplaatst verwisseld met het blok waarin het gekleurde vierkant werd getekend of verplaatst je het verplaatste blok naar de nieuwe locatie. Als je blok geen van de gekleurde vierkanten overlapt, doet het niets. Het doet ook niets als het blok meerdere gekleurde vierkanten overlapt.

De reden dat we dit systeem gebruiken, in plaats van te controleren of het blok zelf een ander blok overlapt, is dat we geen eenvoudige manier hebben om te controleren waar de twee blokken relatief ten opzichte van elkaar zijn. Door de gekleurde vierkanten opnieuw in de geldige locaties te plaatsen en ze vervolgens als basis voor onze controles te gebruiken, hebben we een veel beter idee van wat de speler van plan was te doen wanneer ze een ruil probeerden te maken.

De gekleurde blokken toevoegen

Nu we begrijpen wat er gebeurt, kunnen we beginnen met de implementatie ervan. Ga naar Layout 1 en voeg een toe Functie object en een reeks voorwerp. Verlaat de Functie objectnaam als Functie, maar hernoem de reeks naar BlockPositions. De Functie object zal ons in staat stellen om te gebruiken functies binnen onze code, en de reeks is wat we zullen gebruiken om de posities van de blokken die we ruilen op te slaan. We moeten ook de Hoogte en Diepte van de array naar 2.

Zodra je dat hebt gedaan, maak je vier nieuwe sprites om te gebruiken als onze gekleurde vierkanten:

  • Eén groene sprite, genaamd BottomBlock.
  • Een rode sprite, genaamd LeftBlock.
  • Een gele sprite, genaamd RightBlock.
  • Een blauwe sprite, genaamd TopBlock.

De kleuren doen er niet toe, maar het gebruik van deze kleuren maakt ze allemaal verschillend, zodat ze gemakkelijk te identificeren zijn en het gemakkelijker is om mee te volgen, want dat is wat ik deed. Deze sprites moeten buiten de lay-out worden geplaatst, zodat de speler ze niet kan zien.

Je moet ook de grootte van elk hiervan instellen 30,30 en geef ze elk een ondoorzichtigheid van 0. In de bovenstaande demo zijn ze elk slechts enigszins transparant omdat ik wilde dat je kon zien wat er aan de hand was, maar in het echte spel zou de speler ze helemaal niet moeten kunnen zien.

Selecteer tot slot uw actuele Blok object en voeg het toe Slepen, laten vallen gedrag ernaar.

Ga nu terug naar Evenementblad 1 en maak een nieuwe Evenement met zes acties.

Gebeurtenis: Blokkeren> Aan DragDrop slepen starten Actie: BlockPositions> Instellen op XY X = 0 Y = 0 Waarde = Block.X Actie: BlockPositions> Instellen bij XY X = 0 Y = 1 Waarde = Block.Y Actie: BottomBlock> Positie instellen X = Block.XY = Block.Y - (Block.Width + 2) Actie: TopBlock> Stel positie X in = Block.XY = Block.Y + (Block.Width + 2) Actie: LeftBlock> Stel positie X = Blokkeren in. X - (Block.Width + 2) Y = Block.Y Action: RightBlock> Set Position X = Block.X + (Block.Width + 2) Y = Block.Y

Deze gebeurtenis slaat de startpositie op van het blok dat je hebt verplaatst, en het verplaatst de gekleurde vierkanten zodat ze zich in de juiste posities bevinden ten opzichte van het blok dat wordt verplaatst.

Je evenement zou er als volgt uit moeten zien:


Uitzoeken wat de speler doet

Het volgende evenement dat we zullen toevoegen, voert de controle uit om te zien welke ruil de speler probeert te maken.

Eerst zal het evenement luisteren wanneer de speler het blok dat ze verplaatsen 'laat vallen'. Vervolgens voert het een reeks controles uit om te zien met welk gekleurd vierkant, indien aanwezig, het blok botst en voert de juiste wissel uit of reset gewoon de positie van het bewogen blok..

 Gebeurtenis: Blok> Op DragDrop drop Sub-event: Blok> Is overlappend BottomBlock Actie: BlockPositions> Instellen bij XY X = 1 Y = 0 Waarde = BottomBlock.X Actie: BlockPositions> Instellen bij XY X = 1 Y = 1 Waarde = BottomBlock .Y Actie: Blokkeren> Positie X instellen = BlockPositions.At (0,0) Y = BlockPositions.At (0,1)

Dit is hoe het er tot dusver moet uitzien:


Op dit moment is de Evenement houdt alleen rekening met swaps met de Blok onder degene die wordt verplaatst. Om de anderen toe te voegen, klikt u met de rechtermuisknop op het subgebeurtenis en voegt u een toe Anders. Kopieer vervolgens de voorwaarde van het eerste subgebeurtenis naar het Else-evenement maar verander het doel van BottomBlock naar TopBlock.

Kopieer nu het acties van het originele subgebeurtenis in het Else-evenement en verander opnieuw alle instanties van BottomBlock naar TopBlock. Doe dit nog twee keer met LeftBlock en RightBlock, zodat je vier subgebeurtenissen hebt, en zodat je event-setup er zo uitziet:


Voeg ten slotte nog een Else-evenement toe:

 Subgebeurtenis: anders Actie: Blokkering> Positie instellen X = BlockPositions.At (0,0) Y = BlockPositions.At (0,1)

Eigenlijk de blokken verwisselen

Vanaf hier zullen we de swapping-monteur zelf implementeren. Om de blokken te verwisselen, verplaatsen we eerst het blok dat de speler naar een locatie buiten het scherm sleepte.

We doen dit omdat we de blokken moeten lokaliseren op basis van hun posities voordat we ze kunnen manipuleren - als we beginnen met het plaatsen van een blok in de opgeslagen positie van het andere blok, dan zouden ze beide op dezelfde locatie plaatsen en ze erg moeilijk maken om te blokkeren van elkaar gescheiden. Door het blok naar een specifieke locatie te verplaatsen waarvan we weten dat er geen andere blokken in staan, voorkomen we dat een blok ooit op dezelfde locatie als een ander blok terechtkomt, en voorkomen we dat het systeem een ​​probleem heeft dat bepaalt welk blok we willen.

We verplaatsen dan het blok dat ze hebben geruild origineel blokkeren met naar de locatie van het oorspronkelijke blok. Ten slotte verplaatsen we het oorspronkelijke blok naar de locatie van het tweede blok vanaf de locatie buiten het scherm en stellen we de informatie in de array opnieuw in op 0.

 Evenement: Functie> Aan functie Naam: "SwapBlocks" Subgebeurtenis: Voorwaarde: Blokkering> Vergelijk XX = BlockPositions.At (0,0) Voorwaarde: Blokkering> Vergelijk YY = BlockPositions.At (0,1) Actie: Blokkeren> Instellen positie X = -80 Y = -80 Subgebeurtenis: Voorwaarde: Blok> Vergelijk XX = BlockPositions.At (1,0) Voorwaarde: Blok> Vergelijk YY = BlockPositions.At (1,1) Actie: Blok> Stel positie X in = BlockPositions.At (0,0) Y = BlockPositions.At (0,1) Subgebeurtenis: Voorwaarde: Blok> Vergelijk XX = -80 Voorwaarde: Blok> Vergelijk YY = -80 Actie: Blok> Stel positie X in = Blokposities .At (1,0) Y = BlockPositions.At (1,1) Actie: BlockPositions> Instellen bij XY X = 0 Y = 0 Waarde = 0 Actie: BlockPositions> Instellen bij XY X = 0 Y = 1 Waarde = 0 Actie : BlockPositions> Instellen bij XY X = 1 Y = 0 Waarde = 0 Actie: BlockPositions> Instellen bij XY X = 1 Y = 1 Waarde = 0

Jouw Evenement blad voor dat zou er als volgt uit moeten zien:


Ga nu terug naar de vier controles die we eerder hebben uitgevoerd, die bepaalden met welk gekleurd vierkant het gesleepte blok botste en voeg dit toe Actie tot het einde van de acties lijst voor alle vier:

 Actie: Functie> Oproepfunctie Naam: "SwapBlocks"

Zorgen voor de speler die dat wil doen

Als je het spel nu uitvoert, werkt het bijna perfect. Het enige dat het nog niet doet is controleren of het blok meerdere gekleurde vierkanten overlapt. (Als dat zo is, willen we niet dat er iets gebeurt, omdat dit betekent dat de zet een vergissing kan zijn.)

Momenteel worden de gekleurde vierkanten in de volgorde gecontroleerd Bodem, Top, Links, Rechts, en wat het ook het eerst vindt, het ruilt mee. Om dit te verhelpen, moeten we aan elke controle twee omgekeerde voorwaarden toevoegen.

Naar de Top en Bodem controles, voeg deze voorwaarden toe:

 Voorwaarde: omgekeerd: blok> overlapt een ander object Object: LeftBlock Voorwaarde: omgekeerd: blok> overlapt een ander object Object: RightBlock

Naar de Rechts en Links controles, voeg deze voorwaarden toe:

 Voorwaarde: omgekeerd: blok> overlapt een ander object Object: TopBlock Voorwaarde: omgekeerd: blok> overlapt een ander object Object: BottomBlock

Omdat de vierkanten slechts 30x30 px zijn, is het onmogelijk dat het blok twee tegenover elkaar liggende uiteinden tegelijkertijd overlapt. Met deze controles kunnen we ervoor zorgen dat de sleepbeweging niet te veel scheef staat en zorgt ervoor dat de speler een grotendeels rechte beweging heeft, dus het is duidelijk dat we het juiste type ruil detecteren.

Jouw Evenement blad zou er nu als volgt uit moeten zien:


En hier is een demo van onze game in zijn huidige staat:

Klik om de demo te laden.

Conclusie

We hebben nu een volledig functionele swapping-monteur. In de volgende tutorial zullen we een sterk matchdetectiesysteem opzetten en beginnen we de gameplay echt in actie te zien.

Als je alleen wilt blijven werken, zou je moeten kijken hoe je zou kunnen detecteren wanneer twee blokken dezelfde kleur hebben en hoe je zou weten of ze naast elkaar staan ​​en of ze een volledige groep vormen. Een goede plek om te beginnen zou zijn met een Systeem> voor elk evenement met de Blok object en voer een soort controle uit op elk object Blok individueel.

Ik hoop dat je deze tutorial leuk vond en tot nu toe van de serie geniet; Zorg ervoor dat je snel terugkomt voor de volgende aflevering.