Lag et Match-3-spill i Construct 2 Animasjoner og blokkbytte

I den forrige artikkelen i denne serien brukte vi tid på å sette opp spillet vårt, slik at vi hadde alle nødvendige bilder på plass, og tilfeldig spyttet et rist av blokker for spilleren. Med disse systemene på plass, skal vi nå jobbe med grunnleggende funksjonalitet og gi spilleren muligheten til å manipulere spillfeltet.


Final Game Demo

Her er en demonstrasjon av spillet vi jobber med i denne serien:




1. Legge til animasjon

Vi avsluttet den tidligere opplæringen etter å ha gjort hver blokkvisning som en annen farge. Jeg trodde det ville være fint å plukke opp fra det nøyaktige stedet og begynne med å legge animasjon til blokkene slik at bildene endres basert på hva spilleren gjør eller gjorde. Den første animasjonen vi legger til, er en mus-over-begivenhet.

Først legger du til en mus ha innvendinger Layout 1. Deretter går du tilbake til Event Sheet 1 og legg til en ny Begivenhet.

 Hendelse: Mus> Markør er over objekt Objekt = Blokkering: Blokker> Angi rammeverdi = (Blokk.Color-1) * 3 + 2

Nå, hvis du går inn i spillet, bør bildet for blokkene endres når du svinger over dem, og bytter tilbake når du flytter markøren din bort.

Vi har en annen animasjonsbegivenhet å gjøre:

 Hendelse: Blokk> Er boolsk instans variabel innstilt Instansvariabel = IsMatched Action: Blokker> Angi rammeverdi = (Block.Color-1) * 3 + 3

Vi må også sørge for at når du svinger over en matchet blokk, endres ikke bildet, så legg til en annen betingelse for musepekeren som vi gjorde:

 Tilstand: Inverter: Blokk> Er boolsk instans variabel sett Instans variabel = IsMatched

Invertering betyr at hoverbildet bare brukes hvis blokken ikke er en del av en kamp. Siden vi ikke har et matchende system på plass, bør du ikke se noen endringer, men når vi går videre, kommer denne hendelsen til å spille.

Med alle tre hendelsene på plass, bør arrangementet ditt nå se slik ut:



2. Bytte to naboblokker

Den neste tingen vi skal jobbe med, gir spilleren muligheten til å bytte naboblokker. For å få dette systemet til å fungere, bruker vi en kombinasjon av Arrayer og funksjoner, så hvis du ikke har brukt dem i C2 før, ta kontakt med håndboken for å finne ut mer.

Hva jobber vi med

Før jeg forklarer hvordan man lager systemet, vil jeg at du skal se hva vi lager, og forklar kort hvordan det virker. For å se hvordan systemet vil bli, kan du spille demoen nedenfor. For å bytte blokker, klikk og dra dem på toppen av et nærliggende sted i en av de fire kardinalretningene.

Klikk for å laste demoen.

Du bør legge merke til at når du begynner å dra en blokk, vises fire firkantede firkanter på toppen av blokkene som ligger rett ved siden av den. Når du slipper blokken, er det et arrangement som kontrollerer om blokken overlapper noen av disse fargede rutene.

Hvis blokken overlapper en av de fargede rutene, bytter den blokken du flyttet med blokken som det fargede firkantet ble tegnet på, eller bare flyttes den flyttede blokken til den nye plasseringen. Hvis blokken din ikke overlapper en av de fargede rutene, gjør det ingenting. Det gjør også ingenting hvis blokken overlapper flere fargede firkanter.

Grunnen til at vi bruker dette systemet, i stedet for å sjekke om blokken selv overlapper en annen blokk, er at vi ikke har noen enkel måte å sjekke hvor de to blokkene er i forhold til hverandre. Ved å reposisjonere de fargede rutene til de gyldige stedene og deretter bruke dem som grunnlag for våre sjekker, har vi en mye bedre ide om hva spilleren hadde til hensikt å gjøre da de prøvde å bytte ut.

Legge til de fargede blokkene

Nå som vi forstår hva som skjer, kan vi begynne å implementere det. Gå til Layout 1 og legg til en Funksjon objekt og en Array gjenstand. Forlate Funksjon objektets navn som Funksjon, men gi nytt navn til Array til BlockPositions. De Funksjon objektet tillater oss å bruke funksjoner innenfor vår kode, og Array er det vi vil bruke til å lagre posisjonene til blokkene vi bytter. Vi må også sette inn Høyde og Dybde av matrisen til 2.

