Conrad 10223 Operation Manual [it]

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.

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);

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?

006

engine.drawPixel(ballX, ballY - 1);

007

}

001

void moveBall() {

002

ballX = ballX + 1;

003

ballX = ballX % 128;

004

ballY = ballY % 64;

005

}

001

void controlBall() {

002

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

003

ballY = ballY - 1;

004

}

005

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

006

ballY = ballY + 1;

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.

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.

007

}

008

}

001

void loop(){

002

if(engine.update()){

003

controlBall();

004

if(engine.isFrameCount(20)){

005

moveBall();

006

}

007

drawBall();

008

}

009

}

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.

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

001

void moveBall() {

002

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

003

setup();

004

}

005

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

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().

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

}

001

void movePlayer() {

002

if (player1Y < 7) {

003

player1Y++;

004

}

005

if (player1Y > 55) {

006

player1Y--;

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.

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

}

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

}

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 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

}

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.

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-

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)

(posizione x, y),

posizione (x, y)

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:

drawValue byte x, byte y

disegna un punteggio in qualsiasi

byte value

drawBitmap

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

disegna una bitmap sulla posizione
x, y con la lunghezza (

wid

th)

e l

a

larghezza (height)

isFrameCount

byte frame

restituisce TRUE, quando è

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)

disegnato il numero indicato tra
parentesi nelle immagini (frame);