Share
Welkom bij een nieuwe reeks tutorials waarin ik je laat zien hoe je in Construct 2 een Match-3-puzzelspel kunt bouwen. In dit eerste deel gaan we de basis leggen voor het spel en het basisraster leggen op het scherm.
Een Match-3-game is een blokgebaseerde puzzel waarin je blokken in het spelgebied verplaatst om groepen van drie of meer te maken met een gemeenschappelijk attribuut (zoals een kleur of een vorm). In de meeste match-3-spellen krijgt de speler ook bonussen voor het matchen van meer dan drie blokken tegelijk.
De meeste match-3-puzzelspellen zijn competitief van aard, en het doel van de speler is over het algemeen gewoon om de hoogste score te behalen die ze kunnen voordat de tijd om is, of aan een andere verliesvoorwaarde is voldaan. Enkele voorbeelden van match-3-spellen zijn Pokemon Puzzle League, Bejeweled en de recente hit Candy Crush Saga.
Ik besloot om de match-3-game te baseren die we gaan maken op Pokemon Puzzle League:
Als je nog nooit eerder hebt gespeeld, is PPL een vrij eenvoudige match-3 waarbij blokken vanaf de onderkant van het spelscherm stijgen en de speler wedstrijden moet maken om te voorkomen dat het spelscherm vol raakt. Als de blokken de top bereiken, verliest de speler en wordt hij gedwongen opnieuw opnieuw te beginnen.
Hier is een demo van de game waaraan we in de serie zullen werken:
In dit eerste artikel gaan we ons richten op het leggen van de basis voor onze game. Dit artikel richt zich specifiek op het opzetten van het project en het spawnen van een raster met willekeurige blokken voor de speler.
Voordat je aan deze tutorial begint, moet je ervoor zorgen dat je de nieuwste versie van Construct 2 (C2) installeert. Toen ik de originele versie van de game bouwde, gebruikte ik Release 122, dus als je een nieuwere versie hebt, zou het goed moeten gaan. Als je nog nooit C2 hebt gebruikt, moet je eerst deze handleiding raadplegen. Hierin worden de basisbeginselen beschreven van het gebruik van C2 en hoe je de meeste objecttypen maakt.
Download ook het grafische pakket dat ik voor deze zelfstudie heb gemaakt. Hoewel je natuurlijk elke gewenste afbeelding kunt gebruiken, zal ik een specifieke positionering geven voor veel items in deze tutorials, en die posities zijn gebaseerd op de afbeeldingen die ik heb gebruikt. Als u andere afbeeldingen gebruikt, moet u rekening houden met eventuele verschillen in grootte in die afbeeldingen bij het volgen van deze zelfstudies.
Zodra je alles hebt ingesteld en een goed begrip van C2 hebt, lees dan verder!
Voordat we daadwerkelijk alle gameplay kunnen bouwen, moeten we het project zelf opzetten. Laad C2 en volg deze stappen:
Accentsconagua
600x600.Achtergrond, de middelste laag naar Blocks, en de bovenste laag naar Game Field. GameBG. Achtergrond.650, 650. 
GameFieldBorder.9, -12.16, 732.Game Field.GameFieldBorder voorwerp. 368, -12 .
GameFieldBottom.197, 625.344, 150.Game Field.GameFieldBottom voorwerp. 196, -30.180.
Het laatste wat we moeten doen is een achtergrond maken voor het werkelijke gebied waarin de blokken zullen verschijnen.
0, en de Alpha naar 200.359, 570.195.294.Achtergrond
Het speelveld is nu voltooid, maar we moeten nog steeds een Sprite maken die voor de blokken kan worden gebruikt.
Voordat we verdergaan, wil ik de blokafbeeldingen uitleggen. Het grijze blok geeft een "inactief" blok weer, dat in een volgende tutorial zal worden geïmplementeerd. De resterende afbeeldingen zijn gegroepeerd in sets van drie voor elk blok: het eerste frame is voor wanneer het blok niet wordt gebruikt, het tweede is voor wanneer de speler het blok manipuleert en het derde is voor wanneer het blok is gematcht in een blok groep.
Tot slot, neem het blok dat we hebben gemaakt en plaats het ergens in de lay-out die zal voorkomen dat de speler het ziet tijdens een echt spel. Stel ook de grootte van het blok in 40, 40.
We hebben nu alle afbeeldingen toegevoegd die we nodig hebben voor dit artikel en kunnen doorgaan met het daadwerkelijk laten werken van de game.
In de definitieve versie van het spel zullen de blokken te allen tijde omhoog gaan en nieuwe blokken zullen van onderaf op het scherm drukken. Maar voor nu moeten we de basismechanica aan het werk krijgen, dus we gaan gewoon een 8x8 raster van blokken maken en het daarbij laten.
Ga naar Evenementblad 1 en voeg deze globale variabelen toe om de initiële spawning-positie van de Blocks te bepalen:
Global Variable: SPAWNX Value = 49 Constant = True Global Variable: SPAWNY Value = 526 Constant = True
We moeten ook nog een ding doen voordat we de eerste gebeurtenis maken: we moeten een instantievariabele maken voor het blok dat het blok vertelt welke kleur het is.
Maak een nieuwe instantievariabele voor het Block-object, noem deze Kleur en verander geen andere instellingen.
Nu zullen we onze eerste evenement maken. Het doel van dit evenement is om een statisch raster met blokken te maken voor testdoeleinden:
Gebeurtenis: Voorwaarde: Systeem> Aan het begin van de opmaak Voorwaarde: Systeem> Voor Naam: "Y" Start index = 0 Einde index = 7 Subgebeurtenis: Systeem> Voor Naam: "X" Start index = 0 Einde index = 7 Actie: Systeem> Create Object Object: Block X = (SPAWNX + (loopIndex ("X")) * (Block.Width + 2)) Y = (SPAWNY - (loopIndex ("Y")) * (Block.Width + 2) ) Beide formules zeggen in principe hetzelfde. Eerst voegen we 2 toe aan de blokbreedte zodat elk blok een buffer van 2px heeft tussen het blok en zijn buren om valse positieven te voorkomen bij het gebruik van botsingsdetectie. Vervolgens vermenigvuldigen we dat aantal met de huidige index in de for-lus en voegen dat toe aan de startpositie X of Y. We nemen ook af van de Y-waarde omdat in C2 het 0-punt op de Y-as bovenaan het spelscherm staat, dus door de waarde van de Y-positie te verlagen plaatsen we een object dichter bij de bovenkant van het scherm.
Dus wat levert dit op? Dit betekent dat wanneer de X- en Y-lussen worden herhaald en de waarden van X en Y toenemen, de positie waarin elk blok wordt geplaatst, verandert, wat uiteindelijk resulteert in een vierkant raster:
Als je het spel nu uitvoert, heb je een raster met blokken - maar in plaats van verschillende kleuren, zullen ze allemaal achtereenvolgens elk blokbeeld doorlopen.
Om dit op te lossen, moeten we twee dingen doen.
Eerst moeten we elk blok een kleurwaarde toewijzen met de instantievariabele die we eerder hebben gemaakt. Voeg hiervoor nog een actie toe:
Actie: Blokkeren> Waarde instellen Kleur = vloer (willekeurig (1,7))
Hierdoor krijgt het blok een willekeurige kleurwaarde van 1 tot 6. (De reden dat het niet van 1 tot 7 is, wordt uitgelegd in de uitleg van de Willekeurig functie.)
Uw functie zou er nu als volgt uit moeten zien:
We moeten ook een systeem toevoegen dat de afbeelding van een blok wijzigt op basis van de waarde. Hiertoe begint u met het toevoegen van een nieuwe Exemplaarvariabele aan het Block-object:
Exemplaarvariabele voor bloknaam: "IsMatched" Type: Booleaanse beginwaarde = false
Voeg nu een nieuw evenement toe:
Gebeurtenis: Systeem> Elke vinkje Actie: Blokkeren> Frame-waarde instellen = (Block.Color-1) * 3 + 1
Deze formule trekt eerst 1 af van de kleurwaarde van het blok om rekening te houden met het feit dat de waarden beginnen bij 1 in plaats van 0. Dan vermenigvuldigt dit getal met 3 om rekening te houden met het feit dat elk blok 3 animatieframes heeft. Als laatste voegt het 1 toe aan die waarde omdat de standaardafbeelding van een blok de eerste afbeelding in de reeks afbeeldingen is.
Laten we een snel voorbeeld bekijken met een blok met een kleurwaarde van 4, om te zien welk animatieframe het zal gebruiken. Eerst trekt het 1 van de kleurwaarde af om 3 te krijgen. Vervolgens vermenigvuldigt het dat getal met 3 om 9 te maken. Als laatste maakt het 1 van die waarde om 10. te maken. Dit betekent dat een blok met een kleurwaarde van 4 frame 10 zal gebruiken als het standaard animatieframe, en zal een paars / vierkant blok zijn.
Als je je spel nu uitvoert, zie je dat elk blok een andere kleur heeft, maar we hebben nog steeds geen animaties geïmplementeerd voor wanneer je muis over het blok zweeft of wanneer het is gematcht. Dit wordt behandeld in de volgende zelfstudie, samen met hoe je twee aangrenzende blokken kunt verwisselen.
Hier is een kleine demo van hoe de game er op dit moment uit zou moeten zien (neem hier de bron):
Klik om de demo te laden. Als u alleen wilt blijven werken, begin dan met het wijzigen van het animatieframe van het blok op basis van een gebeurtenis "Muis> Cursor is over object". Je zou ook kunnen beginnen met het gebruik van het "Slepen en neerzetten" -gedrag om het blok te manipuleren en na te denken over hoe je kunt bepalen wat de speler probeert te doen met het blok wanneer ze het gaan slepen of wanneer ze het laten vallen.
Bedankt voor het lezen van dit deel van de tutorial, waarin we de basis leggen voor ons Match-3-spel. Kom snel weer terug voor het volgende deel van de serie! Je kunt op de hoogte blijven via Facebook, Twitter, Google+, RSS of e-mail.
