Maak je eigen Apps. Deel 3 (versie 1.0 NL ) door Serge de Beer

Transcriptie

1 Maak je eigen Apps Deel 3 (versie 1.0 NL ) door Serge de Beer Bewegende Actors Een statische App kan heel interessant zijn, maar meestal wordt het pas echt interessant, als er ook beweging is te zien. De meeste games bevatten bewegende objecten, waarmee de speler iets moet doen. Neem bijvoorbeeld het spel Angry Birds, waarbij het de bedoeling is om boze vogels af te vuren op een groep tegenstanders (varkentjes), die zich verschansen in bouwwerken. Vrijwel alle onderdelen van dit spel zijn bewegende objecten, die ook nog eens op elkaar reageren. Een dergelijk spel zul je nu waarschijnlijk nog niet bouwen, maar de basis voor het laten bewegen van objecten ga je in dit deel van de cursus wel leren. In dit deel worden de volgende LearningPoints behandeld: Een Actor laten bewegen naar een bepaalde plaats Een Actor aansturen Een Actor laten accelereren Een Actor bewegen met het toetsenbord Een "muur" maken Een Actor laten reageren met een andere Actor Meer laten gebeuren bij Collusion Een Scene opnieuw starten Serge de Beer 1 van 21 apps@learningtour.nl

2 LearningPoint Een Actor laten bewegen We gaan eerst eens kijken naar een eenvoudige beweging. Bij de komende instructies zal ik steeds minder van de basishandelingen benoemen. Gebruik eventueel de eerdere delen als naslagwerk. 1. Maak een nieuw project aan met de volgende eigenschappen: - ipad landscape modes - een witte achtergrond - een (gekleurde) Actor, ergens linksboven in de Scene 2. Dubbelklik in de Scene op de 'Actor' (verwijder indien nodig "het slot"). 3. Klik op de knop 'Create Rule'. 4. Zet de eigenschappen op 'touch' en 'released'. Dat betekent dat de Behavior pas wordt uitgevoerd, als de Actor weer wordt losgelaten. 5. Voeg de Behavior 'Move to' toe aan de Rule Serge de Beer 2 van 21 apps@learningtour.nl

3 6. Zet de positie van de X-as (horizontaal) op 30 en de positie van de Y-as (vertikaal) ook op 30. GameSalad begint linksonder in de Scene met 0 voor de X-as en 0 voor de Y-as. Test nu of de App werkt. Als je tikt op de Actor verplaatst deze zich naar de opgegeven positie. Positie voor de tik: Positie na de tik: De eerste beweging is gemaakt! Serge de Beer 3 van 21 apps@learningtour.nl

4 LearningPoint De beweging aansturen met een andere Actor In het vorige LearningPoint werd de beweging in gang gezet door op de Actor zelf te tikken. Nu ga je de Actor besturen met een andere Actor. Een knop maken 1. Plaats een nieuwe 'Actor' met de naam "Button" in de Scene. 2. Maak een nieuw 'Attribute' (zie eventueel Deel 2) aan met de naam "Trigger _Move", van het type "Integer". 3. Voeg een 'Rule' toe aan de Actor 'Button' en verander de voorwaarden in 'touch' en 'pressed'. 4. Voeg de Behavior 'Change Attribute' toe Serge de Beer 4 van 21 apps@learningtour.nl

5 5. Voeg als te veranderen Attribute 'game.triggermove' toe. (zie eventueel deel 2). 6. Vul als waarde het getal "1" in. Je hebt nu de eerste stap gedaan. De aansturende knop is gemaakt. Je moet alleen nu nog de bewegende Actor vertellen, dat hij moet gaan bewegen als er op deze knop wordt gedrukt. De Actor laten bewegen 1. Open de eerste Actor, die je hebt gemaakt in dit project. 2. Verander in de Rule 'Actor receives event' in 'Attribute' Serge de Beer 5 van 21 apps@learningtour.nl

