1

Stencyl

Sviluppare un platform game III parte

Eccoci pronti per incontrare il nemico all’interno del gioco!

Andiamo nella Dashboard, selezioniamo actor type e aggiungiamo un nuovo actor (al quale diamo

il nome ‘nemico’). Come al solito, aggiungiamo un’animazione che chiameremo ‘nemico’ e

carichiamo (dalla cartella \corsovideogames\materialecorsovideogames\actors) il file 1-0 (2).png.

Poichè questo png contiene due fotogrammi di una animazione, indichiamo che l’immagine

dev’essere suddivisa in 2 colonne.

Prima di posizionare il nemico sulla scena, dobbiamo definire nelle ‘properties’ il gruppo di

appartenenza per le collisioni: i gruppi di appartenenza permettono agli oggetti di collidere con

altri gruppi. Nel nostro caso il nemico dovrà collidere solo con il player.

Quindi, in properties, click su ‘edit group’. Poi creiamo un nuovo gruppo (‘nemici’) e indichiamo

che deve collidere solo con il player. Assegnamo al nemico il gruppo appena creato.

Inoltre dobbiamo andare su physics e selezionare cannot be pushed come type, e no in can

rotate.

Andiamo nella scena e posizioniamo il nostro/nostri nemici.

2

Per rendere più “umano” il nostro nemico possiamo farlo muovere utilizzando un behavior

(comportamento) già esistente. Per fare questo, come spiegato in precedenza selezionate l’attore

in questo caso il nemico, premete su behaviors quindi aggiungete back and forth horizontally

(avanti e indietro orizzontalmente) sotto motion (movimento).

Nella definizione del behavior modifichiamo solo il valore ‘change direction on collision’ togliendo

il check.

Eseguiamo il gioco e vediamo che succede. Il nostro nemico dovrebbe esserci e spostarsi avanti e

indietro.

Manca ancora una cosa importante: il contatto col nemico è mortale!! per cui dobbiamo creare un

evento sul player che ci dice che, appena si tocca il nemico si viene eliminati.

Andiamo sul nostro player, behaviors, e aggiungiamo Die On Collision With Group selezionando

come attributo il gruppo nemici. Se adesso proviamo, quando si tocca il nemico, il proprio player

viene eliminato, ma non viene ricaricata la scena. Aggiungiamo quindi un ulteriore behavior che si

chiama “Reload Scene On Death”. Dovremo avere ora una schermata simile alla seguente:

Per esercizio potete creare anche degli altri nemici come trappole, piante carnivore etc… che sono

degli oggetti fermi, ma hanno dei comportamenti simili a quelli che abbiamo visto (a parte il

movimento).

3

Piattaforme mobili

Per rendere il gioco un po’ più movimentato possiamo creare delle piattaforma mobili.

E’ possibile creare questo tipo di piattaforme utilizzando Photoshop oppure il software Pencyl

incluso con Stencyl.

Per ora potete utilizzare gli elementi già creati (che trovate nella cartella actors).

Creiamo quindi un nuovo actor, chiamiamola ‘piattaformaV’ (V per movimento verticale) e

inseriamo questa immagine come animazione. Infine apriamo la scena, aggiungiamo 4-5 colonne

sulla parte sinistra e una decina di righe in alto (così da permettere alla piattaforma di salire). Poi

posizioniamo la piattaforma e 2 premi in cima, come super bonus:

Per animarla, usiamo un behavior simile a quello usato per il nemico, il back and forth vertically.

Questa volta impostiamo i valori distance up a 100 e distance down a 50 e deselezionare Change

Direction on Collision come si vede nella figura seguente:

Altre cose importanti da settare: in properties selezioniamo come gruppo tiles (il comportamente

riguardo alle collisoni dev’essere lo stesso dei tiles) e in physics selezioniamo can’t be pushed e no

sotto can rotate.

4

Testiamo il gioco … ed eccoci sull’ascensore:

5

Aggiungere un effetto sonoro e un brano musicale

Per aggiungere un effetto ad un attore durante il salto importare prima l’effetto sonoro:

Nella Dashboard selezionare Sounds, Click here to create one, inserire il nome saltosfx e caricare

cliccando su import mp3 dalla cartella soundsfx il file 5.mp3. Cliccando sul Sound Player in basso a

sinistra è possibile sentire un anteprima dell’effetto sonoro.

A questo punto andate sul player, Events ed aggiungete un evento di tipo Keyboard.

Dopodiche cliccate su Sound & Images (tasto nella colonna destra) e prendete l’azione

“Play Sound”. Cliccate su Sound e selezionate saltosfx.

A questo punto se provate il gioco dovreste sentire il suono del “salto” quando il nostro player

salta. Con lo stesso principio possiamo aggiungere altri effetti sonori ad esempio quando veniamo

eliminati.

6

Passare da una scena all’altra.

