mollen_meppen.tex

\chapter{Mollen Meppen}

Je hebt zojuist je eerste project geladen en het ontwerp ervan kort gezien. Voor je het een en ander uitgebreid bekijkt ga je de applicatie eerst een keer uitvoeren.

\marginfig{screenshots/MollenMeppen_open_blocks}{Open the Blocks Editor}
Dit doe je door de \menuitem{Blocks Editor} te openen via de \menuitem{Blocks} link rechts boven in het scherm, zie figuur \ref{screenshots/MollenMeppen_open_blocks}. Nu moet je even goed opletten omdat het kan zijn dat je browser toestemming vraagt om een aantal dingen te mogen doen.

%Als eerste wordt het \bestand{AppInventorForAndroidCodeblocks.jnlp} bestand geopend. Als je browser je hierover een vraag stelt moet je op \menuitem{openen} klikken. Vervolgens wordt het bestand geladen door \emph{Java} en kan het zijn dat je toestemming moet geven om het bestand uit te voeren. 
De \menuitem{Blocks Editor} wordt geopend en je ziet wat er in figuur \ref{screenshots/MollenMeppen_BlocksEditor} is afgebeeld.

\inlinefig{screenshots/MollenMeppen_BlocksEditor}{Blocks Editor van MollenMeppen}

%\begin{derivation}{Let op}
%De \menuitem{Blocks Editor} is een aparte applicatie die niet in je webbrowser draait. Je ziet in je taakbalk dan ook een \emph{App Inventor for Android Blocks Editor: MollenMeppen - Screen1} pictogram. 
Met knoppen \menuitem{Design} en \menuitem{Blocks} (Figuur \ref{screenshots/MollenMeppen_open_blocks}) kun je wisselen tussen het \menuitem{Design} scherm en de \menuitem{Blocks Editor}.
%\end{derivation}

