INTRODUZIONE

Dinanzi a voi ci sono i componenti per il pacchetto di gioco. Oltre alla guida di avvio rapi-do avete dinanzi a voi la shield display LCD e la shield joypad. Entrambe le schede sono state progettate e adattate all'Arduino Uno. Esse consentono di controllare gli esempi consigliati o di sviluppare giochi propri. È possibile visualizzare entrambe le shield in un'u-nica volta. C'è tanto da scoprire

1.1 | La shield display

La shield display

Con la shield display abbiamo su una piastra il display LCD 12864 LCD ST7565 con due tasti hardware che rende compatibile con Arduino. Il display ha una risoluzione di 128 x 64 px ed è controllato mediante SPI (Serial Peripheral Interface). Dati tecnici: Shield display Shield compatibile con Arduino Uno Display DXDCG12864-4330 Controller display ST7565 Risoluzione 128 x 64 px Tensione di esercizio 3,3 V Periferica 2 tasti onboard (su A4 e A5) Dimensioni display 38 x 20 mm Altro Struttura ridotta – 14 porte I/O libere su Arduino È necessario acquisire familiarità ma non troppo con i dettagli del controllo della visualiz-zazione, in quanto una library fa la maggior parte del lavoro per voi, così è possibile con-centrarsi sulla programmazione di giochi. Se siete interessati a informazioni più dettaglia-te sul controllo del display e le sue proprietà, vi consiglio il pacchetto di apprendimento

"Franzis Maker Kit Grafikdisplays programmieren".

1.2 | La shield joypad

La shield joypad

La shield joypad è stata sviluppata appositamente per questo progetto e consente di utilizzare i giochi in modo pratico e intuitivo. Sulla shield ci sono sei tasti. Quattro sono disposti a croce, quindi le direzioni possono essere digitate in modo intuitivo. Ad altri due tasti sono assegnate a seconda del gioco singole funzioni. In totale ci sono otto tasti, che permettono di realizzare tanti giochi e funzionalità. Oltre ai tasti nel circuito stampato viene installato anche un piccolo trasduttore piezoe-lettrico come altoparlante. È possibile fornire informazioni non solo sul display, ma anche mediante segnali acustici. Dati tecnici: Shield joypad Shield compatibile con Arduino Uno Immissione 6 tasti a corsa breve (tasto a quattro posizioni + 2 tasti di azione) Uscita audio Altoparlante integrato TMB12A05

1.3 | Montaggio

Come detto all'inizio, entrambe le shield si adattano in modo ottimale a un Arduino Uno. Si deve osservare che la shield display si chiude esattamente con i quattro slot superiori di Arduino Uno.

La shield display si adatta esattamente ai connettori inferiori, come mostrato nella figura. In questo caso si ha la migliore maneggevolezza ed è possibile prendere in mano e utiliz-zare anche Arduino con la shield.

1.4 | La documentazione

Questa guida introduttiva vi offre le prime informazioni e un semplice esempio per un'in-troduzione con successo alla programmazione di giochi. La maggior parte delle informa-zioni sono reperibili nella guida online alla programmazione di giochi. È possibile scaricare il PDF completo da: http://www.buch.cd. Il codice corrispondente è 10223-0. Oltre al manuale, è possibile anche trovare la library necessaria e gli esempi consigliati.

1.5 | La community

Come estensione al progetto ulteriori informazioni sono reperibili su questo sito web: http://tiny.systems/spielekonsole Qui è possibile accedere non solo a futuri aggiornamenti della library o dei programmi, ma anche a ulteriori progetti e informazioni sugli autori. Inoltre, vengono forniti impor-tanti strumenti online, che servono per apportare proprie modifiche ai progetti di esem-pio.

1.6 | L'ambiente di sviluppo (IDE)

