Lag et Match-3-spill i Construct 2 Grunnleggende

Velkommen til en ny serie av opplæringsprogrammer hvor jeg skal vise deg hvordan du bygger et Match-3-puslespill fra grunnen av i Construct 2. I denne første delen skal vi legge grunnlaget for spillet og få det grunnleggende puslespillet på skjermen.


Introduksjon

Et Match-3-spill er et blokkbasert puslespill hvor du beveger blokker rundt i spillområdet for å lage grupper på tre eller flere som deler et felles attributt (for eksempel en farge eller en form). I de fleste match-3 spill er spilleren også gitt bonuser for å matche mer enn tre blokker samtidig.

De fleste match-3 puslespill er konkurransedyktige i naturen, og spillerenes mål er generelt bare for å få den høyeste poengsummen de kan før tiden går ut, eller en annen tapstilstand er oppfylt. Noen eksempler på match-3-spill inkluderer Pokemon Puzzle League, Bejeweled, og den siste hit Candy Crush Saga.


Spillet vi skal gjøre

Jeg bestemte meg for å basere match-3-spillet som vi skal lage på Pokemon Puzzle League:


Klikk og dra tilgrensende blokker for å bytte dem. Prøv å matche tre på rad eller kolonne. Ikke la blokkene nå toppen!

Hvis du aldri har spilt det før, er PPL en ganske enkel kamp-3 hvor blokker stiger fra bunnen av spillskjermbildet, og spilleren må opprette kamper for å forhindre at spillskjermbildet fylles opp. Hvis blokkene når toppen, mister spilleren og er nødt til å starte om igjen.

Her er en demonstrasjon av spillet vi skal jobbe for i hele serien:



I denne første artikkelen skal vi fokusere på å legge grunnlaget for spillet vårt. Denne artikkelen vil fokusere spesielt på å sette opp prosjektet og gyte et rutenett av tilfeldige blokker for spilleren.


Før vi begynner

Før du begynner med denne opplæringen, bør du sørge for å installere den nyeste versjonen av Construct 2 (C2). Da jeg bygget den opprinnelige versjonen av spillet, brukte jeg Release 122, så lenge du har en nyere versjon enn det, burde du ha det bra. På toppen av det, hvis du aldri har brukt C2 før du bør sjekke ut denne veiledningen som beskriver grunnleggende om bruk av C2 og hvordan du lager de fleste objekttyper.

Du bør også laste ned grafikkpakken jeg opprettet for denne opplæringen. Selvfølgelig kan du bruke hvilken grafikk du vil, jeg vil gi spesifikk posisjonering for mange elementer i disse opplæringene, og disse stillingene er basert på bildene jeg brukte. Hvis du bruker annen grafikk, må du registrere eventuelle størrelsesforskjeller i grafikken når du følger disse opplæringsprogrammene.

Når du har alt satt opp og har en god forståelse av C2, les videre!


Sette opp prosjektet

Før vi faktisk bygger hele spillingen, må vi sette opp selve prosjektet. Legg inn C2 og følg disse trinnene:

  1. Start et nytt prosjekt.
  2. I Prosjektegenskaper, sett vinduets størrelse til 600x600.
  3. Fyll ut Navn og Forfatter Enger.
  4. Gå til lag panel og legg til to nye lag.
  5. Gi nytt navn til det laveste laget til Bakgrunn, mellomlaget til blokker, og topplaget til Spillfelt.
  6. Gå inn til Layout 1 og sett inn a Flislagt bakgrunn gjenstand.
    1. For Flislagt bakgrunn objekt, bruk BG Bilder / StandardBGTile.bmp fra grafikkpakken.
    2. Gå til objektets egenskaper og endre navn på den GameBG.
    3. Sett objektet Lag til Bakgrunn.
    4. Sett objektet Størrelse å være 650, 650.
    5. Plasser objektet slik at det fyller hele synlig område av oppsettet og ser ut som dette:
  7. Nå, opprett en annen Flislagt bakgrunn gjenstand.
    1. Bruk bildet Spillfeltbilder / GameFieldBorder.bmp.
    2. Navn objektet GameFieldBorder.
    3. Sett Stilling til 9, -12.
    4. Sett Størrelse til 16, 732.
    5. Sett Lag til Spillfelt.
  8. Lag en kopi av  GameFieldBorder gjenstand.
    1. Sett Stilling av kopien til  368, -12 .
  9. Deretter oppretter du en Sprite gjenstand.
    1. Bruk bildet Game Field Images / GameFieldBottom.png.
    2. Navngi det GameFieldBottom.
    3. Sett Stilling til 197, 625.
    4. Sett Størrelse til 344, 150.
    5. Sett Lag til Spillfelt.
  10. Lag en kopi av GameFieldBottom gjenstand.
    1. Sett Stilling til 196, -30.
    2. Sett Angle til 180.

