Deel 2: Race Game

De achtergrond is lava!

Je kunt in Scratch je achtergrond ook gebruiken als speelveld, de manier waarop dat gaat is dat je met de code blokjes kunt checken welke kleur van de achtergrond je game character’s sprite ‘aanraakt’ en daarop dingen kunt laten gebeuren. Een goede manier om dit uit te proberen is met een race game..

Stap 1: Een race circuit tekenen

Klik met je rechtermuisknop op de lava afbeelding (texture) hieronder en download deze naar je computer met ‘Afbeelding opslaan als..’. Selecteer als locatie voor het bestand je bureaublad:

Als je liever een zelfgekozen texture voor je achtergrond wilt gebruiken zoek dan met google afbeeldingen bijvoorbeeld op ’tileable lava texture’ of ’tileable grass texture’.
Door te zoeken op tileable (betegelbare) afbeeldingen krijg je vooral textures te zien waarvan de randjes in elkaar overlopen als je ze naast elkaar plaatst!

Stel de lava texture in als achtergrond door op de ‘Upload achtergrond’ knop te drukken en de afbeelding vanaf je computer naar Scratch te uploaden ->

Je kunt nu zelf over de achtergrond gaan tekenen in het rechter venster maar zoals je ziet is het lava plaatje net niet groot genoeg om de hele achtergrond te bedekken.
Klik op de ‘Selecteer en maak kopie’ knop en klik-sleep daarna een groot vierkant om het hele lava plaatje heen ->

1

2

Als je het goed gedaan hebt krijg je een blauw selectie kader om de nieuwe kopie van de lava texture heen, deze kun je een stukje naar rechts schuiven om het witte gedeelte van de achtergrond te bedekken ->

Selecteer nu de standaard kwast en zet het formaat ervan op z’n allergrootst met de slider onderaan ->

Teken in 2 stappen je racebaan door eerst een vrij eenvoudige vorm te tekenen met een kleur die is bedoeld voor de berm van de racebaan.
Je kunt Ctrl+Z gebruiken om snel een stapje terug te gaan als je een fout maakt ->

Hierna teken je bijvoorbeeld met asfalt grijze kleur het asfalt gedeelte van de racebaan over de berm kleur heen.
Zet je penseel een standje kleiner zodat er een stukje van de berm over blijft, de berm is namelijk nodig voor de gameplay! ->

Teken met wit een streep voor de finish ->

Stap 2: De racewagen vormgeven

Kies een sprite uit de bibliotheek die je als race auto wilt gebruiken, voor het voorbeeld is gekozen voor het ruimteschip plaatje omdat de andere auto’s allemaal een zij-aanzicht hebben ->

Klik op het ruimteschip in je Sprites magazijn en klik daarna op de ‘Uiterlijken’ tab om in het tekenvenster te komen ->

Klik op de sprite in het tekengebied en maak deze een stuk kleiner zodat de ‘racewagen’ goed op de baan past. Draai de sprite ook 90 graden naar rechts om te zorgen dat de voorkant naar rechts wijst. Zorg er ook voor dat je de sprite precies in het midden van het tekengebied plaatst want dat is het punt waar je plaatje omheen draait tijdens het sturen! ->

1

2

3

Plaats je racewagen net boven de finishline in het game venster, klaar voor de start.. ->

(Don’t worry, de racewagen wordt later met een code blokje terug recht gedraaid.)

Stap 3: De besturing van de racewagen

Voor de besturing van de racewagen gebruik je het tweede voorbeeld uit stap 11 van deel 1 , de ‘auto’ besturing, deze zie je hieronder nog een keer.
Om het ietsje te versimpelen is de mogelijkheid om achteruit te gaan hier verwijderd.
Klik op je racewagen sprite in je magazijn en maak daar deze blokjes aan vast ->

Stap 4: De racewagen op de baan houden

Zoals het nu werkt kan de speler van je racegame gewoon van de baan af vliegen, er is dus nog weinig sprake van een echte race. Om te voorkomen dat de speler op deze manier kan cheaten ga je een paar ‘condities’ of spelregels instellen..

Regel 1: De racewagen moet langzamer gaan als de speler over de berm rijdt.

Dit kun je doen door te checken of de kleur van de racewagen de kleur van de berm aanraakt.
Zo ja: dan  zetten we de snelheid langzamer dan wanneer de speler het asfalt aanraakt.
Verander nu de blokjes zoals in het voorbeeld ->