Al fine di poter sviluppare qualsiasi cosa, in primo luogo bisogna avere un ambiente di sviluppo (abbr.: IDE) semplice da usare così come alcuni tool. Come IDE qui è utilizzato il famoso e spesso utilizzato IDE Arduino. È possibile trovare l'ultima versione del sistema operativo alla pagina: www.Arduino.cc/Downloads Sui nostri progetti abbiamo lavorato con la versione 1.6.7, ma le istruzioni riportate in questo manuale dovrebbero funzionare anche con le versioni più recenti. Dopo il down-load e l'installazione dell'ambiente scegliere la scheda e la porta giusta sotto Impostazio-ni, e già è possibile iniziare a programmare Arduino e la vostra console di gioco.

Oltre ad Arduino, sono utilizzati anche altri tool, tra cui un software per creare e modifi-care gli elementi grafici. In questo manuale è usato il programma Windows Paint e l'edi-tor open-source Gimp. Con un tool online su tiny.systems è possibile convertire questi elementi grafici in un formato compatibile – quindi non è mai troppo tardi. Innanzitutto, è importante la library con gli esempi della pagina http://www.buch.cd. Il codice corrispondente è 10223-0. scaricare e installare. Per installare la library è necessario collegare il file zip mediante il Library-Manager. A tal fine fare clic sull'immagine -> Collega biblioteca -> Aggiungi Bi-blioteca .Zip e scegliere il file .zip della library appena scaricato. Sotto dovrebbe apparire già un messaggio di successo.

1.7 | Test hardware

L'IDE e il programma di esempio sono ora impostati – tempo per caricare il primo pro-gramma su Arduino. Aprire il primo programma mediante File -> Esempi -> GameEngine -> Avvio e fare clic su Upload. Dopo poco apparirà un messaggio di successo sotto nella finestra di debug. Il display dovrebbe ora apparire come mostrato nella figura sotto. In caso contrario, giocare con i due tasti direttamente sotto il display. In questo modo è possibile regolare il contrasto del display e quindi risolvere la maggior parte dei problemi per cui non si vede nulla. Se ancora non si vede nulla, controllare la posizione di entrambe le shield su Arduino.

Ora impostare il valore di contrasto ottimale e ricordare questo valore. Nei progetti seguenti è necessario entrare nel programma, affinché il display possa essere sempre leggibile.

In questo programma di esempio, è possibile anche verificare le diverse funzioni delle shield. Premere ad esempio un tasto joypad quando appare sul display. È possibile testare anche l'audio. Ora prima di iniziare si dovrebbe controllare la funzionalità completa di tutti i componenti.

PALLA – INTRODUZIONE ALLA PROGRAMMAZIONE DEL GIOCO Così ora avete tutto impostato e verificato – è giunto il momento di concentrarsi real-mente sullo sviluppo del gioco. Aprire il programma di esempio Palla su File -> Esempi -> GameEngine -> Palla.

Questo piccolo e semplice programma di esempio permette di disegnare e muovere un oggetto semplice, una palla. Regolare il contrasto nella riga di programma 9. In questa riga è possibile trovare nella routine di setup il comando engine.init(20). Il numero 20 tra parentesi può essere sostituito mediante il proprio valore di contrasto individuale. Ciò può essere necessario anche nei progetti seguenti. Quindi è possibile caricare il pro-gramma su Arduino. Dopo aver eseguito l'upload con successo è possibile vedere un semplice oggetto al centro del display. Quindi come è stata effettuata la programmazio-ne?

001 void drawBall() {

002 engine.drawPixel(ballX, ballY);

003 engine.drawPixel(ballX + 1, ballY);

004 engine.drawPixel(ballX - 1, ballY);

005 engine.drawPixel(ballX, ballY + 1);

006 engine.drawPixel(ballX, ballY - 1);

007 }