Når du har gjort det, opprett fire nye sprites å bruke som våre fargede firkanter:

  • En grønn sprite, navngitt BottomBlock.
  • En rød sprite, navngitt LeftBlock.
  • En gul sprite, navngitt RightBlock.
  • En blå sprite, navngitt TopBlock.

Fargene egentlig ikke betyr noe, men å bruke disse fargene gjør hverandre annerledes, så de er enkle å identifisere, og gjør det lettere å følge med siden det er det jeg gjorde. Disse sprites bør plasseres utenfor layoutet slik at spilleren ikke kan se dem.

Du bør også sette størrelsen på hver av disse til 30,30 og gi dem hver en opacity av 0. I demonstrasjonen ovenfor er de bare litt gjennomsiktige fordi jeg ønsket at du skulle kunne se hva som skjedde, men i selve spillet skal spilleren ikke kunne se dem i det hele tatt.

Til slutt velger du din faktiske Blokkere objekt og legg til Dra slipp oppførsel til det.

Gå nå tilbake til Event Sheet 1 og opprett en ny Begivenhet med seks handlinger.

Hendelse: Blokk> På DragDrop dra start Handling: BlockPositions> Angi XY X = 0 Y = 0 Verdi = Block.X Action: BlockPositions> Angi XY X = 0 Y = 1 Verdi = Blokk.Y Handling: BottomBlock> Angi posisjon X = Block.XY = Block.Y - (Block.Width + 2) Handling: TopBlock> Angi posisjon X = Block.XY = Block.Y + (Block.Width + 2) Handling: LeftBlock> Angi posisjon X = Blokk. X - (Block.Width + 2) Y = Block.Y Action: RightBlock> Angi posisjon X = Block.X + (Block.Width + 2) Y = Block.Y

Denne hendelsen lagrer startposisjonen til blokken du flyttet, og den beveger de fargede rutene slik at de er i de riktige posisjonene i forhold til blokken som blir flyttet.

Ditt arrangement bør se slik ut:


Finne ut hva spilleren gjør

Den neste hendelsen vi vil legge til, utfører sjekken for å se hva bytte spilleren prøver å gjøre.

Først vil arrangementet lytte etter når spilleren "faller" blokken de beveger seg. Det vil da utføre en serie kontroller for å se hvilken farget firkant, om noen, blokken kolliderer med, og enten utføre den aktuelle bytte eller bare tilbakestille den bevegelige blokkens posisjon.

 Hendelse: Blokk> På DragDrop-dråpe Sub-Event: Blokk> Overlapper BottomBlock Action: BlockPositions> Angi XY X = 1 Y = 0 Verdi = BottomBlock.X Action: BlockPositions> Angi XY X = 1 Y = 1 Verdi = BottomBlock .Y Handling: Blokk> Angi posisjon X = BlockPositions.At (0,0) Y = BlockPositions.At (0,1)

Slik ser det så langt ut:


Akkurat nå, Begivenhet bare kontoer for bytteavtaler med Blokkere under den som flyttes. For å legge til de andre, høyreklikk på underarrangementet og legg til en Ellers. Deretter kopierer tilstanden fra den første underhendelsen til Else-hendelsen, men endrer målet fra BottomBlock til TopBlock.

Nå kopierer du handlinger fra den opprinnelige underhendelsen til Else-arrangementet, og endrer igjen eventuelle forekomster av BottomBlock til TopBlock. Gjør dette to ganger med LeftBlock og RightBlock, slik at du har fire underhendelser totalt, og slik at arrangementet ditt ser slik ut:


Til slutt legger du til en annen Else-event:

 Underhendelse: Øvrig handling: Blokk> Angi posisjon X = BlockPositions.At (0,0) Y = BlockPositions.At (0,1)

Faktisk bytte blokkene

Herfra vil vi implementere bytte mekaniker seg selv. For å bytte blokkene vil vi først flytte blokken som spilleren dratt til et sted utenfor skjermen.

Vi gjør dette fordi vi må finne blokkene basert på deres posisjoner før vi kan manipulere dem - hvis vi startet med å plassere en blokk i den lagrede posisjonen til den andre blokken, ville den sette dem begge på samme sted og gjøre dem svært vanskelige å skille fra hverandre. Ved å flytte blokken til et bestemt sted som vi vet, er det ingen andre blokker som kommer inn, hindrer vi at en blokk fra alltid er på samme sted som en annen blokk, og forhindrer at systemet har et problem som bestemmer hvilken blokk vi vil ha.

