Game maker Tutorial Pong

Transcriptie

1 Game maker Tutorial Pong Fall 2016 with gamemaker studio version 1.4 Sprites Sprites zijn kleine afbeeldingen. Je kan ze importeren of Create/Edit deze afbeeldingen. Hier maken we ze: Bal,lijn en paddels. Maak de sprite bal voor het spel: 1. Van de resource menu kies CreateSprite. De sprite properties kom dan naar voren.

2 2. Klik op de name: veld waar nu is staat sprite0. En ook geselecteerd is. Dit soort namen is de standaard benaming voor sprites. Elke nieuwe sprite krijgt een getal hoger dan de vorige. Hernoem het naar spr_ball. 3. Klik op edit sprite knop. En de editor wordt geopend. 4. Klik op file en dan op new. 5. GM vraagt nu om de grote van de sprite. 6. Width en height zijn standaard al ingevult met 32. Hier hoef niets gedaan te worden. 7. En klik op ok. 8. Klik op edit en weer edit ( of dubbel klik op de afbeelding)

3 9. Een nieuw venster wordt geopend. Selecteer cirkel en maak een cirkel. Vul deze op tot deze volledig rood is. 10. Druk nu op in de image editor. 11. Druk op in de Sprite editor. Maak de lijn sprite voor het spel: Meerdere lijn sprites te samen maakt een grote lijn. 1. Van de resources menu, kies Create Sprite opnieuw. En de sprite properties komt weer naar voren. 2. In naam verander die in spr_line. 3. Klik op de edit sprite knop. 4. Klik op edit en weer edit ( of dubbel klik op de afbeelding). 5. Klik op file en dan op new.

4 6. Maak nu een rechthoek in de kleur groen of als je wilt in een kleur die je graag wilt. 7. Druk op in de image editor. 8. Druk op in de sprite editor. Maak nu de paddles 1. Rechts klik op sprite en selecteer Create Sprite. 2. Verander de naam in spr_paddle. 3. Klik op Edit Sprite knop. 4. Klik op edit en weer op Edit Of dubbel klik op afbeelding. 5. Nu gaan we iets anders doen. Selecteer in menu transform resize Canvas 6. Zorg er voor dat width en height op 400 % staan. 7. Teken in het midden de paddle met de rechthoek tool. Maak deze blauw of een kleur die je zelf leuk vind.

5 8. Druk op in de image editor. 9. Druk op in de sprite editor. De eerste stap is gezet. Nu gaan we alles veilig stellen. Klik in menu op file en dan op save as... Vul in op de vraag welke naam: pong_1 Hiermee geven we aan dat het poging 1 is. Objecten Sprites alleen doen helemaal niet op het scherm of in GM. Als we ze willen besturen moeten we er objecten aan vast koppelen. Create de ball object 1. Rechts klik op de resource Objects en selecteer Create Objects. 2. In de Name: vak vul in: obj_ball 3. In het gebied Sprite klik op en kies spr_ball. 4. Klik op OK. Create the paddle object: 1. Rechtsklik op de resource Objects en selecteer Create Objects. 2. In de name: veld verander deze in obj_paddle_right 3. Klik op de sprite icon knop en kies spr_paddle. 4. Klik op ok. 5. Rechts klik op obj_paddle_right en selecteer duplicate. 6. Een nieuw object is aangemaakt. 7. In name: verander de name in: obj_paddle_left.

6 Create the lines objects: 1. Rechtsklik op de resource Objects en selecteer Create Objects. 2. In de name: veld verander deze in obj_line. 3. Klik op de sprite icon knop en kies spr_line. 4. Zet een vink voor solid. 5. Klik op ok Room Het is een mooi woord voor scherm. GM werkt met room s elke room heeft zijn eigen stukje programma. Dat is makkelijk om te weten wat te doen. Room is dus en scherm. Elke scherm die je aanmaakt wordt door GM met een standaard formaat weg geschreven. Meestal hetzelfde als wat je op dit moment in windows gebruikt. Het maken van de room: 1. Rechtsklik op de room icoon. En selecteer Create Room. De room properties word geopend. 2. In de rechter zijde zie je 2 tab labels. Selecteer de label settings. In de name: verander je naar : rm_main. 3. In width en height stel in 800 bij Selecteer de tab objects: Als je nu bovenin kijk zie je snapx en snapy. Dit is de grabbing de x,y posities van de sprite. Hierdoor wordt de sprite makkelijker op het scherm geplaatst. Zonder precies uit te rekenen waar je moet zijn. 5. Aan de linker zijde zie je nu een object van de bal. Dit is een instance van de bal. Plaats deze ergens in het midden van de room. 6. Selecteer het spritelabel halve wege en kies obj_line. Plaats nu in elke 32 bij 32 vlak een lijn boven en onder. Om het sneller te maken houd shift + ctrl ingedrukt nadat je de eerste heb geplaatst. Plaats nu ook de obj_paddle_right en obj_paddle_left in het scherm.

