Ieri vi abbiamo segnalato il nuovo aggiornamento per GameSalad, la piattaforma di GendaiGames per la creazione di giochi destinati a molteplici piattaforme, tra cui l’iPhone. Oggi partiamo con il primo tutorial di “BubiDevs” volto proprio a mostrarvi come creare un piccolo gioco con quest’applicazione, che è davver molto molto semplice!
In questo primo tutorial della serie “GameSalad Tutorials” vedremo come realizzare un semplicissimo giochino, che ci permetterà di muovere una navicella. Nulla di incredibile, diciamo un “HelloWorld” dei videogiochi! Buona lezione a tutti!
1. Preparare l’ambiente di sviluppo
Prima di iniziare con il tutorial, dovete collegarvi all’area download di GameSalad (dopo esservi registrati al sito in maniera gratuita), scaricare e installare i due componenti che ci vengono messi a disposizione:
- GameSalad Creator, il tool vero e proprio che ci permetterà di creare il nostro primo gioco;
- GameSalad Safari Plug-in, un componente che ci permetterà di fruire dei giochi che andremo a creare.
2. Creiamo il nostro progetto
Possiamo iniziare con il nostro tutorial! Apriamo GameSalad, ci apparirà una schermata come questa:
Come si può notare, possiamo scegliere diversi template, che ci forniranno degli elemento già pronti, semplificandoci il lavoro. Noi, però, scegliamo di fare tutto da soli, quindi selezioniamo “Empty” e clicchiamo su “Choose”.
La schermata che vi apparirà sarà come questa:
Come potete notare (dallo screen a cui ho aggiunto anche dei commenti) ho inserito il nome del nostro gioco, e una piccola descrizione. Nella sezione “Scenes” potete notare “Initial scene”, una scena che è inserita in automatico da GameSalad. In questo primo tutorial non gestiremo più scene, ma ci limiteremo ad utilizzare questa.
3. Inseriamo un “attore”
Il nostro gioco ora ha bisogno di un attore, di un personaggio!! Facciamo doppio clic sulla scena “Initial Scene”, entreremo nell’editor delle scene. Eccovi la schermata e alcuni commenti che vi permetteranno di famigliarizzare con i vari componenti:
Ora aggiungiamo il nostro attore. Facciamo clic sul pulsante “+” che notiamo sul fondo della sezione “Actors”. Avremo questo risultato:
Il nostro personaggio ha ora bisogno di una forma! Io ho deciso di utilizzare una semplice navicella, un UFO per intenderci, che vi posto di seguito:
Ovviamente potete utilizzare una qualsiasi immagine a vostro piacimento! Per inserire questa immagine andiamo nella sezione “Images”, a fianco di “Behaviors”. Ora ci sono due modi per importare l’immagine nel progetto:
- Clicchiamo sul tasto “+” a fondo pagina, e nella finestra di navigazione che si aprirà cerchiamo il nostro file e inseriamolo cliccando su “Open”
- Inseriamo l’immagine semplicemente con un “Drag&Drop”, ovvero trascinando l’immagine nel pannello in questione.
Avremo un pannello laterale che si presenterà così:
Trasciniamo ora l’immagine che abbiamo nella sezione “Images” sull'”Actor 1″. Avremo così impostato l’immagine del nostro personaggio, che sarà quindi una navicella.
4. Impostiamo un’azione
Ora che abbiamo impostato il nostro attore, dobbiamo configurare un’azione! Per ora ci limitiamo a fare in modo che, con la pressione dei tasti direzionali della tastiera, la navicella si muova di conseguenza.
Facciamo doppio clic sul nostro “Actor 1”, entreremo in una sezione in cui potremo modificare tutte le proprietà del nostro attore. La finestra in questione è così fatta:
Per impostare delle azioni a nostro piacimento dobbiamo creare una nuova regola. Facciamo clic sul bottone “Create Rule” in alto a destra. La schermata che vi apparirà va settata nel seguente modo:
Come potete notare, abbiamo selezionato “key”, ovvero stiamo dicendo al nostro gioco di considerare un evento legato alla tastiera. Nella casella “Keyboard” dobbiamo specificare quale bottone avvia la nostra azione: possiamo scrivere il bottone, oppure, molto più semplicemente, ci basterà cliccare su “Keyboard” per aprire una comodissima tastiera:
da cui potremo comodamente selezionare un tasto a nostro piacere! L’ultima opzione, infine, ci consente di decidere se dobbiamo considerare il momento in cui il tasto viene premuto oppure rilasciato.
Per ora abbiamo solo configurato il tasto. Ma l’azione? Anche in questo caso il procedimento è molto semplice. Dal menù “Behaviors” a sinistra selezioniamo il componente “Move”:
e trasciniamolo nella parte grigia, dove c’è scritto “Drag yout behaviors here”.
Configuriamo l’azione a nostro piacimento, nel mio caso ho deciso così:
La direzione è di 90°, ovvero verso Nord (chi ha un po’ di conoscenze di trigonometria dovrebbe trovare tutto molto famigliare), la velocità è di 80 (in questo caso possiamo decidere un valore a piacere).
Possiamo impostare anche le altre azioni (ovvero nelle altre tre direzioni mancanti) seguendo lo stesso procedimento appena utilizzato, variando solo il valore del campo “Direction”.
5. Proviamo il nostro gioco!
Torniamo nell’editor delle scene cliccando sulla freccia in alto a sinistra. Ora, trasciniamo il nostro attore nella scena, posizionandolo a nostro piacimento.
Per provare il gioco non dovremo far altro che cliccare sul bottone “Preview” nella barra in alto, ed il nostro gioco verrà avviato!
La nostra navicella si muove in maniera corretta!!
Sicuramente non abbiamo realizzato un vero e proprio gioco, però abbiamo preso un po’ di confidenza con questo nuovo tool di sviluppo, che è ancora in fase beta. Cosa ne pensate di questo strumento? Vi piace? Fatecelo sapere nei commenti e continueremo in questa direzione!
Leggi o Aggiungi Commenti