-
1
Stencyl
Sviluppare un platform game
Come software di base viene utilizzato Stencyl, un software
gratuito (nella sua versione base) semplice da
programmare, perchè basato sull’utilizzo di mattoncini da
aggregare tra loro per comporre il codice di
programmazione. Questo approccio, seppure un po’ lungo, permette
anche a chi non ha grossa
dimestichezza con linguaggi di programmazione di poter creare in
pochissimo tempo un gioco
perfettamente funzionante.
I giochi realizzati con Stencyl possono essere pubblicati in
formato Flash oppure per iOS (quindi iPhone e
iPad). Dalla versione 3.0 (ancora in beta) si potranno
pubblicare giochi su Android e in formato HTML5
Creare un game
Per creare un nuovo game occorre semplicemente selezionare il
menu File -> Create new -> Game,
selezionare ‘blank game’ e infine ‘Next’. A questo punto
inseriamo il nome che vogliamo dare al game
(‘platformer’) e lasciamo le dimensioni del gioco con le
impostazioni predefinite (640 x 480).
http://www.stencyl.com/
-
2
Creare una scena (livello)
Per creare una nuova scena, da Stencyl eseguire i passi
seguenti:
Ogni gioco deve avere almeno una scena, per cui clicchiamo su
“click here to create one”.
Inseriamo il nome ‘scena 1′ non modificando gli altri
parametri.
Viene visualizzata l’interfaccia per gestire una scena:
Come si vede nell’immagine, è apparsa una linguetta a fianco di
‘dashboard’ con il nome ‘scena 1’.
Stencyl, come altri software per creare videogiochi, utilizza i
tiles per realizzare la grafica delle schermate.
I tiles sono delle piccole immagini (nel nostro caso, 32 x 32
pixel) con le quali possiamo comporre le
piattaforme, il terreno, le nuvole, gli alberi etc. Queste
immagini, simili quindi a delle piastrelle, possono
essere utilizzate più volte nella scena, permettendo di creare
un’immagine molto grande ma occupando
pochissima memoria (cosa fondamentale per i giochi sul
cellulare).
-
3
I tilesets
Per capire come sono fatti i tiles andiamo a caricare un tileset
creato in precedenza (un’immagine
in formato png che contiene una serie di tiles):
Torniamo sulla ‘dashboard’ e clicchiamo su ’tilesets’, poi su
‘click here to create one’ e infine
diamo il nome ‘tileset1’ a questo tileset;
selezioniamo ‘Standard (1x)’ a fianco di ‘Scale’;
clicchiamo su ‘choose image’ per selezionare un tileset;
Selezioniamo quindi la cartella
\materialecorsovideogames\tilesets e apriamo il file 4.png
Cliccare su Add per confermare.
-
4
Alcune parti dei tiles verranno usate per il terreno, altre
invece le useremo come sfondo.
Dovremmo quindi occuparci del problema delle collisioni: alcune
tile non terranno conto della
collisione con il player, altre sì.
Per modificare la collisione, clicchiamo su un tile: nella
colonna di destra apparirà la finestra
‘Collision bounds’, con una serie di forme. Tutte i tile sono
preimpostati con il tipo di collisione
‘square’. Dobbiamo selezionare i tile che non debbono avere la
collisione e cambiare il tipo di
collisione in ‘No Collisions’. Si possono selezionare più tiles
contemporaneamente per fare prima.
Clicchiamo su Save Game per salvare il lavoro.
-
5
La scenografia
Prima di inserire i tile sulla scena, possiamo allargarla un
po’, in modo che sia larga almeno il
doppio di quello che lo schermo ci mostra. Clicchiamo su
‘properties’, modifichiamo la larghezza,
da 15 tiles a 30 tiles e diamo OK.
Nella finestra della scena vediamo che è apparso il tileset
caricato. Ogni quadretto è di 32 x 32
pixel. Con lo strumento della matita attivo andiamo a
selezionare il quadretto dell’erba indicato
nell’immagine e tracciamo una riga di erbetta sulla parte bassa
dello schermo bianco.
Completiamo con dell’erba completamente verde sotto. Poi
selezioniamo le 2 tiles della collina
marroncina e le riportiamo sopra l’erba.
Per il background (sfondo) è possibile utilizzare un colore
oppure un immagine. Per semplicità
utilizziamo il blu con una sfumatura: andiamo sul sottomenu
‘properties’ e sotto ‘background
color’ selezioniamo ‘vertical gradient’. Scegliamo due colori,
il primo un blu acceso, il secondo un
azzurro chiaro. Questo sarà il risultato finale:
Prima di aggiungere altri componenti alla scena, andiamo su
‘physics’ e settiamo la forza di gravità
verticale a 85 (simula la forza di gravità terrestre).
-
6
Il protagonista
In questa parte creiamo il protagonista del nostro platform
game, e lo impostiamo in modo che possa
muoversi nella scena che abbiamo preparato. Utilizzeremo del
materiale grafico tratto da altri giochi forniti
con Stencyl.
Stencyl considera tutto ciò che può venire animato (il player, i
nemici, le piattaforme mobili ecc) come
attori (‘actor‘).
Per creare il nostro protagonista torniamo nella ‘dashboard’,
selezioniamo in ‘actor types’ e creiamo un
nuovo actor, che chiameremo ‘protagonista’.
Ci viene segnalato che l’actor non ha ancora un’animazione.
Clicchiamo per crearne una nuova.
player fermo che va verso destra
player fermo che va verso sinistra
player che cammina verso destra
player che cammina verso sinistra
Normalmente dovremmo aggiungere anche il player che salta, che
si china e .. che muore.
Per adesso vediamo come farlo muovere per lo schermo!
-
7
Quindi, creiamo la prima animazione chiamandola ‘fermo R’ (R sta
per right), e clicchiamo su ‘click
here to add a frame’, poi su ‘choose image’.
Dalla cartella delle risorse del gioco ‘crash course kit’
(\materialecorsovideogames\kits\Crash
Course Kit) selezioniamo ’1-4.png’, poi ‘add’.
In basso a sinistra clicchiamo sul tasto ‘+’ per creare un’altra
animazione (che chiamiamo ‘fermo L’)
e ripetiamo il caricamento del fotogramma 1-8.png.
Per le animazioni seguenti, ripetiamo i passaggi (‘cammina R’ e
‘cammina L’) caricando le immagini
1-0.png e 1-1.png.
Attenzione però!
Queste sono immagini composte da 4 fotogrammi, per cui dobbiamo
modificare il numero di
colonne in cui è divisa l’immagine, pertanto scriviamo ’4′ di
fianco a ‘columns’.
-
8
Ecco che vediamo l’omino verde animarsi! Terminiamo anche la
quarta animazione e clicchiamo
sul sottomenu ‘Behaviors’. Pronti per la programmazione?
-
9
Programmare i movimenti del player
In Stencyl c’è la possibilità di programmare utilizzando i
behaviors (‘comportamenti’, una serie di
istruzioni raggruppate assieme), applicabili agli attori o alle
scene, oppure con gli events (eventi). Il
vantaggio di utilizzare i behaviors è che si possono riciclare e
associare a più di un attore, e inoltre
che ce ne sono di già fatti dagli sviluppatori di Stencyl! Per
cui, per cominciare ad addentrarci nella
programmazione con Stencyl, meglio partire da un behavior già
realizzato.
Siamo sul nostro player, selezioniamo la voce ‘behaviors’ e
‘click here to choose a behavior …’.
Nella sezione ‘Controls’ clicchiamo su ’2 way horizontal
moviment’.
I behavior già costruiti sono molto ben configurabili, per cui
consiglio di usarli il più possibile senza
reinventarsi il codice da capo. In questo caso, devo andare a
selezionare i comandi che userò per
muovere il player ‘left’ e ‘right’, la velocità (da impostare a
20.0), le animazioni da utilizzare
(clicchiamo sui bottoni grigi e selezioniamo le relative
animazioni tenendo presente che ‘idle’ è lo
stato in cui il nostro personaggio è fermo). Tutto qui!
Per vedere il cubetto verde in azione, mancano ancora due cose
da fare…
-
10
Nel sottomenu ‘physics’ inserire ‘no’ sotto ‘can rotate?’: visto
che in Stencyl tutto risponde alle
leggi della fisica, non vogliamo vedere il player rotolare
indietro se dovesse andare a sbattere
contro un muro!
Torniamo in ‘scena 1′, selezioniamo sulla colonna di destra la
voce ‘actors’ e selezioniamo il nostro
attore, portandolo sulla scena.
Se tutto è stato fatto a dovere, cliccando sul bottone ‘test
scene’, possiamo animare il player a
destra e a sinistra.
-
11
Prima di tornare alla programmazione del player, dedichiamo un
po’ di tempo a migliorare la
scena.
Voglio creare delle semplici piattaforme statiche su cui salire,
sospese in aria. Prima però
aggiungiamo un nuovo livello alla scena, perchè queste
piattaforme devono stare davanti alle
‘colline’ gialle. Pertanto, sotto la finestra dei Layer
clicchiamo su ‘+’ per creare il Layer 1.
Utilizziamo il mattoncino rosso e creiamo 4 piattaforme di 3
quadretti l’una, così da comporre una
gradinata:
E adesso?? Forse dobbiamo trovare il modo di salirci, sulla
piattaforma… Per ora sappiamo solo
camminare a destra e a sinistra….
-
12
Come saltare e stare al centro della scena!
Torniamo sul player e selezioniamo ‘behavior’, aggiungendone uno
nuovo. Selezioniamo la sezione
‘controls’ e ‘jump and run moviments‘. Qui dobbiamo settare i
valori come per il behavior ’2 way
horizontal moviment’, indicando un tasto per saltare (ad esempio
‘action1′ che di default
corrisponde al tasto z). Modifichiamo il valore di Jumping Force
portandolo a 30.
Il resto possiamo lasciarlo così com’è. Nel caso volessimo fare
un’animazione apposta per il salto,
dobbiamo andare prima a creare una nuova animazione, poi
nominarla e aggiungerla in questo
behavior.
Altre 2 cose da fare:
- Occorre controllare che il player non esca dallo schermo,
altrimenti ne perderemo il controllo.
Utilizziamo il behavior ‘cannot exit screen‘ che si trova sotto
‘motion’;
- Inoltre dobbiamo fare in modo che il player sia sempre al
centro dello schermo, visto che la scena
è più larga delle dimensioni dello stage. Pertanto, nuovo
behavior: ‘camera follow‘ sotto ‘game’. In
questi behavior non c’è nulla da settare …
Se proviamo a eseguire il gioco, notiamo un problemino: se
rimaniamo attaccati a una piattaforma
e proviamo a saltare, il salto è quasi azzerato. Questo perchè è
settata la frizione. E’ meglio
azzerarla, selezionando il player, andando in physics ->
materials e settando la voce ‘friction’ a 0.
-
13
Premi
Senza qualche premio in palio un gioco non è un vero gioco!
Andiamo a creare un nuovo actor e
chiamiamolo ‘coin’. Questa volta invece di importare un anim già
fatta proviamo a disegnare una
moneta. Possiamo farla con photoshop, salvarle in formato .png
con trasparenza, e poi importarl
acome abbiamo già visto. Oppure disegnarla direttamente con il
programma di disegno semplice
semplice fornito insieme a Stencyl. Per provarlo, quando siamo
al punto di dover aggiungere un
frame, clicchiamo nel menu sottostante la voce ‘create frame
(external)’. Se è la prima volta che lo
usate, vi verrà chiesto se volete caricare il software per il
disegno.
Il software è una versione ‘povera’ di photoshop, ma fa le cose
che deve fare: qui basta che
tracciamo un cerchio, lo riempiamo di giallo e disegnamo sopra
il simbolo del dollaro. Poi
chiudiamo la finestra e confermiamo il salvataggio.
-
14
Tornati su Stencyl, andiamo su ‘collision’ per modificare l’area
di collisione della moneta appena
disegnata. Settate la width e la height a 40 pixel e
riposizionate correttamente il quadrato giallo
attorno alla moneta:
-
15
Torniamo sulla scena1 e aggiungiamo una moneta sopra ogni
piattaforma:
Eseguiamo il gioco e … ops ….
-
16
Le monete si comportano come un qualunque altro attore, con la
forza di gravità che le porta a
cadere… Ritorniamo su ‘coin’, e in ‘physics’ settiamo ‘cannot
move’ !!
Inoltre vi sarete accorti che non posso toccare le monete.
Dobbiamo capire meglio come
funzionano le collisioni.
Collisioni
Stencyl prevede una serie di gruppi di oggetti, ognuno dei quali
può entrare in collisione con gli
altri. Di default c’è il gruppo degli actor, dei player, dei
tiles e delle regioni (che vedremo più
avanti). Adesso andiamo a creare il gruppo ‘coin’ e lo settiamo
affinchè entri in collisione con il
nostro player.
Intanto settiamo il player all’interno del gruppo corretto:
andiamo sul player, ‘properties’ e
selezioniamo il gruppo ‘player’. Poi torniamo su ‘coin’,
‘properties’ e clicchiamo su ‘edit groups’.
Qui creiamo un nuovo gruppo (‘Coin’) e sotto ‘Collide with’
selezioniamo ‘player’. In questo modo
le monete non verranno ‘vinte’ da un nemico se questo dovesse
passarci sopra!
Diamo ok alla finestra e settiamo ‘coin’ con il gruppo appena
creato.
Adesso, se torniamo a testare il gioco, le monete non cadranno
più e la collisione con player sarà
del tutto evidente … ci sbattiamo contro la testa!!
-
17