Bouw Je Eigen Game Een Jet-Net IT-project voor 12 tot 15 jaar
Frank Wartena, Philips Research Edwin Lenderink, ASML Arno Moonen
1
Bouw Je Eigen Game
Jet-Net
Colofon Auteurs
Frank Wartena, Philips Research, Eindhoven, Nederland Edwin Lenderink, ASML, Veldhoven, Nederland Arno Moonen, Valkenswaard, Nederland
Ondersteuning
Jos Vreeker, Jet-Net coordinator, ASML, Veldhoven Inge Wouters, Jet-Net coordinator, ASML, Veldhoven Jos Nelis, Jet-Net coordinator, Philips, Eindhoven Anja Welvaarts, Jet-Net coordinator, Philips Research, Eindhoven
Illustraties
Stan Groenland, Eindhoven, Nederland
Uitgegeven door
Philips Human Resources Nederland / Jet-Net Postbus 90050 5600 PB Eindhoven, Nederland ASML Communication department/ Technology Promotion Postbus 324 5500 AH Veldhoven, Nederland
Versie 2.2, maart 2014 Copyright 2014 Koninklijke Philips N.V.en ASML Holding N.V. Alle rechten voorbehouden.
2
Bouw Je Eigen Game
Jet-Net
Inhoudsopgave 1
Inleiding ............................................................................................................................... 4
2
Aan de slag met Linux ......................................................................................................... 5
3
Het Jet-Net-spel spelen ....................................................................................................... 8
4
Je eigen introductiescherm................................................................................................ 11
5
Een nieuwe look voor jouw introductiescherm................................................................... 18
6
De definitie van een level van je spel ................................................................................ 21
7
Definieer je eigen wereld ................................................................................................... 23
8
Je eigen level ontwerpen ................................................................................................... 25
9
Je eigen afbeeldingen gebruiken als achtergrondmotief ................................................... 28
10 Het spel spelen op je eigen Android-telefoon .................................................................... 31 11 Het spel opslaan ................................................................................................................ 34 12 Thuis spelen en programmeren......................................................................................... 37 13 Laatste opmerkingen ......................................................................................................... 39 Bijlage A: extra tekenpapier voor het ontwerp van je eigen levels ........................................... 42 Bijlage B: het project op een USB-stick ................................................................................... 43 Bijlage C: tips voor het oplossen van problemen ..................................................................... 45 Notities ..................................................................................................................................... 46
3
Bouw Je Eigen Game
1
Jet-Net
Inleiding
De kans is groot dat je je computer en smartphone dagelijks gebruikt. Je gebruikt ze waarschijnlijk om te internetten, te chatten met je vrienden of om schoolprojecten uit te voeren. In die gevallen maak je gebruik van computerprogramma’s en applicaties die door programmeurs zijn ontwikkeld. Vandaag leren we je om zelf te programmeren. Je zult een spel voor je Android smartphone ontwikkelen. Via een aantal opdrachten kun je je eigen spellevels maken en de looks van het spel aan je eigen smaak aanpassen. Tijdens deze opdrachten kom je meer te weten over programmeren, besturingssystemen, programmeertalen, machinetaal en nog veel meer. Wij hopen dat je veel plezier beleeft aan het programmeren van je eigen spel!
Hey pap….als ik de opstartprocedure configureer, zal het system de asset-install van de file-swap wissen die gekoppeld is aan de conflict mode van de reboot met de Android UI designer toolkit. Kun jij even de syntax in de Integrated Development Environment debuggen, zodat ik de juiste fill-Rect op het InitWithScreen kan opgeven? Oma wacht namelijk op het volgende spellevel dat ik samen met de USB-link wil compileren.
4
Bouw Je Eigen Game
2
Jet-Net
Aan de slag met Linux
Het programma dat we gebruiken voor het maken van het spel, zal op het besturingsprogramma Linux draaien. Dit is een alternatief voor Windows van Microsoft. Linux werkt bijna hetzelfde als Windows, dus is het makkelijk te gebruiken. Als je vragen hebt, kun je altijd bij ons terecht. Hoe communiceer je met je computer? Een computer heeft een besturingssysteem nodig om goed te kunnen werken. Zodra een computer wordt opgestart, is dit de eerste software die in het geheugen van het systeem wordt geladen. Het besturingssysteem is verantwoordelijk voor allerlei zaken waardoor je in met je computer kan communiceren. Dat zijn zaken zoals een toetsenbord, een muis, een scherm, een harde schijf enz. Het zorgt er bovendien voor dat programma's zoals Word, Excel of spellen kunnen worden gestart. Het meest bekende besturingssysteem is Windows, maar er zijn nog veel meer. Voorbeelden zijn UNIX, MAC OS, Linux, en van heel lang geleden MS-DOS. Het fijne van Linux is dat het gratis van internet kan worden gedownload.
Linux is alleen een besturingssysteem. Het omvat geen programma’s zoals Word, Excel en Mediaplayer. Omdat een besturingssysteem zonder programma’s niet handig is, worden doorgaans aanvullende programma’s bij een systeem geleverd. Een Linux-systeem met aanvullende programma’s wordt een “Linux distributie” genoemd en hiervan zijn er heel wat. Momenteel bestaan er ruim 300 en elk jaar komen er weer nieuwe versies bij. Wij gebruiken de Linux distributie met de naam Lubuntu. Dit is een zogenoemde “Live DVDversie” van de populaire Ubuntu distributie. Dat wil zeggen dat je Lubuntu rechtstreeks vanaf een DVD kunt starten en het dus niet op de harde schijf van je computer hoeft te installeren. Zo kun je een kopie van de DVD van internet downloaden en thuis gebruiken als je wilt. In hoofdstuk 11 wordt uitgelegd hoe dat werkt. Niet alle computers hebben een DVD-speler. Daarom kan het materiaal ook via een USB-stick worden gebruikt. De coaches voor dit project zullen de USB-stick indien nodig uitdelen. Je mag de USB-stick na de Jet-Net-les NIET verwijderen, omdat we hem ook voor de volgende les nodig zullen hebben. Om aan de opdrachten te kunnen werken, moet de DVD of de USB-stick in/op de computer aangesloten blijven. Als je thuis verder wilt werken aan het project en hiervoor je eigen USB-stick wilt gebruiken, vind je in bijlage B meer informatie over hoe je je eigen stick hiervoor kunt voorbereiden.
5
Bouw Je Eigen Game
Jet-Net
De coaches zullen de computers al hebben opgestart en als je scherm er zo uitziet als in onderstaande afbeelding, kun je doorgaan met hoofdstuk 3. Zo niet, lees dan verder in dit hoofdstuk om je computer op te starten.
Afbeelding 1: zo moet je scherm eruitzien om door te kunnen gaan met hoofdstuk 3 Hier zullen we uitleggen hoe je je computer moet voorbereiden om te beginnen aan het programmeren van je eigen spel. Deze stappen moet je ook uitvoeren als je thuis aan je spel wilt werken. Lubuntu starten Als een computer wordt opgestart, volgt hij altijd een bepaalde opstartstrategie. De computer zal op een aantal locaties zoeken naar een besturingssysteem. Meestal begint de computer eerst met zoeken naar een DVD in de DVD-speler. Als de computer hier niets kan vinden, controleert hij of er een USB-stick is aangesloten. Als de computer geen besturingssysteem kan vinden op een DVD of USB-stick, gaat hij gewoonlijk door met het doorzoeken van de harde schijf. Je moet er dus voor zorgen dat er een DVD in de DVD-speler is geplaatst of dat er een USBstick is aangesloten op het moment dat de computer op zoek gaat naar een besturingssysteem. Ga als volgt te werk om Lubuntu te starten: 1. Start de computer op de gebruikelijke manier op (met Windows). 2. Plaats de DVD in de DVD-speler en start de computer opnieuw op.
6
Bouw Je Eigen Game
Jet-Net
Als Lubuntu niet vanzelf opstart, gebruikt je computer blijkbaar een andere opstartstrategie. In dit geval moet je de computer “vertellen” dat hij vanaf de DVD moet opstarten. Dat doe je als volgt: 1. Druk tijdens het opstarten van de computer op de knop
. Welke knop dat is, is afhankelijk van het computermerk. Voor Dell-computers is het de F12-toets. 2. Kies de optie “start from CD/DVD.” Opstarten vanaf de USB-stick: 1. Schakel de computer uit. 2. Sluit de USB-stick op een vrije USB-poort aan. 3. Schakel de computer in. 4. Druk tijdens het opstarten van de computer op de knop . Welke knop dat is, is afhankelijk van het computermerk. Voor Dell-computers is het de F12-toets. 5. Kies de optie “start from USB Flash drive.” De computer zal nu opstarten vanaf de DVD of de USB-stick. Het volgende startscherm zal verschijnen:
Afbeelding 2: het Lubuntu-startscherm Druk op de Enter-toets of wacht een paar seconden. De computer zal doorgaan met opstarten en er zal wat informatie op het scherm verschijnen. De Lubuntu-versie op de DVD of USB-stick is zodanig geprogrammeerd dat het programma dat jij nodig hebt automatisch zal opstarten. Het programma waar we vandaag mee zullen werken, heet “IntelliJ IDEA”. In IntelliJ IDEA zal ook het “project” waar we aan zullen werken automatisch worden geopend. Het heet een project, omdat wij een verzameling bestanden zullen gebruiken om het spel te programmeren en uit te voeren. Al deze bestanden worden samengevoegd in een “project”. Nu zou je computerscherm eruit moeten zien als in Afbeelding 1. In deze handleiding zullen wij je leren hoe je het spel aan je eigen voorkeuren kunt aanpassen en hoe je het spel op je smartphone kunt spelen.
7
Bouw Je Eigen Game
3
Jet-Net
Het Jet-Net-spel spelen
Je begint met een basisversie van het Jet-Net-spel. In de volgende hoofdstukken zullen wij deze versie op basis van jouw voorkeuren verder verbeteren. In de eerste opdrachten zullen wij je leren hoe je door het programma IntelliJ IDEA kunt navigeren en krijg je een eerste kans om het spel te spelen. IntelliJ IDEA is een zogenoemde Integrated Development Environment (IDE). Dat betekent dat je het kunt gebruiken om de broncode van je spel aan te passen, je spel te compileren of je spel te debuggen - allemaal in één programma. Terwijl de computer opstart, heeft IntelliJ IDEA automatisch het juiste project geladen. Een project bestaat uit een aantal bestanden die samen de basis voor het complete spel vormen. Deze bestanden worden in verschillende mappen ingedeeld. Deze verschillende mappen en bestanden worden in het linkerscherm van InteliJ IDEA weergegeven. Dit scherm toont de zogenoemde solution tree, die alle bestanden bevat die nodig zijn voor de ontwikkeling van jouw spel. De solution tree zou eruit moeten zien zoals in Afbeelding 3.
Afbeelding 3: de initiële bestandsstructuur In de solution tree worden zowel mappen als bestanden weergegeven. Als er een klein driehoekje voor een naam in de solution tree staat, wordt hiermee een directory aangegeven. Zowel BreakIt als External Libraries zijn mappen. Om te zien welke bestanden in een map staan, moet je de map “openen”. Hiervoor kun je op het driehoekje voor de mapnaam klikken of dubbelklikken op de mapnaam zelf. Afbeelding 4 zie je de solution tree nadat de map BreakIt is geopend. Een geopende map wordt weergegeven met een omlaag wijzende pijl (zie de map BreakIt in Afbeelding 4). Een gesloten map wordt weergegeven met een naar rechts wijzende pijl (zoals de map Assets in Afbeelding 4).
Afbeelding 4: de map BreakIt is geopend
8
Bouw Je Eigen Game
Jet-Net
Je kunt zien dat het driehoekje voor BreakIt eerst naar rechts wees en nu naar beneden. Om een map te sluiten, kun je op het driehoekje klikken of op de naam dubbelklikken. In veel opdrachten van deze les moet je bestanden wijzigen. Om bestanden te kunnen openen, moet je ze eerst in de solution tree opzoeken. Als je een bestand moet openen, zullen we aangeven waar het bestand in de solution tree staat, en wel als volgt: BreakIt/Source/BreakIt.hx (het aangewezen bestand in Afbeelding 5) De ‘/’ scheidt de mappen in de boomstructuur. Je kunt naar het genoemde bestand gaan door elk van de genoemde mappen te openen.
Afbeelding 5:de map Source is geopend in de solution tree Om het bestand te openen, dubbelklik je op de bestandsnaam in het scherm van de solution tree. Het bestand wordt nu in het bewerkingsvenster aan de rechterkant geopend (zie Afbeelding 6). Er kunnen meerdere bestanden openstaan. Je kunt tussen de bestanden navigeren door op de tabbladen bovenaan het bewerkingsvenster te klikken.
9
Bouw Je Eigen Game
Jet-Net
Afbeelding 6: het bestand BreakIt.hx (in de map Source) is geopend in het bewerkingsvenster Opdracht
1: “Open het bestand BreakIt.hx en speel het Jet-Net-spel”
1. Klik op het kleine driehoekje dat naar rechts wijst voor de map BreakIt. 2. Klik op het kleine driehoekje dat naar rechts wijst voor de map Source. 3. Dubbelklik op het bestand BreakIt.hx in de nu geopende map Source. (Opmerking: in de komende opdrachten zullen we deze drie stappen samenvatten in de instructie: Open BreakIt/Source/BreakIt.hx. 4. Klik in de menubalk bovenaan het scherm op “Run” (er verschijnt een menukeuzelijst) en klik vervolgens op “Run ‘OpenFL (default)’”
5. Het spel wordt nu door de software gestart. Dat duurt even. Onderaan het scherm verschijnt een aanvullend venster. Wij zullen later uitleggen wat hier wordt weergegeven.
6. Het spel wordt in de browser gestart. Gebruik het toetsenbord om door het spel te navigeren. Gebruik dus NIET de muis terwijl je het spel speelt in de browser op je computer. 7. Na het titelscherm kun je een wereld kiezen (kies Alpha, later zullen we aan je eigen wereld werken) door op de Enter-toets op het toetsenbord te drukken en selecteer een level met behulp van de pijltoetsen op het toetsenbord. Druk op Enter als je een level hebt gekozen.
10
Bouw Je Eigen Game
Jet-Net
8. Zodra het spel is gestart, kun je de balk onderaan het scherm met de pijltoetsen van het toetsenbord besturen. Als je op de pijl omhoog drukt, begint de bal te bewegen. 9. Om de snelheid van de bal te verhogen, druk je op de toets +/= en om de snelheid te verlagen, druk je op de toets -/_ . 10. Als je wilt stoppen, druk je op het X in de rechterbovenhoek van het spelscherm.
11. Hierna moet je op de rode Stop-knop onderaan het scherm van IntelliJ IDEA klikken.
Zoals je hebt gezien, ziet het spel er nog niet erg gelikt uit. In de volgende hoofdstukken kun je het spel aanpassen door je eigen kleuren te gebruiken, het speelveld aan te passen en achtergrondafbeeldingen toe te voegen enz. Daarbij helpen we je natuurlijk. Gebruik van de sneltoetsen Aangezien je opdracht “Run”, “Run ‘OpenFl (default)’” veel zult gebruiken, kun je ook de snellere toetsencombinatie Shift+F10 gebruiken. Je kunt deze optie vergelijken met de populaire toetsencombinatie Ctrl+C (kopiëren) en Ctrl+V (plakken) in Windows. Door het gebruik van sneltoetsen hoef je minder te klikken. Maar omdat we willen dat je in de opdrachten snapt wat je doet, gebruiken wij de lange versie (dus “Run”, “Run ‘OpenFl (default)’” in plaats van Shift+F10). Je kunt de sneltoetsen natuurlijk altijd gebruiken. Ze worden weergegeven als je de menu’s opent.
11
Bouw Je Eigen Game
4
Jet-Net
Je eigen introductiescherm
Om het spel aan te kunnen passen, moet je de broncode ervan wijzigen. Deze broncode bestaat uit tekst die je kunt lezen en bewerken. Dit kun je in IntelliJ IDEA zelf doen. Spreek je talen! De taal die wij dagelijks gebruiken, wordt ‘natuurlijke taal’ genoemd. Wij gebruiken deze taal om informatie aan elkaar door te geven, grappen te maken, te roddelen enz. Een computer kent het verschil tussen deze verschillende toepassingen van taal niet. Een computer raakt in de war van woorden met meerdere betekenissen, zoals ‘muis’, waarmee een dier, een computerapparaat of een bangerik kan worden omschreven. Voor computers zijn speciale talen ontwikkeld, zogenoemde ‘programmeertalen’. Deze zijn erg nauwkeurig en duidelijk. In programmeertalen worden alleen tekens gebruikt en taken gegeven die de computer begrijpt. Dat zijn woorden en symbolen zoals “letter”, “line”, “write”, “+”, “(“, “)”, “=”, enz. De meeste programmeertalen zijn in het Engels ontwikkeld.
Ons spel is gemaakt met de programmeertaal Haxe (uitgesproken als hex). Haxe een open source programmeertaal. Dat betekent dat iedereen deze software gratis kan gebruiken. Het is tevens een multiplatform language. Dat betekent dat deze taal kan worden gebruikt voor het programmeren van software die op verschillende apparaten moet kunnen worden gebruikt, zoals applicaties voor mobiele telefoons of software die draait op de backbone servers voor internet. Een bestand dat is geschreven in Haxe is makkelijk herkenbaar aan de bestandsextensie .hx. Multi-platform development We gaven al aan dat er verschillende besturingssystemen voor computers bestaan (Windows, MacOS, Unix, Linux). Om het nog ingewikkelder te maken, zijn er ook verschillende besturingssystemen voor smartphones (iOS, Android, BlackBerryOS, Windows Phone, Symbian). Helaas is het vaak niet mogelijk om een applicatie die voor een bepaald besturingssysteem is ontwikkeld, op een ander besturingssysteem te gebruiken. Dat betekent dat als wij een spel willen maken dat op al deze verschillende besturingssystemen werkt, wij 9 verschillende versies van het spel moeten programmeren! Gelukkig zijn er manieren om een spel slechts één keer te programmeren en het daarna voor verschillende platformen te compileren ofwel beschikbaar te maken. Je moet dan nog wel 9 verschillende versies van je spel compileren, maar je hoeft het maar één keer te programmeren. De technologie die hiervoor wordt gebruikt, wordt “multi-platform development” genoemd en dat is precies wat jij vandaag met Haxe en IntelliJ IDEA zult gaan doen. Helaas is hiermee niet gegarandeerd dat je je spel op elk besturingssysteem kunt installeren. Voor veel besturingssystemen, met name die voor smartphones, is het vereist dat applicaties eerst worden bekeken en getest door de distributeur van het betreffende besturingssysteem, voordat zij op je smartphone kunnen worden geïnstalleerd. Dat geldt voor iOS, het besturingssysteem van Apple voor iPhones en iPads, en voor Windows Phone. Dat betekent dat je je eigen spel niet op iPhones of Windows Phones kunt installeren.
12
Bouw Je Eigen Game
Jet-Net
Het eerste element dat je kunt wijzigen, is het introductiescherm. Je kunt de naam van het spel en de namen van de ontwikkelaars aanpassen. De huidige versie laat het volgende scherm zien:
Afbeelding 7: het originele introductiescherm van het spel Opdracht 2: “Wijzig het introductiescherm van het spel” 1. Sluit de browser van het spel af dat je net hebt gespeeld en klik op de rode Stop-knop onderaan het scherm van IntelliJ IDEA, als je dat nog niet hebt gedaan. 2. Open het bestand BreakIt/Source/game/screen/IntroScreen.hx zodat je de inhoud ervan kunt zien in het bewerkingsvenster van IntelliJ IDEA. Ga naar de regels 28 tot 31 in dat bestand via de pijltoetsen “Up” en “Down”.
3. In regel 28 tot 31 zie je de onderstaande tekst: // TODO Set your own title for the game this.textGameTitle = “Break IT”; // TODO Fill in your own names this.textAuthors = “by Jack & Josh”; 4. Vervang nu in regel 31 de tekst by Jack & Josh door je eigen naam/namen. Hierbij mag je de aanhalingstekens (“) aan het begin en einde van de tekst niet wissen, anders snapt de computer niet meer wat je bedoelt. Je mag bovendien niet meer dan 32 tekens gebruiken, omdat er niet meer tekens kunnen worden weergegeven. 5. Je kunt ook de titel van het spel wijzigen door de tekst Break IT in regel 29 te vervangen. Je kunt maximaal 16 tekens gebruiken, omdat meer tekens niet kunnen worden weergegeven. Houd je altijd aan de volgende regels (dat wordt in de wereld van het programmeren syntax genoemd) : 1. laat de aanhalingstekens staan, 2. vervang de tekst tussen de aanhalingstekens en 13
Bouw Je Eigen Game
Jet-Net
3. eindig elke regel met een puntkomma. Een voorbeeld: // TODO Set your own title for the game this.textGameTitle=“** SMASH IT **”; // TODO Fill in your own names this.textAuthors=“by William Shakespeare”; 6. Om te controleren of je wijzigingen werken, voer je het bijgewerkte programma uit. Klik hiervoor op “Run” en vervolgens op “Run ‘OpenFL (default)’”. IntelliJ IDEA zal nu de wijzigingen opslaan, compileren en het programma starten. Het in de opdracht beschreven introductiescherm ziet er nu zo uit:
Afbeelding 8: het bijgewerkte introductiescherm Als alles volgens plan is verlopen, zie je nu in de browser een nieuw introductiescherm dat jouw naam en de nieuwe naam voor het spel bevat. Een korte cursus Haxe Regel 28 en 30 beginnen allebei met “//”. In Haxe (en veel andere programmeertalen) betekent dit dat je een commentaar schrijft dat niet interessant is voor de computer. In commentaarregels kun je in gewone taal (Engels) uitleggen wat de bedoeling is. Dat kan handig zijn als ook anderen jouw programmeercode kunnen inzien. In de tweede en vierde regel wijs je waarden toe aan twee “variabelen.” Variabelen zijn net als kleine doosjes waar je iets in kunt stoppen dat je er later weer uithaalt. Elk doosje krijgt een eigen naam, in dit geval textGameTitle en textAuthors. De computer begrijpt een aantal verschillende soorten variabelen. In dit geval zijn ze van het type STRING. Dat betekent dat je er een stukje tekst in kunt opslaan. String-variabelen beginnen en eindigen altijd met een aanhalingsteken (“). Computers zijn niet erg slim. Daarom moeten de instructies die je aan de computer geeft heel accuraat zijn. Als er sprake is van ook maar de kleinste afwijking, begrijpt de computer het niet meer. “NAME” is bijvoorbeeld iets heel anders dan “name”, dus de taalregels zijn zeer streng. Dit wordt ook wel de “syntax” van de taal genoemd. Hier volgen een paar syntaxregels die belangrijk zijn tijdens het programmeren: Een commentaar in één regel begint met // // this is a comment Een commentaar verdeeld over meerdere regels begint met /* en eindigt met */ /* this is a comment on various lines */ Tekst moet tussen aanhalingstekens staan. Elke tekst wordt afgesloten met een puntkomma. String text = “This is a piece of text”;
14
Bouw Je Eigen Game
Jet-Net
Problemen oplossen in IntelliJ IDEA Als je een fout hebt gemaakt en de code kan niet worden omgezet in een werkend programma, laat de software dit weten door een foutmelding weer te geven onderaan het scherm van IntelliJ IDEA.
Afbeelding 9: foutmelding onderaan het scherm van IntelIiJ IDEA IntelliJ IDEA geeft ook aan welke fout je hebt gemaakt en in welke regel van de code. Je vindt detailinformatie over de fouten aan het einde van de lijst met meldingen. Scroll naar beneden in het venster met meldingen onderaan.
Afbeelding 10: waarschuwing over een fout die is gemaakt met een verwijzing naar de betreffende regel Begrijpen wij elkaar? Wij hebben de taalregels van Haxe zeer strict opgevolgd, maar de computer, die het echte werk moet doen, begrijpt het nog steeds niet. Dat komt, omdat de computer alleen machinetaal begrijpt. Dus de instructies die in de programmeertaal zijn geschreven, moeten worden vertaald naar machinetaal, zodat de computer het begrijpt. Dat wordt gedaan door een zogenoemde “compiler” en het bijbehorende vertaalproces wordt “compiling” of “building” genoemd. Tijdens deze build fase worden de commentaarregels (beginnend met // of /* willekeurige tekst */ ) volledig genegeerd aangezien de computer ze niet kan gebruiken. De overige instructies worden “compiled” in reeksen van nullen en 1-en. Een computerchip is opgebouwd uit miljoenen schakelaartjes ofwel transistors (vergelijkbaar met een lichtschakelaar) die ofwel aan (1) of uit (0) zijn. Het aantal transistors en de snelheid waarmee zij kunnen schakelen, maken de moderne computers zo krachtig. Het is ook mogelijk om een programma rechtstreeks in machinetaal te schrijven. In dat geval moet je de computer bit voor bit vertellen wat hij moet doen. Dat neemt zeer veel tijd in beslag en je maakt heel gemakkelijk fouten. Echte programmeurs programmeren ook nog maar zelden in machinetaal en gebruiken doorgaans een programmeertaal en een compiler.
15
Bouw Je Eigen Game
Jet-Net
In dit voorbeeld ontbreekt aan het einde van regel 29 een puntkomma (;). Zoals aangegeven in het blauwe tekstvak “Een korte cursus Haxe” op pagina 14, moeten de syntaxregels nauwkeurig worden opgevolgd. Probeer zelf een aantal fouten uit (verwijder bijvoorbeeld de “ aan het begin van een string) en kijk wat er gebeurt. Bugs wegwerken Omdat je zo nauwkeurig moet werken tijdens het programmeren, kunnen er snel fouten ontstaan. Je moet dan op zoek gaan naar waar de fout voorkomt. Dat wordt “debugging” genoemd. De term “debug” wordt al sinds 1940 gebruikt. Toendertijd waren computers enorme machines die uit mechanische onderdelen waren opgebouwd. Op een bepaald moment vloog een mot in een machine, raakte een van de elektrische circuits en verzoorzaakte een probleem in de computer. Om het problem op te kunnen lossen, moest men eerst de mot vinden en sindsdien wordt het opsporen van problemen in computerprogramma’s “debugging” genoemd. (een mot heet “bug” in het Engels).
Toen we je vroegen om het spel voor het eerst te gebruiken, hebben we niet uitgelegd wat op dat moment in IntelliJ IDEA gebeurt. Nu wij het venster onderaan hebben geïntroduceerd waar alle stappen worden vastgelegd, kunnen wij ook toelichten wat er precies gebeurt. Als je de instructie Run geeft om het programma uit te voeren, begint de IDEA-software eerst met het compileren van het programma. Het zal de tekst die je geschreven hebt, vertalen naar een programma dat door de computer kan worden uitgevoerd. Als de compilatie zonder fouten is voltooid, wordt je programma gestart, zodat je het kunt testen. Houd het onderste scherm in de gaten als je je programma de volgende keer uitvoert. Computerprogramma’s worden steeds ingewikkelder en de kans dat zij meteen de eerste keer werken, is dan ook niet zo groot. Om deze reden worden nog slimmere geïntegreerde ontwikkelomgevingen geïntroduceerd om de programmeur bij de ontwikkeling van applicaties en het oplossen van bugs te helpen. Tips voor debugging De volgende tips helpen je misschien om fouten op te sporen: 1. Houd bij waar je in de code wijzigingen aanbrengt. Voer de wijzigingen, indien mogelijk, een voor een in en voer het programma (Run) na elke wijziging uit om te kijken of het nog steeds werkt. 2. Zorg ervoor dat elke programmeertaak wordt afgesloten met een puntkomma “;” 3. Tekst die in een string variable wordt geplaatst, heeft een aanhalingsteken (“) aan het begin en het eind. Meer informatie over variabelen vind je in het blauwe tekstvak “Een korte cursus Haxe” op pagina 14. Als deze tips niet werken, vraag dan een van de coaches die je ondersteunen.
16
Bouw Je Eigen Game
Jet-Net
Slim programmeren Normaal gesproken is een programma opgebouwd uit een aantal onderdelen die allemaal hun eigen, specifieke taak hebben. Elk onderdeel wordt een “class” genoemd. Het werken met deze “classes” heeft een aantal grote voordelen:
Grote programma’s worden in een aantal kleinere onderdelen verdeeld die eenvoudiger te maken zijn.
Je kunt specifieke “classes” voor een bepaald type opdracht maken. (Bijvoorbeeld alles wat met de afbeeldingen op het scherm te maken heeft).
Door de programma’s in te delen in “classes”, krijg je een beter overzicht van het programma.
Grote programma’s worden door veel mensen tegelijkertijd ontwikkeld. Door in “classes” te werken, kan het werk veel makkelijker worden verdeeld.
Soms gebruiken verschillende programma’s dezelfde soorten opdrachten. In een dergelijk geval is het goedkoper om de opdracht een keer te programmeren en de “classes” voor andere programma's te hergebruiken.
Het is slim om een programma niet uit een grote berg code op te bouwen, maar om deze in kleinere
5stukjes Your teown introscreen (cont.) hakken.
.
17
Bouw Je Eigen Game
5
Jet-Net
Een nieuwe look voor jouw introductiescherm
Wij beginnen met het aanpassen van de tekstkleur van het introductiescherm. Hierna wijzigen wij het motief van de achtergrond van het introductiescherm. Opdracht 3: “Wijzig de tekstkleur in het introductiescherm” 1. Open het bestand BreakIt/Source/BreakIt.hx . 2. Ga naar regel 23 in dat bestand.
3. De opdracht in regel 23 ScreenManager(Color.yellow …) vertelt het programma dat het de kleur geel moet gebruiken voor de tekst op het introductiescherm. Je kunt deze kleur aan je eigen voorkeur aanpassen door yellow te wijzigen in de kleur die jij wilt. Je kunt hierbij kiezen uit alle kleuren die beschikbaar zijn in BreakIt/Source/util/Color.hx. Zorg wel dat Color. blijft staan en dat je alleen yellow in een van de andere kleuren wijzigt (bijv. blue).
4. Voer het bijgewerkte programma uit (klik op “Run” en daarna op “Run ‘OpenFL (default)’”). Let op Zorg ervoor dat je de naam van de kleur precies zoals boven aangegeven schrijft, dus met de juiste hoofd- en kleine letters. 18
Bouw Je Eigen Game
Jet-Net
Wat is een kleur en hoe vertel ik de computer wat hij aan de gebruiker moet laten zien? Je kunt je natuurlijk heel filosofisch afvragen “wat is eigenlijk een kleur?”, maar een veel praktischere vraag tijdens het programmeren, is: “Hoe kan ik dat weergeven wat wij blauw noemen?” Elk jaar wacht de modebranche met spanning op “de kleur van het nieuwe seizoen” en als je je kamer wilt schilderen, kun je in de bouwmarkt kiezen uit een groot aantal kleuren. Al deze kleuren hebben een naam, maar deze namen kunnen per leverancier verschillen. Aangezien de computer alleen kan werken met eenduidige kleuren, moet er een standaard worden gebruikt. De meest gebruikte standaard is de kleurencode RGB (Red, Green, Blue). Deze is gebaseerd op hetzelfde system dat wordt gebruikt in een scherm van een televisietoestel, laptop of mobiele telefoon. Je vertelt gewoon aan de computer hoeveel rood, blauw en groen hij moet laten zien. Als hij geen van deze kleuren hoeft te tonen, krijg je zwart. Als je voor de maximale waarde van deze drie kleuren kiest, zien je ogen de kleur wit. Dus om blauw te laten weergeven, vertel je aan de computer om de maximale waarde blauw te tonen en geen rood of groen. Hiermee is nog niet het hele probleem opgelost, want de computer moet ook weten hoe groot het “maximum” van een bepaalde kleur is. Hiervoor maken we gebruik van de hexadecimale code om getallen tussen 0 (00 hex) tot 255 (FF hex) uit te drukken. Hexadecimale codes maken geen gebruik van 0-9 als cijfers, maar van 0-F (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). Dus elk hexadecimaal cijfer kan 16 mogelijkheden vertegenwoordigen. Dat betekent dat twee hexadecimale cijfers staan voor 16 x 16 mogelijkheden en dat zijn er dus 256. Dus 00 00 00 is zwart en FF FF FF is wit. Bij de RGB-code wordt de R als eerste genoemd, daarna de G en als laatste de B. Dus onze kleur blauw is 00 00 FF (zie regel 19 in Color.hx). Om aan te geven eenchange getal als hexadecimaal begint het met 0x: You candat also the backgroundnummer patternisofgenoteerd, the introduction screen:
Als je wilt, kun je ook je eigen kleur definiëren. In regel 34 van het bestand BreakIt/Source/util/Color.hx staat de kleur ofwel “color” "special1".
Als je FF0000 met regel 17 vergelijkt, zie je dat “special1” aanvankelijk als rood wordt weergegeven. Nu mag jij de zes tekens na 0x wijzigen (de tekens die in bovenstaande afbeelding zijn gemarkeerd). Zoals aangegeven geven de eerste twee tekens de hoeveelheid rood aan, de tweede twee tekens geven de hoeveelheid groen aan en de laatste twee tekens de hoeveelheid blauw. Vergeet niet dat je in totaal zes tekens nodig hebt en dat het een getal moet zijn of een van de eerste 6 letters uit het alfabet (A tot F).
19
Bouw Je Eigen Game
Jet-Net
Opdracht 4: “Wijzig het achtergrondmotief van het introductiescherm” 1. In regel 23 van BreakIt.hx zie je dat het motief “patterns/darkwood.png” wordt genoemd als het motief dat op het introductiescherm moet worden weergegeven. 2. Ga naar de map BreaktIt/Assets/patterns en bekijk de beschikbare motieven door erop te dubbelklikken.
3. Wijzig in regel 23 in BreakIt.hx het motief dat je graag als achtergrond zou willen gebruiken. 4. Voer het bijgewerkte programma uit (klik op “Run” en vervolgens op “Run ‘OpenFL (default)’”) Tips voor debugging De volgende tips helpen je misschien om fouten op te sporen: Zorg ervoor dat elke programmeertaak wordt afgesloten met een “;” Zorg ervoor dat de namen van de kleuren en de namen van de motieven correct gespeld zijn en dat elke kleur begint met “Color”. Als deze tips niet werken, vraag dan een van de coaches om je te helpen eventuele foutmeldingen op te lossen.
20
Bouw Je Eigen Game
6
Jet-Net
De definitie van een level van je spel
Misschien had je al gezien dat er een wereld is die “Yours!” heet, maar dat hiervoor geen level beschikbaar is.
Afbeelding 11: huidig “Yours!”-startscherm Voordat je aan je eigen wereld kunt beginnen, moet je begrijpen hoe de levels voor de Alphawereld worden gedefinieerd. Dat wordt gedaan in het bestand Breakit/Source/game/Config.hx. Voordat je het bestand Breakit/Source/game/Config.hx opent, moet je eerst eens de namen van de bestanden in de map Breakit/Source/game bekijken. Je herkent de verschillende modules in het spel aan hun namen, bijvoorbeeld Bricks, Ball, Paddle, enz. Opdracht 5: “Bekijk hoe een level wordt geprogrammeerd voor de Alpha-wereld” 1. Open het bestand Breakit/Source/game/Config.hx 2. In het spel bevat elke level een aantal blokken in verschillende kleuren. Elk speelveld is 11 blokken breed en 8 blokken hoog. Dat zijn in totaal dus 88 blokken.
3. In de regels 37 tot 44 zie je hoe de programmacode voor level 1 in de Alpha-wereld eruit ziet:
4. Je ziet dat als een A een blauw veld in het spel aanduidt en een B een rood veld dat de code de blokken van level 1 van de level hierboven aangeven. 21
Bouw Je Eigen Game
Jet-Net
Kleuren toewijzen aan de letters bij het definiëren van een wereld. Elke letter in de regels 37 tot 44 vertegenwoordigt een blok met een specifieke kleur. Door de letters te wijzigen, pas je dus het volledige speelveld aan. In level 1 hebben we alleen blokken gebruikt die verdwijnen als ze door de bal worden geraakt, maar er zijn nog meer soorten blokken. Je kunt kiezen uit de volgende soorten blokken: A, B, C of D : een blok dat verdwijnt als het door de bal wordt geraakt F : een blok dat niet verdwijnt Z : een lege plek, hiermee kun je lege plekken in het speelveld invoegen. In de regels 29 tot 33 zie je welke kleur aan welk blok is toegewezen voor de Alpha-wereld:
Voor een voorbeeld van het bloktype Z (zombie) kijk je in level 2 van de Alpha-wereld. Je ziet dan dat dit type niet zichtbaar is en daarom hoef je er ook geen kleur aan toe te wijzen.
22
Bouw Je Eigen Game
7
Jet-Net
Definieer je eigen wereld
In het vorige hoofdstuk heb je gezien hoe de Alpha-wereld is gedefinieerd en hoe de levels van deze wereld worden geprogrammeerd. Nu zullen we je eigen wereld aan jouw wensen aanpassen. Opdracht 6: “Pas je wereld aan jouw wensen aan” 1. Ga naar regel 110 in het bestand Breakit/Source/game/Config.hx
2. Wijzig de naam van jouw wereld in de gewenste naam door de tekst Yours! tussen de aanhalingstekens te vervangen. 3. Je kunt ook de kleur wijzigen (zie opdracht 3) van de naam van jouw wereld door de kleur te veranderen van lime in de kleur die jij wilt, de kleuren waar je uit kan kiezen vind je op pagina 18. 4. Color.black definieert de achtergrond waarop de naam van jouw wereld wordt weergegeven. Ook die kun je aanpassen. 5. Als laatste kun je nog het achtergrondmotief aanpassen door een ander motief te kiezen (zie opdracht 4), de motieven waar je uit kunt kiezen vind je op pagina 20. 6. Voer het spel uit (klik “Run” en daarna op “Run ‘OpenFL (default)’”) om te kijken hoe jouw aangepaste scherm eruit ziet. Als alles goed is ingesteld, zie je de nieuwe naam in de door jou gekozen kleuren, maar kun je nog steeds geen level kiezen. Dat komt, omdat je nog steeds levels moet definiëren en aan jouw wereld moet toewijzen. We zullen beide stappen in de volgende opdracht met elkaar combineren. Opdracht 7: “Geef een level weer in jouw wereld”. 1. Ga naar regel 112. Daar staat dat je de regels 113 tot en met 119 moet “uncommenten” om de code te activeren waarmee je de plaatjes voor de betreffende wereld kunt instellen. Om deze regels te “uncommenten”, hoef je alleen de dubbele schuine strepen (//) voor de tekst worldB. te verwijderen. 2. Als je deze regels alleen via “uncommenting” activeert, krijg je dezelfde assets voor jouw wereld (peddel, bal en bloktypen) als in de Alpha-wereld. Om de assets te wijzigen, wijzig je de groene strings in de regels 113 tot en met 119 in de typen peddel, bal en blokken die je wilt. (Kijk voor de mogelijke opties in de verschillende submappen in BreakIt/Assets, bijv. voor effen blokken kijk je bij BreakIt/Assets/brick/plain)
23
Bouw Je Eigen Game
Jet-Net
3. Houd er rekening mee dat je nu weliswaar de assets voor jouw wereld hebt ingesteld, maar dat je nog geen level hebt toegevoegd. Dus bevat jouw wereld nog geen echt level. Om een level in jouw wereld te definiëren, moet je de regels 129 tot en met 138 “uncommenten”.
4. Om te controleren of je eigen wereld werkt en hoe het level eruit ziet, voer je het spel uit (klik op “Run” en vervolgens op “Run ‘OpenFL (default)’”).
24
Bouw Je Eigen Game
8
Jet-Net
Je eigen level ontwerpen
Nu je eigen wereld werkt, kun je je eigen level ontwerpen en aan jouw wereld toevoegen. Opdracht 8: “Ontwerp je eigen level” De coaches zullen je een apart vel hebben gegeven met daarop tabellen zoals deze hieronder. Teken a.u.b. op het aparte vel en niet in dit boekje. Als je de vierkanten inkleurt, krijg je een idee hoe het level er op het scherm uit zal zien. Let op Een level is pas voltooid als alle gekleurde blokken (A, B, C en D) verdwenen zijn. Zorg er dus voor dat je zulke blokken niet insluit met vaste blokken, omdat de bal deze nooit kan raken om ze te laten verdwijnen.
Teken a.u.b. niet hier, maar op het aparte vel.
Als je niet tevreden bent over je eerste ontwerp, kun je de coaches om meer vellen met lege tabellen vragen. Als je klaar bent met het tekenen van je level op papier, kun je doorgaan met de volgende opdracht:
25
Bouw Je Eigen Game
Jet-Net
Opdracht 9: "Programmeer je levelontwerp in je eigen wereld” 1. Ga naar regel 129 in het bestand Breakit/Source/game/Config.hx. Als je opdracht 8 correct hebt uitgevoerd, ziet het scherm er als volgt uit:
2. In deze regel kun je het aantal levens (oorspronkelijk 3) en de snelheid van de bal (oorspronkelijk 4) aan het begin van het level aanpassen. 3. Daarna moet je in de regels 130 tot 137 de letters aanpassen die de blokken vertegenwoordigen. Gebruik jouw ontwerp om de letters dienovereenkomstig aan te passen. 4. Als je klaar bent, voer dan het programma met jouw nieuwe level uit (klik op “Run” en klik vervolgens op “Run ‘OpenFL (default)’”).
Let op Zorg ervoor dat er komma’s tussen de blokken staan en dat je alleen bestaande blokletters gebruikt: A, B, C, D, F, Z
26
Bouw Je Eigen Game
Jet-Net
Sander!!!!!!! Wat doen die blokken op mijn pc??!!!!!!!! Het werkt!
Tips voor debugging De volgende tips helpen je misschien om fouten op te sporen: Zorg ervoor dat de letter voor elk blok een hoofdletter is. Controleer of je geen andere letters dan A, B, C, D, F en Z hebt gebruikt. Zorg ervoor dat er een komma tussen alle letters staat. Zorg ervoor dat er een komma aan het eind van elke regel met letters staat (behalve voor de laatste regel met letters: hier moet geen komma staan). Als deze tips niet werken, vraag dan een van de coaches om je te helpen eventuele foutmeldingen op te lossen. Is het je gelukt om je eigen level te voltooien? Sluit de browser als je klaar bent met het spelen van het spel.
27
Bouw Je Eigen Game
9
Jet-Net
Je eigen afbeeldingen gebruiken als achtergrondmotief
Je kunt een foto die je hebt gemaakt met je (Android) telefoon gebruiken als achtergrondmotief in het spel. Ga hiervoor als volgt te werk: 1. De telefoon correct aansluiten Zorg ervoor dat je telefoon via een USB-kabel op de computer is aangesloten. Als je je Android-telefoon aansluit, verschijnt er mogelijk een melding met informatie over hoe je USB-massaopslag activeert.
Afbeelding 12: een Android-telefoon in de modus USB-massaopslag aansluiten 2. De gewenste afbeelding zoeken Zodra de telefoon is aangesloten, moet je een melding zien (“Removable medium is inserted”). Kies de optie “Open in File Manager” en klik op OK. Als deze melding niet verschijnt, kun je de File Manager ook openen door op het eerste pictogram in de linker onderhoek (blauwe map met een pijl erop) te klikken. Je telefoon zou in de linker balk van de File Manager moeten staan.
Afbeelding 13: bestanden openen op de Android-telefoon in de File Manager 28
Bouw Je Eigen Game
Jet-Net
De meeste telefoons en camera’s slaan foto’s op in een map met een naam die lijkt op DCIM of 100ANDR. Open deze map en zoek een foto die je leuk vindt. Kopieer de betreffende foto hierna naar je desktop: 1. Selecteer de foto in de File Manager door erop te klikken. 2. Kopieer de foto met de toetscombinatie Ctrl+C. 3. Klik in de File Manager op Desktop in de lijst met Places aan de linkerkant. 4. Druk op Ctrl+V om de foto in je Desktop-map te plakken.
Afbeelding 14: File Manager met de Desktop met de foto My_Picture.png erin 3. De afmeting van de foto aanpassen Om er zeker van te zijn dat jouw foto op het scherm past, moeten wij de afmeting aan bepaalde waarden aanpassen en de foto naar de map van het spel kopiëren: 1. Ga in de File Manager naar je Desktop door te klikken op Desktop in de lijst Places aan de linkerkant. 2. Dubbelklik op het pictogram met de naam RESIZE MY IMAGE. 3. Nu verschijnt een venster waarin je de foto die je wilt gebruiken, kunt selecteren. Klik op Desktop in de lijst Places aan de linkerkant en selecteer de foto die je hier net hebt ingeplakt. Klik hierna op OK.
29
Bouw Je Eigen Game
Jet-Net
4. Het programma zal nu automatisch de afmetingen van jouw foto aanpassen en je in een nieuw venster vragen waar je de foto wilt opslaan. Je moet je foto opslaan in de map /home/student/Desktop/Game/BreakIt/Assets/patterns. In het bovenste gedeelte van het scherm kun je, als je dat wilt, ook de naam van de foto aanpassen. Maar je kunt ook gewoon de voorgestelde naam aanhouden. Klik nu op OK.
5. Jouw foto is nu beschikbaar in de map voor motieven van het spel 4. De foto gebruiken Ga terug naar IntelliJ IDEA en zoek de regel waarvoor je het nieuw aangemaakte motief wilt toepassen. Als je bijvoorbeeld de standaardachtergrond wilt wijzigen, open je BreakIt.hx en vervang je “pattern/darkwood.png” door “pattern/awesome.jpg” (afhankelijk van de naam die je in de vorige stap hebt gekozen). Als je het spel met je nieuwe achtergrondfoto wilt testen, klik je op “Run” en daarna op “Run ‘OpenFL (default)’”.
30
Bouw Je Eigen Game
10
Jet-Net
Het spel spelen op je eigen Android-telefoon
Zoals eerder aangegeven kan het spel momenteel alleen op Android-smartphones worden gespeeld. Daarom heb je een Android-telefoon nodig om dit hoofdstuk te voltooien. Voordat we het spel op jouw telefoon kunnen uitvoeren, moet je eerst de ontwikkelingsmodus ofwel Developer Mode activeren. Je bent dan in staat om het spel via een USB-verbinding van de computer naar je telefoon te sturen. Daarna moet je IntelliJ IDEA laten weten dat je het spel op een Android-apparaat wilt spelen. De ontwikkelingsmodus activeren De manier waarop je de ontwikkelingsmodus moet activeren op je telefoon die nodig is om het spel van de computer naar je telefoon over te zetten, verschilt per versie van het Androidbesturingsysteem. Bovendien hebben verschillende fabrikanten zoals Samsung en LG zelf ook de manier aangepast waarop de ontwikkelingsmodus moet worden ingeschakeld. Als de onderstaande stappen voor jouw telefoon niet werken, vraag dan een van de coaches om hulp. Als je niet zeker weet welke versie je gebruikt, ga dan naar het Instellingen-menu, scroll helemaal naar beneden en tik op de menuoptie Over de telefoon of Over de tablet. Hier vind je de Android-versie. Android 2.3 1. Open Instellingen. 2. Ga naar Applicaties. 3. Ga naar Opties voor ontwikkelaars. 4. Vink de optie USB–foutopsporing aan. 5. Vink de optie Onbekende bronnen aan. 6. Ga terug naar het beginscherm. Android 4.0 of hoger Als je de versie 4.0 of hoger gebruikt, volg dan onderstaande stappen voordat je doorgaat: 1. Open Instellingen. 2. Kijk of je Opties voor ontwikkelaars in de lijst ziet staan. a. Zo ja, ga door naar stap 6 hieronder. b. Zo niet, ga door met stap 3. 3. Ga naar Over de telefoon / tablet. 4. Zoek het Build-nummer en tik er zeven keer op. Er verschijnt nu een melding dat je een “Ontwikkelaar” bent. Volg onderstaande stappen om de ontwikkelingsmodus te activeren: 5. Open Instellingen. 6. Ga naar Opties voor ontwikkelaars. a. In sommige gevallen moet je de opties eerst activeren door een schakelaar op dit scherm van uit naar aan te zetten. 7. Vink de optie USB-foutopsporingaan.
31
Bouw Je Eigen Game
Jet-Net
8. Ga terug naar het hoofdmenu Instellingen en ga naar Beveiliging. 9. Vink de optie Onbekende bronnen aan. 10. Ga terug naar het beginscherm. De instellingen voor IntelliJ IDEA wijzigen 1. Druk op F4 op het toetsenbord van je computer of klik met de rechtermuisknop op de projectnaam BreakIt in IntelliJ IDEA en selecteer de optie Open Module Settings. 2. Selecteer de optie Modules in de lijst aan de linkerkant. 3. Zorg ervoor dat BreakIt is geselecteerd in de lijst die ernaast verschijnt. 4. Open het tabblad Haxe. 5. Wijzig de Target in Android.
6. Klik in de rechter onderhoek op OK. Je Android-telefoon op je computer aansluiten Gebruik een micro USB-kabel om je Android-telefoon op je computer aan te sluiten. Als je geen micro USB-kabel hebt meegenomen, vraag dan aan een van de coaches of zij je een kabel kunnen lenen. In sommige gevallen verschijnt nu een pop-upvenster genaamd “Removable medium is inserted”. Als je dit ziet, kun je op de Cancel-knop van dit scherm klikken. IntelliJ IDEA weet nu dat je jouw spel op een Android-apparaat wilt spelen en dat jouw Android-telefoon via een USB-kabel met de computer verbonden is. Start het spel zoals je al eerder hebt gedaan door op de groene pijl te klikken. Het spel zou nu op je telefoon moeten starten. Afhankelijk van de snelheid van je computer, kan dat enkele minuten duren. Het spel 32
Bouw Je Eigen Game
Jet-Net
zal nu ook in de lijst met applicaties op je telefoon staan, dus kun je het daar openen als je het later nog eens wilt spelen. Tijdens het spelen, kun je de snelheid van de bal verhogen door op de tekst LIVES in de rechterbovenhoek van je scherm te tikken. Om de snelheid van de bal te verlagen, tik je op de levelnaam in de linkerbovenhoek van je scherm. Let op Deactiveer de opties “USB-foutopsporing” en “Onbekende bronnen” op je telefoon als je klaar bent met dit hoofdstuk om het risico op malware te verkleinen! Afspraken, maar dan anders Standaarden zijn afspraken over hoe dingen worden gedaan. Iedereen weet dat je moet stoppen bij een rood stoplicht en dat auto’s van rechts voorrang hebben. Zou het niet makkelijk zijn als iedereen dezelfde standaarden zou gebruiken? Helaas is dat niet het geval. Bijna elk land gebruikt een eigen taal en valuta of zelfs eigen soorten stopcontacten. Bij smartphones is het helaas vergelijkbaar. Elk besturingssysteem voor smartphones heeft zijn eigen manier om applicaties te ontwikkelen en zijn eigen mechanismen om applicaties op je telefoon op te slaan. Zoals eerder aangegeven, kunnen we het spel momenteel alleen op Android-telefoons spelen. Gelukkig gebruiken alle Android-telefoons dezelfde kabel om je telefoon op een pc aan te sluiten: een micro USB-kabel. In het verleden gebruikte elke telefoonfabrikant zijn eigen kabel om zijn telefoon op een pc aan te sluiten en om te telefoon op te laden. In 2009 werd besloten dat alle telefoons zouden overstappen op micro USB en sinds 2011 is dat de officiële standaard voor alle telefoons.
33
Bouw Je Eigen Game
11
Jet-Net
Het spel opslaan
Lubuntu moet worden uitgevoerd vanaf een DVD of een USB-stick en slaat de wijzigingen die je voor het spel hebt uitgevoerd niet automatisch op. Als je je computer nu zou uitschakelen, zou al je werk verloren gaan! Dat wil je natuurlijk niet als je na deze les door wilt gaan met je spel. Daarom leggen we in dit hoofdstuk uit hoe je je spel op je eigen USB-stick kunt opslaan. Let op Als je Lubuntu vanaf een geheugenstick gebruikt, moet de stick op de computer aangesloten blijven. Je moet dus je eigen USB-stick op een tweede USB-poort aansluiten om je werk op te slaan. Het spel op een USB-stick opslaan 1. Sluit je geheugenstick op de computer aan. 2. Er verschijnt nu een pop-upvenster genaamd “Removable medium is inserted” waarin je wordt gevraagd wat er met de nieuwe USB-stick moet gebeuren. Kies de optie Open in File Manager en klik op OK. Hiermee open je de File Manager die op Windows Explorer lijkt.
Afbeelding 15: open de USB-geheugenstick in de File Manager
Afbeelding 16: de File Manager geeft de inhoud van de USB-stick weer
34
Bouw Je Eigen Game
Jet-Net
3. Dubbelklik op de Desktop (als je de Desktop niet kunt zien, kun je ernaartoe gaan door te klikken op het pictogram van de twee kleine vensters in de rechter onderhoek van het scherm) op het pictogram Game. Hierdoor wordt een tweede tabblad geopend in het venster File Manager. Selecteer op het nieuwe tabblad in het venster File Manager de map BreakIt door er één keer op te klikken. Druk de toetsen “Ctrl” en “c” nu tegelijkertijd in. Op deze manier kopieer je de map met al je werk.
Afbeelding 17:de File Manager toont de inhoud van de map Game 4. Ga nu terug naar het eerste tabblad in de File Manager, waar de inhoud van jouw geheugenstick staat. Druk tegelijkertijd de toetsen “Ctrl” en “v” in om je werk naar de geheugenstick te kopiëren. Als er een melding verschijnt die aangeeft dat de map of het bestand al bestaat, vink je het hokje “Apply this option to all existing files” aan en kies je de optie Overwrite. 5. Om het opslagproces te voltooien, moet je je USB-stick correct ontkoppelen. Dat wordt ook wel unmounten genoemd. Dit is vergelijkbaar met de functie Safely Remove Hardware op een Windows-computer. In het venster File Manager doe je dit door op het pictogram met de pijl omhoog te klikken dat naast de naam van de USB-stick in de lijst “Places” staat:
Afbeelding 18:de File Manager met de inhoud van de USB-stick met het BreakIt-spel erop en met een gemarkeerde unmount-knop. 35
Bouw Je Eigen Game
Jet-Net
Let op Het is heel belangrijk dat je stap 5 uitvoert, want anders bestaat de kans dat je spel helemaal niet op de USB-stick opgeslagen wordt. 6. Nu kun je de USB-stick veilig van de computer loskoppelen. Je werk staat nu veilig opgeslagen op de USB-stick. Als je wijzigingen uitvoert in het spel, moet je de bovenstaande stappen herhalen om de nieuwste versie van je spel op je stick op te slaan.
36
Bouw Je Eigen Game
12
Jet-Net
Thuis spelen en programmeren
Je kunt thuis doorgaan met de aanpassingen op het spel en het ook thuis spelen. Hiervoor moet je je werk dat je in hoofdstuk 11 hebt opgeslagen, weer laden. Je hebt natuurlijk ook Lubuntu nodig. Als je nog geen kopie van de DVD hebt, kun je het programma hier downloaden: http://www.philips.nl//research/jet-net/downloads/ Je kunt deze .iso schijfimage met elke DVD-schrijftoepassing op een DVD branden. Als alternatief kun je de schijfimage ook op een USB-stick zetten zoals beschreven in bijlage B. Zodra je de DVD of USB-stick met het programma hebt, kun je het starten zoals beschreven in hoofdstuk 2. Als de computer IntelliJ IDEA heeft geladen, kun je je spel vanaf de USB-stick laden. Het spel vanaf de USB-stick laden Je kunt het spel als volgt vanaf de USB-stick laden: 1. Sluit de USB-stick met het opgeslagen spel aan op de computer. 2. Nu verschijnt er een pop-upvenster waarin je wordt gevraagd wat je met de USB-stick wilt doen. Kies de optie Open in File Manager en klik op OK. Hiermee open je de File Manager die lijkt op Windows Explorer. 3. Ga naar de applicatie IntelliJ IDEA, open het File-menu en klik op Close Project. Hiermee sluit je het standaard spelproject dat altijd de basisversie van het spel is, nadat de computer is opgestart. 4. Zodra je het welkomstscherm van IntelliJ IDEA ziet, klik je hier op “Open Project”.
Afbeelding 19:het welkomstscherm van IntelliJ IDEA
37
Bouw Je Eigen Game
Jet-Net
5. In het pop-upvenster moet je naar de map BreakIt op jouw USB-stick gaan. Je vindt de USB-stick in de map /media. Hoogstwaarschijnlijk zijn er maar twee mappen in /media: cdrom en een tweede map die een willekeurige naam kan hebben. Open de tweede map (dus niet cdrom, maar de andere) en daar zou je nu een map genaamd BreakIt moeten zien. Selecteer de map BreakIt en klik op OK.
Afbeelding 20:het BreakIt-project vanaf je USB-stick openen 6. IntelliJ IDEA zal nu je spel vanaf je USB-stick laden, zodat je er verder aan kunt werken. Je kunt het spel nu spelen of je kunt wijzigingen aanbrengen zoals beschreven in de diverse hoofdstukken. Als je klaar bent met alle wijzigingen, moet je ervoor zorgen dat al je bewerkingen in IntelliJ IDEA zijn opgeslagen. Selecteer hiervoor de optie Save All in het File-menu. Voordat je je USB-stick kunt loskoppelen, moet je deze eerst unmounten, zoals eerder in hoofdstuk 11 beschreven. Ga naar het venster File Manager en klik op het pictogram pijl omhoog naast de naam van je USB-stick in de lijst “Places”. Als het venster File Manager niet meer open staat, kun je de File Manager openen door op het mappenpictogram in de linker onderhoek van je scherm te klikken (naast de pijl omhoog waarmee je het startmenu van Lubuntu opent).
38
Bouw Je Eigen Game
13
Jet-Net
Laatste opmerkingen
Dit is het einde van het project “Bouw Je Eigen Game”. Voordat je de computer uitschakelt, is het van belang dat je je werk op een USB-stick opslaat als je thuis verder aan je spel wilt werken (zie hoofdstuk 11). Als je dat hebt gedaan, schakel je de computer uit: 1. Klik in het start-scherm (zie onderstaande afbeelding) op de blauwe pijl omhoog.
2. Selecteer Logout in dit scherm:
39
Bouw Je Eigen Game
Jet-Net
3. Selecteer in het volgende scherm de optie Shutdown:
4. De computer wordt nu uitgeschakeld. a. Als je het project vanaf een DVD uitvoert: Net voordat de computer wordt uitgeschakeld, zal de lade van de DVD-speler opengaan. Je kunt dan de DVD uit de speler halen (indien nodig). Als je de DVD niet uit de speler kunt halen, moet je de computer weer inschakelen en snel de Open-knop van de speler indrukken. Nu kun je de DVD veilig uit de speler halen. b. Als je het project vanaf een USB-stick uitvoert: Nadat de computer is uitgeschakeld, kun je de USB-stick loskoppelen. Geef de USB-stick terug aan een van de coaches die jouw ondersteunen bij het project. Vraag aan een van de coaches of je de DVD mee naar huis mag nemen, of hoe je een kopie kunt maken of de software van internet kunt downloaden. Met de DVD kun je het spel thuis spelen en aanpassen. Extra informatie Voor meer informatie over de tools en technologieën die voor dit project worden gebruikt, kun je een kijkje nemen op de volgende websites: Lubuntu: http://www.lubuntu.net/ Linux: http://www.linux.org/ Haxe: http://haxe.org/ OpenFL: http://www.openfl.org/ IntelliJ IDEA: http://www.jetbrains.com/idea/ 40
Bouw Je Eigen Game
Jet-Net
Wij van Jet-Net vonden het heel leuk om je wat te leren over het programmeren van games en het werken met Linux. Wij hopen dat je het ook leuk vond om aan het project te werken.
http://jet-net.nl/
41
Bouw Je Eigen Game
Jet-Net
Bijlage A: extra tekenpapier voor het ontwerp van je eigen levels
42
Bouw Je Eigen Game
Jet-Net
Bijlage B: het project op een USB-stick Er zijn scholen waarvan de computers geen DVD-speler meer hebben. Om aan het project te kunnen werken, kun je de hele inhoud van de programma-DVD op een USB-stick zetten. Elke computer waarop het project wordt uitgevoerd, heeft zo’n USB-stick nodig. In deze bijlage leggen we uit hoe je dat doet. Materiaal dat je voor de voorbereiding nodig hebt: 1. Een computer met Windows, Linux of Mac OS X. 2. Het programma UNetbootin, welke je hier gratis kan downloaden: http://unetbootin.sourceforge.net/ 3. De DVD image van de Bouw Je Eigen Game les, welke je hier gratis kan downloaden: http://www.philips.nl//research/jet-net/downloads/ 4. Een of meer USB-sticks (minimale capaciteit van 2GB) waar alle gegevens van mogen worden verwijderd. Voer de volgende stappen uit: 1. Formatteer de USB-stick (zorg dat je alles wat je wilt bewaren van de USB-stick af hebt gehaald!) a. In Windows Verkenner klik met de rechter muis op de USB-stick en selecteer Formatteren. b. In het popup scherm selecteer bij Bestandssysteem FAT32 en zorg dat het vinkje bij Snelformatteren aan staat. c. Klik op Starten en wacht tot het formatteren klaar is. 2. Start het programma Unetbootin. 3. Kies de optie Diskimage. 4. Open de gedownloade image (ISO) van de Bouw Je Eigen Game les door op de knop met de drie puntjes te klikken en het juiste bestand te selecteren. 5. Zorg dat de hoeveelheid gereserveerde ruimte voor bewaren van gebruikersgegevens tussen reboots op 0 staat. 6. Kies de USB schijf waarop je de image wilt plaatsen. 7. Druk op OK en wacht tot je de melding krijgt dat het proces voltooid is.
43
Bouw Je Eigen Game
Jet-Net
Dat was het! Vergeet niet de USB-stick te testen. Als je meer USB-sticks wilt voorbereiden, kun je dit proces herhalen. Volg de stappen in hoofdstuk 2 om het project vanaf de USB-stick te starten.
44
Bouw Je Eigen Game
Jet-Net
Bijlage C: tips voor het oplossen van problemen Soms kan er iets misgaan tijdens de les. Hieronder staan enkele snelle oplossingen voor als je even vastzit. De code van het spel bevat fouten en je krijgt het niet meer opgelost Voor het geval dat je de code van het spel echt niet meer kunt corrigeren, kun je de oorspronkelijke code van het spel als volgt herstellen: 1. Open de File Manager door op het mappenpictogram in de linker onderhoek van het scherm te klikken. 2. Ga naar de map /home/student/backup/Game en kopieer (ctrl + C) de map BreakIt. 3. Ga naar /home/student/Desktop/Game en gebruik de optie plakken (ctrl + V). 4. Nu verschijnt er een pop-upvenster waarin je wordt gevraagd of je de bestaande bestanden wilt overschrijven. Vink het hokje “Apply this option to all existing files” aan en klik op Overwrite. 5. Nu heb je weer een originele en werkende code en kun je het opnieuw proberen. Als je precies weet welk bestand de fouten bevat, kun je ook alleen dat specifieke bestand uit de back-up kopiëren. Het compileren van het spel voor je Android-telefoon duurt heel erg lang of werkt niet Als het compileren van je spel voor je Android-telefoon, zoals beschreven in hoofdstuk 10, niet werkt, bieden we je de mogelijkheid om een standaard spel op je telefoon te zetten. Hierdoor kun je toch een spel op je telefoon zetten zonder dat je de code hoeft te compileren. 1. Bereid je telefoon voor op de installatie van het spel, zoals beschreven in hoofdstuk 10: de ontwikkelingsmodus activeren. 2. Sluit je telefoon via een micro-USB kabel op de pc aan. Als het pop-upvenster “Removable medium is inserted” verschijnt, klik je op Cancel. 3. Open een Terminal-venster door op het beeldschermpictogram in de linker onderhoek van het scherm te klikken. 4. Ga naar /home/student/Documents/APK door het volgende in te typen: cd ~/Documents/APK 5. Voer het script COPY.sh uit door het volgende te typen: ./COPY.sh 6. Je krijgt nu informatie over het kopieerproces in het terminalvenster. 7. Het spel zou nu beschikbaar moeten zijn in de applicatiemap van je Android-telefoon.
45
Bouw Je Eigen Game
Jet-Net
Notities ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________
46