Je ziet dat hier een paar ‘als’ en ‘als anders’ blokjes samengevoegd zijn.
Een ‘als’ blokje of ‘als’ programmeer-regel noemt men in het engels een If-statement. Meerdere als-verklaringen in elkaar genesteld of geklemd noemt men ‘nested if-statements’.

Je computer checkt bij zon ‘als-verklaring’ of de conditie dus wat er tussen ‘als’ en ‘dan’ staat ‘waar’ is.
Zo ja, dan wordt de regel eronder uitgevoerd.
Met een ‘als anders’ blokje kun je ook nog iets laten gebeuren als de conditie ‘niet waar’ is.

In gewone taal staal hier: “Als het waar is dat pijltje omhoog wordt ingedrukt dan..
neem vier stappen. “

Regel 2: De speler moet helemaal terug naar start en twee seconden wachten als hij helemaal van de baan vliegt en het lava aanraakt.

Door nog een ‘als anders’ blokje te gebruiken kun je wéer iets anders laten gebeuren als de speler zowel de berm of het asfalt allebei niet aanraakt. In dat geval kunnen we ervan uitgaan dat de speler het lava gedeelte aanraakt en plaatsen we de speler terug naar het begin. Met ‘richt naar 0 graden’ draai je de racewagen weer recht naar voren ->

Stap 5: De startpositie instellen

Dezelfde blokjes die je gebruikt om de speler terug naar start te plaatsen als de racewagen het lava aanraakt kun je ook gebruiken om te zorgen dat de speler altijd op dezelfde plaats start.
Dit kun je doen bij hij starten van de game, voordat de herhaal ‘loop’ in werking gaat ->

Stap 6: De tijd bijhouden

Essentieel voor elke race en bijna elke andere sport of game is natuurlijk de tijd.
Scratch heeft al een tijdklok die je hiervoor zou kunnen gebruiken, maar het is handiger als je de tijd zelf opslaat in een ‘variabel’, dan kun je tenminste de naam ervan veranderen.
Om de tijd simpelweg in beeld te tonen maak je eerst een nieuwe variabel aan in het ‘Data’ gedeelte van de Scripts blokken.
Klik op ‘Maak een variabele’ om er eentje te maken en geef deze de naam Tijd – >

Zoals je ziet krijg je nu een nieuw blokje met de naam tijd en nog een paar handige extra blokjes om je Tijd variabel mee in te stellen->

Als je links boven in het game venster kijkt zie je dat daar de Tijd variabel ook aan de speler getoond wordt, tenzij je de variabel uit vinkt in de Data lijst maar in dit geval willen we dat de speler de tijd kan zien ->

Zorg er nu voor dat de bovenkant van je racewagen script er als volgt uitziet ->

Wat er nu gebeurt is dat jouw eigen ‘Tijd’ variabel in het herhaal blok steeds naar de ‘waarde’ van de Scratch tijdklok wordt gezet, zo blijft jouw eigen Tijd ‘up-to-date’.
Het tweede wat er gedaan wordt is dat jouw Tijd en de Scratch tijdklok nu bij Start steeds terug op nul gezet worden.
De volgende stap zou zijn om de gehaalde eind-tijd aan het einde van de race in beeld te tonen maar daarvoor is het slim om eerst het aantal rondes bij te gaan houden..

Stap 7: Het aantal rondes bijhouden

Nog een belangrijk element van een racegame zijn de rondes. Net als met de tijd kan je om het aantal rondes bij te houden een variabel gebruiken. Deze begint dan natuurlijk op nul, en iedere keer dat de speler over de finish rijdt tel je daar 1 punt bij op.

Voeg de volgende codeblokjes toe aan je racewagen programma. Zoals je ziet zijn de nieuwe blokjes aan een nieuw start blok vastgemaakt, zo kun je ervoor zorgen dat niet alles tussen de andere blokjes voor de besturing komt te staan ->

Als je nu het programma test zul je zien dat het optellen bij het aantal rondes wel werkt, maar dat er veel te veel punten bij opgeteld worden als je langzaam over de finish gaat. Dit komt omdat het programma nu de hele tijd dat de racewagen de finish raakt punten erbij op blijft tellen. Je moet dus een manier vinden om te zorgen dat het programma er steeds maar maximaal 1 punt bij optelt. Dit kun je voor elkaar krijgen met nog een variabel die je alleen op 1 of 0 zet. Eén kun je dan voorstellen als ‘waar‘ en nul als ‘niet waar’, ‘true or false‘.
Eigenlijk een simpele aan/uit schakelaar dus.

