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