Det siste vi må gjøre er å lage en bakgrunn for det aktuelle området blokkene vil vises i.

  1. Lage en ny Sprite gjenstand.
    1. Gå til Fargevelger og sett rød, Grønn, og Blå til 0, og Alpha til 200.
    2. Bruke Paint Bucket å fylle hele bildet med denne fargen.
    3. Lukk animasjonseditoren.
    4. Sett Størrelse til 359, 570.
    5. Sett Stilling til 195294.
    6. Sett Lag til Bakgrunn

Spillfeltet er nå fullført, men vi må fortsatt lage en Sprite som kan brukes til blokkene. 

  1. Lag en ny Sprite gjenstand.
    1. Med animasjonsredigereren åpen, høyreklikk i Animasjonsrammer vindu og velg "Importer rammer ... ".
    2. Velg hvert bilde i blokker mappe fra grafikkpakken, og importer dem alle.
    3. Slett Ramme 0, slik at det grå blokkbildet er Ramme 0, og det er ingen tomramme.
    4. Kontroller at rammene dine er i samme rekkefølge som blokkene mine i bildet nedenfor:

Før vi går videre, vil jeg gjerne forklare blokkbildene. Den grå blokken er der for å representere en "inaktiv" blokk, som vil bli implementert i en kommende opplæring. De resterende bildene er gruppert i sett med tre for hver blokk: Den første rammen er for når blokken ikke blir brukt, den andre er for når spilleren manipulerer blokken, og den tredje er for når blokken er tilpasset til en gruppe.

Til slutt tar du blokken vi har laget og legger den et sted i layoutet som forhindrer spilleren i å se det under et aktuelt spill. Still også blokkens størrelse til 40, 40.

Vi har nå tatt med alle bildene vi trenger for denne artikkelen, og kan fortsette å faktisk gjøre spillet arbeidet.


Gjøre et tilfeldig blokkeringsnett

I den endelige versjonen av spillet vil blokkene bevege seg til alle tider, og nye blokker vil skyve på skjermen fra bunnen. For nå må vi imidlertid få de grunnleggende mekanikene til å fungere, så vi skal bare gyte et 8x8 gitter av blokker og la det være der.

Gå til Event Sheet 1 og legg til disse globale variablene for å definere den første gyteposisjonen til blokkene:

 Global Variabel: SPAWNX Verdi = 49 Konstant = True Global Variabel: SPAWNY Verdi = 526 Konstant = Sant

Vi må også gjøre en annen ting før vi gjør den første hendelsen: vi må opprette en instansvariabel for blokken som forteller blokken hvilken farge det er.

Opprett en ny instansvariabel for blokkobjektet, navnet på det Farge og ikke endre noen andre innstillinger.

Nå skal vi lage vår første begivenhet. Målet med denne hendelsen er å lage et statisk rutenett av blokker for testformål:

 Begivenhet: Tilstand: System> Ved start av oppsett Tilstand: System> For Navn: "Y" Start indeks = 0 Sluttindeks = 7 Underhendelse: System> For Navn: "X" Start indeks = 0 Sluttindeks = 7 Handling: System> Lag objektobjekt: Blokk X = (SPAWNX + (loopIndex ("X")) * (Block.Width + 2)) Y = (SPAWNY (loopIndex ("Y")) * (Block.Width + 2) )

