LES 4: Scrollen achtergrond en tegels gebruiken

Maat: px

Weergave met pagina beginnen:

Download "LES 4: Scrollen achtergrond en tegels gebruiken"

Janne Bauwens
7 jaren geleden
Aantal bezoeken:

1 LES 4: Scrollen achtergrond en tegels gebruiken DOEL: De achtergrond (background) laten bewegen en we gaan tegels (tiles) gebruiken om het speelveld uit te breiden. Start Stencyl Open het zelf gemaakte spel De Krokodil uit Les 3. Tot nu toe zijn de onderstaande onderdelen geprogrammeerd. Mocht je dit nog niet gedaan hebben of je hebt het spel niet opgeslagen, zorg er dan voor dat je dit alsnog doet: zie les 1, 2 en 3 hoe dit moet. Een achtergrond met zwaartekracht Een krokodil die naar links en rechts kan lopen en hierbij de goede kant op kijkt Een krokodil die kan springen en dan een geluidje maakt Een achtergrond muziekje Achtergrond laten scrollen Als je de achtergrond wilt laten meebewegen heb je een achtergrond plaatje nodig dat herhaald kan worden zonder dat je een naadje ziet. De achtergrond die je in de vorige lessen gebruikt hebt is niet echt geschikt. Als je dit plaatje herhaald dan ziet het er als hieronder uit: Je ziet dat dit niet zo mooi is. Eigenlijk moet de linkerkant van een plaatje netjes passen op de rechterkant zoals in het voorbeeld hieronder:

2 We gaan dus eerst een betere achtergrond kiezen en de oude weghalen. Volg hiervoor de volgende stappen: 1. Ga naar StencylForge en download de volgende achtergrond: Bottom Layer City 2. Als de achtergrond is geopend zie je aan de rechterkant Scroll Speed staan. Hier kun je bepalen in welke richting en hoe snel je hem wilt laten scrollen. Je kunt horizontaal (naar links of rechts) of verticaal (naar boven of beneden) laten bewegen. 3. In dit geval ga je de achtergrond naar links laten scrollen. Stel Horizontal Scroll Speed in op 2.0 en kies Left. Zet ook een vinkje bij Repeat Background zodat hij netjes herhaald wordt. 4. Nu verbind je deze achtergrond via de knop Attach to Scene aan Level 1. Er opent automatisch een tabje voor Level 1. Hier moet je de oude achtergrond (Universe) weghalen. 5. Zoekt rechtsonder bij Layers de laag Universe, klink met rechtermuisknop op deze laag Universe en kies voor Delete layer 6. Nu moet je alleen nog de nieuwe achtergrond ook naar achteren plaatsen zodat de krokodil en tegels vooraan komen te staan. Klik met rechtermuisknop op Bottom Layer City en kies voor Send Layer Back. Test de game, als het goed is heb je nu een bewegende achtergrond. Het enige wat nu moet veranderen is dat je niet van de rand af valt als je buiten beeld loopt. We gaan dit nu aanpassen door met de tegels aan de slag te gaan. Als je wilt kun je het scrollen nog sneller of langzamer laten door de Horizontal Scroll Speed te veranderen. Probeer dit maar eens uit en kies de snelheid die jij leuk vind. Zijkanten scherm blokkeren Zoals je waarschijnlijk al gemerkt hebt kan de krokodil het scherm aflopen en krijg je hem niet meer terug. Je moet er daarom voor zorgen dat dit niet kan gebeuren. Om dit te doen heb je wat rekeninzicht nodig, ik leg het eerst even zo eenvoudig mogelijk uit. Stel, je level (scene) is 70 cm breed en je speler is 10 cm breed. Dit ziet dan bijvoorbeeld zo uit: 0 cm Je weet al dat de horizontale beweging over de x-as gaat. De x van bovenstaande krokodil zal 35 zijn, want de linkerkant van een actor is de juiste waarde. De x van de krokodil mag dus niet kleiner dan 0 worden.

3 De eerste regel die je schrijft wordt iets als: Als de x van de krokodil is kleiner dan 0 is, zet dan de waarde van x weer op 0 Of in Stencyl taal: if x of self < 0 (then) set x to 0 for self De tweede regel gaat controleren of de x niet groter (>) dan 70 is. Nou maakt dat getal niet zo heel veel uit, want er is een blokje dat dit zelf kan bepalen: scene width (betekend: breedte van het level) Er is alleen iets waar je rekening mee moet houden, dit is de breedte van de krokodil zelf, in dit voorbeeld 10 cm. Bij x=70 is de krokodil namelijk al naast je scherm gelopen. De krokodil moet dus al 10 cm eerder stoppen, dus: scene width min breedte van krokodil (70-10=60) Voor de breedte van de krokodil is ook een blokje: width of self De tweede regel zal zoiets moeten worden: Als de x van de krokodil > (groter is dan) scenebreedte krokodil breedte zet dan de waarde van x op scenebreedte - krokodil breedte Je gaat nu deze regel toevoegen aan de krokodil, open dus het tabje Stencyl Book Croc en ga naar events. Zie onder hoe het moet worden, let heel goed op want hier kun je snel een foutje maken. 1. Voeg een nieuw event toe: Add Event > Basics > When Updating 2. Hernoem het Event Updating naar Begrenzing (via rechtermuisknop > Rename) 3. Voeg nu een if en een otherwise if toe 4. Bij if moet nu een vergelijking (comparison) komen a. in het 1 e lege vakje naast if kies je: comparisons en iets < iets (Dit blokje vind je ook recht onder Flow > Conditions) b. links in de comparison moet komen: x of self en rechts type je 0 c. onder if komt het blokje: set x to 0 for self 5. Bij otherwise if komt ook een vergelijking: a. kies nu voor de comparisons iets > iets (iets is groter dan iets) b. links komt weer: x of self c. rechts komt weer een berekening: iets - iets d. in dit blokje zet je links screen width en rechts komt width of self Tip: je kunt rechtsboven zoeken. Zoek in dit geval op width e. onder de otherwise if functie komt nu de volgende uitvoering: f. pak eerste het blok: set x to for self g. plaats in het lege veld weer het Math blokje iets iets h. zet hier links weer screen width en rechts width for self i. Test de game en kijk of je het scherm niet meer afloopt

