Gör ett match-3-spel i Construct 2 Animeringar och Blockbyte

I den föregående artikeln i denna serie spenderade vi tid på att skapa vårt spel så att vi hade alla nödvändiga bilder på plats och slumpmässigt gyter ett block av block för spelaren. Med dessa system på plats kommer vi nu att arbeta med grundläggande funktionalitet och ge spelaren möjlighet att manipulera spelfältet.


Final Game Demo

Här är en demonstration av spelet vi arbetar mot genom hela serien:




1. Lägga till animering

Vi avslutade den tidigare handledningen efter att varje blockvisning visats som en annan färg. Jag tyckte att det skulle vara bra att hämta från den exakta platsen och börja med att lägga animering till blocken så att bilderna ändras utifrån vad spelaren gör eller gjorde. Den första animationen vi lägger till är en mus-över-händelse.

Lägg först till en mus protestera mot Layout 1. Gå sedan tillbaka till Event Sheet 1 och lägg till en ny Händelse.

 Händelse: Mus> Markören är över objektet Object = Block Action: Blockera> Ange ramvärde = (Block.Color-1) * 3 + 2

Nu, om du går in i spelet, ska bilden för blocken ändras när du svävar över dem och byter tillbaka när du flyttar markören bort.

Vi har ytterligare en animationshändelse för att göra:

 Händelse: Block> Är Boolean instans variabel inställd Instansvariabel = IsMatched Action: Blockera> Ange ramvärde = (Block.Color-1) * 3 + 3

Vi måste också se till att när du svävar över ett matchat block ändras inte bilden, så lägg till ett annat villkor för den muspekare som vi gjorde:

 Skick: Omvänd: Block> Är Boolean instans variabel inställd Instans variabel = IsMatched

Omvändning innebär att svängbilden endast används om blocket inte är en del av en matchning. Eftersom vi inte har ett matchande system på plats borde du inte se några ändringar, men när vi går framåt kommer den här händelsen att spelas in.

Med alla tre av dessa händelser på plats, ska ditt evenemangsblad nu se ut så här:



2. Byta två grannblock

Nästa sak vi ska arbeta på ger spelaren möjligheten att byta grannblock. För att detta system ska fungera använder vi en kombination av Arrays and Functions, så om du inte har använt dem i C2 tidigare, se handboken för att få reda på mer.

Vad vi arbetar mot

Innan jag förklarar hur man gör systemet vill jag att du ska se vad vi gör och förklara kort hur det fungerar. För att se hur systemet kommer att vara, spela demo nedan. För att byta block klickar du enkelt och dra dem ovanpå en närliggande plats i en av de fyra kardinalriktningarna.

Klicka för att ladda demo.

Du bör märka att när du börjar dra ett block visas fyra färgade rutor ovanpå blocken som ligger direkt bredvid den. När du släpper blocket finns en händelse som kontrollerar om blocket överlappar någon av dessa färgade rutor.

Om kvarteret överlappar en av de färgade rutorna, byter den det block du flyttat med blocket som den färgade kvadraten drogs ovanpå eller bara flyttar ditt flyttade block till den nya platsen. Om ditt block inte överlappar någon av de färgade rutorna gör det ingenting. Det gör ingenting om blocken överlappar flera färgade rutor.

Anledningen till att vi använder det här systemet, istället för att kontrollera om blocket själv överlappar ett annat block är att vi inte har något enkelt sätt att kontrollera var de två blocken är i förhållande till varandra. Genom att ompositionera de färgade rutorna till de giltiga platserna och sedan använda dem som underlag för våra kontroller, har vi en mycket bättre uppfattning om vad spelaren tänkt göra när de försökte byta.

Lägga till de färgade blocken

Nu när vi förstår vad som händer kan vi börja implementera det. Gå till Layout 1 och lägg till en Fungera objekt och en Array objekt. Lämna Fungera Objektets namn som Fungera, men byt namn på Array till BlockPositions. De Fungera objektet tillåter oss att använda funktioner inom vår kod, och Array är vad vi ska använda för att lagra positionerna hos de block vi byter ut. Vi måste också ställa in Höjd och Djup av matrisen till 2.