\marginfig{screenshots/MollenMeppen_emulator_unlock}{De emulator}
Je kunt nu met een QR-code de app op je smartphone uitproberen (Figuur \ref{screenshots/install_build_qr} een paar bladzijdes terug). 
Als je de applicatie liever wil uitvoeren in de emulator (kan alleen als die ge\"installeerd is) moet je eerst de emulator opstarten. 
\inlinefig{screenshots/MollenMeppen_Connect_menu}{Connect-menu}

\section{De emulator}
(als je met de QR-code en een Android-toestel werkt kun je door naar het volgende hoofdstuk).

Het opstarten van je app in de emulator doe je via \menuitem{Emulator} (zie Figuur \ref{screenshots/MollenMeppen_Connect_menu}).
Als de emulator is opgestart ziet deze er uit zoals afgebeeld in figuur \ref{screenshots/MollenMeppen_emulator_unlock}. De emulator staat nu nog `op slot', je kunt het slot verwijderen door met de muis op het \menuitem{slotje} te klikken, de muisknop ingedrukt te houden, de muis in de richting van de pijl te bewegen zoals aangegeven in figuur \ref{screenshots/MollenMeppen_emulator_unlock} en de muisknop weer los te laten.
\marginfig{screenshots/MollenMeppen}{MollenMeppen}

%\pagebreak
\begin{derivation}{Let op}
Zorg ervoor dat je de emulator maar \'e\'en keer opstart. Het meerdere keren opstarten van de emulator leidt tot een instabiele situatie en zorgt ervoor dat op den duur de boel kan crashen.
\end{derivation}

%\inlinefig{screenshots/MollenMeppen_BlocksEditor_New_emulator}{Locatie van de \menuitem{New emulator} link}

%Als je de emulator `van slot' hebt gehaald kun je verbinding maken met de emulator. Dit doe je door op de \menuitem{Connect to Device} link te klikken en vervolgens \menuitem{emulator-5554} te kiezen, zie figuur \ref{screenshots/MollenMeppen_BlocksEditor_Connect_to_Device}.

%\inlinefig{screenshots/MollenMeppen_BlocksEditor_Connect_to_Device}{Locatie van de \menuitem{Connect to Device} link}

Nadat je op de link geklikt hebt wordt je applicatie in de emulator geladen. 


\section{Testen (Android of emulator)}
Als het laden klaar is zie je wat er is afgebeeld in figuur \ref{screenshots/MollenMeppen} en kun je de applicatie gebruiken. Klik op de mol en kijk wat er gebeurt.
 
Wat er gebeurt is nog niet zo heel spannend en uitdagend, maar daar kun je wat aan doen! Hieronder volgt een serie opdrachten waardoor je `Mollen Meppen' tot een echt spel kunt maken. We raden je aan om na iedere opgave waarin je de code aanpast deze uit te testen op de emulator. Veel plezier en succes!

\section{Blocks Editor}
Voordat je de code gaat aanpassen staan we even stil bij het scherm wat je nu voor je hebt staan, de \menuitem{Blocks Editor}. Dit scherm gebruik je om te programmeren. Net als het \menuitem{Design} scherm bestaat ook dit scherm uit verschillende onderdelen. Deze onderdelen zie je in figuur \ref{screenshots/MollenMeppen_BlocksEditor_onderdelen}.

\inlinefig{screenshots/MollenMeppen_BlocksEditor_onderdelen}{De verschillende onderdelen van de \menuitem{Blocks Editor}}

\begin{description}
  \item[1. De knoppenbalk] In deze balk vind je knoppen om het project op te slaan, stappen ongedaan te maken en om met de emulator te communiceren.
  \item[2. Palette] Het palette is de plek waar je alle categorie\"en van \emph{blocks} vindt die je kunt gebruiken in jouw apps. Onder de tab \menuitem{My Blocks} vind je de door jouw aangemaakte componenten. Hierachter vind je de bijbehorende \emph{blocks}, hiermee kun je bijvoorbeeld een actie koppelen aan een knop.
  \item[3. Blocks] Als je in het palette een categorie aanklikt verschijnt dit overzicht. Hierin vind je de \emph{blocks} zelf die je naar het canvas kunt slepen om ze te gebruiken.
  \item[4. Canvas] In dit deel ontwerp je de gebruikersinterface van je applicatie. Vanuit het palette sleep je \emph{blocks} in het canvas. Wil je een \emph{block} verwijderen, dan sleep je deze naar de prullenbak rechtsonder.
\end{description}

%\pagebreak
\begin{derivation}{Let op}
Op het moment dat je een component in het \menuitem{Design} scherm sleept of een bestaande component een andere naam geeft, dan moet de \menuitem{Blocks Editor} automatisch bijgewerkt worden. Helaas gaat dit niet altijd goed. Als je merkt dat de \menuitem{Blocks Editor} niet meer klopt bij je \menuitem{Design} scherm, sluit de \menuitem{Blocks Editor} dan af en start hem opnieuw op.
\end{derivation}

\section{Willekeurig opduiken van de mol}
De mol beweegt zich erg voorspelbaar op dit moment en dat maakt het spel saai. In de \menuitem{Blocks Editor} kun je zien waarom de mol zich zo gedraagt.

\begin{opgave}
    \opgVraag
	Bekijk de code van de procedure `verplaatsMol' en beredeneer waarom de mol zich verplaatst 
	zoals je ziet wanneer je erop klikt. 
\end{opgave}

\begin{derivation}{Procedures}
\label{der:procedures}
Als je de code bekeken hebt zoals in de opgave hiervoor gevraagd werd, is je hopelijk opgevallen dat er een zogenaamde procedure is gemaakt met de naam `verplaatsMol'. Deze procedure wordt aangeroepen vanuit `ImageSpriteMol.Touched'.

Een procedure (ook vaak \emph{functie} of \emph{methode} genoemd) is een stuk code met een naam. In ons geval `verplaatsMol'. Via de naam kan de bijbehorende code uitgevoerd worden. De naam is als het ware een afkorting voor het stuk code.

Procedures zijn handig omdat ze voorkomen dat je hetzelfde stuk code steeds opnieuw moet maken als je die code op meerdere plaatsen nodig hebt. Dit is minder werk en beperkt tevens de lengte van je applicatie. Wanneer je bovendien duidelijke namen gebruikt is je code ook makkelijker te lezen. Dit alles draagt bij aan de overzichtelijkheid en daarmee de onderhoudbaarheid van de code.
\end{derivation}

\marginfig[-2 inch]{screenshots/MollenMeppen_BlocksEditor_Built-In_Math}{Locatie van de `Built-In' Math link}
Wat je hier feitelijk wilt is dat de $x$ en $y$ positie van de mol (de \emph{ImageSprite}) willekeurig bepaald worden. Hiervoor kun je een \emph{block} vinden onder de \menuitem{Built-In} tab bij \menuitem{Math}, zie figuur \ref{screenshots/MollenMeppen_BlocksEditor_Built-In_Math}. \emph{Blocks} uit de \menuitem{Blocks Editor} kun je simpelweg in het \menuitem{canvas} slepen en daar neerzetten of in elkaar klikken. Als je per ongeluk een verkeerd \emph{block} hebt gebruikt kun je het verwijderen door het naar de prullenbak rechts onder in het scherm te slepen en het \emph{block} los te laten.


\pagebreak
\needspace{5\baselineskip}
\reminder[+.2in]{\lefthand}{Hint: Wat is het Engelse woord voor willekeurig?}
\begin{opgave}
    \opgVraag
	Verander de code van de procedure \emph{verplaatsMol} zodat de mol zich willekeurig verplaatst binnen het veld.
\end{opgave}


\section{Geluid toevoegen als je de mol raakt}
Als de mol geraakt wordt is het leuk als je dat ook hoort. Gelukkig kun je dit programmeren in \ai. Bij het materiaal zit een bestand \emph{whack.mp3} dat je hiervoor kunt gebruiken. Als je dit bestand niet kunt vinden vraag dan aan je leraar waar het staan.

Om \emph{whack.mp3} in je project te krijgen moet je het geluidsbestand toevoegen aan de media. Dit kun je doen via het \menuitem{Design} scherm. Als je niet kunt vinden waar je moet zijn kijk dan eens terug in dit boek naar figuur \ref{screenshots/Ontwikkelomgeving_DesignEditor}.

\begin{opgave}
    \opgVraag
	Voeg het geluid toe aan het spel. 
\end{opgave}

Als je \emph{whack.mp3} hebt toegevoegd en je gaat naar de \menuitem{Blocks Editor} dan zie je dat onder de \menuitem{My Blocks} tab \menuitem{Sound1} is toegevoegd. Hieraan zijn diverse \emph{blocks} gekoppeld die met het afspelen van geluiden te maken hebben. 
 
\begin{opgave}
    \opgVraag
	Speel het toegevoegde geluid af op het moment dat de mol geraakt wordt. 
\end{opgave}


\section{De mol op een timer laten bewegen}
Op het moment is het zo dat de mol zich alleen verplaatst als je hem een mep verkoopt. Het is leuker als de mol af en toe uit zichzelf ergens anders opduikt. Om dit voor elkaar te krijgen ga je een zogenaamde \menuitem{timer} gebruiken.
 
\marginfig{screenshots/MollenMeppen_design_clock1}{Locatie van de \menuitem{Clock} component in het palette}
Een timer kun je vinden via de \menuitem{Clock} component in het \menuitem{Sensors} palette, zie figuur \ref{screenshots/MollenMeppen_design_clock1}. 
Een component kun je in het \menuitem{Viewer} gedeelte van je ontwikkelomgeving slepen. Je ziet dat de component ook toegevoegd wordt in het \menuitem{Components} gedeelte van je ontwikkelomgeving. Dit is de plaats waar je componenten een andere naam kunt geven en verwijderen.
 
 
\begin{opgave}
    \opgVraag
	Voeg een \menuitem{Clock} component aan het spel toe en kijk goed waar deze neergezet wordt. Staat daar ook nog een andere component?

  Beredeneer waarom de clock en de andere component hier neergezet worden. 
\end{opgave}

Nadat je de \menuitem{Clock} component hebt toegevoegd kun je de timer programmeren. Hiervoor moet je in de \menuitem{Blocks Editor} zijn. 
Onder de \menuitem{`Screen1'} (linkerzijde) staat nu een \menuitem{Clock1} link omdat je de \menuitem{Clock} component hebt toegevoegd, zie figuur \ref{screenshots/MollenMeppen_design_clock1}. Klik op de link en je ziet bovenaan een \block{Clock1.Timer} block.

%\inlinefig{screenshots/MollenMeppen_BlocksEditor_Clock1}{Locatie van de \menuitem{My Blocks} | \menuitem{Clock1} link}
 
%\reminder{\lefthand}{Hint: Kijk eens bij de \menuitem{My Blocks} | \menuitem{My Definitions} link.}
\begin{opgave}
    \opgVraag
	Voeg het timer blok toe en zorg dat de mol zich om de zoveel tijd uit zichzelf verplaatst.
\end{opgave}

Als je niet weet hoe een timer werkt of je komt er niet helemaal uit, klik dan eens op de `Learn' link in je \menuitem{Design} scherm. Je kunt dan bij de \emph{Reference Documentation} op zoek gaan naar hoe een timer werkt.

Hopelijk valt je op dat de documentatie net zo is opgezet als de ontwikkelomgeving van \ai zelf. Er wordt onderscheid gemaakt tussen componenten (dingen uit je \menuitem{Design} scherm) en blocks (dingen uit de \menuitem{Blocks Editor}).

Kijk eens goed in je \menuitem{Design} scherm waar de \menuitem{Clock} component zit en ga dan in de documentatie zoeken.

\begin{derivation}{Procedures}
Als het goed is heb je nu voordeel gehad van de procedure die we al voor je gemaakt hebben. In plaats van de code opnieuw te maken heb je als het goed is nu de procedure aangeroepen.
\end{derivation}


\section{Tellen van het aantal maal dat je mis slaat}
Naast het bijhouden hoe vaak een speler de mol raakt wil je ook graag bijhouden hoe vaak de speler mis slaat. In je \menuitem{Components} staat een \block{HorizontalArrangementGeraakt} die ervoor zorgt dat je componenten horizontaal in je scherm kunt rangschikken. De componenten erin (\block{LabelGeraaktTekst} en \block{LabelGeraaktTeller}) komen overeen met `aantal geraakt' en `0' in je \menuitem{Viewer}.

\begin{derivation}{Let op}
Een label gebruik je om een stuk tekst weer te geven.
Een TextBox gebruik je om de gebruiker iets in te laten voeren.
\end{derivation}

\reminder{\lefthand}{Hint: Op het moment dat je de mol raakt gaan er twee events af namelijk `CanvasMollenVeld.Touched' en `ImageSpriteMol.Touched'. Hoe kun je deze slim gebruiken om te bepalen wanneer je mis slaat?}
\begin{opgave}
    \opgVraag
	Breid de bestaande interface uit met een \block{HorizontalArrangement} dat daarin labels heeft voor `aantal gemist' en de bijbehorende teller. Breid bovendien je programma in de \menuitem{Blocks Editor} uit zodat het aantal keer dat de speler misslaat wordt bijgehouden. 
\end{opgave}


\section{Score toevoegen}
Het bijhouden van het aantal keer raak en mis slaan is leuk maar een score is nog leuker. Voor iedere keer dat een speler de mol raakt krijgt hij/zij 2 punten. Voor iedere keer dat de speler de mol mist verliest hij/zij een punt. 

\begin{opgave}
    \opgVraag
	Voeg een \menuitem{HorizontalArrangement} toe in de \menuitem{Viewer} waarin je de score informatie laat zien. Breid bovendien je programma in de \menuitem{Blocks Editor} uit zodat de score wordt bijgehouden. 
\end{opgave}


\section{De mol sneller laten bewegen bij hoge score}
Naarmate de tijd vordert, en hopelijk de score hoger wordt, blijft de uitdaging van het spel op dit moment gelijk. Het spel vereist dus helaas niet steeds meer van het reactievermogen van de speler maar dat kun je veranderen.

Daarvoor moet je onder bepaalde voorwaarden de mol steeds sneller laten bewegen. Om dit voor elkaar te krijgen heb je een zogenaamd \emph{if-statement} nodig. Zo'n \emph{if-statement} kun je vinden in de \menuitem{Blocks Editor} in de tab \menuitem{Built-In} onder \menuitem{Control}. Daar vindt je de \block{if} en \block{ifelse} \emph{blocks}.

Bij een \emph{if-statement} wordt er getest of een expressie waar of niet waar is (we noemen zo'n expressie een \emph{Booleaanse expressie}). Als de expressie waar is wordt de code die binnen het \emph{if-statement} staat wel uitgevoerd en anders wordt deze code overgeslagen.

%\needspace{5\baselineskip}
\reminder[-1in]{\lefthand}{Hint: Als je de \menuitem{Clock} component selecteert in bijvoorbeeld de \menuitem{viewer} zie je bij \menuitem{Properties} een veld dat \emph{TimerInterval} heet. Kun je iets vergelijkbaars vinden in de \menuitem{Blocks Editor}?}
\begin{opgave}
    \opgVraag
	Zorg ervoor dat voor elke 50 punten die de speler heeft de mol 50 milliseconden sneller beweegt. Houd rekening met een grens voor de snelheid.
\end{opgave}

\begin{derivation}{Conditioneel uitvoeren van code}
Het conditioneel uitvoeren van code gebeurt bij het programmeren vaak met \emph{if-statements}. Er zijn echter ook nog andere manieren zoals bij \ai het \block{choose} \emph{block}.

\emph{if-statements} zijn belangrijk en essentieel bij het programmeren. Ze zorgen ervoor dat delen van het programma alleen onder bepaalde voorwaarden worden uitgevoerd.

We noemen dit program control en het geeft gebruikers van onze applicatie de mogelijk om de flow van het programma te be\"invloeden.
\end{derivation}


\section{Testen op je telefoon}
\runOpTelefoon{} Test de app nog eens. Als je de app op je eigen telefoon probeert, kun je hem thuis en aan vrienden laten zien!

%Vanuit de design omgeving kun je rechtsboven kiezen voor \menuitem{Package for Phone} en vervolgens \menuitem{Show barcode}. Na verloop van tijd (afhankelijk van de drukte kan dit enkele minuten duren) krijg je een venster met daarin een zogenaamde QR-code. Deze code kun je scannen met de camera van je telefoon. Hiervoor heb je een app nodig, een voorbeeld is \emph{Qr Barcode Scanner}, je kunt deze downloaden in de \emph{Play Store}.

%Na het openen van Qr Barcode Scanner kies je voor \menuitem{Scan Barcode}, je kijkt nu door je camera. Richt de camera op de barcode op het scherm. De app leest de barcode en geeft je de optie de URL die hierin verstopt is te openen in de browser. Na het openen van de browser wordt de download van een .apk bestand gestart. 

%Na het downloaden open je het bestand. Wat er precies gebeurt is afhankelijk van je telefoon en de versie van Android. Waarschijnlijk krijg je eerst de melding dat de installatie is geblokkeerd. Android telefoons zijn standaard ingesteld dat ze enkel applicaties vanuit de Market of Play Store kunnen installeren. Door \menuitem{Onbekende bronnen} aan te vinken in het \menuitem{Beveiliging} onderdeel van \menuitem{Instellingen} kun je dit toestaan. Nadat je dit hebt gedaan open je de .apk opnieuw. Je krijgt nu de vraag of je de applicatie wilt installeren, je kiest voor de knop \menuitem{Installeren}. Na enkele ogenblikken is de applicatie ge\"installeerd en kun je deze \menuitem{Openen}. 

De volgende keer dat je de applicatie via een barcode wilt installeren zal de telefoon vragen of je de applicatie wilt vervangen, dit bevestig je door op \menuitem{OK} te klikken en de applicatie vervolgens op dezelfde manier te \menuitem{Installeren}.


\pagebreak
\section{Bonus opgaven}
\reminder[+.2in]{\lefthand}{Tip: Kijk eens bij `Properties' van de \block{canvas} component.}
\begin{opgave}
    \opgVraag
  De achtergrond van het spel is op het moment saai wit.
  Voeg een achtergrond toe aan het spel om de boel wat op te fleuren.
\end{opgave}

\begin{opgave}
    \opgVraag
  Je kunt op dit moment nog niet afgaan bij het spel.
  Verander dit door de speler af te laten gaan wanneer zijn/haar score onder de 0 punten zakt.
\end{opgave}

Het afgaan in het spel kun je ook op een heel andere manier aanpakken. Je kunt de speler bij het begin van het spel een aantal levens geven en onder bepaalde omstandigheden laten verliezen. De speler is af wanneer hij/zij geen levens meer over heeft.

\reminder[+.2in]{\lefthand}{Tip: Laat het andere dier vaker verschijnen naarmate de speler een hogere score bereikt.}
\begin{opgave}
    \opgVraag
  Bouw het concept van levens in je spel in. Om levens te verliezen voeg je nog een ander dier toe aan het spel, bijvoorbeeld een lief konijntje of juist een gruwelijk monster. Laat het andere dier af en toe verschijnen in plaats van de mol en wanneer de speler het andere dier mept verliest hij/zij een leven.
\end{opgave}