BYOB: Pong gedetailleerd

BYOB: Pong gedetailleerd
Wat is BYOB?
BYOB is een variant van Scratch. BYOB is ontwikkeld aan de Berkeley universiteit en is helaas alleen
in het Engels beschikbaar. Echter, de blokken die we gaan gebruiken, hebben we allemaal al
eerder gebruikt en hebben dus enkel een andere naam en misschien een iets ander kleurtje. Als je
goed met Scratch gewerkt hebt, zal je snel wegwijs zijn in BYOB. Mocht je toch ergens niet
uitkomen, vraag het ons gerust!
Tip!
BYOB is enkel als installatie te downloaden:
http://byob.berkeley.edu/BYOB%203.1.1%20Setup.exe
De opvolger van BYOB (Snap!) heeft wel een webversie, maar deze ondersteunt
niet de functionaliteiten die wij momenteel gaan gebruiken. Gebruik de
webversie dus niet!
Weer Pong?
In deze opdracht gaan jullie inderdaad weer een Pong spelletje maken. Wederom wordt het een
multiplayer game, maar deze keer zal het dankzij BYOB over het netwerk gespeeld kunnen
worden. Jullie werken weer in tweetallen en ieder kan dus op zijn eigen laptop uiteindelijk het
spelletje tegen z’n buurman spelen!
Aangezien BYOB een ander programma is en we een multiplayer gaan maken, moet je wel
opnieuw beginnen met het bouwen van het spelletje. Het wordt vanzelf duidelijk wanneer je
dingen moet programmeren zoals in Scratch, dus volg de opdracht gewoon stap voor stap.
Pong via het netwerk
Het programmeren van Pong via het netwerk gaan we in verschillende stappen doen:
1.
Zorg dat de twee computers met elkaar verbonden zijn.
2. Laat het balletje synchroon bewegen over allebei de schermen.
3. Laat de batjes/balkjes synchroon bewegen over allebei de schermen.
4. Regel een scoresysteem.
Verbinden van computers
Voordat jullie jullie laptops met elkaar kunnen verbinden, moeten jullie eerst zorgen dat BYOB
geïnstalleerd is en jullie allebei BYOB opstarten.
1.
Om met BYOB een verbinding te maken, moet één van de computers ‘host’ spelen. Dit
houdt in dat deze computer data verstuurt naar de overige computers, welke ‘clients’
worden genoemd. Beslis welke van de laptops de host computer wordt.
2. Op de host computer kies je in het menu Share > Host Mesh:
3. Als je deze optie aanklikt, krijg je een scherm met een ‘IP adres’. Dit adres kun je op de
andere laptop invullen wanneer je in het menu Share > Join Mesh kiest:
4. Als je het IP adres goed invult, is de client verbonden met de host. Wanneer dit niet het
geval is, zal er een foutmelding op het scherm komen na een aantal seconden.
Probeer als host het gele mannetje (gobo) te delen met de verbonden client. Dit
kun je doen door rechts te klikken op het mannetje en vervolgens te kiezen voor
share this sprite.
Tip!
Dit weten jullie als het goed is nog van vorige week!
Balletje synchroon bewegen
Als de verbinding goed is, kunnen we een synchroon bewegend balletje gaan programmeren.
1.
Om te beginnen verwijder je alle sprites die je nu hebt staan in je scene. Maak vervolgens
enkel een sprite aan van een balletje op de host computer. Op de client computer hoeft er
nog niets te gebeuren.
Geef je sprites duidelijke namen. Dit kan boven in beeld, boven waar je de script
blokken sleept:
Tip!
Als je je sprites duidelijke namen geeft, is het straks ook duidelijk van wie welk
batje precies is.
2. Ga daarna op de host computer naar het menu en klik op Share > Share this sprite:
3. Als je dit goed doet en de twee computers goed met elkaar verbonden zijn, verschijnt het
balletje ook op de computer van de client computer.
4. Om het balletje te laten bewegen, maken we een variabele aan voor de horizontale
snelheid. Noem deze variabele horspeed.
5. Zorg ervoor dat de volgende punten uitgevoerd worden op de host computer wanneer er
op het vlaggetje geklikt wordt:
a. De positie van de sprite instellen op (0,0)
b. De variabele horspeed instellen op 3
c. De x-positie herhaaldelijk aanpassen met horspeed.
6. Test vervolgens of het balletje naar rechts toe beweegt wanneer je op het vlaggetje klikt.
Stop de uitvoering door op het stop icoon te klikken.
7. Voeg in het Forever blok een controle toe of de rand aangeraakt wordt. Wanneer de rand
aangeraakt wordt, moet de horspeed variabele tegengesteld gemaakt worden. Dit kun je
doen met:
8. Test vervolgens of het balletje heen en weer blijft bewegen wanneer je op het vlaggetje
klikt. Stop de uitvoering door op het stop icoon te klikken.
9. Het enige probleem is nu dat het balletje alleen zichtbaar beweegt op de host computer.
We willen hem natuurlijk ook op de client computer laten bewegen!
10. Maak een variabele aan genaamd BallX. Let op: Maak deze variabele niet alleen aan
voor de bal sprite, maar voor álle sprites. Anders zal deze variabele niet beschikbaar zijn
op de client.
11. Stel binnen je Forever loop de BallX variabele steeds in op de x-positie van de bal. De xpositie van de bal is te vinden in het
blok.
12. Nu is het tijd om op de client computer te gaan programmeren!
13. Op de client computer hoef je alleen te vragen aan de host computer wat de x-positie is
van de bal. Wanneer er op het vlaggetje gedrukt wordt, moeten er dus de volgende zaken
uitgevoerd worden:
a. De positie van de sprite instellen op (0,0)
b. Vraag herhaaldelijk de BallX variabele aan de host computer en stel je eigen xpositie in op die waarde.
Het opvragen van de BallX variabele kan via het sensing blok:
14. Druk op het vlaggetje op de client computer. Klik ook op het vlaggetje op de host
computer. Als jullie alles goed geprogrammeerd hebben, moet het balletje op beide
computers nu synchroon heen en weer bewegen.
15. Mocht het balletje nog niet synchroon bewegen op beide computers, dan is er iets
verkeerd gegaan met het programmeren. Dit moet eerst opgelost worden voor je verder
kunt programmeren! Als het balletje goed beweegt, laat je het resultaat aan ons zien
voordat jullie verder gaan.
16. Het stuiteren van het balletje uitbreiden.
a. Maak een verspeed en BallY variabele aan op de host computer.
b. De BallY variabele stel je iedere keer in op de y-positie van het balletje.
c. Vervolgens kun je op de client computer de BallY variabele opvragen en je ypositie instellen op die waarde.
d. De verspeed variabele stel je in op 3.
e. Verander vervolgens herhaaldelijk de y-positie met de verspeed variabele.
f.
Nu het ingewikkeldste deel, waarbij je af mag kijken bij je vorige Pong versie. Als
de bal bovenin of onderin beeld de rand raakt, keer je de verspeed om. Wanneer
de bal links of rechts de rand raakt, keer je de horspeed om.
17. Test of dit goed werkt. Als het niet goed werkt, is er iets fout gegaan met programmeren
en moet dit eerst opgelost worden. Wanneer het wel werkt, laat je dit ook weer
controleren!
Batjes/balkjes synchroon bewegen
Deze stap werkt op dezelfde manier als het balletje synchroon laten bewegen.
1.
Teken op de host en de client een batje en share allebei de sprites (Let op de namen van
de sprites!). Bouw vervolgens op allebei de computers de juiste scripts om je eigen batje
op en neer te laten bewegen met de pijltjestoetsen.
2. Maak vervolgens een variabele waarin je de x of y positie (ligt eraan of je pong horizontaal
of verticaal aan het spelen bent) van een batje in opslaat. Denk goed na hoe je dit moet
doen, denk ook terug aan een van de Debug opdrachten!
3. Als jullie allebei jullie eigen batje kunnen bewegen, kunnen jullie het batje van de ander
synchroniseren.
4. Als jullie allebei jullie eigen batje kunnen bewegen en hem goed gesynchroniseerd hebben
tussen de computers laten jullie het controleren! Hierna regelen jullie pas het correct
stuiteren van het balletje.
5. Op de host computer breid je de code van het balletje uit om te zorgen dat hij op beide
batjes kan stuiteren en laat de bal resetten wanneer hij de ‘achterrand’ aanraakt.
Regel de score
Bij deze stap is het belangrijk om te beseffen dat je alleen op de host de score op hoeft te tellen,
omdat je de score variabele gewoon op de client kunt ontvangen via het sensorblok. Net zoals in
het vorige blok is het de bedoeling dat de tegenstander een punt krijgt wanneer het balletje
gemist wordt en het balletje dan weer in het midden gezet wordt.
Uitbreidingen
Mochten jullie heel snel klaar zijn met het maken van deze versie van pong, dan kunnen jullie hem
misschien uitbreiden naar eigen inzicht. Je kunt bijvoorbeeld een synchroon menu toevoegen, met
de mogelijkheid om allebei je naam in te vullen en deze in beeld te laten verschijnen bij beide
spelers. Of een optie om een niveau te kiezen waar je tegenstander het mee eens is. En wat
natuurlijk altijd mogelijk is, is zelf creatief zijn!

Download Report