Con la funzione, che porta i nomi drawBall(), la palla viene portata sul display. Sono ne-cessarie solo un paio di semplice righe, per attivare i pixel corrispondenti sul display. Ciò soprattutto perché, il lavoro principale avviene in background del Game Engine. La posi-zione corrente della palla è rilevata mediante le variabili ballX e ballY. Attraverso il ri-chiamo della funzione drawPixel(), che attiva i pixel sulla posizione corrente della palla e nelle sue immediate vicinanze, viene disegnata l'intera palla. Inoltre, è possibile persona-lizzare la forma della palla variando quali pixel devono essere attivati intorno alla posi-zione della palla. Osservare che nell'angolo in alto a sinistra si trova il pixel con la posizio-ne 0,0.

001 void moveBall() {

002 ballX = ballX + 1;

003 ballX = ballX % 128;

004 ballY = ballY % 64;

005 }

Con la funzione moveBall() è prodotto infine il movimento della palla. Ogni volta che questa funzione viene richiamata la posizione x della palla aumenta di 1. In parole povere, ciò significa che la palla sul display si muove a destra. Le due righe sotto servono a garan-tire che la palla non lasci le dimensioni del display. Utilizzando il modulo funzione è garantito che la coordinata x non possa essere mai supe-riore a 128 e la coordinata y mai superiore a 64 – esattamente 128 x 64 pixel, che sono disponibili sul display.

001 void controlBall() {

002 if(engine.joypad.isPressed(UP)){

003 ballY = ballY - 1;

004 }

005 if(engine.joypad.isPressed(DOWN)){

006 ballY = ballY + 1;

007 }

008 }

Ora con la funzione controlBall() è possibile anche controllare la palla. I tasti del joypad sono facilmente richiamabili. La funzione engine.joypad.isPressed(UP) restituisce il valore TRUE, quando viene premuto il tasto. Quindi, la posizione y della palla è ridotta di un pixel, con la conseguenza che la balla si avvicina al bordo superiore del display. Allo stesso modo con la funzione engine.joypad.isPressed(DOWN). Con i tasti di direzione è anche possibile modificare l'altezza della balla, mentre si muove verso destra sul display. Se raggiunge la fine del display, appare nuovamente all'altra estremità. Affinché queste tre funzioni giochino bene insieme, si deve richiamare il punto esatto nella routine di loop.

001 void loop(){

002 if(engine.update()){

003 controlBall();

004 if(engine.isFrameCount(20)){

005 moveBall();

006 }

007 drawBall();

008 }

009 }

In Arduino c'è la funzione loop in esecuzione continua. Mediante la funzione engi-ne.update() è garantito che tutte le funzioni dell'Engine, come il disegno della palla e i valori dei tasti, siano effettuate prima di passare il turno. La funzione moveBall() ha an-cora un'altra limitazione – viene richiamata solo ogni 20 fotogrammi. Il contenuto del display viene aggiornato 20 volte prima che la posizione della palla possa cambiare. Il motivo è che altrimenti la palla si muoverebbe troppo velocemente.

PONG – ANCORA UNA VOLTA Ora nel programma di esempio seguente si tratta del famoso gioco Pong, anche se leg-germente diverso rispetto a quello che conoscete. Piuttosto che usare le racchette, la palla qui è mossa attraverso i tasti di direzione. A proposito, è possibile apprendere nuovi elementi di programmazione del gioco. Pong è stato lanciato da Atari nel 1972 ed è uno dei giochi più famosi di sempre. È vaga-mente basato sul gioco del Ping Pong o tennis da tavolo. Nella versione classica, due giocatori giocano l'uno contro l'altro. Sui due lati opposti di un campo di gioco virtuale c'è sempre una racchetta sottoforma di linea. Una palla è ora in movimento attraverso lo schermo e il giocatore deve cercare con la racchetta di respingere la palla e lanciarla indietro in direzione dell'avversario. Se non ci riesce, il punto va all'avversario.