När du har gjort det, skapa fyra nya sprites att använda som våra färgade rutor:

  • En grön sprite, namngiven BottomBlock.
  • En röd sprite, namngiven LeftBlock.
  • En gul sprite, namngiven RightBlock.
  • En blå sprite, namngiven TopBlock.

Färgerna spelar ingen roll, men med hjälp av dessa färger gör var och en annorlunda så att de är lätta att identifiera och gör det lättare att följa med eftersom det är vad jag gjorde. Dessa sprites bör placeras utanför layouten så att spelaren inte kan se dem.

Du bör också ställa in storleken på var och en av dessa till 30,30 och ge dem varje en Opacitet av 0. I demo ovan är de bara lite transparenta eftersom jag ville att du skulle kunna se vad som hände, men i själva spelet skulle spelaren inte kunna se dem alls.

Slutligen, välj din faktiska Blockera objekt och lägg till Dra och släpp beteende åt det.

Gå nu tillbaka till Event Sheet 1 och skapa en ny Händelse med sex Åtgärder.

Händelse: Block> På DragDrop dra start Åtgärd: BlockPositions> Ange vid XY X = 0 Y = 0 Värde = Block.X Åtgärd: BlockPositions> Ställ vid XY X = 0 Y = 1 Värde = Block.Y Åtgärd: BottomBlock> Set Position X = Block.XY = Block.Y - (Block.Width + 2) Åtgärd: TopBlock> Ställ position X = Block.XY = Block.Y + (Block.Width + 2) Åtgärd: LeftBlock> Ställ position X = Block. X - (Block.Width + 2) Y = Block.Y Åtgärd: RightBlock> Ställ position X = Block.X + (Block.Width + 2) Y = Block.Y

Denna händelse lagrar startpositionen för det block du flyttat, och det rör sig om de färgade rutorna så att de ligger i rätt position i förhållande till det block som flyttas.

Din händelse ska se ut så här:


Beräkna vad spelaren gör

Nästa händelse som vi lägger till kommer att utföra kontrollen för att se vad byte spelaren försöker göra.

Först kommer händelsen att lyssna på när spelaren "tappar" blocket de rör sig. Det kommer då att utföra en serie kontroller för att se vilken färgad kvadrat, om någon, blocket kolliderar med, och antingen utföra lämplig byte eller bara återställa det rörda blockets position.

 Händelse: Block> På DragDrop-droppe Underhändelse: Blockera> Överlappar BottomBlock-åtgärd: BlockPositions> Ange vid XY X = 1 Y = 0 Värde = BottomBlock.X Åtgärd: BlockPositions> Ställ vid XY X = 1 Y = 1 Värde = BottomBlock .Y Åtgärd: Block> Ställ position X = BlockPositions.At (0,0) Y = BlockPositions.At (0,1)

Så här ska det se så långt ut:


Just nu Händelse endast konton för swappar med Blockera under den som flyttas. För att lägga till de andra, högerklicka på underevenemanget och lägg till ett Annan. Kopiera sedan tillståndet från den första delhändelsen till Else-händelsen, men ändra målet från BottomBlock till TopBlock.

Kopiera nu Åtgärder från den ursprungliga delhändelsen till Else-händelsen och ändra eventuella förekomster av BottomBlock till TopBlock. Gör det här två gånger med LeftBlock och RightBlock, så att du har fyra underhändelser totalt, och så att din händelsesinställning ser ut så här:


Slutligen lägg till ytterligare en Else-händelse:

 Underhändelse: Övrig åtgärd: Block> Ställ position X = BlockPositions.At (0,0) Y = BlockPositions.At (0,1)

Faktiskt byta blocken

Härifrån kommer vi att genomföra bytesmaskinen själv. För att byta blocken flyttar vi först blocket som spelaren släpade till en plats utanför skärmen.

Det gör vi för att vi måste lokalisera blocken baserat på deras positioner innan vi kan manipulera dem - om vi började genom att placera ett block i lagret läge i det andra blocket skulle det placera dem båda på samma plats och göra dem väldigt svåra att skilda från varandra. Genom att flytta blocket till en viss plats som vi vet kommer inga andra block att vara i, vi förhindrar att ett block från någonsin ligger på samma plats som ett annat block och förhindrar att systemet har ett problem som bestämmer vilket block vi vill ha.

