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 zoals Lego, of als een trein met wagons. Dus je hoeft met scratch niet alle code zelf 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 deel twee van deze tutorial ook meteen uitgelegd hoe je een kleine racegame kan maken!:
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 jezelf 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. Je kunt natuurlijk ook zoeken naar ‘clones’ van bestaande classics zoals Pacman door bovenaan in het zoekveld op een titel of onderwerp te zoeken->
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. Hieronder zie je als het ware het brein of de ‘AI’ van het rode Ghost plaatje wat links is geselecteerd ->
Je bent bij Scratch helemaal vrij om te kijken hoe andere scratch games van binnen werken!
De code blokjes die je aan de rechterkant ziet zijn precies zoals de programmeur ze daar heeft achter gelaten en dus nog door ons ‘leesbaar’.
Code die nog leesbaar is en geschreven is in de originele programmeer taal noemen we ‘source code’ (bron code).
Voordat de source code blokjes van Scratch door je computer uitgevoerd kunnen worden moeten de instructies of commando’s ervan eerst omgezet worden in binaire machine code die direct de hardware van je computer aanstuurt.
Scratch doe dit ‘compileren’ snel automatisch op de achtergrond als je op het groene play vlaggetje drukt maar voor de meeste programma’s die je al op je computer hebt geïnstalleerd is dat al vooraf gedaan en zie je als je in de bestanden van het programma gaat kijken alleen de binaire machine code.
Van sommige programma’s kun je naast het normale uitvoerbare programma ook de source code bestanden downloaden en eventueel controleren of aanpassen. Programma’s waar je de bron code van kunt downloaden noemen we open sourced.
Bij Scratch kun je van iedere game de source code bekijken en ermee doen wat je wilt omdat je altijd een clone of kopie van iedere willekeurige Scratch game naar je eigen Scratch account kunt maken.
De games op Scratch zijn dus allemaal open sourced!
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 vertrouwd 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 beeld wat de uiteindelijke spelers van je game zien als deze af is…
(tenzij ze jouw project van binnen gaan bekijken):
2: Links onder zie je 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 aan je eigen game kunt toevoegen 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 bepaalt 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 een Start blokje voor 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 zo het draai blokje er tussenin 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 ->
*Wat zijn Sprites?
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)
Eigenlijk is een afbeelding pas een ‘sprite’ als de afbeelding als sprite gebruikt wordt in een game engine want om een afbeelding voor een game te kunnen gebruiken moet er als het ware meer informatie aan een afbeelding worden gekoppeld dan alleen de pixels en kleuren. Iedere afbeelding moet bijvoorbeeld ook een eigen ‘pivot point’ hebben wat bepaalt om welk punt het plaatje draait.
Bij een sprite van een tennisbal zal dit punt waarschijnlijk in het midden van het plaatje zitten maar voor sommige sprites van characters, gebouwen, bomen, achtergronden etc, zit dit punt misschien aan de onderkant van het plaatje zodat het gemakkelijker is om deze afbeeldingen ‘op de grond’ van levels te plaatsen bijvoorbeeld.
Hieronder zie je een afbeelding met aan de rechterkant een sprite aanpas menu venster in de 3D game engine Unity. In het Sprite Editor venster kun je als maker aangeven waar het midden/pivot point van de sprite zit:
Naast informatie over het midden van de afbeelding wordt een sprite ook van informatie over de ‘borders’ (randen) van de afbeelding voorzien. Dit bepaalt dan hoe de sprite uit moet kunnen rekken als deze bijvoorbeeld voor een menu venster of knopje in een game of programma wordt gebruikt. Voor de vensters van alle Windows en MacOS programma’s worden dus eigenlijk ook sprites gebruikt die bijvoorbeeld alleen in het horizontale en verticale midden worden uitgerekt wanneer je een venster van formaat veranderd, zodat de hoekjes altijd mooi scherp blijven:
Een Sprite bestand hoeft niet altijd alleen maar éen afbeelding te zijn maar kan in game engines en andere geïntegreerde ontwikkel omgevingen (‘IDE’s) waarin men ‘gewone’ computer programma’s maakt, worden opgedeeld in meerdere losse sprites.
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. Bovenaan de tekst zie je een sprite-sheet van een Sonic game en hieronder zie je een afbeelding van meerdere planeten opgesneden in meerdere losse sprites:
Hieronder zie je een stukje voorbeeld code waarin zowel codes voor sprites als voor gewone afbeeldingen worden gebruikt.
De code is versimpeld voor de leesbaarheid en hoe het er precies uitziet hangt af van welke programmeer taal en welk programma er worden gebruikt.
Texture2D is de naam die Unity geeft aan gewone afbeeldingen.
‘backgroundTexture’ en ‘characterSprite’ verwijzen naar twee .png afbeeldingen op de computer’s harde schrijf:
public class SpritesAndTexturesExample
{
// Hieronder zie je twee variabelen om een achtergrond afbeelding en
// een character sprite tijdelijk in het RAM geheugen van de computer
// op te slaan:
Texture2D backgroundTexture;
Sprite characterSprite;
void Start()
{
// De code hieronder koppelt de afbeelding variabelen aan
// de afbeeldingen op de harde schijf:
backgroundTexture = Resources.Load("/Images/Beach.png") as Texture2D;
characterSprite = Resources.Load("/Images/Character1.png") as Sprite;
// De code hieronder veranderd alle pixels van de 'gewone'
// achtergrond afbeelding pixel voor pixel in zwart:
for (int y = 0; y < backgroundTexture.height; y++)
{
for (int x = 0; x < backgroundTexture.width; x++)
{
backgroundTexture.SetPixel(x, y, Color.black);
}
}
backgroundTexture.Apply();
// De code hieronder plaatst de character Sprite in het midden van
// de spel wereld dus op nul op zowel de X als de Y as:
characterSprite.transform.position = new Vector2(0,0);
// De code hieronder checkt of de pivot point van de character
// sprite in het midden zit.
// Zo ja dan wordt de sprite iets omhoog geplaatst zodat de
// game character niet door de grond steekt:
if(characterSprite.pivot.x == 0 && characterSprite.pivot.y == 0)
{
characterSprite.transform.position.y += 0.5f;
}
}
}
De naam sprites is dus eigenlijk nodig om in gewone ‘programma maak programma’s’ (IDE’s) en game maak programma’s (game engines) onderscheid te kunnen maken tussen gewone afbeeldingen die niets speciaals hoeven te doen en speciale afbeeldingen met meer extra informatie over onder andere de pivot points en de snij randen.
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 je weet wat er mogelijk is door een Sprite te laten draaien 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 daarna het minnetje weg voor het getal achter de x ->
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..
Klik de sprite aan die je zelf 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 dit dan dat’ 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 wanneer de vergelijking tussen ‘als’ en ‘dan’ waar blijkt te zijn.
Een ‘als’ of in het engels ‘if’ code blok wordt door programmeurs een if-statement genoemd.
De vergelijkingen (comparisons) die in de licht blauwe blokjes na het woordje als of if worden gedaan kunnen van alles zijn als het antwoord maar op ‘waar’ of ‘niet waar’ (true or false) uit kan komen.
Als je nu op het play vlaggetje drukt kun je nu de pijltjes toetsen gebruiken om je sprite heen en weer te bewegen.
Auto en vliegtuig 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 meer 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 ->
That is it for now!
Dit is het einde van deel 1 van deze Scratch tutorial maar als laatste wil ik je aanraden om vooral veel uit te proberen en veel voorbeelden te ‘lenen’ van andere scratch gebruikers. Je kunt voor handige ‘methodes’ zoals voor het besturen van je speler en het laten draaien van sprites bijvoorbeeld allemaal aparte projecten opslaan, zodat je op die manier een eigen database van handige voorbeelden creëert die je makkelijk kunt gebruiken voor je eigen games. Voor de voorbeelden uit deze tutorial kun je kijken op mijn Scratch profiel: https://scratch.mit.edu/users/TimCoster/projects/
Klik op de link hieronder om meteen door te gaan naar de volgende Scratch tutorial:
https://timcoster.com/2018/02/14/2d-games-maken-met-scratch-deel-2-race-game/
Coster-Graphics 
Ik wil mijn scratch project delen, maar ik zie nergens staan dat ik hem kan delen. Wat moet ik hier aan doen?, ‘marja-‘ is mijn gebruikersnaam mocht het wel lukken.
LikeLike
Hoi Marja!
Ik snapte er gisteren even niets van maar ik herinnerde me vanochtend weer dat je eerst de e-mail die je van scratch hebt gekregen toen je het account aanmaakte eerst nog moet bevestigen voordat je zelf dingen mag delen.. Dus kijk even in je e-mail of je de mail van scratch nog hebt zodat je die kan bevestigen. Het kan ook zijn dat de e-mail bij je spam terecht is gekomen.
Laat maar even weten of het wel of niet gelukt is via hier of m’n e-mail: timcoster@gmail.com.
Als je project ge-shared is kun je ook de link van je project naar me sturen dat is dan zoiets als dit: https://scratch.mit.edu/projects/505801892/
En misschien ook leuk voor jou om er een link naartoe op je eigen blog te zetten ^^,
Groetjes Tim
LikeLike