greenfoot

greenfoot deel 3

1. De wolf in Gimp maken

We zullen nu een nieuw karakter inbrengen: de wolf. We maken een nieuwe class Wolf die we laten erven van de BaseClass.

https://images.computational.nl/galleries/greenfoot/2017-01-03_13-16-50.png

Standaard vinden we in de LittleRedCap game twee plaatjes. Een wolf van de linkerkant en een wolf van de rechterkant. Dat is niet helemaal de bedoeling. We hebben eigenlijk een wolf die van bovenaf wordt gezien nodig. Hoe komen we daaraan? Op de website http://opengameart.org/ vinden we allerlei cliparts die specifiek zijn ontwikkeld voor games. De clipart die we daar hebben gevonden is hier te downloaden. Dit is een Photoshopbestand wat je dient te openen in Gimp. Gimp is gratis te downloaden voor het geval je thuis werkt of als het op school niet staat geïnstalleerd.

Als je het bestand in Gimp hebt geopend dan zie je het volgende:

https://images.computational.nl/galleries/greenfoot/2017-01-03_15-03-52.png

Met de selecttool uit de gereedschapkist (Ctrl-B) selecteer je de hierboven rood omlijnde wolf en snij je daarna de afbeelding bij.

https://images.computational.nl/galleries/greenfoot/2017-01-03_15-09-06.png

https://images.computational.nl/galleries/greenfoot/2017-01-03_15-12-17.png

 Met het lagengereedschap (Ctrl-L) schakelen we alle lagen uit door op de oogjes te klikken. De laag BottomMidLite laten we aanstaan. Met Ctrl-scroll kunnen we inzoomen. Vervolgens kun je met de kleurselectietool een kleur selecteren (zorg dat je ook de laag BottomMidLite hebt geselecteerd, anders werkt het niet). 

https://images.computational.nl/galleries/greenfoot/2017-01-03_15-21-40.png

 Deze kleur kunnen we nu aanpassen door een kleur van de bestaande wolf te kiezen. Een kleur kiezen gaat als volgt. Open de wolf en zorg dat het plaatje in je geheugen komt te staan (bijvoorbeeld met Paint). Plak dit plaatje er vervolgens bij als nieuwe laag. Dit gaat vanzelf met Ctrl-v.

https://images.computational.nl/galleries/greenfoot/2017-01-03_15-32-28.png

Klik dubbel op de zwevende laag en geef de nieuwe laag de naam Color (rood omlijnd). Ga vervolgens een kleur van deze laag bewaren door op het kleurgereedschap te klikken (groen omlijnd) en daarna de pipet te selecteren (blauw omlijnd). In onderstaande afbeelding zie je het allemaal gebeuren.

https://images.computational.nl/galleries/greenfoot/2017-01-03_15-38-40.png

Nu heb je de kleuren en kun je opnieuw selecteren met het kleurselectiegereedschap. Neem vervolgens het emmertje (fill) en klik hier dubbel op en kom je in de opties. Zet de kleurvulling op Hele selectie vullen.

https://images.computational.nl/galleries/greenfoot/2017-01-03_15-56-02.png

Als je hierna de juiste kleur kiest krijg je de wolf die we moeten hebben. We hebben de randen wat zwarter gemaakt en we hebben gekozen om de laag BottomLite aan te zetten.

https://images.computational.nl/galleries/greenfoot/2017-01-03_16-03-10.png

Er is nog één ding wat we  nu nog moeten doen. De afbeeldingen in Greenfoot in deze game zijn naar rechts georiënteerd. Dat wil zeggen als je een object uit zichzelf wilt laten bewegen dan zal het in eerste instantie naar rechts gaan. We gaan daarom de afbeelding nog een kwartslag naar rechts draaien. Klik hiervoor op Afbeelding -> Transformeren->90º met de klok mee draaien.

https://images.computational.nl/galleries/greenfoot/2017-01-04_19-48-33.png

Nu kun je de wolf exporteren naar een png bestand door op Exporteren als te klikken in het menu bestand. Exporteer meteen naar de image map van Greenfoot.

https://images.computational.nl/galleries/greenfoot/2017-01-03_16-06-42.png

Geef je bestand dus de naam wolf.png.

2. De wolf in de game brengen

We zullen nu eerst één wolf (het worden er 3) in de game brengen en deze laten bewegen. Dat is niet zo moeilijk.Eerst maak je een nieuwe class Wolf die je laat erven van de BaseClass. Stel ook de image in.

 https://images.computational.nl/galleries/greenfoot/2017-01-05_10-49-03.png

