2D Games maken met Scratch (Deel 1: Rondleiding)

Introductie

Wat is scratch?

Scratch is een programma waarmee je 2D games kunt maken en programmeren
(een ‘game engine’).
Je kunt met Scratch leren programmeren door verschillende code blokjes die allemaal wat anders doen aan elkaar te klikken, een beetje als Lego, of als een trein met wagons. Dus je hoeft met scratch niet zelf de codes te typen!

Omdat je in Scratch met code blokjes werkt en daarmee het hele programma kan bepalen kun je met Scratch ook andere dingen als Games maken, bijvoorbeeld ook elektronische muziek(-instrumenten) en animaties!
(Combinaties zijn ook mogelijk)

Kijk om een beetje een idee te krijgen van de mogelijkheden maar even naar dit introductie filmpje!:

Wat je leert in deze tutorial

In deze tutorial leer je vooral  over de basis onderdelen van Scratch. Je leert over de verschillende vensters die je nodig hebt om zelf een game met Scratch te maken,  hoe je plaatjes aan je spel toevoegt en hoe je die plaatjes kan gaan laten doen wat jij wil met de Scratch code blokjes.

Om te zorgen dat je later weer verder kan gaan waar je was gebleven met je eerste Scratch creatie wordt er aan het einde ook uitgelegd hoe je jouw Scratch project online kunt bewaren, zodat je overal waar internet is verder kunt gaan met je project.

Na het leren van de basis onderdelen wordt er in deze tutorial ook meteen uitgelegd hoe je een kleine racegame kan maken:

In de volgende tutorials leer je hoe je door het maken van meer code ‘spel regels’ kunt zorgen dat je Scratch project steeds meer een echte game wordt en ga je knutselen aan een 2D platform game.

 

Deel 1: Kennis maken met andere Scratch Games en een korte rondleiding

Stap 1: Jezelf aanmelden bij Scratch

Ga naar scratch.mit.edu in je internet browser ->


Je kunt zonder jezelf aan te melden bij scratch wel dingen maken en de games spelen die andere scratchers hebben gemaakt maar helaas kun je dan niet je eigen creaties bewaren en er later weer mee verder gaan.

Klik dus op ‘Join Scratch’ om je aan te melden! ->

Maak gelijk een notitie van je loginnaam en wachtwoord!.. Of vertrouw je geheugen. 😉

Stap 2: Andere games uitproberen

Klik nadat je bent aangemeld op éen van de vele Scratch games die je op de home pagina ziet staan. Je komt dan op de pagina van die game en als je op het groene vlaggetje klikt kun je de game ook spelen ->

Stap 3: Andere games van binnen bekijken

Als je op ‘See Inside’ (Kijk van binnen) klikt kun je zien hoe de game ‘achter de schermen’ werkt ->



Door links onderin in het Sprites venster op de verschillende plaatjes te klikken krijg je in het ‘Scripts’ venster rechts te zien wat voor code blokjes er allemaal aan dat plaatje vastzitten ->

Je bent bij Scratch helemaal vrij om te kijken hoe andere scratch games van binnen werken!

Stap 4: Een nieuw project beginnen

Klik in de menu-balk op ‘Create’ om met een vers leeg scratch project te beginnen ->

De taal instellen

Je kunt de Scratch taal op Nederlands zetten als je niet zo vertrouwt bent met engels door op het wereldbol symbool te klikken ->

Deze tutorial maakt gebruik van de Nederlandse Scratch voor het gemak, maar het is aan te raden het als een uitdaging te zien om de engelse Scratch te gebruiken. De woordjes zijn simpel te vertalen, je kunt ook naar de kleur van de blokjes kijken en je hebt er later alleen maar profijt van.

De verschillende vensters

Scratch bestaat grofweg uit 4 delen/vensters:

1: Links boven is het ‘Game venster’, hierin kun je de game die je maakt spelen, testen en ook in elkaar zetten. Dit is het enige wat de uiteindelijke spelers van je game zien als deze af is.
(tenzij ze jouw project van binnen bekijken):

2: Links onder is het ‘Sprites venster’ je kunt dit venster voorstellen als jouw magazijn of voorraad kast. In het Sprites venster vind je de ‘Sprites’ (plaatjes) die je in je spel kunt gebruiken. Scratch heeft al een heleboel plaatjes die je kunt gebruiken maar je kunt in Scratch ook zelf nieuwe sprites maken!:

3: In het midden vind je de lijst met code blokjes die je kunt gebruiken. Ze zijn gesorteerd op categorie. Je hebt blokjes voor beweging, geluid, uiterlijk en nog veel meer. Je kunt deze blokjes zoveel en zo vaak als je wilt gebruiken.

4: Het grootste venster aan de rechterkant is het ‘Scripts venster’. Je kunt dit voorstellen als je bureau of tafel waarop je met de verschillende blokjes gaat bouwen, of als het, nu nog lege, brein van je character:

Stap 5: Een plaatje uitzoeken in de bibliotheek van plaatjes