Vi vil da flytte blokken de bytte ut opprinnelig blokkere med til den opprinnelige blokkens plassering. Til slutt vil vi flytte den opprinnelige blokken til plasseringen av den andre blokken fra stedet utenfor skjermen, og nullstille informasjonen i arrayet til 0.

 Hendelse: Funksjon> På funksjon Navn: "SwapBlocks" Sub-Event: Tilstand: Blokk> Sammenlign XX = BlockPositions.At (0,0) Tilstand: Blokk> Sammenlign YY = BlockPositions.At (0,1) Handling: Blokk> Sett Posisjon X = -80 Y = -80 Underhendelse: Tilstand: Blokk> Sammenlign XX = BlockPositions.At (1,0) Tilstand: Blokk> Sammenlign YY = BlockPositions.At (1,1) Handling: Blokk> Angi posisjon X = BlockPositions.At (0,0) Y = BlockPositions.At (0,1) Sub-Event: Tilstand: Blokk> Sammenlign XX = -80 Tilstand: Blokk> Sammenlign YY = -80 Handling: Blokk> Angi posisjon X = BlockPositions .At (1,0) Y = BlockPositions.At (1,1) Handling: BlockPositions> Sett til XY X = 0 Y = 0 Verdi = 0 Handling: BlockPositions> Angi XY X = 0 Y = 1 Verdi = 0 Handling : BlockPositions> Sett til XY X = 1 Y = 0 Verdi = 0 Handling: BlockPositions> Angi XY X = 1 Y = 1 Verdi = 0

Din Begivenhet ark for det skal se slik ut:


Gå nå tilbake til de fire kontrollene vi lagde tidligere som bestemte hvilken farget firkant den slepte blokken kolliderte med, og legg til dette Handling til slutten av handlinger liste for alle fire:

 Handling: Funksjon> Anropsfunksjon Navn: "SwapBlocks"

Å sørge for at spilleren har ment å gjøre det

Hvis du kjører spillet nå, vil det fungere nesten perfekt. Det eneste som det ikke gjør ennå, er å se om blokken overlapper flere fargede firkanter. (Hvis det er, vil vi ikke at noe skal skje fordi det betyr at flyttingen kan være en feil.)

For øyeblikket kontrollerer den de fargede rutene i ordren Bunn, Topp, Venstre, Ikke sant, og avhengig av hva den finner først, bytter den med. For å fikse dette må vi legge to omvendte forhold til hver sjekk.

Til Topp og Bunn sjekker, legg til disse betingelsene:

 Tilstand: Invertert: Blokk> Overlapper en annen gjenstand Objekt: VenstreBlok Tilstand: Invertert: Blokk> Overlapper en annen objekt Objekt: HøyreBlock

Til Ikke sant og Venstre sjekker, legg til disse betingelsene:

 Tilstand: Invertert: Blokk> Overlapper en annen gjenstand Objekt: TopBlock Tilstand: Invertert: Blokk> Overlapper en annen objekt Objekt: BottomBlock

Siden rutene er bare 30x30px, er det umulig for blokken å overlappe to på motsatte ender samtidig. Disse kontrollene tillater oss å sørge for at dravebevegelsen ikke er skjevt til hver side for mye, og sikrer at spilleren har det meste rettbevegelse, så det er klart at vi oppdager den riktige typen bytte.

Din Begivenhet arket skal nå se slik ut:


Og her er en demonstrasjon av spillet vårt i sin nåværende tilstand:

Klikk for å laste demoen.

Konklusjon

Vi har nå en fullt funksjonell bytte mekaniker. I den neste opplæringen vil vi sette opp et sterkt kampdeteksjonssystem og begynne å se spillet i praksis.

Hvis du vil fortsette å arbeide på egenhånd, bør du se på hvordan du kan oppdage når to blokker er i samme farge og hvordan du vil vite om de er ved siden av hverandre, og om de danner en full gruppe. Et godt sted å starte ville være med a System> For hver hendelse med Blokkere objekt, og utfør noen form for kontroll på hver Blokkere individuelt.

Jeg håper du likte denne opplæringen og nyter serien så langt; sørg for at du kommer tilbake snart for neste avdrag.