Maak eerst een nieuwe variabel met de naam ‘Ronde is geteld’ en pas je programma op de volgende manier aan ->

Het groene ‘en’ blokje in het eerste ‘als dan’ blokje kun je zo in elkaar zetten ->

Teken nu een zwarte lijn een stukje voor de witte finishline.
Om het achtergrond teken venster te zien te krijgen druk je eerst links onderin op de achtergrond in het Sprites venster en daarna klik je naast het ‘Scripts’ tabblad op het ‘Achtergronden’ tabblad ->

Hoe dit werkt is dat de schakelaar op nul (niet waar) begint. Voordat er 1 ronde punt bij opgeteld wordt, wanneer de speler de witte streep aanraakt, checkt het programma eerst of de schakelaar op 0 staat, hierna wordt er 1 punt bij Ronde opgeteld en wordt de schakelaar op 1 gezet zodat de tweede keer wanneer het programma checkt of de schakelaar op 0 staat de punt er niet bij opgeteld wordt.
Pas wanneer de racewagen over de zwarte lijn gaat wordt de schakelaar weer op 0 gezet.

(In het programmeren wordt zo’n 1/0 schakelaar een Boolean genoemd.)

Stap 8: De eindtijd in beeld vertonen

Nu je het aantal rondes bijhoudt en je ook kunt instellen hoeveel rondes de race moet duren door het getal in het blokje met ‘Als Ronde = 3’ te veranderen, kun je aan het einde van het ingestelde aantal rondes, in beeld tonen welke tijd de speler heeft gehaald..

Maak weer een variabele in de Data blokjes lijst met de naam ‘Gehaalde eindtijd’ en pas daarna je script op de volgende manier aan ->

Hoe dit werkt is dat het programma nu direct na het halen van het aantal rondes de ‘Tijd’ opslaat in de ‘Gehaalde eindtijd’ variabel. Dit is nodig omdat het programma eerst een aantal seconden ‘FINISH!!!’ zegt en die tijd die daarvoor gebruikt wordt
Dus, voordat het programma een aantal seconden wacht, slaat het de eindtijd alvast op in een aparte variabel en na het ‘Je gehaalde eindtijd is’ zinnetje toon het de eerlijke eindtijd in beeld.

De Finish!

Gefeliciteerd je hebt de finish gehaald!
Ondanks dat je waarschijnlijk nog een hoop dingen ziet die je aan een mini racegame als dit zou kunnen verbeteren kun je nu wel zeggen dat je jouw eerste game hebt gemaakt en dat je hebt geprogrammeerd. Hopelijk heb je een beetje gezien hoe eenvoudig en logisch het kan zijn en hoeveel je al kunt doen met een paar ‘simpele’ als-blokjes (if-statements). Dit is iets wat in alle programmeertalen heel erg veel wordt gebruikt, alleen gebruik je dan een getypt ‘blokje’ text. In de programmeertaal C# (See sharp) ziet een if-statement er bijvoorbeeld zo uit:

Net als met de blokjes van Scratch kun je een stukje text natuurlijk ook kopiëren en plakken, dus ook met code schrijven hoef je echt niet alles zelf te schrijven.
Have fun met het verder programmeren van je race-game en onthou de oprichter van Apple z’n wijze woorden:

Extra dingen die je kunt verbeteren of onderzoeken..:

• Het is nu zo dat je racewagen gelijk op volle snelheid naar voren gaat zodra je op pijltje omhoog drukt, er is dus nog geen sprake van acceleratie.
  Met deze aanpassing kun je de racewagen langzaam naar de topsnelheid laten accelereren.
  Je hebt hier twee nieuwe variabelen voor nodig: eentje voor Snelheid (Velocity) en eentje voor Maximale snelheid. ->

Door deze verbetering kun je nu ook de snelheid meter laten zien in het game venster!->

•  Nu je de besturing voor éen speler weet,..zou je er een twee speler game van kunnen maken? Speler twee kan bijvoorbeeld de ‘WASD’ toetsen voor de besturing gebruiken..
• Kun je het voor elkaar krijgen dat de racewagen een korte boost in snelheid krijgt als je over een ‘boost’ gedeelte in de racebaan rijdt?
• Als de speler op pijltje omhoog drukt kun je meer laten gebeuren dan alleen de racewagen naar voren laten gaan. Je kunt bijvoorbeeld ook de racewagen sprite verwisselen. Je kunt bijvoorbeeld een vlam achter de racewagen tekenen in het tweede uiterlijk zodat je deze te zien krijgt als je gas geeft ->
  

  +

  =