7 7. Als een instance (Is gelijk aan gemaakt opject op het scherm uitleg valt niet onder deze tut) niet goed staat kan je met rechts verwijderen selecteer dan delete. Of gewoon met links de instance verplaatsen. 8. Drup op in de linker bovenhoek om alles te sluiten en op te slaan. Doe nu weer een save om alle veranderingen op te slaan. Gebruik de naam pong_2 om de volgende poging op te slaan. Is er nu iets volledig verkeerd kan je een save nummer terug. En ben je niet veel kwijt. actie De instance van objecten doen niets tenzij te ze vertel wat ze moeten doen. Je doe dit door aanwijzingen te geven bij verschillende events die gebeuren. Er zijn veel verschillende events die kunnen voorvallen. Het belangrijkste event is het maken van de instance. Dit heet create event. Er moet iets gebeuren. Bijvoorbeeld moeten we de instance van de bal vertellen dat deze moet gaan bewegen. Een ander belangrijk event is als 2 instances elkaar raken, een zogenaamde Collision Event Als de bal in contact komt met een instance van de paddle. De bal moet hierop reageren door van richting te veranderen. Laat de bal object bewegen: 1. Dubbel klik op de obj_ball.

8 2. De object properties opent. Klik Add event en selecteer create. 3. Nu de instance in gemaakt. Kunnen we met create aangeven dat we een beweging willen maken. Klik op en sleep deze naar de action venster. 4. Zodra je de actie geplaatst heeft open een venster een event genaamd. Dit is move fixed. Nu kan je dus aangeven welke richting je de bal wilt laten bewegen. Klik de pijl voor de richting en vul bij speed in 10. Dit is pixel verplaatsing per gebeurtenis. En klik op OK Nu gaan we het spel testen. Als we het starten moet de bal dus naar rechts onderaan gaan. Eerst save het spel weer. En klik dan op om het spel te starten.

9 Als alles goed gedaan is zie je een bal van het scherm af bewegen. Krijg je fout meldingen loop de beschrijvingen goed na. Of ga 1 stap terug. Een botsing behandelen met de lijn: 1. Klik weer op add event knop. In de event selector kies uit de knop Collision. Een sub menu wordt geopend die vraagt met wat moet de bal in botsing komen. Kies de obj_line. En onder Events komt de collision er bij. 2. Onder action plaats je er in. Alles staat al goed in. Omdat het een standaard uitvoering is waar GM vanuit gaat. Klik op ok Het handelen met de lijnen is nu afgewerkt. Maar tegen de paddles nog iet. Dat gaan we nu doen. Handeld een botsing af met de paddle: 1. We zijn nog steeds met de bal bezig. Dus doe weer add event en collision. In de sub menu die er komt maak de keuze obj_paddle_right. 2. Onder action plaatsen we weer de icon.

10 3. Hier hebben we te maken met een niet solid object. Dus als moeten we aangeven wat de bal tegen elk willekeurig object bounce moet doen. Dit doen we door Against: te veranderen in all objects. 4. Hetzelfde doen we nu met de linker paddle. Het spel opnieuw starten als de bal uit beeld gaat: Om dit voor elkaar te krijgen moet de obj_ball nog een event verwerken. 1. Druk weer op de knop Add Event. En kies de optie Others. Uit de sub menu kies je Outside Room. 2. Sleep (Jump to start position) naar de action venster. GM vraagt nog wie er naar de start positie moet. Maar omdat we met de bal object bezig zijn kan self aan blijven staan. Andere dingen hoeven niet terug naar start positie. 3. We kiezen hier voor start positie omdat we het spel niet opnieuw willen starten waardoor echt alles terug naar begin positie gaat. Ok dit hebben we ook gehad. Nu nog het bewegen van de paddles. Dat komt er nu. Klik op OK in de obj_ball. Deze is klaar dus hebben we er niet meer in te werken. Beweeg de paddl We gaan nu werken met de linker paddle. 1. Dubbel klik op obj_paddle_left. En druk op Add Event. En druk op de knop keyboard. Van de sub menu selecteer je <up>. 2. Sleep in de action venster het (jump to position) teken. 3. Een sub venster opent. Omdat we weten dat we de paddle op en neer bewegen zal hij dus nooit in x richten bewegen. Dus alleen in y richting. Omdat we naar boven gaan moeten we dus een negatieve bewegen aangeven. Bij y geven we dus in -10. Dezelfde snelheid als de bal. Omdat we niet een definitieve verplaatsing doen moeten we GM ook vertellen dat het een verplaatsing is vanaf waar de paddle nu staat -10 pixels verplaats. Door Relative aan te vinken zeggen we dat. En klik op ok.