6 3. Voeg 'game.trigger_move' toe als te controleren Attribute. 4. Geef als waarde het getal "1" op. Als je nu een Preview doet van de App zul je zien, dat de Actor in beweging komt als je op de knop drukt. Als je alles goed hebt gedaan, krijg je het bovenste resultaat na het klikken op de blauwe knop Serge de Beer 6 van 21 apps@learningtour.nl

7 LearningPoint Een Actor laten Accelereren Je ziet dat de beweging, die de rode Actor in het vorige LearningPoint maakt, direct op snelheid is. Het is ook mogelijk deze snelheid te laten opbouwen, zodat de beweging meer vloeiend is. We gaan kijken hoe je dat kunt doen. Let op! Bewaar de eerste Scene. Dat is altijd handig om nog eens terug te kunnen kijken. Voorbereiding van de Scene 1. Maak een nieuwe Scene met de volgende eigenschappen: - Een witte achtergrond - Een Actor met een groene kleur, links in het midden 2. Dubbelklik op de 'groene Actor' (ik ga er vanuit, dat je het "slot" nu steeds zelf opent). 3. Voeg een nieuwe 'Rule' toe. 4. Verander de voorwaarden in 'Touched' en 'Released' Serge de Beer 7 van 21 apps@learningtour.nl

8 5. Voeg aan deze Rule de Behavior 'Accelerate' toe. Als je in Preview klikt en op de Actor klikt, moet deze rechts uit beeld verdwijnen met een steeds groter wordende snelheid. Tip - Een andere Scene kiezen in Preview De App start altijd in de Initial Scene. Wil je naar een andere Scene, dubbelklik dan in de balk onder in het Preview-scherm op de gewenste Scene Serge de Beer 8 van 21 apps@learningtour.nl

9 De richting veranderen Standaard is de richting van de acceleratie nul. Dat wil zeggen: naar rechts. Je kunt deze richting ook bepalen. 1. Dubbelklik op de 'groene Actor'. 2. Verander de waarde "0" bij 'Direction' in "320". Als je de App weer bekijkt in Preview zie je, dat de Actor in een andere richting gaat bewegen. Je kunt alle graden toepassen. De waarde 45 geeft bijvoorbeeld een beweging naar rechtsboven. Soms zul je wat moeten experimenteren om de juiste hoek te bepalen Serge de Beer 9 van 21 apps@learningtour.nl

10 Accelereren naar een bepaalde plek en weer terug Je kunt een acceleratie ook heen en weer laten gaan tussen de basispositie van de Actor en een opgegeven plek. Dit zou je kunnen gebruiken bij een game, waarbij de speler door een deur moet lopen, die bewaakt wordt door een eng monster. 1. Dubbelklik op de 'groene Actor'. 2. Klik op de kleine knop 'On' de Behavior 'Accelerate' (zodat deze op 'Off' komt te staan). Hiermee hoef je een Behavior niet direct te verwijderen, maar schakel je deze (tijdelijk) uit. 3. Sleep de Behavior 'Accelerate Toward' in de Rule. 4. Verander de 'Position' in "500" en "380". Bekijk wat er gebeurt in het Preview-scherm. Als het goed is, pingpongt de Actor ongeveer over een horizontale lijn. Mocht dat niet het geval zijn, bijvoorbeeld omdat de Actor rechts uit beeld gaat, verander dan de waarden bij 'Position' voor een beter resultaat Serge de Beer 10 van 21 apps@learningtour.nl

11 LearningPoint Een Actor bewegen met het toetsenbord Apps zijn er niet alleen voor de iphone of de ipad. Je kunt ze ook goed gebruiken op de Mac of op Internet. In dit LearningPoint laat ik je zien hoe de Actor bewogen kan worden met behulp van het toetsenbord. 1. Maak in de tweede Scene een nieuwe 'Actor' met een paarse kleur. 2. Plaats deze Actor ongeveer in het midden van de Scene. 3. Dubbelklik op de 'paarse Actor'. 4. Voeg een nieuwe 'Rule' toe. 5. Verander in de Rule 'mouse button' naar 'Key'. 6. Klik op de knop 'Keybord' Serge de Beer 11 van 21 apps@learningtour.nl