Je begint in Scratch een nieuw project altijd met éen plaatje van de Scratch kat.

Je kunt zelf plaatjes uit de Scratch bibliotheek toevoegen aan je eigen project door op dit knopje te drukken->

Voeg nu 1 extra sprite uit de Scratch bibliotheek toe aan je eigen Sprites om het uit te proberen.

Stap 6: Zelf een plaatje tekenen

Scratch heeft ook een ingebouwd tekenprogramma dus als je snel een zelfgemaakt simpel plaatje nodig hebt kun je ook rechtstreeks in Scratch nieuwe sprites tekenen!

Om naar het Sprites teken venster te gaan klik je op de penseel knop ->



Om je eigen gemaakte tekeningen in je Scratch game te stoppen kun je de op de ‘upload sprite’ knop (naast de penseel knop) drukken en de afbeeldingen vanaf je eigen computer naar Scratch uploaden. Dit gebruik je als je jouw eigen foto’s wilt gebruiken of tekeningen die je met een ander tekenprogramma zoals MS Paint, GIMP of Photoshop hebt gemaakt.

Stap 7: Een script vastplakken aan een plaatje

…Je kunt het vergelijken met een theater voorstelling of film,.. iedere acteur heeft een eigen script waarin staat wat zijn of haar karakter moet doen en zeggen tijdens de voorstelling of opname.

Jij bent de regisseur die bepaald wat er in die scripts staat, en ook wanneer de acteurs op het ‘game toneel’ moeten verschijnen!
Plaatje/Acteur + Script = Actie!

Stap 8: Een sprite laten draaien

Een plaatje (vanaf nu alleen nog sprite genoemd*) kun je een vast aantal graden laten draaien met slechts 2 Scratch blokjes,.. het oranje ‘Start’ blokje en het blauwe ‘draai 15 graden’ blokje.

Klik eerst links onderin het Sprites venster op de afbeelding die je wilt laten draaien en sleep daarna het ‘Wanneer  wordt aangeklikt’ blokje uit de gebeurtenissen lijst naar het lege scripts venster rechts ->

Sleep daarna het ‘draai 15 graden’ uit de Beweging lijst en maak deze aan het Start blokje vast ->

Het ‘Wanneer  wordt aangeklikt’ blokje kun je zien als het Start blokje van je script/programma, je hebt deze altijd nodig anders worden de andere blokjes niet gestart!
Je kunt het Start blokje zien als de locomotief van een trein.

Druk nu in het Game venster op het groene vlaggetje om je Scratch project te starten en je zal zien dat je Sprite een klein stukje draait maar daarna meteen weer stopt..

..Om je sprite eindeloos door te laten draaien kun je het gele ‘herhaal’ blokje uit de besturen blokjes lijst gebruiken. Sleep het herhaal blokje bovenop het ‘draai 15 graden’ blokje om het draai blokje er als het ware tussen te klemmen ->

Druk nog een keer op het groene vlaggetje en je sprite zal net zo lang door blijven draaien tot je het programma stopt!

Tip: Je kunt uitleg krijgen over ieder code blokje in Scratch door eerst op het vraagteken knopje te drukken en daarna op het blokje waar je meer over wilt weten ->

*  In de computer-graphics wereld worden kleine 2D pixel plaatjes die samen deel uitmaken van een groter geheel, bijvoorbeeld een game, Sprites genoemd. Meestal zijn sprites afbeeldingen met een transparante achtergrond (.PNG afbeeldingen) zodat je de randen ervan niet ziet.
Zie hier de Wikipedia uitleg over Sprites:
https://nl.wikipedia.org/wiki/Sprite_(computer)
Een grote afbeelding met daarin allemaal kleinere sprite afbeeldingen die voor een game gebruikt worden noemt men een ‘Sprite-sheet’, zoek maar eens met Google afbeeldingen op de titel van een 2D game die je kent, met ‘sprite sheet’ erachter. De meeste ‘volwassen’ game engine’s kunnen zo’n sprite sheet automatisch opdelen in kleine losse plaatjes, zodat je dat niet allemaal zelf hoeft te doen.
Sonic sprite sheet

Stap 9: Een sprite dupliceren/vermenigvuldigen

Het leuke van programmeren is dat als je iets kan laten werken met éen sprite je de code blokjes kunt kopiëren/plakken naar andere sprites.
Je kan ook hele sprites inclusief code blokjes in éen keer kopiëren door met je rechter-muisknop op een Sprite in je magazijn te klikken en daarna ‘kopie maken’ te kiezen ->

Zoals je ziet heb je nu ineens twee draaiende sprites als je op het vlaggetje klikt!

Je kunt verschillende sprites met verschillende snelheden laten draaien door ze éen voor éen aan te klikken in je magazijn en daarna het aantal graden in het ‘draai 15 graden’ knopje te veranderen. Om een sprite de andere kant op te laten draaien kun je het andere ‘draai 15 graden’ knopje gebruiken of simpelweg een min teken  voor het getal zetten! ->