11 4. Dit doen we nu ook met de paddle omlaag. LET OP. Dit is een positieve verplaatsing. Voorkom dat paddle van scherm af gaat: 1. Voor de paddle doen we weer een event aanmaken. Klik op Add Event en selecteer collision. De collision die de beweging van de paddle kan veroorzaken is alleen de lijn. Dus kies obj_line. 2. Als de paddle dus de lijn raakt mag de paddle ook niet meer bewegen ook al drukken we nog steeds op de toets. In action maken we een Move fixed beweging actief. En in de sub venster zetten we speed op 0. En de beweging in het midden. LET OP als je deze knop niet aan zet word de actie als onwaar gezien. En GM is zo ontworpen dat wat niet waar is wordt iet uitgevoerd. En dan gaat de paddle als nog van het scherm af. 3. Durk op ok. En ook in het volgende venster op OK. Totdat alles gesloten is. Save weer alles en probeer het spel weer te spelen. De bal als je geluk heb met het plaatsen van de rechter paddle zal afkaatsen van de lijn op de paddle terug nar de andere kant. De linker paddle kan je met de toetsen op en neer bewegen. Zorg dat de rechter paddle de bal volgt: Nu beweeg de linker paddle leuk. Maar de rechter moet ook wat doen. Ik ga er van uit dat je tegen de computer speel. Dus besturen we de rechter paddle met de computer. 1. Dubbel klik op obj_paddle_right. Sub scherm open en kies Add Event. Klik daarna op de Step. 2. Omdat we niet op events kunnen reageren moeten we het zelf doen. Daarom gebruiken we nu een stuk code:

12 Aan de rechter kant is de tab control. Selecteer deze. Daarna onder code is de execute code icon. Sleep deze naar de action venster. 3. Een script editor opent nu. Voer in: /// Computer move paddle { move_towards_point(obj_paddle_right.x,obj_ball.y,5); } move_towards_point(x,y,sp) Is een GM opdracht. Uitgelegd: De paddle verplaatsen naar de opgegeven positie. Met de snelheid sp. In ons geval 5. Aangezien x niet gebruikt wordt houden we de obj_paddle_right als x positie aan. Maar kijken we wel naar de bal. Als obj_ball.y hoger of lager is dan positie paddle wordt de opdracht uitgevoerd. Omdat we niet willen dat de computer altijd win geven we de computer een iets trager beweging snelheid dan de bal. Maar omdat de bal diagonaal loopt is het verschil dus ook heel klein. Maar groot genoeg om de computer niet altijd te laten winnen. In ons geval hier wordt er gekeken naar de bovenkant van de paddle. Omdat we tijdens het maken van de paddle geen center aangegeven hebben. We kunnen dit oplossen door een andere code in te voeren: { move_towards_point(obj_paddle_right.x,obj_ball.y-(obj_paddle_right.sprite_height/2),5); } Klik op om de opdracht op te slaan en de editor te sluiten.

13 Voorkom dat Paddle rechts uit beeld gaat: Ik zou je een opdracht kunnen geven om te kijken naar de linker paddle hoe je deze stap moet uitvoeren. Maar ik ga toch een beetje met je mee om het goed te krijgen. 1. De obj_paddle_right is nog steeds open. Klik op Add Event. Selecteer Collision en op de sub vraag kies je voor obj_line. Klik op de move tab aan de rechter zijde. En klik daarna op Move Fixed. 2. Klik nu op de middelste beweging en geef 0 in voor speed. 3. Klik op ok. En sluit daarna alles door op OK te klikken of tegebruiken. Debugging: Fouten maken we allemaal. En tijdens het overtypen van de tekst kan er wel eens iets fout gaan. De meeste fouten kunnen we afvangen. We zijn hier de s vergeten te typen. Hierdoor geef de editor al een melding dat op regel 2 een unknown fuction or script gevonden is. Met de naam move_toward_point.

