Share
Välkommen till en ny serie av tutorials där jag ska visa dig hur man bygger ett Match-3 pusselspel från början, i Construct 2. I den här första delen kommer vi att lägga grunden för spelet och få det grundläggande pusselätet på skärm.
Ett Match-3-spel är ett blockbaserat pussel där du flyttar block runt i spelområdet för att skapa grupper om tre eller flera som delar en gemensam egenskap (som en färg eller en form). I de flesta match-3-spel får spelaren också bonusar för att matcha mer än tre kvarter samtidigt.
De flesta match-3-pusselspel är konkurrenskraftiga i naturen, och spelarens mål är i allmänhet bara att få högsta poäng de kan innan tiden går ut eller om något annat förlustförhållande är uppfyllt. Några exempel på match-3-spel är Pokemon Puzzle League, Bejeweled och den nyligen slagna Candy Crush Saga.
Jag bestämde mig för att basera match-3-spelet som vi kommer att göra på Pokemon Puzzle League:
Om du aldrig har spelat det tidigare är PPL en ganska enkel match-3 där blocken stiger från undersidan av spelskärmen och spelaren måste skapa matcher för att förhindra att skärmen fylls på. Om blocken når toppen, förlorar spelaren och tvingas börja om igen.
Här är en demonstration av spelet vi kommer att arbeta mot i hela serien:
I den här första artikeln kommer vi att fokusera på att lägga grunden för vårt spel. Denna artikel kommer att fokusera specifikt på att ställa in projektet och gyta ett rutnät av slumpmässiga block för spelaren.
Innan du börjar med denna handledning bör du se till att installera den senaste versionen av Construct 2 (C2). När jag byggde den ursprungliga versionen av spelet använder jag Release 122, så länge du har en nyare version än det borde du ha det bra. Om du aldrig har använt C2 innan du bör kolla in den här handboken, vilka detaljer beskriver grunderna för att använda C2 och hur man gör de flesta objekttyperna.
Du bör också ladda ner grafikpaketet jag skapade för denna handledning. Medan du självklart kan använda vilken grafik du vill, kommer jag att ge specifik positionering för många saker i dessa handledning, och dessa positioner är baserade på de bilder jag använde. Om du använder annan grafik måste du redogöra för eventuella storleksskillnader i grafiken när du följer dessa handledning.
När du har allt satt upp och har en bra förståelse för C2, läs vidare!
Innan vi faktiskt bygger hela spelningen måste vi ställa in själva projektet. Ladda C2 och följ dessa steg:
Accentsconagua
600x600.Bakgrund, mittlagret till Blocks, och toppskiktet till Spelfält. GameBG. Bakgrund.650, 650. 
GameFieldBorder.9, -12.16, 732.Spelfält.GameFieldBorder objekt. 368, -12 .
GameFieldBottom.197, 625.344, 150.Spelfält.GameFieldBottom objekt. 196, -30.180.
Det sista vi behöver göra är att skapa en bakgrund för det faktiska området blocken kommer att dyka upp i.
0, och den Alfa till 200.359, 570.195.294.Bakgrund
Spelfältet är nu färdigt, men vi måste fortfarande göra en Sprite som kan användas för blocken.
Innan vi går framåt skulle jag vilja förklara blockbilderna. Det grå blocket finns där för att representera ett "inaktivt" block, vilket kommer att implementeras i en kommande handledning. De återstående bilderna grupperas i grupper om tre för varje block: den första ramen är för när blocket inte används, den andra är för när spelaren manipulerar blocket och den tredje är för när blocket är matchat till en grupp.
Slutligen ta det block vi har gjort och placera det någonstans i layouten som förhindrar att spelaren ser det under ett aktuellt spel. Ställ in blockets storlek till 40, 40.
Vi har nu tagit in alla bilder vi behöver för den här artikeln och kan gå vidare för att faktiskt göra spelet.
I den sista versionen av spelet kommer blocken att gå upp hela tiden, och nya block kommer att trycka på skärmen från botten. För närvarande måste vi dock få de grundläggande mekanikerna att fungera, så vi ska bara kasta ett 8x8 rutnät av block och lämna den där.
Gå till Event Sheet 1 och lägg till dessa globala variabler för att definiera Blocks initiala gösposition:
Global Variabel: SPAWNX Värde = 49 Konstant = Sann Global Variabel: SPAWNY Värde = 526 Konstant = Sann
Vi måste också göra en annan sak innan vi gör den första händelsen: vi måste skapa en instansvariabel för blocket som berättar blocket vilken färg det är.
Skapa en ny instansvariabel för Block-objektet, namnge det Färg och ändra inga andra inställningar.
Nu ska vi göra vår första händelse. Målet med denna händelse är att skapa ett statiskt rutnät av block för teständamål:
Händelse: Skick: System> Vid start av layout Skick: System> För namn: "Y" Startindex = 0 Slutindex = 7 Underhändelse: System> För namn: "X" Startindex = 0 Slutindex = 7 Åtgärd: Systemet> Skapa objektobjekt: Block X = (SPAWNX + (loopIndex ("X")) * (Block.Width + 2)) Y = (SPAWNY - (loopIndex ("Y")) * (Block.Width + 2) ) Båda dessa formler säger i princip samma sak. Först lägger vi till 2 i blockbredden så att varje block har en 2px buffert mellan den och dess grannar för att förhindra falska positiva när kollisionsdetektering används. Sedan multiplicerar vi det numret med det aktuella indexet i loop och lägger till det i startpositionen X eller Y. Vi subtraherar också från Y-värdet, eftersom i 0-talet är 0-punkten på Y-axeln högst upp på spelskärmen, så genom att sänka Y-positionsvärdet lägger vi ett objekt närmare skärmens övre del.
Så vad gör detta? Detta betyder att när X- och Y-looparna itereras och värdena för X och Y ökar, ändras positionen som varje ställe sätter in, vilket resulterar så småningom i ett kvadratiskt rutnät:
Om du kör spelet vid denna tidpunkt kommer du att ha ett rutnät av block - men i stället för att vara olika färger, kommer de bara att cykla igenom varje blockbild i följd.
För att fixa detta måste vi göra två saker.
Först måste vi tilldela varje block ett färgvärde med hjälp av förekomstvariabeln som vi gjort tidigare. För att göra detta lägger du till en annan åtgärd:
Åtgärd: Block> Ange värde Färg = golv (Slumpmässig (1,7))
Detta kommer att tilldela blocket ett slumpmässigt färgvärde från 1 till 6. (Anledningen till att den inte är från 1 till 7 förklaras i förklaringen av Slumpmässig fungera.)
Din funktion ska nu se ut så här:
Vi måste också lägga till ett system som ändrar bilden av ett block baserat på dess värde. För att göra detta, börja med att lägga till en ny instansvariabel till blockobjektet:
Instansvariabel för blocknamn: "IsMatched" Type: Boolean initialvärde = false
Lägg nu till en ny händelse:
Händelse: System> Varje tick-åtgärd: Blockera> Ange ramvärde = (Block.Color-1) * 3 + 1
Denna formel subtraherar först 1 från blockens färgvärde för att beräkna det faktum att värdena börjar vid 1 snarare än 0. Då multiplicerar det det med 3 för att ta hänsyn till det faktum att varje block har 3 animationsramar. Slutligen lägger det till 1 till det värdet eftersom standardbilden av ett block är den första bilden i uppsättningen bilder.
Låt oss titta på ett snabbt exempel med ett block som har ett färgvärde på 4, för att se vilken animationsram den ska använda. För det första subtraherar du 1 från färgvärdet för att få 3. Därefter multipliceras det antalet med 3 för att göra 9. Slutligen lägger det 1 till det värdet för att göra 10. Detta innebär att ett block med ett färgvärde på 4 kommer att använda ram 10 som dess standard animeringsram, och kommer att vara en lila / fyrkantig Block.
Om du kör ditt spel nu ser du att varje block har en annan färg, men vi har fortfarande inte implementerat animeringar för när musen svävar över blocket eller när den matchas. Detta kommer att behandlas i nästa handledning, tillsammans med hur man byter två närliggande block.
Här är en liten demonstration av vad spelet ska se ut vid denna tidpunkt (ta tag i källan här):
Klicka för att ladda demo. Om du vill fortsätta arbeta på egen hand, börja titta på att ändra Blockens animeringsram baserat på en "Mus> Markör är över objekt" -händelse. Du kan också börja titta på "Drag & Drop" -beteendet för att manipulera blocket och överväga hur man bestämmer vad spelaren försöker göra med blocket när de börjar dra det eller när de släpper det.
Tack för att du läste denna del av handledningen där vi satte grunden för vårt Match-3-spel. Kom tillbaka snart igen för nästa del av serien! Du kan hålla dig uppdaterad via Facebook, Twitter, Google+, RSS eller e-post.
