1. Sprites bewerken in Paint.NET#
Auteursrechten
Wanneer je afbeeldingen van het internet gebruikt in je games, moet je altijd controleren of je de afbeeldingen mag gebruiken. Veel afbeeldingen zijn beschermd door auteursrechten en mogen niet zomaar worden gebruikt. Zoek daarom altijd naar afbeeldingen met een Creative Commons licentie of maak je eigen afbeeldingen. In deze opdracht gebruiken we een afbeelding van Kenny uit de animatieserie South Park, die is gevonden door in Google afbeeldingen te zoeken met de Creative Commons license. Je vind die optie onder Tools en Usage rights in Google Afbeeldingen.
Om je eigen sprites te kunnen maken en bewerken heb je een grafisch programma nodig. Twee bekende gratis programma’s zijn:
Omdat de schrijver dezes enkel ervaring heeft met Paint.NET zullen we dat programma gebruiken. Je moet Paint.NET overigens niet verwarren met Paint, het tekenprogramma dat standaard in Microsoft Windows zit. Paint.NET is vele malen geavanceerder.
Paint.NET downloaden en installeren#
Downloaden#
Het downloaden van Paint.NET kan een beetje lastig zijn, omdat de website helaas veel advertenties en neplinks bevat. Volg onderstaande stappen (klik op de tabbladen om naar een volgende stap te gaan):
Ga naar www.getpaint.net en klik aan de rechterkant op de link zoals aangegeven in onderstaande afbeelding.
Scroll iets naar beneden en klik op het plaatje met dotPDN.
Klik aan de rechterkant op de downloadlink.
Het installatie bestand wordt gedownload naar je Downloads map.
Installeren#
Het installeren is eenvoudig. Open het gedownloade bestand en start de installatie:
Werken met Paint.NET#
Muis in plaats van touchpad
Gebruik voor het werken met Paint.NET een muis en niet het touchpad van je laptop. Met een muis kun je veel nauwkeuriger werken.
Het venster van Paint.NET ziet eruit zoals veel tekenprogramma’s: een groot wit canvas waarop je kunt tekenen en aan de randen enkele hulpvensters zoals een toolbox met tekengereedschappen en een kleurenpalet. Die hulpvensters kun je (on)zichtbaar maken met de vier knoppen rechtsboven.
Opdracht 01
Maak het History hulpvenster onzichtbaar.
Een afbeelding kopiëren#
Wanneer je een afbeelding hebt gedownload, kun je die eenvoudig openen via het File menu in Paint.NET. Een andere mogelijkheid is in de Windows Verkenner met de rechtermuisknop op het bestand klikken en kiezen voor Open with:
Maar meestal zoek je afbeeldingen voor je games met je web browser, en dan is de volgende manier het gemakkelijkst:
Klik met de rechtermuisknop op de afbeelding in je web browser.
Selecteer Afbeelding kopiëren.
Ga naar Paint.NET en typ Ctrl + Alt + V (of ga in de menubalk naar Edit en kies Paste into New Image).
Let op: je moet behalve de Ctrl toets dus ook de Alt toets ingedrukt houden, om ervoor te zorgen dat de afbeelding als nieuw bestand in Paint.NET wordt geplakt.
Opdracht 02
Kopieer onderstaande afbeelding en plak die in Paint.NET op de hierboven beschreven manier.
Selectiegereedschappen#
In de toolbox vind je een aantal gereedschappen waarmee je onderdelen van een afbeelding kunt selecteren. Klik op het Rectangle Select 
gereedschap in de linkerbovenhoek van de toolbox en je zult zien dat de knoppenbalk bovenin zich daarop aanpast.
Met name de size opties Any Size, Fixed Ratio en Fixed Size van dit gereedschap zijn interessant. Probeer ze alle drie uit door een optie te kiezen en vervolgens iets in de afbeelding te selecteren.
In de onderstaande afbeelding zie je dat voor Fixed Ratio is gekozen met een breedte-hoogteverhouding van 4:3.
Opdracht 03
Kies het Rectangle Select gereedschap. Stel de afmeting in op Fixed Ratio met breedte-hoogteverhouding 1:1.
Selecteer met deze instelling Kenny (het derde mannetje van links).
Kopieer de selectie met de toetscombinatie Ctrl + C en plak die vervolgens als een nieuw bestand met de toetscombinatie Ctrl + Alt + V.
Als je opdracht 03 goed hebt uitgevoerd, beschik je nu over een afbeelding van Kenny zoals hieronder getoond. In de volgende paragraaf gaan we die afbeelding bewerken.
Achtergrondelementen verwijderen#
Om Kenny te kunnen gebruiken in een game, moeten we de achtergrond verwijderen. Laten we beginnen met de hoeveelheid achtergrond rondom Kenny te verkleinen.
Opdracht 04
Kies het Rectangle Select gereedschap. Stel de afmeting in op Any Size en selecteer een rechthoek rondom Kenny. Kies vervolgens in de menubalk Image en Crop to Selection, of gebruik de toetscombinatie Ctrl + Shift + X.
Het resultaat van dit croppen (uitsnijden) zie je hieronder.
Je zou de resterende achtergrond kunnen verwijderen met het gum gereedschap, maar dat is een tijdrovende klus en bovendien moet je daar een vaste hand voor hebben. Gelukkig is er een gemakkelijkere manier: de Magic Wand.
Selecteer het 
gereedschap in de toolbox en klik op het donkergroene deel linksboven in de afbeelding. Je zult zien dat de Magic Wand het complete groene stuk selecteert.
In deze afbeeldingen zijn de randen heel scherp, maar dat is niet altijd het geval. Je kunt dan de Tolerance instellen in de knoppenbalk bovenin. Hoe hoger de Tolerance, hoe meer kleuren er worden geselecteerd. Probeer het eens uit.
Opdracht 05
Selecteer met het Magic Wand gereedschap de donkergroene achtergrond links achter Kenny en druk op de Delete toets. Selecteer vervolgens de witte achtergrond en druk weer op de Delete toets. Verwijder op deze manier alle achtergrondelementen rondom Kenny.
Het lijkt nu alsof de achtergrond volledig is verwijderd, maar de kans is groot dat er nog wat restanten zijn achtergebleven. Je kunt dat beter zien door een tijdelijke achtergrondkleur toe te voegen. Daarvoor gaan we een nieuwe layer (laag) toevoegen.
Opdracht 06
Rechtsonder in Paint.NET zie je het Layers venster. Voeg een nieuwe laag toe met het 
knopje linksonder in het Layers venster. Sleep deze nieuwe laag vervolgens onder de laag met Kenny (of gebruik het 
knopje.
Vanaf nu moet je goed opletten welke layer is geselecteerd wanneer je iets in de afbeelding wilt veranderen. Wanneer je bijvoorbeeld iets wilt weggummen en er lijkt niets te gebeuren, dan is waarschijnlijk de verkeerde layer geselecteerd.
Opdracht 07
Zorg dat de nieuwe layer is geselecteerd. Kies het verfemmergereedschap 
in de toolbox en klik vervolgens met de rechtermuisknop ergens in de afbeelding. Je mag zelfs op Kenny klikken, want die zit in een andere layer.
Waarom klik je met de rechtermuisknop en niet met de linkermuisknop? Probeer het eens uit.
In het kleurenpalet zie je linksboven twee kleuren staan. De bovenste kleur is de voorgrondkleur, die je krijgt met de linkermuisknop, en de onderste kleur is de achtergrondkleur, die onder de rechtermuisknop zit.
In welke figuur zie je de resterende achtergrondpixels het beste? In de figuur met de witte achtergrond of in de figuur met de zwarte achtergrond?
Waarschijnlijk is in dit geval de zwarte achtergrond het beste, maar dat kan per afbeelding verschillen.
Opdracht 08
Om de resterende achtergrondpixels te verwijderen, doe je het volgende:
Selecteer de laag met Kenny.
Selecteer in de toolbox het gumgereedschap
.Stel bovenin het venster de brush size in op 20 pixels.
Gum de resterende achtergrondpixels weg.
Let bij het gummen op dat je Kenny zelf niet raakt. Als je per ongeluk toch iets van Kenny weggumt, kun je dat herstellen met de toetscombinatie Ctrl + Z.
Bij dit soort bewerkingen is het vaak handig om in te zoomen op de afbeelding. Dat gaat het snelst door de Ctrl toets ingedrukt te houden terwijl je aan het scrollwieltje van je muis draait. Om de gehele afbeelding weer mooi in beeld te krijgen kies je in de menubalk voor View en Zoom to Window.
Opdracht 09
Verwijder de achtergrondlaag door hem te selecteren en vervolgens op het 
knopje te klikken in het Layers venster. Als alles goed is gegaan, beschik je nu over Kenny met een transparante achtergrond.
Resizen#
De afbeelding van Kenny is nu nog veel te groot om te gebruiken in een game. We gaan hem daarom resizen. Maar voordat we dat doen gebruiken we nogmaals de crop functie om de afbeelding zo bij te snijden dat Kenny er precies in past.
Opdracht 10
Selecteer weer het Magic Wand gereedschap en klik op de transparante achtergrond. Nu is de achtergrond geselecteerd. Voor het croppen willen we echter niet de achtergrond selecteren, maar juist de afbeelding van Kenny. Kies daarom in de menubalk Edit en Invert Selection, of gebruik de toetscombinatie Ctrl + I.
Om te croppen kies je in de menubalk Image en Crop to Selection, of gebruik de toetscombinatie Ctrl + Shift + X. Nu is de afbeelding van Kenny zo groot dat Kenny er precies in past en er geen ruimte meer zit tussen de randen van de afbeelding en Kenny.
Hoe groot moet de afbeelding van Kenny worden? Dat hangt af van de vensterafmetingen van je game en de grootte van de andere sprites die je gebruikt. In de meeste games is de grootte van de sprites een veelvoud van 8 pixels. Laten we Kenny daarom resizen naar een breedte van 64 pixels.
Opdracht 11
Kies in de menubalk Image en Resize, of gebruik de toetscombinatie Ctrl + R. Stel de breedte in op 64 pixels en zorg dat de optie Maintain aspect ratio is aangevinkt. Daardoor wordt de hoogte van de afbeelding automatisch aangepast.
Alle overige instellingen kun je gewoon laten zoals ze zijn. Klik op OK om de afbeelding te resizen.
Nu is Kenny klaar voor gebruik in je game. Sla hem op (Ctrl + Shift + S) als een .png bestand, want dat is het meest geschikte bestandsformaat voor sprites.
kenny.png#
Handige sneltoetsen#
Paint.NET kent veel sneltoetsen die het werken met het programma een stuk sneller maken. Hieronder een overzicht van de belangrijkste sneltoetsen. De volledige lijst kun je op www.getpaint.net vinden.
Actie |
Sneltoets |
|---|---|
Afbeelding slepen (pannen) |
Spatiebalk + Linkermuisknop en slepen |
In- en uitzoomen |
Ctrl + Muiswiel |
Kopiëren |
Ctrl + C |
Knippen |
Ctrl + X |
Plakken |
Ctrl + V |
Plakken als nieuwe afbeelding |
Ctrl + Alt + V |
Verwijderen |
Delete |
Alles selecteren |
Ctrl + A |
Selectiegereedschap |
S |
Selectie verplaatsen |
M |
Selectiemasker verplaatsen |
M (nogmaals) |
Inverteer selectiemasker |
Ctrl + I |
Formaat wijzigen (resize) |
Ctrl + R |
Ongedaan maken |
Ctrl + Z |
Opslaan |
Ctrl + S |
Opslaan als (onder een nieuwe naam) |
Ctrl + Shift + S |
Tenslotte#
In deze les heb je geleerd hoe je zelf een sprite kunt maken van een afbeelding. Op internet zijn echter al heel veel kant en klare sprites te vinden, die je direct in een game kunt gebruiken. Bekende websites met gratis sprites zijn:
En wil je graag je eigen Southpark karakter ontwerpen, kijk dan eens op https://www.sp-studio.de/.