Pas de beschrijving aan en documentatie meteen aan. De beschrijving boven de act-methode mag je wel weglaten.

https://images.computational.nl/galleries/greenfoot/2017-01-05_10-54-40.png

Breng de volgende regel in de Level1 class. Vervolgens voeg je onderstaande regel in, in de Level1 class.

 addObject(new Wolf(),300,265);

Vervolgens laten we de wolf bewegen door gebruik te maken van een methode uit de class Actor (en dus niet uit de class BaseClass).

https://images.computational.nl/galleries/greenfoot/2017-01-05_10-54-41.png

Run de game en je zal zien dat de wolf naar rechts beweegt en stopt bij de rand van de game.

3. code uitlijnen en andere sneltoetsen

Vanaf nu zorg je er ook voor dat je code netjes staat uitgelijnd. Dit kun je bereiken met de sneltoets Ctrl-Shift-I. Andere sneltoetsen kun je vinden in het menu van Greenfoot.

https://images.computational.nl/galleries/greenfoot/2017-01-05_11-48-33.png

Een andere handige knop is het deleten van een hele lijn inclusief witruimte. Omdat dit ook in het programma Netbeans vaak voorkomt gaan we dit op dezelfde manier instellen als in Netbeans. Doe als volgt. Ga naar het menu Options -> Key Bindings.

Ga nu naar de sneltoets cut-line en voeg daar een toetscombinatie aan toe door Ctrl-E toe te voegen.

https://images.computational.nl/galleries/greenfoot/2017-01-05_11-54-01.png

Klik hierna op OK. Een hele lijn haal je voortaan weg met Ctrl-E zodat je dit ook leert gebruiken binnen Netbeans.

4. De wolf laten draaien bij de oostelijke rand

We zullen nu onze eigen methode gaan creëren wat maakt dat de Wolf onvoorspelbaar zal draaien bij de rand van de game. Eerst maken we een nieuwe methode genaamd public void turnAtEdge(). Binnen deze methode maken we vast twee lokale variabelen van het type int.

https://images.computational.nl/galleries/greenfoot/2017-01-05_11-12-40.png

Zorg dat je de methode alvast aanroept in de methode act.

https://images.computational.nl/galleries/greenfoot/2017-01-05_11-16-21.png

In de BaseClass vinden we een methode public boolean atWorldEdge(). Deze methode is geen void maar een boolean. Een boolean methode geeft twee waarden terug: true or false. Dus eigenlijk: is het waar dat het object bij de rand is? We gebruiken deze methode binnen een if-statement en daarbinnen gebruiken we nog een methode namelijk setRotation(int rotation). De setRotation methode heeft één parameter nodig om te weten in welke richting het object moet worden gedraaid. Hiervoor gebruiken we de lokale variabele max.

https://images.computational.nl/galleries/greenfoot/2017-01-05_11-24-38.png

Als je nu de game runt zul je zien dat de wolf bij de rand wordt gedraaid naar 90. Dit staat voor richting het zuiden.

 

 

5. De wolf laten draaien bij alle randen

Bij de laatste opdracht heb je gemerkt dat de wolf nooit verder komt dan de eerste of tweede rand, welke waarde er ook voor max wordt ingesteld. We hebben een systeem nodig wat maakt dat de wolf weet bij elke rand hij is. Dat kunnen we bereiken met de methoden getX() en getY() uit de class Actor. Deze methoden geven respectievelijk de x en de y locatie van het object terug. Deze waarden kunnen we ook zien als we de wolf bij de rand plaatsen en met de rechtermuisknop klikken op inspect.

https://images.computational.nl/galleries/greenfoot/2017-01-05_11-31-14.png

Dit klopt met het feit dat we weten dat het spel 600 x 600 pixels is. Dit kunnen we terugvinden in de class Level1.

Met andere woorden: als de x-waarde groter is dan 570 weten we dat we bij de oostkant van de game zijn en dat de wolf dan westelijk moet worden gedraaid. Westelijk draaien staat gelijk aan ongeveer 180. Dus we brengen de volgende code in:

https://images.computational.nl/galleries/greenfoot/2017-01-05_11-39-51.png

Merk op dat we de waarde max een wat grotere waarde hebben gegeven dan exact 180 zodat de hoek wat schuiner wordt.

6. De wolf onvoorspelbaar gedrag geven