Breder Level maken Omdat we nu alleen een kort stukje kunnen lopen en daarmee geen leuk platformspel kunnen maken gaan we het level (Scene) breder maken.

4 Breder Level maken Omdat we nu alleen een kort stukje kunnen lopen en daarmee geen leuk platformspel kunnen maken gaan we het level (Scene) breder maken. Dit is redelijk makkelijk te doen: Open Level 1 bij Scenes: 1. Klik op Properties (betekent eigenschappen) Je ziet dat de Scene nu 20 tegels breed is en 15 tegels hoog. 2. We maken de Scene vijf keer zo breed: vul dus bij Width 100 in en klik OK Je ziet nu dat de achtergrond doorloopt, met de scrollbar kun je even naar rechts scrollen 3. Je ziet ook dat de gras-tegels ophouden omdat je eerder alleen de eerste 20 had gelegd 4. Vul de gras-tegels aan tot helemaal rechts. TIP: Je hoeft niet over de hele lengte te klikken om tegels te leggen: a. Leg de eerste gras-tegel aan de linkerkant b. Scroll dan helemaal naar rechts, houd de Shift-toets in en klik op de laatste plek. Test de game. Waarschijnlijk is er nog een probleem want als het goed is loopt de krokodil nog steeds van het scherm af. Dit gaan we nu ook aanpassen. Camera mee laten bewegen Wat je eigenlijk wil is dat de krokodil netjes in het midden van het scherm blijft tijdens het lopen. Je moet je voorstellen dat wat je ziet wordt vastgelegd door een camera. Je moet dus een opdracht geven om de camera met de krokodil. Een eenvoudige manier om dit te doen is als volgt: 1. Open Stencyl Book Croc en ga naar het eerder gemaakt event Begrenzing. 2. Zoek rechts op het woord Camera en vind het blokje move camera center to Actor 3. Sleep dit blokje naar de eerste regel van when updating Test de game, nu blijft de krokodil netjes in het midden en kun je helemaal naar rechts lopen waar hij ook weer netjes stopt. Je kunt alleen niet heel goed zien dat de tegels onder je door lopen

5 Inrichting met tegels Nu je een mooi breed speelveld hebt in het Level kun je dit gaan inrichten met tegels zodat we ook ergens op kunnen springen. Je mag dit zelf bedenken door gebruik te maken van de verschillende tegels dit je ter beschikking hebt. Ga nu zelf allemaal Tiles plaatsen er zorg ervoor dat er aan het eind een deurtje komt. Hieronder zie je een voorbeeld: LET OP: in de Scene moet je altijd even de juiste Layer kiezen, dus niet de achtergrond Layer. Test de game als je de Tiles allemaal geplaatst hebt en kijk of je het eind van het Level kunt bereiken. Vermoedelijk gaat er wel iets mis en reageren sommige tegels iets anders dan andere: 1. Het eerste wat misschien mis gaat is dat de krokodil gaat draaien als hij op het randje van een Tile springt. Dit kun je makkelijk verhelpen: a. Open Stencyl Book Croc en kijk bij Physics b. Bij de optie Can Rotate (kan draaien) staat dan Yes aan, zet dit op No en test opnieuw 2. Het kan zijn dat je tegels hebt geplaats waar de krokodil gewoon doorheen zakt. Je hebt dan waarschijnlijk tegels gebruikt die bij een deur horen. Dit zijn in de lichtgroene en beige tegels. Zorg dat dit aangepast wordt en test opnieuw 3. Het kan zijn dat je met de krokodil al springend tegen muren op kunt lopen. Dit komt omdat de krokodil wel een Tile raakt en daarom denkt dat hij kan springen. Dit gaan we in een latere les behandelen omdat dit best lastig is om te regelen. 4. Als je aan het einde de deur bereikt gebeurt er nog niets, dat klopt want je hebt hier nog geen programma voor gemaakt. Dit gaan we ook in een latere les natuurlijk wel laten werken. Maak de Scene verder af zodat het niet te makkelijk of te moeilijk is om doorheen te lopen. TIP: naast het aanpassen van de Tiles kunt je ook spelen met de zwaartekracht (via Level 1 > Physics), de springsnelheid (via Stencyl Book Croc > Krokodil Spring) en loopsnelheid (Krokodil links en rechts) Gefeliciteerd, je weet nu wat meer over Scrollen in een Scene en het gebruiken van Tiles!

Vergelijkbare documenten

LES 6: Vijanden en dood gaan

LES 6: Vijanden en dood gaan DOEL: Je moet dodelijke slangen gaan ontwijken. Als je toch een slang raakt ga je dood en moet je opnieuw beginnen. Je geeft de slang aan het eind een leuke animatie. Start