2. Sprites#

Zoals gezegd is een zwart venster niet heel spannend. Laten we er daarom snel wat leven in brengen, door onze hoofdrolspeler te introduceren: een roze alien.

../_images/alien_centered.png

De alien is een afbeelding (Engels: image) die we straks uiteraard gaan laten bewegen. Afbeeldingen van karakters en objecten in games noemen we sprites.

Images map#

Voordat je hem kunt gebruiken, moet je de alien sprite downloaden en in de juiste map plaatsen. Volg onderstaande stappen om dat te doen.

  1. Klik in Mu editor op de knop Images. Daardoor creëert Mu editor zelf een map met de naam images in je alien map. Er wordt automatisch een Windows Verkenner geopend waarin je dat kunt zien.

    ../_images/images_folder_01.png

    Alle sprites die je gebruikt in een game moeten in deze map staan, anders kan Mu editor ze niet vinden.

  2. Download de alien sprite.

    ../_images/alien_pink.png

  3. Het gedownloade bestand komt waarschijnlijk terecht in je Downloads map. Verplaats het bestand met behulp van de Windows Verkenner naar de alien\images map. Dit kan op verschillende manieren, bijvoorbeeld door het bestand van het ene venster naar het andere te verslepen. Je kunt ook het bestand in de Downloads map selecteren, vervolgens Ctrl + X gebruiken om het te knippen en Ctrl + V in de alien\images map om het te plakken.

    ../_images/download_move.png


    Tip

    In plaats van met de linker muisknop kun je ook met de rechter muisknop op de downloadlink klikken. Als je vervolgens Link opslaan als selecteert, kun je de sprite direct in de alien\images map opslaan. Je hoeft hem dan niet meer uit je Downloads map te halen.

    ../_images/context_menu.png

  4. Als je dit goed hebt gedaan, dan bevindt het bestand alien_pink.png zich nu op de juiste plek.

    ../_images/images_folder_02.png

    Ziet het er bij jou iets anders uit? Je kunt in het lint van de Verkenner het tablad Beeld selecteren en daar kiezen voor grotere icoontjes en het tonen van bestandsextensies. Een bestandsextensie is de toevoeging aan een bestandsnaam die achter de punt staat. Dus van het bestand alien_pink.png is de naam alien_pink en de extensie png.

    ../_images/images_folder_03.png

Actors#

Om de alien sprite in je game te laten verschijnen, moet je drie dingen doen:

  1. Een Actor variabele aanmaken.

  2. De draw() functie van je game definiëren.

  3. De draw() functie van de Actor variabele aanroepen.

In de volgende code zie je deze stappen in de regels 5 tot en met 10.

alien.py#
 1# Vensterafmetingen
 2WIDTH = 600
 3HEIGHT = 400
 4
 5# Roze alien Actor
 6alien = Actor('alien_pink')
 7
 8# De draw() functie van de game
 9def draw():
10   alien.draw()

Op regel 6 wordt met alien = Actor('alien_pink') een Actor variabele aangemaakt met de naam alien. Tussen de haakjes staat de naam van de sprite die we willen gebruiken voor deze Actor.

Op regel 9 definiëren we de draw() functie. Elk Pygame Zero programma moet zo’n functie bevatten. Pygame roept deze functie automatisch aan wanneer het game venster opnieuw moet worden getekend. Als we de sprite straks laten bewegen, wordt draw() heel vaak aangeroepen, telkens wanneer de sprite een stukje is verplaatst. Let op: je programma kan niet meer dan één draw() functie hebben; alle tekenwerk moet door deze ene functie worden geregeld.

Op regel 10 roepen we alien.draw() aan. Dat is de draw() functie van de alien Actor (en dus een andere dan de draw() functie die we op regel 9 definieerden). Elke Actor in Pygame Zero heeft een eigen voorgeprogrammeerde draw() functie die ervoor zorgt dat de sprite wordt getekend.

Run je code om te zien of het werkt.

../_images/alien_topleft.png

Positionering#

Op dit moment staat de alien linksboven in het venster. Om de sprite op een andere positie te plaatsen, gaan we coördinaten gebruiken. Hieronder lees je hoe dat werkt.

In regel 2 en 3 van alien.py stelden we de breedte en de hoogte van ons game venster in op 600 en 400 pixels:

../_images/coordinates_01.png

Elke pixel in dit venster heeft twee coördinaten:

  • x-coördinaat: de horizontale afstand tot de linker bovenhoek.

  • y-coördinaat: de verticale afstand tot de linker bovenhoek.

Vaak schrijf je de twee coördinaten van een pixel tussen haakjes, gescheiden door een komma. Dus (200, 100) is de pixel met x-coördinaat 200 en y-coördinaat 100. De hoekpunten van ons venster hebben dus de coördinaten (0, 0), (600, 0), (0, 400) en (600, 400).

../_images/coordinates_02.png

De pixel die vanuit de linker bovenhoek 200 naar rechts en 100 naar beneden ligt, heeft de coördinaten (200, 100):

../_images/coordinates_03.png
Verschillende coördinatenstelsels

Let op het verschil tussen het coördinatenstelsel in Pygame Zero en dat in de turtle module. In de turtle module is (0, 0) het midden van het venster. In Pygame Zero is (0, 0) de linker bovenhoek. Bovendien is de positieve richting van de y-as in de turtle module naar boven en in Pygame Zero naar beneden!

../_images/turtle_axes.png

Coördinatenstelsel turtle

../_images/pygame_axes.png

Coördinatenstelsel Pygame

Laten we de alien eens op dit punt (200, 100) positioneren:

alien.py#
 1# Vensterafmetingen
 2WIDTH = 600
 3HEIGHT = 400
 4
 5# Roze alien Actor
 6alien = Actor('alien_pink')
 7alien.x = 200
 8alien.y = 100
 9
10# De draw() functie van de game
11def draw():
12   alien.draw()

Run de code om te controleren of de alien inderdaad op de juiste positie staat.

../_images/alien_200_100.png


Opdracht 01

Wijzig de code in alien.py zodat de alien op 500 pixels van de linkerzijde en 300 pixels van de bovenzijde van het venster staat.

Oplossing
alien.py#
 1# Vensterafmetingen
 2WIDTH = 600
 3HEIGHT = 400
 4
 5# Roze alien Actor
 6alien = Actor('alien_pink')
 7alien.x = 500
 8alien.y = 300
 9
10# De draw() functie van de game
11def draw():
12   alien.draw()
Opdracht 02

Wijzig de code in alien.py zodat de alien op 150 pixels van de rechterzijde en 50 pixels van de onderzijde van het venster staat.

Opdracht 03

Wijzig de code in alien.py zodat de alien exact in het midden van het venster staat.

Vensterafmetingen gebruiken#

Wellicht heb je de opdrachten 02 en 03 als volgt opgelost:

Opdracht 02#
7alien.x = 450
8alien.y = 350
Opdracht 03#
7alien.x = 300
8alien.y = 200

Met deze code komt de alien inderdaad op de juiste plek terecht. Het is echter beter om bij deze opdrachten de vensterafmetingen WIDTH en HEIGHT te gebruiken voor het positioneren van de alien:

Opdracht 02#
7alien.x = WIDTH - 150
8alien.y = HEIGHT - 50
Opdracht 03#
7alien.x = WIDTH / 2
8alien.y = HEIGHT / 2
Vraag 01

Waarom is het beter alien.x = WIDTH / 2 te gebruiken dan alien.x = 300 om de sprite horizontaal in het midden van het venster te positioneren?

Antwoord

Met alien.x = WIDTH / 2 is je code flexibeler. Stel dat je later besluit om de breedte van je venster te vergroten naar 800 pixels, dan komt de sprite nog steeds in het midden terecht. Had je alien.x = 300 gebruikt, dan zou de sprite niet meer in het midden staan.

Opdracht 04

Wijzig de code in alien.py zodat de alien op een kwart van de vensterbreedte en de helft van de vensterhoogte staat.

Oplossing
Opdracht 04#
7alien.x = WIDTH / 4     # Of alien.x = 0.25 * WIDTH
8alien.y = HEIGHT / 2    # Of alien.y = 0.5 * HEIGHT

Ankerpunten#

Opdracht 05

Plaats de alien in de rechter onderhoek van het venster. Gebruik niet de getallen 600 en 400, maar de constanten WIDTH en HEIGHT.

Oplossing
alien.py#
 1# Vensterafmetingen
 2WIDTH = 600
 3HEIGHT = 400
 4
 5# Roze alien Actor
 6alien = Actor('alien_pink')
 7alien.x = WIDTH
 8alien.y = HEIGHT
 9
10# De draw() functie van de game
11def draw():
12   alien.draw()

Als je de vorige opdracht goed hebt uitgevoerd, dan was dit het resultaat:

../_images/alien_bottomright_wrong.png

Dat is waarschijnlijk niet helemaal wat je voor ogen hebt wanneer je de alien in de rechter onderhoek wilt positioneren. Kijk even goed naar de onderstaande afbeeldingen om de oorzaak te begrijpen van deze ‘fout’.

../_images/sides.png
../_images/anchorpoints.png

De alien sprite heeft een breedte en een hoogte. Wanneer je alien.x en alien.y een waarde geeft, zorgt Pygame ervoor dat het middelpunt (center) van de sprite op die positie terecht komt. Het middelpunt is namelijk het standaard ankerpunt van een sprite. Wij willen echter graag dat het punt rechtsonder (bottomright) op de coördinaten (600, 400) terecht komt. Dit kun je doen door regels 7 en 8 van je programma als volgt aan te passen:

alien.py#
7alien.right = WIDTH
8alien.bottom = HEIGHT

Je kunt het ook in één regel doen:

alien.py#
7alien.bottomright = (WIDTH, HEIGHT)

Nu staat de alien precies op de plek die we wilden:

../_images/alien_bottomright_right.png


Opdracht 06

Plaats de alien in de rechter bovenhoek van het venster.

../_images/alien_topright.png


Oplossing
alien.py#
7alien.right = WIDTH
8alien.top = 0

of

alien.py#
7alien.topright = (WIDTH, 0)
Opdracht 07

Plaats de alien in de linker onderhoek van het venster.

../_images/alien_bottomleft.png


Oplossing
alien.py#
7alien.left = 0
8alien.bottom = HEIGHT

of

alien.py#
7alien.bottomleft = (0, HEIGHT)