Pyonkee App Inleiding

Transcriptie

1 Pynkee App Inleiding Inhudspgave 1 Bendigdheden Delstellingen Pynkee app Installatie van Pynkee app Terminlgie Gebruik van Pynkee app Juw eerste Pynkee app: een ping-png spel Bendigdheden ipad Pynkee app 2 Delstellingen De leerlingen leren mgaan met een app p een ipad de lgische stappen in een script leren nderscheiden p een visuele manier een app leren prgrammeren p een ipäd 3 Pynkee app 3.1 Installatie van Pynkee app Ga p juw ipad naar de App Stre. Type in de zekfunctie rechtsbven (bij het vergrtglas) Pynkee en Druk p Zek Dwnlad en installeer deze gratis app 3.2 Terminlgie Sprite: een vrwerp f afbeelding in juw app; je kunt zelf sprites aanmaken f een bestaande sprite kiezen Script: het prgramma dat je zelf met maken m een sprite te laten bewegen f andere zaken te laten den 1

2 3.3 Gebruik van Pynkee app Bvenaan in het menu vind je de vlgende icntjes: De wereldbl: hiermee kun je de taal kiezen De diskette: hiermee kun je juw app pslaan De briefmslag: hiermee kun je juw app mailen naar iemand anders Bestand: allerlei mgelijkheden m een nieuwe app te creëren f een ude te penen Bewerken: allerlei mgelijkheden, zals de snelheid van de app aanpassen ( stap vr stap pties ) Hulp: hier vind je ndermeer een vide die je enkele mgelijkheden leert m een app te maken Vier icntjes: kpie maken, iets verwijderen, een sprite (beeldje) vergrten f verkleinen Daarp wrden juw prjecten pgeslagen Drie schermpjes aan de uiterste rechterkant: Om gemakkelijk een script te schrijven (links) Om de app te tekenen (midden) Om de app uit te veren (rechts) 2

3 Rechts midden vind je het tekenscherm van de app Rechts nderaan vind je het spritescherm met de sprites die je gemaakt hebt In het midden vind je het scriptscherm waar je juw script kunt samenstellen met puzzelstukjes Links midden vind je allerlei script puzzelstukjes waarmee je juw sprites bewegingen en andere zaken kunt laten den Links bven heb je verschillende verzamelingen van script puzzelstukjes m de sprite te laten bewegen, besturen, uiterlijk aanpassen Onderaan in het midden van het ipad scherm heb je ng vier icntjes: Links de vierkantige cmmand tets Daarnaast het tetsenbrd: druk je hierp, dan verschijnt het tetsenbrd; druk uiterst rechts nderaan het tetsenbrd (een icntje met een testenbrd en een pijl naar nder) m het tetsenbrd weer te laten verdwijnen Daarnaast een ptld: druk hierp m een tekstvakje te laten verschijnen waarin je tekst kunt schrijven (laat het tetsenbrd terug verdwijnen zals hierbven beschreven is). Rechts het je een dikke pijl die naar bven wijst: die gaan we niet gebruiken Bvenaan het tekenscherm van de app vind je een grene startvlag en een rde stpknp. De grene startvlag vind je k links midden aan de zijkant van het ipad scherm. De rde stpknp vind je k rechts midden aan de zijkant van het ipad scherm. 3

4 Pynkee App Inleiding 3.4 Juw eerste Pynkee app: een ping-png spel Vlg nderstaande stappen m juw eerste app te ntwerpen. Druk bvenaan rechts p het derde schermpje van rechts m het middenscherm te vergrten [1] In het spritescherm rechts nderaan heb je bij het pstarten een sprite dat p een aapje lijkt. Druk bvenaan in het menu p het schaartje, waarmee je het aapje kan wegknippen. Wanneer het schaartje van kleur verandert (en dus geselecteerd is) [2]. Druk je een beetje langer p het aapje nderaan in het spritescherm [3]. Nu verdwijnt het aapje. Druk nderaan in het spritescherm p het witte beeldje van het scherm [4]. Dn Bsc Technisch Instituut Helchteren 4