Ogni gioco solitamente non ha un solo livello, ma più di uno e può avere altre schermate (scene)

come ad esempio la presentazione iniziale, la selezione del livello, la schermata finale etc.

In questa parte vedremo come passare da un livello ad un altro e poi creare una schermata iniziale

di partenza dove possiamo scegliere il livello da cui partire.

Con lo stesso principio potrete poi aggiungere le vostre schermate

Per prima cosa possiamo creare un secondo livello partendo da zero oppure copiando l’attuale

livello. Per copiare un livello andare in dashboard, scene, posizionarsi sul livello da copiare, tasto

destro duplicate. Per modificare il nome del livello fate doppio click sul livello (scena) per aprirlo.

Click su proprietà e modificate il nome ad esempio livello2.

Torniamo poi al livello1.

7

Ci sono più modi per poter “passare di livello”. Noi creeremo un oggetto (actor) di tipo porta che

“sentirà” la collisione con un attore. Quando “sente” questa collisione, utilizza un azione che ci fa

spostare da una scena all’altra.

Aggiungiamo un attore e selezioniamo sotto la cartella actors porta.png come immagine.

Andiamo sugli eventi ed aggiungiamo un evento di tipo collisione. Sulla destra selezioniamo il

pulsante “Scene” e prendiamo la transizione (sotto Game Flow)

“Switch to Scene and Crossfade…” clicchiamo su scene, selezioniamo il livello2 e premiamo ok.

Dovremo avere una schermata come la seguente:

Questa volta per provare il gioco utilizziamo “Test Game” in alto a destra perché vogliamo provare

tutto il gioco e non la singola scena. A questo punto “toccando” la porta si passa al livello2.

8

Schermata iniziale

Ogni gioco ha delle schermate, quali ad esempio il titolo, la selezione del livello, la schermata

finale, etc…

In questa parte vedremo solamente un esempio di schermata iniziale per la selezione del livello

lasciando a voi il compito di creare le altre schermate che ritenete opportuno aggiungere per

completare il vostro gioco.

Dalla dashboard aggiungiamo una nuova scena e la chiamiamo inizio game. Dobbiamo impostare

questa scena, come scena di partenza. Per fare questo selezioniamo la scena e clicchiamo in basso

a destra sul tasto “Mark as Starting Scene”. Riconosciamo che questa è la schermata iniziale

perché appare una piccola stellina che denota appunto la schermata iniziale.

Aggiungiamo due attori (pulsante) chiamati rispettivamente bntlivello1 e btnlivello2 (trovate la

grafica sempre in actors)

9

Entriamo ora nella scena e aggiungiamo la logica di controllo.

Anzitutto aggiungiamo i due “attori” Livello1 e livello2 come in figura:

Andiamo poi sul btnlivello1, selezioniamo Behaviors e aggiungiamo un behavior di tipo “Game”,

“Switch Scene Button”.

10

Ed impostiamo come attributo Next Scene il livello1 e gli altri attributi come in figura:

Facciamo la stessa cosa per l’attore btnlivello2

Se proviamo il gioco abbiamo ora la prima schermata di selezione livello.

Con questa tecnica possiamo creare tutte le schermate necessarie e passare da una schermata

all’altra cliccando sopra un actor (in questo caso l’attore è un pulsante).

11

Altre risorse Stencyl

Con questa parte si conclude il corso introduttivo a Stencyl.

Da qui si può procedere ad un utilizzo più avanzato di Stencyl utilizzando la guida online di stencyl

che si chiama Stencylpedia: http://www.stencyl.com/help/ oppure a pagamento si possono

acquistare uno dei libri su Stencyl (in inglese). Esiste anche un videocorso online (sempre a

pagamento e in lingua inglese) sul sito di Udemy.

Trovate alcune cose anche in italiano cercando in rete. Questa guida si basa infatti su un tutorial

online in italiano.

Il sito con il materiale di questo corso lo trovate invece all’indirizzo:

www.stencylitalia.it

Altre risorse gratuite per la grafica le trovate a questi indirizzi:

http://www.pixelprospector.com/the-big-list-of-royalty-free-graphics/

http://hasgraphics.com/

http://www.widgetworx.com/spritelib/

http://www.pixelprospector.com/indie-resources/

Credits

Il corso è stato organizzato dall’azienda di promozione turistica della val di Fiemme

(APT Fiemme) www.visitfiemme.it

Realizzazione: Dario Cavada della Merlino DreamLab www.merlino-dreamlab.com

http://www.stencyl.com/help/http://www.stencylitalia.it/http://www.pixelprospector.com/the-big-list-of-royalty-free-graphics/http://hasgraphics.com/http://www.widgetworx.com/spritelib/http://www.pixelprospector.com/indie-resources/http://www.visitfiemme.itrealizzato/http://www.merlino-dreamlab.com/