Vi flyttar sedan blocket de bytte ut original- blockera med det ursprungliga blockets plats. Slutligen flyttar vi det ursprungliga blocket till platsen för det andra blocket från dess läge utanför skärmen och återställer informationen i matrisen till 0.

 Händelse: Funktion> På funktion Namn: "SwapBlocks" Sub-Event: Skick: Block> Jämför XX = BlockPositions.At (0,0) Skick: Block> Jämför YY = BlockPositions.At (0,1) Åtgärd: Block> Set position X = -80 Y = -80 Underhändelse: Skick: Block> Jämför XX = BlockPositions.At (1,0) Skick: Block> Jämför YY = BlockPositions.At (1,1) Åtgärd: Block> Ställ position X = BlockPositions.At (0,0) Y = BlockPositions.At (0,1) Sub-Event: Skick: Block> Jämför XX = -80 Skick: Block> Jämför YY = -80 Åtgärd: Block> Ställ position X = BlockPositions .At (1,0) Y = BlockPositions.At (1,1) Åtgärd: BlockPositions> Ange vid XY X = 0 Y = 0 Värde = 0 Åtgärd: BlockPositions> Ställ vid XY X = 0 Y = 1 Värde = 0 Åtgärd : BlockPositions> Ange vid XY X = 1 Y = 0 Värde = 0 Åtgärd: BlockPositions> Ställ vid XY X = 1 Y = 1 Värde = 0

Din Händelse ark för det ska se så här ut:


Gå nu tillbaka till de fyra kontrollerna som vi gjorde tidigare som bestämde vilken färgad ruta det slagna blocket kolliderade med, och lägg till det här Verkan till slutet av Åtgärder lista för alla fyra:

 Åtgärd: Funktion> Samtalsfunktion Namn: "SwapBlocks"

Se till att spelaren menade att göra det

Om du kör spelet nu, kommer det att fungera nästan perfekt. Det enda som det inte gör ännu är att kontrollera om blocket överlappar flera färgade rutor. (Om det är så vill vi inte att något händer eftersom det betyder att flytten kan vara ett misstag.)

För närvarande kontrollerar den de färgade rutorna i ordern Botten, Topp, Vänster, Höger, och beroende på vad den först finner, byter den med. För att fixa detta måste vi lägga till två inverterade villkor för varje kontroll.

Till Topp och Botten kontroller, lägg till följande villkor:

 Skick: Inverterad: Block> Överlappar ett annat objekt Objekt: VänsterBlock Skick: Inverterad: Block> Överlappar ett annat objekt Objekt: RightBlock

Till Höger och Vänster kontroller, lägg till följande villkor:

 Skick: Inverted: Block> Överlappar ett annat objekt Objekt: TopBlock Skick: Inverterat: Block> Överlappar ett annat objekt Objekt: BottomBlock

Eftersom kvadraterna är endast 30x30px är det omöjligt för blocket att överlappa två på motsatta ändar samtidigt. Dessa kontroller gör det möjligt för oss att se till att dragningsrörelsen inte är förskjuten till någon sida för mycket och säkerställer att spelaren har mestadels rak rörelse, så det är klart att vi upptäcker rätt typ av byte.

Din Händelse bladet ska nu se ut så här:


Och här är en demonstration av vårt spel i sitt nuvarande tillstånd:

Klicka för att ladda demo.

Slutsats

Vi har nu en fullt fungerande bytesmekaniker. I nästa handledning skapar vi ett starkt matchningssökningssystem och börjar verkligen se spelet i aktion.

Om du vill fortsätta arbeta på egen hand bör du titta på hur du kan upptäcka när två kvarter har samma färg och hur du skulle veta om de ligger bredvid varandra och om de utgör en fullständig grupp. Ett bra ställe att börja skulle vara med a System> För varje händelse med Blockera objekt, och utför någon form av kontroll på var och en Blockera individuellt.

Jag hoppas att du njöt av denna handledning och njuter av serien hittills; se till att du kommer tillbaka snart för nästa avbetalning.