5 Pynkee App Inleiding In het middenscherm krijg je nu een tab met de vermelding Achtergrnden : zie [5] in nderstaande figuur. Druk hierp en je krijgt nderstaande figuur te zien. 5 6 Druk nu in het middenscherm iets langer p de knp Bewerken [6]. Je krijgt nu nderstaand scherm te zien waarin je de achtergrndkleur van het scherm naar gren gaat wijzigen. Dn Bsc Technisch Instituut Helchteren 5

6 8 9 7 Druk in het grte vierkant met alle kleuren [7] p de heldergrene kleur. Druk vervlgens daarbven p het afbeeldingetje van de gietende emmer [8] ttdat deze een lichtblauwe kleur krijgt (en geselecteerd is). Druk vervlgens in het midden [9] van het rechtse venster zdat dit gren kleurt. Druk dan p de knp OK [10] nder het grene scherm. Vervlgens km je terug in nderstaand scherm. 10 6

7 Vervlgens km je terug in nderstaand scherm. 11 Druk p het icntje [11] m een nieuwe sprite te maken. Druk p het icntje met een vierkant in. Wanneer het icntje blauw is, kun je een rechthek teken links in het midden van het scherm. Dit wrdt juw palet m te ping-pngen. Zrg dat het palet breed geneg is, maar niet te grt, anders wrdt het spel te gemakkelijk ;-). Hiernder vind je een vrbeeld. 7

8 Druk dan p OK m pnieuw naar het ntwerpvenster te gaan. Het palet staat nu in het midden van het app scherm en heeft de naam sprite1 gekregen. Druk p het icntje [12] m het app scherm te vergrten. Druk wat langer p het palet tt het grijs wrdt in plaats van zwart en verplaats het dan naar links midden in het app scherm. 12 Druk nu p het icntje naast icn [12] m het middenste venster te vergrten. Dit is het script venster waar we nu het prgramma van de app gaan ntwerpen. Druk links bven p de knp Besturen. Sleep nu het bvenste puzzelstuk Wanneer.. wrdt aangeklikt naar het middenste script venster. 8

9 Druk nu p de knp Bewegen en sleep het puzzelstuk ga naar x: y: nder het vrige puzzelstuk. Het is belangrijk dat je ziet dat er een witte streep kmt nder het vrige puzzelstuk als je het nieuwe er nderaan tegen plakt. Dan kun je het puzzelstuk lslaten en het zet zich p de plaats van de witte streep. Druk terug p de knp Besturen en sleep het puzzelstukje wanneer spatiebalk wrdt ingedrukt enkele centimeters nder de vrige puzzelstukjes. Druk p spatiebalk in het puzzelstukje en druk nu p pijltje mhg. Het puzzelstukje is nu wanneer pijltje mhg wrdt ingedrukt gewrden. Druk terug p de knp Bewegen. Sleep het puzzelstukje verander y met 10 en plak het nder wanneer pijltje mhg wrdt ingedrukt (let weer p de witte streep wanneer je het puzzelstukje plakt). Druk nu p het getal 10. Er verschijnt een tetsenbrd. Druk links nder p.?123 zdat je het cijfer tetsenbrd krijgt. Type nu 4 zdat de 10 dr de 4 verschreven wrdt. Druk p de knp Besturen en sleep nu pnieuw hetzelfde puzzelstukje wanneer spatiebalk wrdt ingedrukt ngeveer een centimeter nder de vrige grep puzzelstukjes en vervang spatiebalk dr pijltje mlaag. 9

10 Druk p de knp Bewegen en plak daar hetzelfde puzzelstukje verander y met 10 nder. Om te vermijden dat ns palet bijna helemaal van het scherm verdwijnt, laten we het stppen als het de rand raakt. Veg daarm bij de laatste twee puzzelstukjes keer m als aan rand. Zals weergegeven in de figuur hiernder

