Share
Benvenuto in una nuova serie di tutorial in cui ti mostrerò come costruire un puzzle game Match-3, da zero, in Construct 2. In questa prima parte stiamo per gettare le basi del gioco e ottenere la griglia di base del puzzle sullo schermo.
Un gioco Match-3 è un puzzle basato su blocchi in cui si spostano i blocchi nell'area di gioco per creare gruppi di tre o più che condividono un attributo comune (come un colore o una forma). Nella maggior parte dei giochi match-3 il giocatore riceve anche bonus per abbinare più di tre blocchi alla volta.
La maggior parte dei giochi di puzzle di combinazione a 3 sono di natura competitiva e l'obiettivo del giocatore è generalmente solo quello di ottenere il punteggio più alto possibile prima che finisca il loro tempo, o qualche altra condizione di perdita è soddisfatta. Alcuni esempi di giochi match-3 includono Pokemon Puzzle League, Bejeweled e il recente successo Candy Crush Saga.
Ho deciso di basare il gioco match-3 che realizzeremo su Pokemon Puzzle League:
Se non lo hai mai giocato prima, PPL è un match 3 abbastanza semplice in cui i blocchi salgono dalla parte inferiore della schermata di gioco e il giocatore deve creare partite per evitare che la schermata di gioco si riempia. Se i blocchi raggiungono la cima, il giocatore perde ed è costretto a ricominciare tutto da capo.
Ecco una demo del gioco su cui lavoreremo per tutta la serie:
In questo primo articolo ci concentreremo sul porre le basi per il nostro gioco. Questo articolo si concentrerà in particolare sull'impostazione del progetto e genererà una griglia di blocchi casuali per il giocatore.
Prima di iniziare questo tutorial, assicurati di installare la versione più recente di Construct 2 (C2). Quando ho creato la versione originale del gioco utilizzavo la Release 122, quindi se hai una versione più recente di quella, dovresti stare bene. Inoltre, se non hai mai utilizzato C2 prima di dover dare un'occhiata a questa guida che descrive in dettaglio le basi dell'utilizzo di C2 e come creare la maggior parte dei tipi di oggetti.
Dovresti anche scaricare il pacchetto grafico che ho creato per questo tutorial. Ovviamente puoi utilizzare qualsiasi grafica desideri, assegnando un posizionamento specifico per molti articoli in questi tutorial e tali posizioni si basano sulle immagini che ho utilizzato. Se utilizzi altri elementi grafici dovrai tenere conto di eventuali differenze di dimensioni in tali grafici quando segui questi tutorial.
Una volta che hai impostato tutto e hai una buona conoscenza di C2, continua a leggere!
Prima di costruire effettivamente tutto il gameplay, abbiamo bisogno di impostare il progetto stesso. Carica C2 e segui questi passaggi:
Accentsconagua
600x600.sfondo, lo strato intermedio a blocchi, e lo strato superiore a Campo di gioco. GameBG. sfondo.650, 650. 
GameFieldBorder.9, -12.16, 732.Campo di gioco.GameFieldBorder oggetto. 368, -12 .
GameFieldBottom.197, 625.344, 150.Campo di gioco.GameFieldBottom oggetto. 196, -30.180.
L'ultima cosa che dobbiamo fare è creare uno sfondo per l'area effettiva in cui appariranno i blocchi.
0, e il Alfa a 200.359, 570.195.294.sfondo
Il campo di gioco è ora completo, ma dobbiamo ancora creare uno Sprite che possa essere usato per i Blocchi.
Prima di andare avanti, mi piacerebbe spiegare le immagini del blocco. Il blocco grigio è lì per rappresentare un blocco "inattivo", che sarà implementato in un prossimo tutorial. Le restanti immagini sono raggruppate in gruppi di tre per ogni blocco: il primo fotogramma è per quando il blocco non viene utilizzato, il secondo è per quando il giocatore sta manipolando il blocco, e il terzo è per quando il blocco è abbinato in un gruppo.
Infine, prendi il blocco che abbiamo creato e posizionalo da qualche parte nel layout che impedirà al giocatore di vederlo durante una partita vera e propria. Inoltre, imposta le dimensioni del blocco su 40, 40.
Ora abbiamo inserito tutte le immagini di cui abbiamo bisogno per questo articolo e possiamo passare a far funzionare effettivamente il gioco.
Nella versione finale del gioco i blocchi si muoveranno in su in ogni momento, e nuovi blocchi spingeranno sullo schermo dal basso. Per ora, però, abbiamo bisogno di far funzionare i meccanismi di base, quindi creeremo una griglia di blocchi 8x8 e lasceremo che.
Vai a Scheda evento 1 e aggiungi queste variabili globali per definire la posizione di spawn iniziale dei blocchi:
Variabile globale: Valore SPAWNX = 49 Costante = Variabile globale reale: Valore SPAWNY = 526 Costante = True
Dobbiamo anche fare un'altra cosa prima di fare il primo evento: dobbiamo creare una variabile di istanza per il blocco che dice al blocco di che colore è.
Crea una nuova variabile di istanza per l'oggetto Block, chiamala Colore e non modificare altre impostazioni.
Ora faremo il nostro primo evento. L'obiettivo di questo evento è creare una griglia statica di blocchi a scopo di test:
Evento: Condizione: Sistema> All'avvio del layout Condizione: Sistema> Nome: "Y" Indice iniziale = 0 Indice finale = 7 Sottoevente: Sistema> Nome: "X" Indice iniziale = 0 Indice finale = 7 Azione: Sistema> Crea oggetto: Block X = (SPAWNX + (loopIndex ("X")) * (Block.Width + 2)) Y = (SPAWNY - (loopIndex ("Y")) * (Block.Width + 2) ) Entrambe queste formule dicono fondamentalmente la stessa cosa. Innanzitutto, aggiungiamo 2 alla larghezza del blocco in modo che ogni blocco abbia un buffer di 2px tra esso ei suoi vicini per evitare falsi positivi quando si utilizza il rilevamento delle collisioni. Quindi, moltiplichiamo quel numero per l'indice corrente nel ciclo for, e lo aggiungiamo alla posizione iniziale X o Y. Inoltre, stiamo sottraendo dal valore Y perché in C2 il punto 0 sull'asse Y si trova nella parte superiore della schermata di gioco, quindi diminuendo il valore della posizione Y stiamo mettendo un oggetto più vicino alla parte superiore dello schermo.
Quindi cosa fa questo? Ciò significa che mentre i cicli X e Y si ripetono, e aumentano i valori di X e Y, la posizione che inserisce ogni blocco cambierà e alla fine si otterrà una griglia quadrata:
Se esegui il gioco a questo punto, avrai una griglia di blocchi - ma, piuttosto che essere di colori diversi, passeranno tutti in sequenza ogni immagine di blocco in successione.
Per risolvere questo problema, dobbiamo fare due cose.
Per prima cosa, dobbiamo assegnare a ciascun blocco un valore di colore usando la variabile di istanza creata in precedenza. Per fare ciò, aggiungi un'altra azione:
Azione: Blocca> Imposta valore Colore = piano (Casuale (1,7))
Questo assegnerà al blocco un valore di colore casuale compreso tra 1 e 6. (Il motivo per cui non è compreso tra 1 e 7 è spiegato nella spiegazione del Casuale funzione.)
La tua funzione dovrebbe ora assomigliare a questa:
Abbiamo anche bisogno di aggiungere un sistema che modifichi l'immagine di un blocco in base al suo valore. Per fare ciò, inizia aggiungendo una nuova variabile istanza all'oggetto Blocco:
Variabile di istanza per il nome del blocco: "IsMatched" Tipo: valore iniziale booleano = falso
Ora aggiungi un nuovo evento:
Evento: Sistema> Ogni segno di spunta Azione: Blocca> Imposta valore fotogramma = (Block.Color-1) * 3 + 1
Questa formula prima sottrae 1 dal valore del colore del blocco per tenere conto del fatto che i valori iniziano da 1 piuttosto che da 0. Quindi, moltiplica quel numero per 3 per tenere conto del fatto che ogni blocco ha 3 fotogrammi di animazione. Infine, aggiunge 1 a quel valore poiché l'immagine standard di un blocco è la prima immagine nel set di immagini.
Diamo un'occhiata ad un rapido esempio con un Block che ha un valore di colore di 4, per vedere quale frame di animazione userà. Prima sottrae 1 dal valore del colore per ottenere 3. Quindi moltiplica quel numero per 3 per fare 9. Infine aggiunge 1 a quel valore per fare 10. Ciò significa che un blocco con un valore di colore di 4 utilizzerà il fotogramma 10 come la sua cornice di animazione predefinita e sarà un blocco viola / quadrato.
Se esegui il gioco ora vedrai che ogni blocco è di un colore diverso, ma non abbiamo ancora implementato le animazioni per quando il mouse passa con il mouse sopra il blocco o quando è abbinato. Questo sarà trattato nel prossimo tutorial, insieme a come scambiare due blocchi vicini.
Ecco una piccola demo di come dovrebbe apparire il gioco a questo punto (prendi la fonte qui):
Clicca per caricare la demo. Se vuoi continuare a lavorare da solo, inizia a guardare a cambiare il frame di animazione del blocco basato su un evento "Mouse> Il cursore è sopra l'oggetto". Potresti anche iniziare a guardare usando il comportamento "Drag & Drop" per manipolare il Block, e considerando come determinare cosa il giocatore sta cercando di fare con il Block quando inizia a trascinarlo o quando lo rilascia.
Grazie per aver letto questa parte del tutorial, dove abbiamo impostato le basi per il nostro gioco Match-3. Torna presto per la prossima parte della serie! Puoi tenerti aggiornato tramite Facebook, Twitter, Google+, RSS o e-mail.