12 7. Klik op de knop 'right' van dit virtuele keyboard. 8. Voeg aan de Rule de Behavior 'Move' toe. op Test nu of het werkt. Als het goed is, beweegt de paarse Actor naar rechts, als je de pijltjestoets naar rechts op het toetsenbord drukt. Alle richtingen Het is natuurlijk een beetje jammer, dat je de Actor nu alleen rechts uit beeld kunt laten gaan. We gaan dit aanpassen naar alle vier de richtingen. 1. Dubbelklik op de 'paarse Actor'. 2. Voeg een nieuwe 'Rule' toe. 3. Verander in de Rule 'mouse button' naar 'Key'. 4. Klik op 'Keybord' en klik op de knop 'Left'. 5. Plaats de Behavior 'Move' in de Rule. 6. Verander de waarde van 'Direction' in "180". Als je dit goed hebt gedaan, krijg je het resultaat als in de onderstaande schermafbeelding Serge de Beer 12 van 21 apps@learningtour.nl

13 Probeer nu deze Rules in Preview. De Actor zou naar links en naar rechts moeten kunnen bewegen. Oefening - naar boven en naar beneden Maak nu zelf de Rules voor de beweging naar boven en naar beneden. Twee kleine aanwijzingen: je kunt een Rule (met inhoud) kopiëren en plakken. de beweging naar boven is 90 graden, naar beneden 270 graden Serge de Beer 13 van 21 apps@learningtour.nl

14 LearningPoint Een "muur" maken Bij een spel verdwijnt het object, dat je bestuurt (in ons geval de paarse Actor), bijna nooit uit beeld. Om dit te bereiken, kunnen we het speelveld begrenzen met een muur. 1. Maak een nieuwe 'Actor' in de tweede Scene met een grijze kleur. 2. Geef deze 'Actor' de naam "Wall". 3. Dubbelklik op de 'Actor' Wall. 4. Zoek onder 'Attributes', 'Physics' de eigenschap 'Movable' en zet deze uit. Hiermee voorkom je, dat de "wall" wordt weggeduwd door de Actor Serge de Beer 14 van 21 apps@learningtour.nl

15 5. Plaats de Actor 'Wall' rondom de Scene. Je moet deze Actor dus vier keer in de Scene slepen. Als je deze Scene test, zul je merken dat de Paarse Actor gewoon door de muur heen weet te breken. Dat gaan we nu veranderen. De Actor laten reageren op de muur We gaan de Actor vertellen dat deze moet reageren, wanneer hij in aanraking komt met de muur. 1. Dubbelklik in de Scene op de 'paarse Actor'. 2. Plaats de behavior 'Collide' in de Rule Serge de Beer 15 van 21 apps@learningtour.nl

16 3. Verander de Actor, waarmee gereageerd moet worden in 'Wall'. Probeer nu wat er gebeurt, als je de paarse Actor tegen de muur laat botsen. Als het goed is, kom je niet van het speelveld af en kun je vrij met de pijltjestoetsen alle kanten op sturen. LearningPoint Een Actor laten reageren met een andere Actor Uiteraard kun je Actors laten reageren met elkaar. Tenslotte is de "muur" ook maar gewoon een Actor. Maar we zullen eens kijken hoe de paarse Actor kan botsen met de groene Actor, die we al op het scherm hadden staan. De groene Actor instellen 1. Dubbelklik in de Scene op de 'groene Actor'. 2. Zet onder 'Attributes', 'Physics' een vinkje bij 'Fixed Rotation'. Hiermee voorkom je, dat de Actor rondjes gaat draaien. Als je het effect wilt zien, kun je het straks ook even proberen zonder een vinkje op deze plek. 3. Voeg aan de Actor de Behavior 'Collide' toe Serge de Beer 16 van 21 apps@learningtour.nl