In het vorige lesonderdeel hebben we de wolf laten draaien bij de randen. Dat is mooi maar erg voorspelbaar. Wij kwamen tot het volgende resultaat:

 Omdat de wolf voortdurend hetzelfde paadje loopt is het voor Roodkapje eigenlijk niet zo moeilijk om deze wolf te ontlopen. We hebben wat onvoorspelbaarder gedrag van de wolf nodig. We zullen dat in eerste instantie realiseren door willekeurig (random) af te wisselen met de hoek die de wolf maakt als hij op de rand van de wereld stuit. Eerst maken we hiervoor een methode getRandomNumber(int min, int max). Omdat we verwachten deze methode vaker bij ook andere objecten te gebruiken maken we deze methode in de class BaseClass.

https://images.computational.nl/galleries/greenfoot/2017-01-05_19-21-29.png

Deze methode heeft twee parameters min en max en geeft een int - een geheel getal - tussen het minimum het het maximum getal terug. Dat kun je zien aan public int getRandomNumber (int min, int max). Erboven zetten we de documentatie.

De code van de methode is als volgt:

Random random = new Random(); //de class Random die standaard bij Java wordt meegeleverd
int  n = random.nextInt(max-min) + min; //maak gebruik van de methode nextInt met een int als parameter
return n; //geef de int n terug

De API van de class Random staat online en is te vinden op http://docs.oracle.com/javase/7/docs/api/java/util/Random.html . Hier vind je ook de methode nextInt(int n). Zodra je echter de code hebt ingevoerd krijg je een foutmelding cannot Find symbol - class Random..

Dat komt omdat de class nog niet is geïmporteerd. Dit doe je bovenaan bij de andere imports:

import greenfoot.*;
import java.util.List;
import java.util.ArrayList;
import java.util.Random;

 Je kunt nu de code implementeren in de class Wolf. Hieronder zie je daarvan een voorbeeld. Merk op dat we als commentaar de zijde (east) erbij hebben gezet.

/**
     * turns the wolf unpredictable at the edge in another rotation. 
     * The rotation depends on wich side the Wolf is located. 
     *
     */
    public void turnAtEdge() 	
    {
        int min=0;
        int max=90;
        if(atWorldEdge())
        {
            //east
            if (getX()>570)
            {
                max=getRandomNumber(150, 210); 
            }

....rest van de code

7. De wolf nog meer onvoorspelbaar gedrag geven

Omdat we een methode getRandomNumber hebben gemaakt is het niet meer zo moeilijk om de wolf ook tijdens het rennen van de wolf onvoorspelbaar gedrag te geven. We moeten echter nog wel iets anders hiervoor doen namelijk voortdurend opvragen in welke richting de wolf loopt. Afhankelijk van die richting buigen we dat een beetje af naar links of naar rechts.

Het eerste wat we doen is een methode maken genaamd walkRandom(). Let op de naamgeving. Een methode begint altijd met een kleine letter. Het 2e werkwoord is dan met een hoofdletter. Een methode is altijd een werkwoord.

 https://images.computational.nl/galleries/greenfoot/2017-01-15_16-05-24.png

We maken ook een class variabele van het type int genaamd randomWalk. De scope van deze variabele is de gehele class dus deze kan ook worden gebruikt in de methode walkRandom().

https://images.computational.nl/galleries/greenfoot/2017-01-15_16-11-19.png

Met deze variabele kunnen we instellen in hoeverre de wolf moet afwijken van zijn koers en een andere richting kiest. In bovenstaande afbeelding is dat 5 graden.

We brengen nu de volgende code in de body van de methode:

https://images.computational.nl/galleries/greenfoot/2017-01-15_16-23-55.png

We hebben daar wat commentaar bij geplaatst omdat we erachter komen dat de methode getRandomNumber(int min, int max) een geheel getal teruggeeft vanaf de waarde van de min tot de waarde max. Dit plaatsen we als commentaar bij deze methode in de class BaseClass zodat we ons niet kunnen vergissen voor de volgende keer dat we de methode nodig hebben.

https://images.computational.nl/galleries/greenfoot/2017-01-15_16-31-20.png

 De variabele gaan we nu gebruiken binnen de methode setRotation(). Volgens de API geeft deze methode de richting aan van de gegeven parameter. Dus bijvoorbeeld setRotation(90) geeft aan dat het object naar het zuiden zal wijzen. Je begint dus met de klok mee te tellen vanaf de oostelijke richting.

We willen de wolf nu van zijn spoor laten afwijken. Hiervoor vragen we de richting van de wolf met de methode getRotation(). Deze methode geeft de richting terug in de vorm van een int. Als we hier nu het randomgetal bij optellen (het randomgetal kan ook negatief zijn dus dan wordt het aftrekken) dan zal de wolf telkens de ingestelde waarde van zijn richting afwijken.

https://images.computational.nl/galleries/greenfoot/2017-01-15_16-23-55-2.png

Het resultaat is nu als volgt: