GameMaker 7.0 Workshop 2
Deze workshop bestaat eigenlijk uit drie mini-workshopjes
x Gebruik van TileSets
Stukjes achtergrond van een plaatjesvel (sheet) afhalen
x Gebruik van SpriteSheets
Sprites of animaties van een plaatjesvel afhalen Onder zie je een deel van zo’n spritesheet.
x Speelfiguurtje met voor- ,achter- en zijkanten Wisselen van sprites of gebruik maken van een stukje code
Ook voor deze miniworkshops geldt dat je stap voor stap meedoet. Let op het
-teken, daar moet je weer meedoen
GameMaker 7.0 Workshop 2 TileSets Een tilesets is een soort grote afbeelding. De afbeelding bestaat uit kleine onderdeeltjes. Tiles, ofwel tegeltjes. Recht zie je een tileset met wegen en spoorrails. Onder een (verkleind) voorbeeld van een tileset met ruines. Een tile is een stukje van een achtergrond en doet verder helemaal niets. Je kunt er dus niet tegen aan botsen of events aan toevoegen. Met tiles kun je wel een fraaie achtergrond ontwerpen. Op internet kun je veel tilesets vinden. Wegen, spoorlijnen, ruines, landschappen, enzovoort. Ook op de informaticasite vind je enkele tilesets.
Een tileset
Zoek een geschikte tileset en voeg deze aan het spel toe als background. Zorg daarbij voor de volgende instellingen. (volgende pagina)
18
GameMaker 7.0 Workshop 2 Transparant aanvinken
Gebruik deze background als tileset Geef aan hoe groot je de tiles wilt hebben. Neem bij voorkeur de grootte van je roomraster of een veelvoud daarvan.
Zo kun je een achtergrond opbouwen. Stukje voor stukje. Dat gaat op dezelfde wijze als het toevoegen van objecten. En met de rechter muisknop verwijder je het dus weer. Als je het vinkje hier weghaalt kun je stukjes afbeelding ook over elkaar zetten.
19
GameMaker 7.0 Workshop 2 SpriteSheets Een spritesheet (ook wel een strip genoemd) is net zoiets als een tileset, maar van een spritesheet haal je sprites af. Ook daar zijn er veel van te vinden op internet en op de informatica-site. Vanaf een spritesheet is het ook mogelijk een animatie te maken. Een tileset en een spritesheet kan zelfs dezelfde set afbeeldingen zijn. Het is maar waarvoor je de set wilt gebruiken. Sprites van een sheet afhalen
1. Klik op het ikoontje om een sprite toe te voegen
2. Ga nu echter meteen naar Edit Sprite.
3. Je bent nu in de Sprite Editor. Ga onder File naar Create from Strip. Er wordt gevraagd een strip (spritesheet) te downloaden. 4. Je kunt nu een sprite van één of meerdere plaatjes tegelijk toevoegen. Ik neem hier drie plaatjes van een vis. Dat wordt dan een animatie. De waarden links van de strip spreken voor zich. Je moet daar maar eens mee oefenen. Als je tevreden bent klik je op OK
20
GameMaker 7.0 Workshop 2
Er is nu van de drie plaatjes een animatie gemaakt. Links kun je zien hoe de animatie er uit zal komen te zien.
Dat gaat niet altijd zo soepel. Kijk maar eens naar het voorbeeld rechts Soms lukt het gewoon niet om om ieder plaatje een zelfde kadertje te maken. En voor een animatie moet dat natuurlijk wel. Als je toch die animatie wil kun je het volgende doen:
-
Begin eerst met één plaatje en klik OK
-
Ga weer Naar File en kies nu voor Add from Strip
-
Selecteer nu het volgende plaatje, je ziet nu dat de afmetingen van het plaatje niet meer zijn te veranderen. Omdat het een animatie moet worden blijven de afmetingen gelijk. De positie van het kadertje is wel aan te passen. OK
-
Voeg zo alle plaatjes toe totdat je de gewenste animatie hebt. o Afmetingen zijn niet meer te veranderen
De gewenste animatie 21
GameMaker 7.0 Workshop 2 Het speelfiguurtje Tot nu heb je alleen maar de voorkant van een speelpoppetje gezien. Leuker is het als het poppetje naar links loopt je zijn rechterkant ziet, als het naar rechts loopt zijn linkerkant ziet en als het van je afloopt zijn achterkant ziet. Dat ziet er meteen een stuk dynamischer uit. Dit kan je doen door van sprite te wisselen als je van richtingspijltje wisselt of het birdy-object een stukje code mee te geven.
Laten we als voorbeeld Birdy er nog eens bij halen.
We hebben een voor-, rechter-, linker-, en achterkant.
We beginnen met birdyFront. Dat is het plaatje dat ons aankijkt. Als we nu de linker pijltjestoets Å gebruiken moet de sprite birdyFront veranderen in birdyLeft. Evenzo als we de rechter pijltjestoets gebruiken moet birdyFront veranderen in birdyRight. Idem voor Up Dit moet ook gebeuren voor de eigenschappen van de andere birdyplaatjes. Dat wil zeggen, birdyBack moet kunnen veranderen in : - birdyFront - birdyLeft - birdyRight Enzovoorts. Een hoop werk, maar je krijgt er dan ook wel iets voor terug. Het kan echter ook een stukje korter. Als een animatie uit vier plaatjes bestaat dan kunnen we volstaan met een stukje code. Van de birdy-plaatjes kan zo’n animatie gemaakt worden. Of je haalt zo’n vierdelige animatie van een spritesheet af. Zie verderop in deze workshop.
22
GameMaker 7.0 Workshop 2
Wisselen van sprite met een stukje code
De birdy-animatie
Eigenschappen van het birdy_object
Eerst zorgen we dat als het level opent de voorkant van birdy is te zien. Create. We zetten het enkele plaatje met nr. 0 neer.
Voor iedere stap die birdy maakt is er een stukje code. Als hij naar links loopt plaatje 1 Als hij naar rechts loopt plaatje 3 Enzovoort. De instellingen voor het gebruik van de pijltjes toetsen blijft hetzelfde als beschreven staat in workshop 1. Dus voor één plaatje. Hetzelfde geldt voor de overige instellingen zoals het botsen tegen een muur, het pakken van een voorwerp, enz.
LET OP ! Naar boven toe is de negatieve kant op, naar beneden de positieve kant. Nogmaals, deze manier werkt alleen al je een vierdelige animatie hebt. Anders moet je van sprite wisselen. Zie volgende paragraaf. 23
GameMaker 7.0 Workshop 2 Het kan echter nog spannender. Birdy schuift als het ware over het scherm. Hij loopt niet echt.
Je kunt ook animatie-sprites laten wisselen. Haal van een spritesheet vier bij elkaar behorende animaties.
Deze animatie-sprites kun je op dezelfde manier laten wisselen als een enkele sprite. Dit poppetje zal echter over het scherm ‘lopen’ in plaats van schuiven. Nog even terug naar de sprite editor Het kan gebeuren dat je de horizontale pixel-offset negatief moet nemen. Je krijgt dan een wit vlak naast je plaatje.
Ook kan het gebeuren dat je nog net wat pixels meeneemt van het volgende plaatje. Dat geeft een lelijk effect in je animatie. Je kunt dit soort ongemakjes eenvoudig wegwerken in de editor. Met de vier pijltjes die je boven ziet staan kun je het plaatje meer naar links, rechts, op of neer positioneren. Dus alleen het poppetje. De groene achtergrond gaat niet mee.
24