Begge disse formlene sier i utgangspunktet det samme. Først legger vi til 2 til blokkbredden slik at hver blokk har en 2px buffer mellom den og naboene for å forhindre falske positive ved bruk av kollisionsdeteksjon. Da multipliserer vi dette nummeret med den nåværende indeksen i forløp, og legger til det i startposisjonen X eller Y. Også, vi trekker fra Y-verdien fordi i C2 er 0-punktet på Y-aksen øverst på spillskjermen, så ved å redusere Y-posisjonens verdi legger vi en gjenstand nærmere toppen av skjermen.

Så hva gjør dette? Dette betyr at når X- og Y-løkkene itererer, og verdiene for X og Y øker, vil plasseringen som setter hver blokk inn, endres, noe som til slutt vil resultere i et firkantet rutenett:

Hvis du kjører spillet på dette punktet, vil du ha et rutenett med blokker - men i stedet for å være forskjellige farger, vil de alle bare sykle gjennom hvert blokkbilde i rekkefølge.

For å fikse dette må vi gjøre to ting.

Først må vi tilordne hver blokk en fargevariant ved hjelp av forekommelsesvariabelen vi laget tidligere. For å gjøre dette, legg til en annen handling:

 Handling: Blokk> Angi verdi Farge = gulv (Tilfeldig (1,7))

Dette vil tildele blokken en tilfeldig fargevare fra 1 til 6. (Årsaken til at den ikke er fra 1 til 7 er forklart i forklaringen til Tilfeldig funksjon.)

Din funksjon bør nå se slik ut:

Vi må også legge til et system som endrer bildet av en blokk basert på verdien. For å gjøre dette, starter du ved å legge til en ny instansvariabel i blokkobjektet:

 Instansvariabel for blokknavn: "IsMatched" Type: Boolean initial verdi = false

Legg nå til en ny hendelse:

 Begivenhet: System> Alle Tick-handlinger: Blokker> Angi rammeverdi = (Block.Color-1) * 3 + 1

Denne formelen trekker først 1 fra blokkens fargevare for å regne med at verdiene starter ved 1 i stedet for 0. Deretter multipliserer dette tallet med 3 for å regne med at hver blokk har 3 animasjonsrammer. Til slutt legger det til 1 til den verdien siden standardbilde av en blokk er det første bildet i settet med bilder.

La oss se på et raskt eksempel med en blokk som har en fargevalg på 4, for å se hvilken animasjonsramme den skal bruke. Først trekker det 1 fra fargeværdien for å få 3. Deretter multipliserer dette tallet med 3 for å lage 9. Til slutt legger det til 1 til den verdien for å gjøre 10. Dette betyr at en blokk med en fargevalg på 4 vil bruke ramme 10 som standard animasjonsramme, og vil være en lilla / firkantet blokk.

Hvis du kjører spillet ditt nå, vil du se at hver blokk er en annen farge, men vi har fortsatt ikke implementert animasjoner for når musen svever over blokken eller når den passer. Dette vil bli dekket i neste opplæring, sammen med hvordan du bytter to naboblokker.

Her er en liten demonstrasjon av hvordan spillet skal se ut på dette punktet (ta kilden her):

Klikk for å laste demoen.

Hvis du vil fortsette å jobbe på egenhånd, må du begynne å se på å endre Blokkens animasjonsramme basert på en "Mus> Markør er over objekt" -hendelse. Du kan også begynne å se på å bruke "Dra og slipp" atferden for å manipulere Blokken, og vurderer hvordan du bestemmer hva spilleren prøver å gjøre med Blokken når de begynner å dra den, eller når de slipper den.


Konklusjon

Takk for at du har lest denne delen av opplæringen, der vi satte grunnleggende grunnlaget for vårt Match-3-spill. Kom igjen snart for neste del av serien! Du kan holde deg oppdatert via Facebook, Twitter, Google+, RSS eller e-post.