In questo tutorial vi mostrerò un semplice e ottimo sistema per poter creare e controllare un input tramite swipe all'interno di Construct 3 (lo swipe funziona sia tramite mouse che touch).
Nell'esempio che andrò a mostrarvi, creeremo un semplice sistema di movimento a 4 direzioni (su, destra, giu e sinistra), basato sugli swipe. Il metodo che applicheremo può essere modificato e adattato a qualsiasi progetto e circostanza, come ad esempio l'aggiunta di swipe anche diagonali etc.
Detto questo direi che possiamo iniziare con la creazione del nostro progetto!
Creiamo gli oggetti necessari e impostiamo il Layout
Creiamo all'interno del nostro progetto 3 oggetti (anche se uno di essi, ovvero l'oggetto Text, non è necessario, e viene utilizzato in questo tutorial solo a scopo "didattico"):
- Oggetto Sprite (che chiameremo per comodità "Player")
- Oggetto Touch
- Oggetto Text
Dopodichè impostiamo il nostro Layout, inserendo al suo interno gli oggetti Player e Text (quest' ultimo ripeto che non è necessario al funzionamento dello swipe, quindi potete tranquillamente evitare di crearlo/inserirlo). Il loro posizionamento non è assolutamente importante, e non influenzerà sul nostro sistema di swipe.
Creiamo le variabili necessarie
Prima di impostare i vari eventi necessari al nostro sistema di swipe, è necessario creare 3 variabili che ci aiuteranno a far funzionare il tutto in modo semplice e corretto. Per comodità andremo a creare delle variabili globali, ma potete tranquillamente utilizzare variabili locali o d'oggetto in base alle vostre necessità/preferenze.
La variabili touchStartX e touchStartY conterranno le coordinate degli assi X e Y dove il nostro evento di touch avrà inizio.
La variabile minSwipeDistance conterrà il valore di distanza minimo tra il punto di inizio e il punto di fine swipe, necessario per far si che l'input di swipe sia accettato (parleremo nello specifico di questo controllo a breve).
Come funzionano gli angoli in Contruct 3
Prima di passare allo step successivo, volevo dedicare una semplice e veloce sezione al funzionamento degli angoli in Contruct 3, visto che ci serviranno per individuare la direzione di uno swipe.
Un angolo giro misura 360°. Come potete vedere dall'immagine qua sopra, in Construct 3 l'angolo viene iniziato a misurare dalla parte a est (0°), e continua in senso orario. Prendendo in considerazione solo i 4 punti cardinali, possiamo riassumere che:
- 0° = Destra/Est
- 90° = Giu/Sud
- 180° = Sinistra/Ovest
- 270° = Su/Nord
Controlliamo l'inizio dello swipe
Bene, adesso non ci resta che iniziare a programmare il funzionamento del nostro sistema di swipe.
Per prima cosa dobbiamo aggiungere un evento On Any Touch Start. Questo evento verrà eseguito ogni volta che lo schermo verrà toccato (o cliccato). Questo ci è utile per capire da dove il nostro eventuale swipe ha inizio.
Quando l'evento On Any Touch Start viene richiamato salveremo i valori di Touch.X e Touch.Y (ovvero i valori degli assi X e Y del punto in cui avviene il tocco), all'interno delle nostre variabili touchStartX e touchStartY che avevamo creato in precedenza.
Controlliamo l'esecuzione di uno swipe
Adesso non ci resta che capire dove l'evento touch viene concluso, e se effettivamente c'è stato uno swipe.
Inseriamo l'evento On Any Touch End che appunto viene richiamato tutte le volte che un tocco su schermo viene concluso.
Al suo interno inseriamo un sub-evento, per controllare se la distanza tra le coordinate X,Y del punto di avvio del tocco/click e le coordinate X,Y del punto di rilascio del tocco/click, è maggiore della distanza minima necessaria (ricordate la variabile minSwipeDistance che abbiamo settato ad inizio progetto?) per considerare uno swipe valido. Più il valore di minSwipeDistance è alto, più l'utente dovrà effettuare uno swipe "lungo" per far si che sia valido.
Verifichiamo la direzione dello swipe
Se lo swipe effettuato viene verificato, dobbiamo semplicemente capire in che direzione è stato fatto e effettuare i nostri movimenti di conseguenza.
Aggiungiamo quindi un sub-evento al nostro ultimo controllo, che se risulterà vero, procederà con l'esecuzione dei check posti al suo interno.
Prendendo in considerazione la precedente spiegazione dei valori degli angoli in Construct 3, possiamo dedurre che, ad esempio, uno swipe che viene eseguito all'interno di un intervallo di angoli compreso tra 225° e 315°, è sicuramente uno swipe effettuato verso l'alto.
Possiamo quindi inserire una serie di controlli if/else, verificando la direzione dell'angolo tramite l'evento Is Between Angles.
Inseriti i 4 controlli per ogni range di angoli per ogni direzione, il nostro progetto è finalmente concluso!
Qui in allegato trovate il progetto del tutorial, da poter scaricare per testarlo,studiarlo e modificarlo.
Buono sviluppo e buon divertimento su Construct 3!