In questa versione voi giocate il ruolo della palla, mentre entrambe le racchette sono controllate dal computer. Nel gioco cercare di tenere la palla il più a lungo possibile. Il programma di esempio si apre facendo clic su: File -> Esempi -> GameEngine -> GameEngine1 -> Pong Il programma è già molto noto. Anche questa volta c'è ad esempio la funzione drawBall(), che – a seconda della posizione corrente – traccia una palla sul campo di gioco. Allo stesso modo ci sono le funzioni drawPlayer() e drawField(), che disegnano entrambe le racchette sul display. Con draw-Field() c'è anche una nuova funzione, ovvero drawValue(), che sulla posizione specificata riporta il livello corrente e il punteggio. Il livello corrente viene modificato ogni volta che la palla viene respinta con successo. Ciò è controllato tramite la funzione moveBall().

001 void moveBall() {

002 if (ballX == 1 || ballX == 127) {

003 setup();

004 }

005 if (ballY == 1 || ballY == 63) {

006 collisionY = collisionY * -1;

007 }

008 if (abs(ballX - player1X) <=2 && abs(ballY - player1Y) < 9) {

009 collisionX = collisionX * -1;

010 level++;

011 }

012 if (abs(ballX - player2X) <=2 && abs(ballY - player2Y) < 9) {

013 collisionX = collisionX * -1;

014 level++;

015 }

016 ballX = ballX + collisionX;

017 ballY = ballY + collisionY;

018 }

Come potete vedere, ci sono diverse interrogazioni circa la posizione della palla. Se si trova sulla posizione x con 1 o 127, ciò significa che non è stata respinta con successo ed è volta sul bordo sinistro o destro del campo da gioco. In questo caso viene richiamata la routine di setup e il gioco può iniziare da zero. Se la palla si trova sulla posizione y 1 o 63, la palla rimbalza sul bordo superiore o inferiore, in cui nega la variabile collisionY-Variable e quindi inverte la direzione del movimento della palla. In entrambe le interrogazioni

if (abs(ballX - player1X) <=2 && abs(ballY - player1Y) < 9)

viene determinato se la palla è riflessa su una racchetta, per verificare se la palla è abba-stanza vicina alla racchetta o se tocca la racchetta. In questo caso, la variabile di movi-mento è invertita in posizione x e il livello aumentato.

001 void movePlayer() {

002 if (player1Y < 7) {

003 player1Y++;

004 }

005 if (player1Y > 55) {

006 player1Y--;

007 }

008 player1Y = (player1Y -1 + random(3));

009 if (player2Y < 7) {

010 player2Y++;

011 }

012 if (player2Y > 55) {

013 player2Y--;

014 }

015 player2Y = (player2Y -1 + random(3));

016 }

Il movimento del giocatore (racchette) d'altra parte è impostato in modo casuale. In pre-cedenza si verifica solo se la racchetta è troppo vicina al bordo superiore o inferiore. È generato uno spostamento verso l'alto o il basso con l'aggiunta di un numero casuale tra -1 e 1. Il richiamo della funzione random(3) genera un numero casuale tra 0 e 2. Questo intervallo di valori è trasferito con "-1" nell'intervallo di valori necessario.

001 void controlBall() {

002 if(engine.joypad.isPressed(UP) && ballY > 2){

003 ballY = ballY - 1;

004 }

005 if(engine.joypad.isPressed(DOWN) && ballY < 61){

006 ballY = ballY + 1;

007 }

008 if(engine.joypad.isPressed(LEFT) && ballX > 13){

009 ballX = ballX - 1;

010 }

011 if(engine.joypad.isPressed(RIGHT) && ballX < 115){

012 ballX = ballX + 1;

013 }

014 }

Nella funzione controllBall() ora sono interrogati i tasti e la posizione della palla è modifi-cata a seconda dell'immissione. Ma la "palla testarda" è naturalmente soggetta alle leggi della fisica. Può essere influenzato solo il movimento naturale della palla.

001 void loop(){

002 if(engine.update()){

003 controlBall();

004 if(engine.isFrameCount(10 - (level/10))) {

005 moveBall();

006 }

007 if(engine.isFrameCount(25 - (level/4))) {

008 movePlayer();

009 }

010 drawPlayer();

011 drawBall();

012 drawField();

013 }

014 }