Waar je dit voor kunt gebruiken:

Misschien dat je niet direct weet waar je dit voor kunt gebruiken maar de mogelijkheden zijn eindeloos,.. bijvoorbeeld draaiende windmolens in de achtergrond, wijzers van een klok, draaiende ogen van een animatie, draaiende obstakels voor een 2D platform game, het draaien van je spelfiguur, het sturen van een auto, vliegtuig, planeten, wielen, armen en bla blaaa bla bla bla…….

..Door naar het volgende!

Stap 10: Een sprite heen en weer laten bewegen

Nu dat duidelijk is wat denk je wel niet wat er allemaal kan met een Sprite heen en weer laten bewegen!
Om dat voor elkaar te krijgen heb je weer een paar blokjes nodig. Sleep om dit ietsje makkelijker te maken de sprite die je heen en weer wilt laten bewegen alvast naar de linkerkant van je game venster ->

Verwissel nu het blauwe ‘draai 15 graden knopje’ voor het blauwe ‘schuif in 1 sec. naar…’ uit de beweging blokjes lijst. Je kunt het draai blokje weggooien door deze weer terug naar de blokjes lijst te slepen..

Kopieer nu het blauwe schuif knopje met je rechter-muisknop, of sleep nog een tweede schuif blokje uit de blokjes lijst en plaats deze recht onder de eerste. Haal het minnetje weg voor het getal achter de x en het is klaar! ->

Druk op de start vlag en je zal zien dat je sprite eindeloos van links naar rechts heen en weer blijft gaan!

(Tip!) De snelheid waarmee je sprite beweegt kun je aanpassen door in plaats van 1 seconde bijvoorbeeld 2 in te vullen, je sprite zal er dan 2 keer zo lang over doen. Je kunt een getal tussen de 0 en 1 invullen om je sprite sneller te laten gaan, bijvoorbeeld 0.5 om je sprite twee keer zo snel te laten bewegen.

Wat de getallen achter de x en y in de schuifblokjes voorstellen zijn coördinaten en geven een positie aan in het Game venster.
Het midden van je game venster is het nulpunt van de x en y assen. De x-as is voor links/rechts en de y-as voor omhoog/omlaag.
Je kan het zien aan de getallen onderin het Game venster als je met je muis-cursor over het game venster beweegt->

Stap 11: Zelf een sprite besturen

De volgende logische stap nadat je de sprite automatisch hebt laten bewegen is natuurlijk om de sprite zelf te gaan besturen. Dit gaat ongeveer op dezelfde manier, ook met draai en beweeg blokjes maar je hebt er nog een paar andere blokjes bij nodig..

Zelf je sprite besturen

Klik de sprite aan die je wilt gaan besturen en haal alle blokjes behalve het Start blokje weg.
Maak daarna de blokjes eraan vast die je in de plaatjes hieronder ziet. Je kunt aan de kleuren zien uit welke Scripts blokjes lijst ze komen ->

1

2

3

Zoals je ziet worden hier de ‘Als .. dan’ en de ‘toets .. Ingedrukt?’ blokjes gebruikt om te checken of de speler éen van de vier pijltjes toetsten indrukt.
De ‘verander x met ..’ blokjes worden gebruikt om de positie van de sprite te veranderen.

Als je nu op het play vlaggetje drukt kun je nu de pijltjes toetsen gebruiken om je sprite heen en weer te bewegen.

Auto besturing

In het volgende voorbeeld zie je hoe je in plaats van je speler naar links en rechts te schuiven met je pijltjes ook je sprite kan laten draaien. Deze besturing is bijvoorbeeld meer geschikt voor een race- of vlieg-game omdat het een beetje stuurt als een auto of vliegtuig ->

Stap 12: Een achtergrond instellen

Om van de saaie witte achtergrond af te komen kun je zelf een achtergrond afbeelding instellen. Klik op het ‘Kies afbeelding uit bibliotheek’ knopje naast het Sprites venster om er eentje uit de Scratch bibliotheek te kiezen ->


Zodra je de afbeelding hebt gekozen zal deze achter je sprites in het game venster verschijnen en het scripts venster schakelt automatisch over naar het achtergronden teken venster waarin je er zelf nog dingen bij kunt tekenen ->

Zoals je ziet begin je bij Scratch gelukkig niet helemaal ‘from scratch’ (vanaf nul) en kun je kiezen uit een grote hoeveelheid achtergronden. Je kunt net als met de sprites ook je eigen foto’s of tekeningen uploaden om als achtergrond te gebruiken.

Voor dit voorbeeld wordt het plaatje ‘night city’ gebruikt ->

Stap 13: Je Scratch projecten opslaan

Om je Scratch project te bewaren klik je linksboven op ‘Bestand > Nu opslaan’. ->

Daarna kun je het project terugvinden door rechtsboven op je naam en daarna ‘Mijn projecten’ te klikken ->

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Powered by WordPress.com.

Up ↑

%d bloggers like this: