Voor u liggen de componenten van het spelpakket uitgestald. Naast de Quick Start Guide,
zult u het LCD display shield en het joypad shield vinden. Beide schermen zijn speciaal
ontworpen voor de Arduino Uno en precies op elkaar afgestemd. Ze staan u toe de gegeven
voorbeelden of eigen spelletjes te ontwikkelen. Bekijk de twee schermen nog eens goed. Er
is veel te ontdekken.
1.1 | Het display shield
Het display shield
Bij het display shield betreft het een printplaat die het LCD-scherm 12.864 LCD ST7565
samen met twee hardware knoppen Arduinokompatibel maakt. Het scherm heeft een
resolutie van 128 x 64 px en wordt b ediend via een SPI (Serial Peripheral Interface). De
technische gegevens:
Display shield Arduino-Unokompati be l shi e ld
Display DXDCG12864-4330
Display controller ST7565
Resolutie 128 x 64 px
Bedrijfsspanning 3,3 V
Periferie 2 Onboard knoppen (op A4 en A5)
Schermafmeting 38 x 20 mm
Overige verkorte manier van samenstellen – 14 vrije I/O-poorten op de Arduino
U hoeft echter niet al te veel in de details van de display control te treden, omdat een
bibliotheek u het grootste deel van het werk uit handen neemt, zodat u zich kunt
concentreren op de programmering van spelletjes. Indien u geïnteresseerd bent in meer
gedetailleerde informatie over de bediening van het scherm en over de benodigde
kwaliteiten beschikt, beveel ik het leerpakket "Franzis Maker Kit grafische displays
programmeren“ aan.
1.2 | Het joypad shield
Het joypad shield
Het joypad shield is speciaal ontwikkeld voor dit project en maakt het u mogelijk spelletjes
op praktische en intuïtieve wijze te ontwikkelen. Er bevinden zich zes knoppen op het
shield. Vier van hen zijn op een pad bevestigd, zodat richtingen intuïtief kunnen worden
ingevoerd. Twee andere knoppen zullen individueel het spel dienovereenkomstig van
functies voorzien. In totaal heeft u dus acht knoppen ter beschikking, waarmee een hele
reeks van spelletjes en functies gerealiseerd kunnen worden.
In aanvulling op de knoppen is ook een kleine piëzo omvormer als luidspreker
geïnstalleerd op het montagebord. Zo kunt u niet alleen via de display informatie opslaan,
maar ook akoestische feedbacks geven. De technische gegevens:
Zoals gezegd passen beide shields uitstekend op een Arduino Uno. U moet ervoor zorgen
dat het display shield met de bovenste componentenaanhechting van de Arduino Uno
precies volgt.
Het joypad shield past dan precies op de onderste verbindingslijnen, zoals op de afbeelding
te zien is. Op deze manier hebt u de beste functionaliteit en kunt u de Arduino ook samen
met het shield vasthouden en bedienen.
1.4 | De documentatie
Deze Quick Start Guide geeft u de eerste informatie en een eenvoudig voorbeeld van een
succesvolle entree in de spelprogrammering. Het grootste deel van de informatie kan
worden gevonden in de online handleiding die beschikbaar is voor het programmeren van
spelletjes. U kunt u de volledige pdf downloaden via: http://www.buch.cd. De
bijbehorende code is
In aanvulling op de handleiding vindt u ook de vereiste bibliotheek en de gepresenteerde
voorbeelden.
10223-0
.
1.5 | De community
In het kader van het project vindt u ook van toepassing zijnde informatie op deze website:
http://tiny.systems/spielekonsole
Hier kunt u niet alleen de toekomstige updates van de bibliotheek of de programma’s
raadplegen, maar ook een aantal geavanceerde projecten en informatie van de twee
auteurs. Bovendien worden hier belangrijke onlinegereedschappen ter beschikking gesteld
die u voor de bewerking van uw eigen projecten en voorbeeldprojecten nodig hebt.
1.6 | De ontwikkelomgeving (IDE)
Voordat u ooit iets zou kunnen ontwikkelen, heeft u eerst een zo mogelijk eenvoudig te
gebruiken ontwikkelomgeving (kortweg: IDE) en een aantal gereedschappen nodig. Als
IDE wordt hier de bekende en veelgebruikte Arduino-IDE gebruikt. U kunt de nieuwste
versie voor uw besturingssysteem vinden op de site:
www.Arduino.cc/Downloads
We hebben in onze projecten met de versie 1.6.7 gewerkt, maar de instructies in dit bo ek
zouden tevens moeten werken met nieuwere versies. Na het downloaden en installeren van
de omgeving kiest u nog het juiste board en de juiste poort onder
Instellingen
uit en u kunt
uw Arduino of uw spelconsole programmeren.
Naast Arduino worden er nog enkele andere gereedschappen gebruikt, o nder andere een
programma voor het maken en bewerken van grafieken. In dit boek werden zowel het
Windows-programma Paint als ook de Open source editor Gimp gebruikt. Met een online
tool op tiny. systems kunt u uiteindelijk deze afbeeldingen omzetten in een compatibel
formaat, waarover later meer.
Allereerst is het belangrijk dat u de bibliotheek met voorbeelden van de site
http://www.buch.cd. De bijbehorende code is
10223-0
download en installeert. Om de library te installeren h oeft u alleen maar het zip-bestand
aan de library manager te koppelen. Klik op
.Zip-bibliotheek toevoegen
zip-bestand. Nu zal er een succesmelding hieronder weergegeven worden.
.
Sketch -> Bibliotheek koppelen ->
en selecteer vervolgens het nieuwe gedownloade library
1.7 | Hardware test
De IDE en het voorbeeldprogramma zijn nu ingesteld – nu wordt het tijd om het eerste
programma van de Arduino te laden . Open via
-> Starter
een succesmelding onder het debugvenster. Het display moet er ongeveer zo uitzien als op
afbeelding hieronder. Is dit niet het geval, dan dient u de twee knoppen direct aan de
onderkant van de display te bewegen. Op deze manier kunt u het display contrast instellen
en lost u de meest waarschijnlijke problemen op die zorgen dat u niets kunt zien. Is er dan
echter niets te zien op het scherm, controleer dan de positie van de twee shields op de
Arduino.
het eerste programma en klik op de Upload-Button. Na korte tijd verschijn t er
Bestand -> V oorbeelden -> GameEngine
Stel nu uw optimale contrastwaarde in en onthoud deze waarde. Tijdens de volgende
projecten dient u het programma in te voeren, zodat het display ook steeds goed leesbare
meldingen geeft.
In dit voorbeeldprogramma kunt u ook de diverse functies van shields testen. Druk
bijvoorbeeld op een knop van de joypad, dit zal worden gemarkeerd op de display. Het
geluid kan eveneens getest worden . U moet nu dus de volledige functionaliteit van alle
onderdelen testen voordat we daadwerkelijk beginnen .
BALL – TOEGANG TOT DE
SPELPROGRAMMERING
Alles is nu helemaal klaar en getest – het wordt nu tijd om zich met de daadwerkelijke
spelontwikkeling bezig te houden. Opent u hiervoor het voorbeeldprogramma ball via
Bestand -> V oorbeelden -> GameEngine -> Ball
.
In dit eerst eenvoudige voorbeeldpro gramma gaat over het teken en en verplaatsen van een
eenvoudig voorwerp, een bal. Pas eerst het contrast in de programmaregel 9 aan. In deze
regel bevindt zich de setup routine van het commando
tussen haakjes kunt u vervangen door uw individuele contrastwaarde. Dit zal tevens nodig
zijn in de volgende projecten. Daarop aansluitend kunt u het programma op de Arduino
laden. Na een succesvolle upload zult u een eenvoudige object in het midden van het
scherm te zien. Maar hoe wordt dit programmatisch gerealiseerd?
engine unit (20)
. Het cijfer 20
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
}
001
void moveBall() {
002
ballX = ballX + 1;
003
ballX = ballX % 128;
004
ballY = ballY % 64;
005
}
001
void controlBall() {
Met de functie genaamd drawBall (), wordt de bal op de disp lay gebracht. Er zijn slechts
een paar eenvoudige regels die nodig zijn om de juiste pixels op het scherm te activeren.
Dit is vooral omdat het meeste werk op de achtergrond van de GameEngine overgenomen
wordt. De huidige positie van de bal is via de variabelen ballX en ballY bekend. Door de
drawPixel () – functietoegangen die in de huidige positie van de bal en in de onmiddellijke
omgeving van de bal de pixels activeren, wordt de gehele bal zichtb aar. U kunt ook de
vorm van de bal aanpassen door het afwisselen van welke pixels rond de balpositie
eveneens geactiveerd zullen worden. Merk op dat de pixel op de positie 0,0 zich in de
linkerbovenhoek bevindt.
Met de functie moveBall() wordt .de b al in beweging gebracht. Elke keer dat er van deze
functie gebruik wordt gemaakt, is d e x-positie van de b al 1. In gewone taal betekent d it dat
de bal op het scherm naar rechts beweegt. De twee regels daaro nder zorgen ervoor dat de
bal niet de dimensies van het scherm verlaat.
De Modulo zorgt ervoor dat de x-coördinaat nooit groter kan zijn dan 128 en de
y-coördinaat nooit groter dan 64 – dus precies in overeenstemming met 128 x 64 pixels,
die beschikbaar zijn op het scherm.
002
if(engine.joypad.isPressed(UP)){
003
ballY = ballY - 1;
004
}
005
if(engine.joypad.isPressed(DOWN)){
006
ballY = ballY + 1;
007
}
008
}
001
void loop(){
002
if(engine.update()){
003
controlBall();
004
if(engine.isFrameCount(20)){
005
moveBall();
006
}
007
drawBall();
008
}
009
}
Via de controlBall()-functie kunt u nu de bal ook besturen. De knoppen van de joypad
worden daardoor op eenvoudige wijze opgevraagd. De functie
engine.joypad.isPressed(UP) geeft de waarde TRUE wanneer de knop net ingedrukt is.
Vervolgens wordt de y-positie van de bal vermindert met één pixel, wat tot gevolg heeft
dat de bal de bovenkant van het scherm benadert. Op dezelfde manier is er ook de
engine.joypad.isPressed-functie (DOWN). Zo kunnen dus met behulp van de
pijltjestoetsen naar boven en naar beneden de hoogte van de bal beïnvloeden, terwijl deze
zich op het scherm naar rechts beweegt. Als het ene u iteinde van het beeldscherm bereikt
wordt, zal deze opnieuw verschijnen aan het andere uiteinde. Om deze drie funct ies goed
te coördineren, moeten ze op een geschikt moment worden opgeroepen in de looproutine.
Hiertoe is er in de Arduino de loopfunctie die permanent doorloopt. Via de functie
engine.update() wordt gewaarborgd dat al de moto rische functies, zoals de bal tekenen en
evaluatie van de toetsen, werden uitgevoerd voor de volgende ronde. De functie
moveBall() heeft echter nog een andere beperking - het zal slechts alle 20 frames
oproepen. Er wordt dus eerst 20 keer de inhoud van het scherm bijgewerkt vóórdat de
positie van de kogel mag veranderen. De reden hiervoor is, dat de bal anders te snel zou
bewegen.
001
void moveBall() {
PONG – IETSJE AND ER S
Het volgende voorbeeldprogramma handelt over het bekende spel Pong, maar dan iets
anders dan u waarschijnlijk kent. In plaats van één van de sticks te bedienen, beïnvloedt u
hier de bal via de pijltjestoetsen. Zeer binnenkort kunt u ook nieuwe elementen van de
spelprogrammering leren kennen.
Pong werd in 1972 uitgebracht door Atari en is absoluut één van de meest populaire
games. Het is gebaseerd op het spel ping pon g, de bijnaam van tafeltenn is. In de klassieke
versie spelen twee spelers tegen elkaar. Op de twee tegenoverliggende zijden van een
virtuele speelveld bevindt zich een racket in de vorm van een st aaf. Een bal beweegt over
het beeldscherm en de speler moet proberen met zijn racket de bal te stoppen en in de
richting van de tegenstander terug te spelen. Lukt hem dit niet, dan krijgt de tegenstander
een punt.
In deze versie speelt u de rol van de bal, terwijl de twee rackets worden bestuurd door de
computer. U moet proberen om de bal zo lang mogelijk in het spel te houden.
Het voorbeeldprogramma opent u door te klikken op:
Bestand -> V oorbeelden -> GameEngine -> GameEngine1 -> Pong
Het programma bevat veel van wat al bekend is. Ook dit keer is er bijvoorbeeld de functie
drawBall(), die - afhankelijk van de huidige situatie -. een bal op het speelveld tekent.
Evenzo zijn er de functies drawPla yer() en drawField() die de b eide rackets in het display
tekenen. Er bestaat in drawField() nog een ni euwe functie, namelijk drawValue(), die aan
de aangegeven positie het huidige niveau respectievelijk de puntenscore weergeeft en het
punt werd gekenmerkt op de opgegeven locatie. Het huidige niveau verandert wanneer d e
bal met succes gestopt werd. Deze maakt gebruik van de functie moveBall().
Zoals u kunt zien, zijn er verschillende vragen over de positie van de bal. Als deze op de
x-positie 1 of 127 bevindt, betekent dit dat deze niet succesvol gestopt werd en via linkerof rechterkant uit het speelveld gevlogen is. In dit geval wordt de setup-routine opgeroepen
en kan het spel opnieuw beginnen. Bevindt de bal zich op de y-stand 1 of 63, dan stuitert
de bal op de bovenste of onderste rand, door negeren van de collisionY-Variabele en
daarmee de richting van de bal wordt omgekeerd. In beid e vragen
wordt bepaald of de bal door een racket wordt teruggeslagen door controles op als de bal
dicht genoeg bij de racket is en deze raakt. Als dit het geval is, dan wordt de
bewegingvariabele in de x-richting omgekeerd, en het niveau wordt verhoogd.
De spelerbeweging (racket) wordt echter bepaald door het toeval. Voorheen werd alleen
gecontroleerd of de racket zich te dicht bij de boven- of onderkant bevond. Een
verschuiving omhoog of omlaag wordt gegenereerd door toevoeging van een willekeurig
getal tussen -1 en 1. De functieaanroep random(3) genereert willekeurige getallen tus sen 0
en 2. Dit waardebereik wordt met "-1" verschoven binnen het gewenste waardebereik.
012
ballX = ballX + 1;
013
}
014
}
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
}
In de functie controllBall() worden nu de knoppen gevraagd en de positie van de bal wordt
aangepast aan de invoer. Maar de "koppige ball" is u iteraard onderworpen aan de wetten
van de fysica. De natuurlijke beweging van de bal kan daarom alleen worden beïnvloed.
Als de timing van alle functies goed gecoördineerd is, moeten ze in de loop-Routine één
voor één vernoemd worden. De functie isFrameCount() wordt gebruikt om de snelheid van
gebeurtenissen te controleren. De positie van de bal wordt iedere 10 beelden en die van de
rackets iedere 25 beelden veranderd. De balbeweging wordt daarom regelmatig bijgewerkt.
Bovendien is de moeilijkheidsgraad hier ingebouwd. Met ieder niveau wordt de
update-interval iets korter, en dus de beweging sneller. Het spel wordt in de loop van de
tijd dan ook steeds moeilijker.
SNAIL – BITMAPS
BINDEN
In de voorgaande voorbeelden werden de spelelementen voornamelijk vertegenwoordigd
door de lijnen en pixels. In dit voorbeeld leert u hoe u meer complexe afbeeldingen kunt
integreren in een spel. Daarvoor leert u de Onlineco nverter op Tiny.systems kennen.
Op de internetsite
http://tiny.systems/article/mosaic.html
bevindt zich een gereedschap waarmee u gemakkelijk tekeningen kunt maken. Op deze
website vindt u in het midden van een grijs vlak. Als u ergens klikt in dit vlak, activeert u
daarmee een pixel. Klikt u nogmaals op dezelfde pi xel, dan verdwijnt deze weer. Klik en
houdt de muisknop ingedrukt terwijl u de muisaanwijzer over het gebied beweegt. Zoals u
kunt zien, kunt u ook hele tekeningen maken. Het tekenvlak heeft een initiële a fme ti ng va n
16 x 16 px. Voor grotere tekeningen kunt u het gebied vergroten door te klikken op het
juiste pictogram onder het tekenvlak. Als u ontevreden bent over uw tekening, kunt u het
hele gebied verwijderen door te klikken op de X.
Voor de eerste poging kunt u een spelfiguur van 16 x 16 px maken. Wanneer u klaar bent,
klikt u op de haak in de linkerbenedenhoek. Het lijkt op een behoorlijk lange hexadecimale
code die u moet kopiëren in het snail-programma. Open daarvoor het programma door te
klikken op
regel 10 van het programma vindt u de variabele snail, die al met een andere afbeelding
wordt gevuld. Voeg in plaats van de bestaande hexadecimale getallen de door de
mosaic-pagina gegenereerde in. U kunt vervolgens het programma uploaden en zult
merken dat de door u getekende afbeelding op het scherm verschijnt (vergeet niet de
contrastwaarde aan te passen). Met de pijltjestoetsen kunt u de afbeelding op het scherm
verplaatsen. Hiervoor is een nieuwe functie van de library verantwoordelijk, die
DrawBitmap() heet:
engine.drawBitmap(snailX, snailY, 16, 16, snail);
De eerste twee parameters van de f unctie bepaalt de positie van het b eeld op het scherm,
terwijl de volgende twee de grootte van de af beelding aan geven. Op de laat ste posit ie in de
parameterlijst staat de variabele zelf, waarin u de grafische gegevens o pgeslagen heeft. Zo
eenvoudig kan het weergeven van afbeeldingen op het scherm zijn.
Maar er is een tweede manier om Arduino -compatibele grafische gegevens te maken met
de Mosaic-pagina. Wellicht is u de toets, die met bestandenselecties wordt aangeduid,
reeds opgevallen. Het is namelijk mogelijk om bitmap-bestanden via de site te uploaden en
automatisch in hex-code te formatteren. Merk echter op, dat niet alle bitmap-bestanden zo
eenvoudig te converteren zijn. U moet ervoor zorgen dat het een monochrome
Bestand -> Voorbeelden -> GameEngine -> GameEngine1 -> Snail
. Op
(eenkleurige) bitmap betreft. Het is h et eenvoudigste om zelf met een tekenprogramma,
zoals MS Paint, een dergelijke bitmap te maken. Als alternatief is bijvoorbeeld het
tekenprogramma Gimp hier zeer geschikt voor.
Zo slaat u de afbeelding in Paint op juiste wijze op.
De voorbeeldmap van dit programma bevat al op een juiste wijze geformatteerde
afbeelding. Deze draagt de naam Snail.bmp. Dit bestand kunt u uploaden via de
Mosaic-pagina en als output ontvangt u de beeldinformatie in de vorm van hexadecimale
getallen. Deze hexadecimale getallen kopieert u weer in de snail-variabele en er verschij nt
al een slak (eng. snail) op de display zodra het programma geüpload wordt.
FLAPPY BIRD –
SPEELPLEZIER MET
GAME ENGINE 1
Dit is het laatste voorbeeld in deze hand leiding voor een snelle start en h ier staat vooral het
plezier op de voorgrond. Bij het volgende programma gaat het om een klein ervaringsspel,
dat oorspronkelijk voor smartphones ontwikkeld was en d at voo ral aan het b e gin van h et j aar
2014 grote populariteit genoot. De ontwikkelaar Dong Nguyen besloot echter in februari van
datzelfde jaar het spel uit de ap p stores te halen. Toch zijn er momenteel een aantal klon en,
zodat het spelprincipe tot heden populair is .
Flappy Birds op het scherm
Het programma wordt geopen d via
Engine1 -> FlappyBirdClone.
Bestand -> Voorbeelden -> GameEngine -> Game-
Het doel van het spel is met e en vogeltje tu ssen twee pij pen
door te vliegen. Het display is zijwaarts gedraaid in dit spel, zodat u kunt profiteren van de
lengte van het scherm. De besturing is makkelijk te onthouden, omdat men alleen de normaal
naar links wijzende hardwarebu tton nodig heeft, waarmee men de vogel een korte o pleving
kan geven. Toch is veel vaardigheid vereist omdat wanneer men te lang de toets ingedrukt
houdt de vogel bovenop de rioolbuis terecht komt, hij niet genoeg zier heeft en de vogel
neerstort. Daarmee wordt de moeilijkheidsgraad bij elke hindernis verhoogd, omdat de
ruimte tussen de twee buizen kleiner wordt. Als het de vogel niet lukt, wordt het aantal
genomen obstakels aangeduid. Door opnieuw op de knop te drukken kan men opnieuw
beginnen.
Het programma is een leuk ervaringsspel voor tussendoor - en ook de aanleiding voor een
hoop frustratie. Toch doet het veel plezier tegen vrienden te spelen in directe competitie. Om
de controller met het sc herm ook op m obi e l e ijze t e ge brui ke n, i s het mogelijk om een batterij
aan te sluiten. U moet er echter altijd op letten de stroomvoorziening na het spelen weer los te
koppelen, omdat de Arduino board met ongeveer 70 mA een vrij energiehongerige
consument vertegenw oor di gt.
De broncode van het proj ect is zeer uit gebreid en wordt hier niet nader toegelicht. Er worden
echter alleen functie s uit de u nu be k e nde Game E ngi ne 1 ge br uikt. Zo ziet u maar hoeveel nu
al kan worden bereikt met deze middelen. Het h iervoor vermeld e online-handboek gaat men
dieper in op het programmeren van spelletjes. Het stelt meer spelletjes voor, geeft
voorbeelden, en ook toepasselijke Game Engines worden gepresenteerd, dus verbeteren de
stijl en de mogelijkheden van de spelletjes. Naast een hybride van Super Mario en een
point-n-click adventure leert u ook de belangrijkste spelelementen kennen en kunt u
uiteindelijk vol ledi g eige n spe l l etjes programmeren.
BIJLAGE
init
byte contrast (0–63)
Initialisatie van het display met overdragende
contrastwaarde
update
-
Update de Game Engine (Display-inhoud
overdragen, inputs aanvragen, enz.)
drawPixel
byte x , byte y
(x-,y-Position)
tekent een punt op de gegeven positie
drawLine
byte x1, byte y1 (Punkt
1) byte x2, byte y2
(Punkt 2)
tekent een lijn tussen de twee punten (x1, y1)
en (x2, y2)
drawValue
byte x , byte y
value
tekent een score op een willekeurige positie (x,
drawBitmap
byte x, byte y, byte
width,
byte height, c
onst
byte bitmap[]
tekent een bitmap op positie x, y met de lengte
(width) en de breedte (he
ight)
getekend werden; G ebruik: getimed e processen
joypad.isPressed
byte button
geeft TRUE terug, indien er op de knop
gedrukt wordt (RIGHT, LEFT, DOWN, UP, A,
B)
beep - produceert een p ieptoon (toon)
Een korte samenva tting van de belangrijkste opdrachten van de gam e-engine 1:
(x-,y-Position), byte
isFrameCount byte frame Geeft TRUE terug al s het tussen haakjes
y)
opgegeven aant al als beelden (frames)
Loading...
+ hidden pages
You need points to download manuals.
1 point = 1 manual.
You can buy points or you can get point for every manual you upload.