Affinché i tempi di tutte le funzioni siano ben coordinati, si deve richiamare la routine di loop una dopo l'altra. La funzione isFrameCount() viene utilizzata, per controllare la velo-cità degli eventi. La posizione della palla viene modificata ogni 10 immagini e le racchette ogni 25 immagini. Il movimento della palla viene aggiornato spesso. Qui è determinato anche il grado di difficoltà. Ad ogni livello l'intervallo di aggiornamento è più corto e il movimento è più lungo. Il gioco è quindi sempre più difficile con il tempo.

SNAIL – COLLEGARE BITMAP Negli esempi precedenti, gli elementi di gioco sono stati rappresentati principalmente da linee e pixel. In questo esempio, si impara ora a integrare grafici più complessi in un gio-co. Conoscere il convertitore online su Tiny.systems.

Sulla pagina Internet http://tiny.systems/article/mosaic.html si trova un tool, con cui possono essere creati disegni molto semplici. Su questo sito web nel mezzo si trova un'area grigia. Ora quando si fa clic in un punto qualsiasi dell'area, si attiva un pixel. Facendo clic ancora una volta sullo stesso pixel, scompare. Fare clic e tenere premuto il tasto del mouse mentre si sposta il puntatore del mouse sull'area. Come si può vedere è possibile creare anche disegni interi. Inizialmente, la superficie di disegno ha una dimensione di 16 x 16 px. Per disegni più grandi è possibile ingrandire l'area facendo clic sull'icona a destra sotto la superficie di disegno. Se non si è soddisfatti del proprio disegno, è possibile con un clic sulla X cancellare l'intera area.

Come primo tentativo è possibile creare una figura di gioco delle dimensioni 16 x 16 px. Dopo aver terminato fare clic sui ganci in basso a sinistra. Appare un codice esa abba-stanza lungo che deve essere copiato nel programma Snail. Aprire il programma con un clic su File -> Esempi -> GameEngine -> GameEngine1 -> Snail. Nella riga 10 del pro-gramma si trova la variabile snail, che è riempita con un'immagine diversa. Ora aggiunge-re i nuovi numeri generati nella pagina mosaico e non i numeri esadecimali esistenti. È possibile caricare il programma quindi e si troverà che sul display apparirà la grafica rea-lizzata da voi (non dimenticare di regolare il valore di contrasto). Utilizzando i tasti freccia, è possibile spostare la grafica sullo schermo. Di questo è responsabile una nuova funzione della library che si chiama drawBitmap(): engine.drawBitmap(snailX, snailY, 16, 16, snail);

I primi due parametri della funzione determinano la posizione della grafica sul display, mentre i due seguenti le dimensioni della grafica. Nell'ultima posizione nella lista dei parametri, abbiamo la stessa variabile in cui si memorizzano i dati grafici. In questo modo si può avere la rappresentazione degli elementi grafici sul display. Ma c'è un secondo modo per creare dati grafici compatibili con Arduino con la pagina mosaico. Forse avete già notato il tasto che riporta la scritta Seleziona file. Vale a dire, è possibile caricare i file bitmap sul sito e formattarli automaticamente in codice esadeci-male. Ma osservare che non tutti i file bitmap sono semplici da convertire. È necessario assicurarsi che si tratti di bitmap monocromi (in bianco e nero). Il modo più semplice per creare una tale bitmap è utilizzare un programma di disegno come MS Paint. In alternati-va, ad es. può essere adatto il programma di disegno Gimp.

Quindi salvare l'immagine in Paint in modo corretto.

Nella cartella esempi di questo programma c'è già un'immagine formattata in modo cor-retto. Essa ha il nome di Snail.bmp. È possibile caricare questo file sulla pagina mosaico e come risultato ottenere le informazioni dell'immagine sotto forma di numeri esadecimali. Ora copiare di nuovo questi numeri esadecimali nella variabile snail e appare già una chiocciola (ing. snail) sul display quando si carica il programma.

FLAPPY BIRD – GIOCARE CON GAME ENGINE 1 Questo è l'ultimo esempio in questa guida di avvio rapido e in questo caso è il divertimento ad essere in primo piano. Con il programma seguente è possibile creare un piccolo gioco di abilità, sviluppato originariamente per smartphone, che ha goduto agli inizi del 2014 di grande popolarità. Lo sviluppatore Dong Nguyen, tuttavia, ha deciso, nel febbraio dello stesso anno, di ritirare il gioco da App Store. Tuttavia, ci sono attualmente una serie di cloni, che hanno reso il gioco tra i più popolari di oggi.

Flappy Birds sul display

Aprire il programma con File -> Esempi -> GameEngine -> Game-Engine1 -> FlappyBirdClo-ne. L'obiettivo del gioco è passare in volo con un uccellino tra due tubi. In questo gioco il

display è acceso lateralmente in modo da poter sfruttare la lunghezza del display. Il control-lo è facile da ricordare in quanto è necessario puntare solo il tasto dell'hardware verso sinistra, con cui è possibile dare all'uccello un piccolo slancio. Tuttavia ci sono tante funzioni che possono essere attivate premendo a lungo il tasto, come spingere l'uccello sulla parte superiore del tubo, slancio insufficiente e caduta dell'uccello. La difficoltà aumenta con ogni ostacolo, in quanto la distanza tra i due tubi diventa sempre più piccola. Quando l'uccello fallisce, viene visualizzato il numero di ostacoli superati. Premendo nuovamente il tasto, si può partire da zero. Il programma è un bel gioco di abilità, ma provoca anche tanto pathos. Ancora tanto diver-timento per confrontarsi direttamente con i propri amici. Per poter utilizzare il controller con display anche in modalità portatile, c'è la possibilità di collegare una batteria. Si do-vrebbe, tuttavia, prestare sempre attenzione di scollegare l'alimentazione dopo aver giocato in quanto la scheda Arduino consuma abbastanza con i suoi circa 70 mA. Il codice sorgente del progetto è molto grande e non sarà spiegato in questa sede. Sareb-bero tuttavia solo funzionalità utilizzate nel famoso Game Engine 1. Così si vede quanto può essere raggiunto già con questi agenti. Il già citato manuale online approfondisce ulterior-mente la programmazione dei giochi. Sono forniti ulteriori giochi e Game-Engine oltre agli esempi presentati; quindi è possibile migliorare lo stile e le opzioni dei giochi. Oltre alla propaggine di Super Mario e Point-n-Click-Adventure è possibile apprendere anche gli ele-menti di gioco più importanti ed essere in grado di programmare autonomamente i giochi.

ALLEGATO Una breve panoramica dei principali comandi del Game Engine 1:

init byte contrast (0–63)

Inizializzazione del display con valore di contrasto crescente

update - Aggiornamento del Game Engine (trasferimento del contenuto del display, richiesta di immissioni ecc.)

drawPixel byte x, byte y (posizione x, y)

disegna un punto nella posizione specificata

drawLine byte x1, byte y1 (Punto 1) byte x2, byte y2 (Punto 2)

disegna una linea tra entrambi i punti (x1, y1) e (x2, y2)

drawValue byte x, byte y (posizione x, y),

disegna un punteggio in qualsiasi posizione (x, y)

byte value

drawBitmap byte x, byte y, byte width, byte height, const byte bitmap[]

disegna una bitmap sulla posizione x, y con la lunghezza (width) e la larghezza (height)

isFrameCount byte frame restituisce TRUE, quando è disegnato il numero indicato tra parentesi nelle immagini (frame); uso: processo temporizzato

joypad.isPressed byte button restituisce TRUE, quando è premuto il tasto (RIGHT, LEFT, DOWN, UP, A, B)

beep - genera un bip (segnale acustico)