Het creëren van een heads-up display (HUD)
Een heads-up display (aka HUD) is de interface die de speler de gezondheid, de score en andere informatie in het spel laat zien. Laten we een heel eenvoudige HUD maken met een tekstobject.
De HUD blijft altijd op dezelfde plaats op het scherm. Als we een aantal interface-objecten hebben, willen we niet dat ze weg schuiven als de speler rond loopt - ze moeten op het scherm blijven. Standaard scrollen lagen. Om ze op het scherm te houden, kunnen we de laag Parallax instelling gebruiken. Parallax laat verschillende lagen met verschillende snelheden scrollen voor een soort semi-3D-effect. Als we de parallax echter op nul zetten, scrollt de laag helemaal niet - ideaal voor een HUD.
Ga terug naar de layers bar die we al eerder gebruikten. Voeg een nieuwe laag toe genaamd HUD . Zorg ervoor dat het bovenop ligt, en dat het geselecteerd is (onthoud dit maakt het de actieve laag). De properties bar moet nu zijn eigenschappen tonen. Stel de Parallax property in op 0, 0 (dat is nul op zowel de X-en Y-as).
Dubbelklik een ruimte om een nieuw object te plaatsen. Kies deze keer het Text object. Plaats het in de linkerbovenhoek van de layout. Het zal moeilijk te zien zijn als het zwart is, dus in de propeties bar, maak het vet, cursief, geel, en kies een iets groter lettertype. Pas de grootte aan zodat het breed genoeg is om een redelijke hoeveelheid tekst te bevatten. Het moet er ongeveer zo uitzien:
Ga terug naar het event sheet. Laten we de tekst bijgewerkt houden met de score van de speler. In het Every tick event dat wij eerder hebben toegevoegd, voeg de volgende actie toe Text -> Set text .
Met behulp van de & operator, kunnen we een getal omzetten naar tekst en met andere tekst samenvoegen. Dus voer als de tekst in:
"Score: " & Score
Het eerste deel ( "Score:" ) betekent dat de tekst altijd zal beginnen met de zin: Score: . Het tweede deel ( Score ) is de werkelijke waarde van de Score globale variabele. De & voegt ze samen in een stuk tekst.
Start het spel, en schiet op een aantal monsters. Je score wordt weergegeven, en het blijft op dezelfde plaats op het scherm!
Afwerking
We zijn bijna klaar. Laten we nog wat puntjes bijwerken.
Ten eerste, laten we eens wat monsters regelmatig te voorschijn komen, anders is er niets meer te doen als eenmaal alle monsters door zijn. We zullen elke 3 seconden een nieuw monster creëren. Voeg een nieuw event toe:
Conditie: System -> Every X seconds -> 3
Actie: System -> Create object -> Monster, layer 1, 1400 (voor X), random(1024) (voor Y)
1400 is een X-coördinaat vlak bij de rechterrand van de lay-out, en random(1024) is een willekeurige y-coördinaat voor de hoogte van de lay-out.
Tot slot, laten we eens spoken maken die de speler kunnen doden.
Conditie: Monster -> On collision with another object -> Speler
Actie: Speler -> Destroy
Conclusie
Gefeliciteerd, je hebt je eerste HTML5 spel gemaakt in Construct 2! Als je een server hebt en je wilt pronken met je werk, klik Export in het menu File. Construct kan alle projectbestanden naar een map op je computer opslaan, die je kunt uploaden naar of integreren in een webpagina. Als je niet beschikt over een eigen server, kun je je games delen via Dropbox.
Invoegen van objecten, het gebruik van lagen, gedragingen, events en nog veel meer: je hebt een aantal belangrijke grondbeginselen over Construct2 geleerd. Hopelijk motiveert dit je om meer over Construct 2 te leren! Probeer de mogelijkheden te verkennen en bekijk wat ze voor jou kunnen doen.
Het afgewerkte ding
Probeer het het afgewerkte tutorial project te downloaden. Ik heb een aantal extra functies toegevoegd, zoals een "Game over" tekst, en monsters die geleidelijk versnellen. Met wat je nu weet, zou het niet moeilijk zijn om erachter te komen hoe het werkt. Er zijn ook tal van reacties die beschrijven hoe het werkt.
Goed gedaan! Als je problemen hebt of je denkt dat een deel van deze tutorial kan worden verbeterd, laat een reactie achter of stuur ons een bericht op het forum. We zullen kijken wat we kunnen doen!
Tenslotte, als je deze tutorial goed vond en je kent iemand die Construct 2 ook leuk zou kunnen vinden, waarom dan geen link van deze tutorial sturen? Het kan vast geen kwaad :)
Verder lezen
Wil je muziek en geluidseffecten toe te voegen? Bekijk Sounds & Music in de handleiding voor een snel overzicht.
Je bent misschien geïnteresseerd in onze alternatieve platformer-gebaseerde tutaorial voor beginners, How to make a platform game.
Als je meer wilt weten over hoe gebeurtenissen werken in Construct 2, zie de paragraaf over How Events Work in de handleiding. Deze is sterk aanbevolen, zodat je snel de slag kunt met jouw eigen projecten! Voor nog meer informatie, vergeet niet dat er de volledige documentatie in de handleiding is.