17 4. Verander het type in 'Wall'. Dit doe je om te voorkomen, dat de groene Actor na de eerste aanraking met de paarse Actor het speelveld verlaat. Als je nu een test doet, zul je merken dat de paarse en de groene Actor zich nog niks van elkaar aantrekken. Dat gaan we veranderen. De paarse Actor instellen Naast dat de paarse Actor reageert met de Wall-Actor, willen we dat deze ook gaat reageren met de groene Actor. 1. Dubbelklik in de Scene op de 'paarse Actor'. 2. Zet onder 'Attributes', 'Physics' een vinkje bij 'Fixed Rotation' Serge de Beer 17 van 21 apps@learningtour.nl

18 Ook deze Actor willen we namelijk niet laten draaien. 3. Voeg nog een extra Behavior 'Collide' toe aan de Actor. 4. Verander van deze tweede Collide Behavior de instelling in de 'groene Actor', in mijn voorbeeld 'Actor 2'. Test nu het spel. Je mag zelf het doel bepalen: of de groene Actor ontwijken of juist proberen te raken. Vergeet niet de groene Actor even "aan te zetten" door er op te klikken Serge de Beer 18 van 21 apps@learningtour.nl

19 LearningPoint Meer laten gebeuren bij Collusion We kunnen meer doen dan Actors alleen laten botsen op andere Actors, bijvoorbeeld een geluid laten maken. 1. Voeg een willekeurig (liefst kort) geluid toe aan de 'Library', zoals je in Deel 2 hebt gedaan. 2. Dubbelklik in de Scene op de 'paarse Actor'. 3. Voeg een nieuwe 'Rule' toe. 4. Verander in de Rule 'mouse button' in 'overlaps or collides'. 5. Verander 'Actor 1' in de 'groene Actor'. In mijn voorbeeld 'Actor 2'. 6. Voeg de behavior 'Play sound' toe aan de nieuwe Rule. 7. Kies het gewenste geluidsbestand bij 'Sound'. Test of je het geluid hoort, als de Actors elkaar raken Serge de Beer 19 van 21 apps@learningtour.nl

20 LearningPoint Een Scene opnieuw starten Wanneer je een Scene weer wilt zien, zoals deze wordt gestart, kun je een reset-functie inbouwen. Dat doe je zo: 1. Maak in de tweede Scene een nieuwe 'Actor' aan met de naam "Reset". 2. Geef de Actor een gele kleur. 3. Geef deze Actor ook het opschrift "Reset" met behulp van de Behavior 'Display text'. 4. Voeg een nieuwe 'Rule' toe. 5. Verander 'mouse button' in 'touch'. 6. Voeg aan de Rule de Behavior 'Reset Scene' toe. 7. Plaats de Actor 'Reset' in de Scene. Klik je op de knop 'Reset', dan herstelt de Scene zich weer in oude staat Serge de Beer 20 van 21 apps@learningtour.nl

21 Opdracht bij deel 3 Je hebt nu een begin gemaakt met het ontwikkelen van een spel. Je ziet, dat het niet zo ingewikkeld is als het misschien lijkt. Als afsluitende oefening voor Deel 3 moet je een App bouwen, die gebruik maakt van bewegende Actors. Omschrijving van de App: Bedenk een kleine App, waarbij een aantal Actors om elkaar heen bewegen. Het mag een spel zijn, maar dat hoeft niet. Dit is het Programma van Eisen: 1. Er zijn minimaal twee bewegende Actors. 2. De Actors bevatten een afbeelding (als geleerd in Deel 1). 3. Bij minimaal 1 soort Collide is een geluid te horen. Je kunt deze opdracht (alleen het projectbestand) insturen per naar: apps@learningtour.nl met als onderwerp: Cursus Maak je eigen Apps, Opdracht 3. Je krijgt dan een beoordeling van de opdracht. Copyright 2011, LearningTour, Serge de Beer Alle rechten voorbehouden. Niets uit deze uitgave mag worden verveelvoudigd, opgeslagen in een geautomatiseerd gegevensbestand of openbaar gemaakt, in enige vorm of op enige wijze, hetzij elektronisch, mechanisch, door fotokopieën, opnamen of op enige andere manier, zonder voorafgaande schriftelijke toestemming van de uitgever Serge de Beer 21 van 21 apps@learningtour.nl