11 We testen even de bewegingen van ns palet uit dr rechts bven p het icntje te klikken dat ns in het app venster brengt. In het midden aan de rechterrand en linkerrand kun je p het pijltje mhg en pijltje mlaag drukken. Met de grene vlag start je het prgramma en met het rde blletje stp je het prgramma. Met de gele terugkeerpijl links bven keer je terug naar de ntwerpschermen. We gaan even het prgramma pslaan. Druk bvenaan het scherm p Bestand en druk dan in het menu p Opslaan. Sla het prgramma p met juw naam. Druk nu p het icn m een nieuwe sprite te maken [13]. Selecteer eerst de rde kleur. Druk p het icntje met een cirkel in. Wanneer het icntje blauw is, kun je een cirkel teken in het midden van het scherm. Dit wrdt juw balletje m te ping-pngen. Zrg dat het balletje breed niet te grt is ten pzichte van juw palet (anders krijg je rare bewegingen). Ben je niet tevreden, druk dan p de knp Ongedaan maken m terug pnieuw te beginnen. Druk p OK en je ziet dat het balletje als sprite2 is pgeslaan. 11

12 We gaan nu het balletje prgrammeren m het te laten bewegen. Zrg dat het icn van het balletje (f sprite2) rechtsnder in het scherm geselecteerd is. Maak pnieuw het middenste script venster grter, zie [1]. Druk links bven p de knp Besturen. Sleep nu het bvenste puzzelstuk Wanneer.. wrdt aangeklikt naar het middenste script venster. Druk nu p de knp Bewegen en sleep het puzzelstuk ga naar x: 0 y: 0 nder het vrige puzzelstuk. Let p de witte streep. Sleep nu het puzzelstuk richt naar 90 graden nder het vrige puzzelstuk ga naar x: 0 y: 0 en plak het daar tegen. Druk nu p het getal 90. Er verschijnt een tetsenbrd. Druk links nder p.?123 zdat je het cijfer tetsenbrd krijgt. Type nu 45 zdat de 90 dr de 45 verschreven wrdt. 90 graden is recht naar mhg en 45 graden is schuin naar rechts bven. Dat laatste willen we. Druk terug p de knp Besturen en plak het puzzelstukje herhaal nder de vrige puzzelstukjes. We gaan er nu vr zrgen dat het balletje steeds in beweging blijft. Druk p de knp Bewegen en sleep het eerste puzzelstukje neem 10 stappen naar het vakje van herhaal. Zrg dat de witte streep vlak nder herhaal maar binnen in het vakje staat. Laat daar het puzzelstukje ls. Druk p 10 en verander het in 4. Tip: wil je dat het balletje sneller beweegt, vul dan een getal in dat grter is dan 4. Sleep k ng het puzzelstukje keer m als aan de rand in het vakje van herhaal, nder neem 4 stappen. Let er p dat de witte lijn vlak nder neem 4 stappen ligt, ng net binnen in het vakje van herhaal. Laat daar het puzzelstukje ls. Hierdr zal het balletje tegen de wand terugkaatsen. 12

13 We testen het even uit. Druk p het icntje rechts bven m het grt scherm te krijgen en druk p de grene vlag m juw app te starten. Je merkt dat het balletje gewn dr juw palet heen gaat. Dat passen we aan! Druk p de knp Besturen. Scrll in het linkerscherm naar nder m de nderste puzzelstukjes te zien. Gebruik hiervr de lichtgrijze scrllbar rechts van de puzzelstukjes. Sleep het puzzelstukje met alleen het wrd als naar het vakje van herhaal. Let er p dat de witte lijn vlak nder keer m als aan de rand ligt, ng net binnen in het vakje van herhaal. Laat daar het als puzzelstukje ls. Achter als kunnen we ng iets invullen. Het balletje met immers weerkaatst wrden dr juw pallet met de naam sprite1. Druk daarvr p de knp Waarnemen (nder de knp Besturen ). Sleep het eerste puzzelstukje raak ik? naar het als puzzelstukje en laat het ls p het plekje achter als. Druk nu p het zwarte pijltje achter ik en druk in de menu p sprite1. In het vakje van als zetten we nu wat er met gebeuren indien het balletje het palet raakt. Druk p de knp Bewegen. Sleep het tweede puzzelstuk draai 15 graden (naar rechts) naar het als vakje en laat het daarin ls. Let erp dat de witte lijn in het als vakje ligt. Druk nu p 15 (graden) en vervang het dr 90. Dan is het nu tijd m ju app uit te prberen!!! Prficiat en veel succes!!! 13