14 Dit krijgen we voor elkaar door script controle aan te zetten. Is gemarkeerd wat beteken dat Script for syntax error aan staat. En op deze manier elke ingevoerde opdracht gelijk gecontroleerd word. Ok save de game weer onder een nieuw nummer en start het spel. Als alles goed is gegaan, zie je links een paddle die met de bal mee beweegt en rechts een paddle die je zelf bestuurd. Dit is op zich heel leuk maar het zou leuker zijn als er ook nog een score bij is. Counting score: We willen zien wie er gaat winnen. Dus zorgen we ervoor dat ieder zijn eigen score heb. 1. Als nog niet open dubbel klik op obj_ball. En daarna op Create. 2. Zorg dat aan de rechterkant de tab control is geselecteerd. En onder variables kies var aan de linker zijde 3. Sleep naar action en vul bij variable: score1. En bij value 0 4. Herhaal stap 2 en 3 n vul in score2 en 0 5. Klik op Add Event. En dan draw daarna draw GUI. 6. Onder Action via control sleep execute code naar action. 7. Neem de volgende code over: ///Display score draw_set_color(c_black); scorestr = string_insert(string(score1), score:,8); draw_text(100,50,scorestr); scorestr = string_insert(string(score2), score:,8); draw_text(500,50,scorestr); Kleine uitleg: Draw_set_color(c_black) vertel je dat de volgende te gebruiken kleur zwart is. Omdat c_black een interne kleur is, welke door GM gebruikt word. Primaire kleuren worden hiermee aangeduid.

15 De variabel scorestr is een locale variabel. Zodra de opdracht klaar is vergeet GM de variabele en wordt weer op 0 dan wel geset. string_insert(string1,string2,positie). Hier vertel je GM dat een stuk tekst string1 wil invoegen in string2. Vanaf de gestelde positie word de tekst geplaatst. Het vervangt geen teksten. In ons geval willen we dus score : plus de score worden samen gevoegd. Een andere methode is: scorestr = "score : " + string(score1) Hier worden twee verschillende gegevens samen gevoegd. Maar heeft als nadeel dat wanneer je iets wil toevoegen er soms ineens geen mogelijkheid is dan alleen maar invoegen op gestelde positie. Hier heeft het geen verschil maar mogelijk in de toekomst zal je het tegen komen waar je het goed nodig kan hebben. 8. Vink deze venster af. 9. Zoek in de event venster de event Outside Room. En van de rechter tab control, Execute code. 10. Voer de volgende code in. /// ball leave the room If (obj_ball.x<0) { Score2++; } Else { Score1++; } Even extra: ik ben vergeten de uit leg op /// drie streepjes. GM studio heeft in de editor een herkenning zodra deze drie strepen worden gezien in de eerste regel dan wordt de tekst in de action venter over genomen. Dus weet je gelijk wat dit event doet. We kijken hier dus met de if(als) of de x variabele kleiner is dan de linker zijde van het scherm. Zolang objecten bewegen over het scherm en ook daarbuiten. Onthoud GM de positie ook al is deze dus ver buiten het scherm. Dus als de bal links van het scherm verdwijnt krijg de computer een punt. Dat is hier score2. Verlaat de bal het scherm aan de andere zijn krijg de speler een punt.

16 We zijn aan het einde van onze tutorial gekomen. Het spel is klaar. Hoewel niet helemaal klaar maar wel werkbaar en speelbaar. Uitdagingen: Je leest het goed. Ik daag je uit om je kennis te vergroten. Er is niet alles behandeld maar genoeg om het spel zo leuk te maken dat er iets meer gedaan kan worden. - Zorg dat en teksten bij komen zoals speler en computer. - Stel een max aan de score. Als een speler de score heeft gehaald het spel helemaal opnieuw starten met alles weer op 0. - Doe de besturing van de paddles omdraaien. Rechts de speler en links de computer. - Bekijk zelf wat er beter kan of leuker. Reference Overmars, M Game maker tutorial your first game. YoYo Games. Ltd. Vertaald en aangepast naar GameMaker Studio 1.4 door: B.J.Fernhout. Holland. N.B. Het gebruik van dit document is geheel voor eigen risico en mag uitsluitend als studie materiaal gebruikt worden. Wilt u toch commercieel gaan met gebruik van enkele delen van deze tutorial is het verzoek om dit duidelijk in uw programma te vermelden.