Pyonkee App Inleiding
Pyonkee App Inleiding Inhoudsopgave 1 Benodigdheden ........................................................................................................................... 1 2 Doelstellingen ............................................................................................................................. 1 3 Pyonkee app ................................................................................................................................ 1 3.1 Installatie van Pyonkee app .......................................................................................... 1 3.2 Terminologie ........................................................................................................................ 1 3.3 Gebruik van Pyonkee app ............................................................................................... 2 3.4 Jouw eerste Pyonkee app: een ping-pong spel ...................................................... 4
1 Benodigdheden • •
iPad Pyonkee app
2 Doelstellingen De leerlingen • • •
leren omgaan met een app op een iPad de logische stappen in een script leren onderscheiden op een visuele manier een app leren programmeren op een iPäd
3 Pyonkee app 3.1 Installatie van Pyonkee app • • •
Ga op jouw iPad naar de App Store. Type in de zoekfunctie rechtsboven (bij het vergrootglas) ‘Pyonkee’ en Druk op ‘Zoek’ Download en installeer deze gratis app
3.2 Terminologie • •
Sprite: een voorwerp of afbeelding in jouw app; je kunt zelf sprites aanmaken of een bestaande sprite kiezen Script: het programma dat je zelf moet maken om een sprite te laten bewegen of andere zaken te laten doen
Don Bosco Technisch Instituut Helchteren
1
Pyonkee App Inleiding
3.3 Gebruik van Pyonkee app
o
Bovenaan in het menu vind je de volgende icoontjes: § De wereldbol: hiermee kun je de taal kiezen § De diskette: hiermee kun je jouw app opslaan § De briefomslag: hiermee kun je jouw app mailen naar iemand anders § Bestand: allerlei mogelijkheden om een nieuwe app te creëren of een oude te openen … § Bewerken: allerlei mogelijkheden, zoals de snelheid van de app aanpassen (‘stap voor stap opties’) … § Hulp: hier vind je ondermeer een video die je enkele mogelijkheden leert om een app te maken § Vier icoontjes: kopie maken, iets verwijderen, een sprite (beeldje) vergroten of verkleinen Daarop worden jouw projecten opgeslagen § Drie schermpjes aan de uiterste rechterkant: • Om gemakkelijk een script te schrijven (links) • Om de app te tekenen (midden) • Om de app uit te voeren (rechts)
Don Bosco Technisch Instituut Helchteren
2
Pyonkee App Inleiding Rechts midden vind je het tekenscherm van de app Rechts onderaan vind je het spritescherm met de sprites die je gemaakt hebt o In het midden vind je het scriptscherm waar je jouw script kunt samenstellen met ‘puzzelstukjes’ o Links midden vind je allerlei script puzzelstukjes waarmee je jouw sprites bewegingen en andere zaken kunt laten doen o Links boven heb je verschillende verzamelingen van script puzzelstukjes om de sprite te laten bewegen, besturen, uiterlijk aanpassen … o Onderaan in het midden van het iPad scherm heb je nog vier icoontjes: § Links de vierkantige command toets § Daarnaast het toetsenbord: druk je hierop, dan verschijnt het toetsenbord; druk uiterst rechts onderaan het toetsenbord (een icoontje met een toestenbord en een pijl naar onder) om het toetsenbord weer te laten verdwijnen § Daarnaast een potlood: druk hierop om een tekstvakje te laten verschijnen waarin je tekst kunt schrijven (laat het toetsenbord terug verdwijnen zoals hierboven beschreven is). § Rechts het je een dikke pijl die naar boven wijst: die gaan we niet gebruiken Bovenaan het tekenscherm van de app vind je een groene startvlag en een rode stopknop. De groene startvlag vind je ook links midden aan de zijkant van het iPad scherm. De rode stopknop vind je ook rechts midden aan de zijkant van het iPad scherm. o o
•
Don Bosco Technisch Instituut Helchteren
3
Pyonkee App Inleiding
3.4 Jouw eerste Pyonkee app: een ping-pong spel Volg onderstaande stappen om jouw eerste app te ontwerpen. •
Druk bovenaan rechts op het derde schermpje van rechts om het middenscherm te vergroten [1]
2
1
3
4
• •
•
In het spritescherm rechts onderaan heb je bij het opstarten een sprite dat op een aapje lijkt. Druk bovenaan in het menu op het schaartje, waarmee je het aapje kan ‘wegknippen’. Wanneer het schaartje van kleur verandert (en dus geselecteerd is) [2]. Druk je een beetje langer op het aapje onderaan in het spritescherm [3]. Nu verdwijnt het aapje. Druk onderaan in het spritescherm op het witte beeldje van het scherm [4].
Don Bosco Technisch Instituut Helchteren
4
Pyonkee App Inleiding •
In het middenscherm krijg je nu een tab met de vermelding ‘Achtergronden’ : zie [5] in onderstaande figuur. Druk hierop en je krijgt onderstaande figuur te zien.
5
6
•
Druk nu in het middenscherm iets langer op de knop ‘Bewerken’ [6]. Je krijgt nu onderstaand scherm te zien waarin je de achtergrondkleur van het scherm naar groen gaat wijzigen.
Don Bosco Technisch Instituut Helchteren
5
Pyonkee App Inleiding
8
9
7
• • • •
Druk in het grote vierkant met alle kleuren [7] op de heldergroene kleur. Druk vervolgens daarboven op het afbeeldingetje van de gietende emmer [8] totdat deze een lichtblauwe kleur krijgt (en geselecteerd is). Druk vervolgens in het midden [9] van het rechtse venster zodat dit groen kleurt. Druk dan op de knop OK [10] onder het groene scherm. Vervolgens kom je terug in onderstaand scherm.
10
Don Bosco Technisch Instituut Helchteren
6
Pyonkee App Inleiding •
Vervolgens kom je terug in onderstaand scherm.
11
•
Druk op het icoontje [11] om een nieuwe sprite te maken. Druk op het icoontje met een vierkant in. Wanneer het icoontje blauw is, kun je een rechthoek teken links in het midden van het scherm. Dit wordt jouw palet om te ping-pongen. Zorg dat het palet breed genoeg is, maar niet te groot, anders wordt het spel te gemakkelijk ;-). Hieronder vind je een voorbeeld.
Don Bosco Technisch Instituut Helchteren
7
Pyonkee App Inleiding •
Druk dan op OK om opnieuw naar het ontwerpvenster te gaan. Het palet staat nu in het midden van het app scherm en heeft de naam ‘sprite1’ gekregen. Druk op het icoontje [12] om het app scherm te vergroten. Druk wat langer op het palet tot het grijs wordt in plaats van zwart en verplaats het dan naar links midden in het app scherm.
12
•
•
Druk nu op het icoontje naast icoon [12] om het middenste venster te vergroten. Dit is het script venster waar we nu het programma van de app gaan ontwerpen. Druk links boven op de knop ‘Besturen’. Sleep nu het bovenste puzzelstuk ‘Wanneer .. wordt aangeklikt’ naar het middenste script venster.
Don Bosco Technisch Instituut Helchteren
8
Pyonkee App Inleiding •
•
• •
•
•
Druk nu op de knop ‘Bewegen’ en sleep het puzzelstuk ‘ga naar x: … y: …’ onder het vorige puzzelstuk. Het is belangrijk dat je ziet dat er een witte streep komt onder het vorige puzzelstuk als je het nieuwe er onderaan tegen plakt. Dan kun je het puzzelstuk loslaten en het zet zich op de plaats van de witte streep. Druk terug op de knop ‘Besturen’ en sleep het puzzelstukje ‘wanneer spatiebalk wordt ingedrukt’ enkele centimeters onder de vorige puzzelstukjes. Druk op ‘spatiebalk’ in het puzzelstukje en druk nu op ‘pijltje omhoog’. Het puzzelstukje is nu ‘wanneer pijltje omhoog wordt ingedrukt’ geworden. Druk terug op de knop ‘Bewegen’. Sleep het puzzelstukje ‘verander y met 10’ en plak het onder ‘wanneer pijltje omhoog wordt ingedrukt’ (let weer op de witte streep wanneer je het puzzelstukje plakt). Druk nu op het getal ‘10’. Er verschijnt een toetsenbord. Druk links onder op ‘.?123’ zodat je het cijfer toetsenbord krijgt. Type nu ‘4’ zodat de ‘10’ door de ‘4’ overschreven wordt.
Druk op de knop ‘Besturen” en sleep nu opnieuw hetzelfde puzzelstukje ‘wanneer spatiebalk wordt ingedrukt’ ongeveer een centimeter onder de vorige groep puzzelstukjes en vervang ‘spatiebalk’ door ‘pijltje omlaag’.
Don Bosco Technisch Instituut Helchteren
9
Pyonkee App Inleiding •
Druk op de knop ‘Bewegen’ en plak daar hetzelfde puzzelstukje ‘verander y met 10’ onder.
•
Om te vermijden dat ons palet bijna helemaal van het scherm verdwijnt, laten we het stoppen als het de rand raakt. Voeg daarom bij de laatste twee puzzelstukjes ‘keer om als aan rand’. Zoals weergegeven in de figuur hieronder.
13
Don Bosco Technisch Instituut Helchteren
10
Pyonkee App Inleiding • •
•
•
•
We testen even de bewegingen van ons palet uit door rechts boven op het icoontje te klikken dat ons in het app venster brengt. In het midden aan de rechterrand en linkerrand kun je op het pijltje omhoog en pijltje omlaag drukken. Met de groene vlag start je het programma en met het rode bolletje stop je het programma. Met de gele terugkeerpijl links boven keer je terug naar de ontwerpschermen. We gaan even het programma opslaan. Druk bovenaan het scherm op ‘Bestand’ en druk dan in het menu op ‘Opslaan’. Sla het programma op met jouw naam. Druk nu op het icoon om een nieuwe sprite te maken [13]. Selecteer eerst de rode kleur. Druk op het icoontje met een cirkel in. Wanneer het icoontje blauw is, kun je een cirkel teken in het midden van het scherm. Dit wordt jouw balletje om te ping-pongen. Zorg dat het balletje breed niet te groot is ten opzichte van jouw palet (anders krijg je rare bewegingen). Ben je niet tevreden, druk dan op de knop ‘Ongedaan maken’ om terug opnieuw te beginnen.
Druk op OK en je ziet dat het balletje als ‘sprite2’ is opgeslaan.
Don Bosco Technisch Instituut Helchteren
11
Pyonkee App Inleiding •
• •
•
•
•
•
We gaan nu het balletje programmeren om het te laten bewegen. Zorg dat het icoon van het balletje (of sprite2) rechtsonder in het scherm geselecteerd is. Maak opnieuw het middenste script venster groter, zie [1]. Druk links boven op de knop ‘Besturen’. Sleep nu het bovenste puzzelstuk ‘Wanneer .. wordt aangeklikt’ naar het middenste script venster. Druk nu op de knop ‘Bewegen’ en sleep het puzzelstuk ‘ga naar x: 0 y: 0’ onder het vorige puzzelstuk. Let op de witte streep. Sleep nu het puzzelstuk ‘richt naar 90 graden onder het vorige puzzelstuk ‘ga naar x: 0 y: 0’ en plak het daar tegen. Druk nu op het getal ‘90’. Er verschijnt een toetsenbord. Druk links onder op ‘.?123’ zodat je het cijfer toetsenbord krijgt. Type nu ‘45’ zodat de ‘90’ door de ‘45’ overschreven wordt. 90 graden is recht naar omhoog en 45 graden is schuin naar rechts boven. Dat laatste willen we. Druk terug op de knop ‘Besturen’ en plak het puzzelstukje ‘herhaal’ onder de vorige puzzelstukjes. We gaan er nu voor zorgen dat het balletje steeds in beweging blijft. Druk op de knop ‘Bewegen’ en sleep het eerste puzzelstukje ‘neem 10 stappen’ naar het vakje van ‘herhaal’. Zorg dat de witte streep vlak onder ‘herhaal’ maar binnen in het vakje staat. Laat daar het puzzelstukje los. Druk op ‘10’ en verander het in ‘4’. Tip: wil je dat het balletje sneller beweegt, vul dan een getal in dat groter is dan 4. Sleep ook nog het puzzelstukje ‘keer om als aan de rand’ in het vakje van ‘herhaal’, onder ‘neem 4 stappen’. Let er op dat de witte lijn vlak onder ‘neem 4 stappen’ ligt, nog net binnen in het vakje van ‘herhaal’. Laat daar het puzzelstukje los. Hierdoor zal het balletje tegen de wand terugkaatsen.
Don Bosco Technisch Instituut Helchteren
12
Pyonkee App Inleiding •
We testen het even uit. Druk op het icoontje rechts boven om het groot scherm te krijgen en druk op de groene vlag om jouw app te starten. … Je merkt dat het balletje gewoon door jouw palet heen gaat. Dat passen we aan!
•
Druk op de knop ‘Besturen’. Scroll in het linkerscherm naar onder om de onderste puzzelstukjes te zien. Gebruik hiervoor de lichtgrijze scrollbar rechts van de puzzelstukjes. Sleep het puzzelstukje met alleen het woord ‘als’ naar het vakje van ‘herhaal’. Let er op dat de witte lijn vlak onder ‘keer om als aan de rand’ ligt, nog net binnen in het vakje van ‘herhaal’. Laat daar het ‘als’ puzzelstukje los. Achter ‘als’ kunnen we nog iets invullen. Het balletje moet immers weerkaatst worden door jouw pallet met de naam ‘sprite1’. Druk daarvoor op de knop ‘Waarnemen’ (onder de knop ‘Besturen’). Sleep het eerste puzzelstukje ‘raak ik … ? ‘ naar het ‘als’ puzzelstukje en laat het los op het plekje achter ‘als’. Druk nu op het zwarte pijltje achter ‘ik’ en druk in de menu op ‘sprite1’. In het vakje van ‘als’ zetten we nu wat er moet gebeuren indien het balletje het palet raakt. Druk op de knop ‘Bewegen’. Sleep het tweede puzzelstuk ‘draai 15 graden’ (naar rechts) naar het ‘als’ vakje en laat het daarin los. Let erop dat de witte lijn in het ‘als’ vakje ligt. Druk nu op ‘15’ (graden) en vervang het door ‘90’.
•
•
•
• Dan is het nu tijd om jou app uit te proberen !!! Proficiat en veel succes !!!
Don Bosco Technisch Instituut Helchteren
13