| Inhoud |
|
| Houden van knoppen | Responsieve lay-outs |
Creëren van een spel lus
Bij het maken van spellen worden afbeeldingen of sprites toegevoegd aan de film om elementen in de spellen zoals karakters, voertuigen of explosies vertegenwoordigen. De positie van de sprite is vele malen per seconde bijgewerkt in een loop, afhankelijk van spel logica. Elke film heeft een ingebouwde spelloop, genaamd 'Op Update'. Het word aangeroepen telkens als de animatie updates en het kan worden gevonden in de eigenschappen van de film.
Maak een nieuwe film en voeg een afbeelding, ook wel sprite genoemd, toe. We hebben een strandbal gebruikt.
 | Importeren |
Klik om deze afbeelding op uw computer op te slaan.
BeachBall.png
in de eigenschappen van het eerste frame van de strand bal, schakelt u de tijdlijn uit en veranderd u haar 'Script-ID' in Ball. Het uitschakelen van de tijdlijn zorgt er voor dat de bal kan worden gecontroleerd met behulp van JavaScript.
We gaan de strandbal laten stuiteren. Hiertoe moeten we een aantal snelheid-variabelen toevoegen aan het 'Basis script'. Elke beginwaarde voldoet.
In het 'Update script', kunnen we de bal verplaatsen door de snelheid waarden toe te voegen aan de X en Y waarden van de bal.
Ball.Y+=VelocityY;
Druk op play om te testen van de film. De bal moet vliegen rechtstreeks uit de film.
 | Play |
De X en Y eigenschappen van de bal zijn het middelpunt. Door het controleren van deze waarden tegen de breedte en hoogte van de film, kunnen we controleren om te zien als de bal te stuiteren. Om terug te stuiteren van de bal, omgekeerde gewoon de snelheid.
Ball.Y+=VelocityY;
var MovieWidth=600,MovieHeight=400,BallRadius=50;
if(Ball.X>MovieWidth-BallRadius){VelocityX=-VelocityX;}
if(Ball.X<BallRadius){VelocityX=-VelocityX;}
if(Ball.Y>MovieHeight-BallRadius){VelocityY=-VelocityY;}
if(Ball.Y<BallRadius){VelocityY=-VelocityY;}
Druk op play om te testen van de film weer. De bal moet nu rond stuiteren.
De film exporteren naar HTML en opmerken dat de bal naar de speler met een iets andere snelheid verplaatst. Dit is omdat verschillende webbrowsers en verschillende apparaten worden uitgevoerd op verschillende snelheden.
Om de bal overal met dezelfde snelheid te verplaatsen, moeten we het verschil in tijd tussen de updates berekenen. Het 'Update' script bevat hiervoor twee nuttige variabelen die precies dat doen. TimeChange: Het aantal frames dat is afgespeeld sinds de laatste update. SecondsChange: Het aantal seconden dat is verstreken sinds de laatste update. Deze waarden zijn onafhankelijk van de vraag of de film is gestopt of niet. Ze zijn gewoon een manier om de tijd sinds de laatste update te berekenen. Om de animatie altijd met dezelfde snelheid uit te voeren, moet elke verandering in positie, hoek of dekking worden vermenigvuldigd met de verandering in de tijd of seconden.
Ball.Y+=VelocityY*TimeChange;
var MovieWidth=600,MovieHeight=400,BallRadius=50;
if(Ball.X>MovieWidth-BallRadius){VelocityX=-VelocityX;}
if(Ball.X<BallRadius){VelocityX=-VelocityX;}
if(Ball.Y>MovieHeight-BallRadius){VelocityY=-VelocityY;}
if(Ball.Y<BallRadius){VelocityY=-VelocityY;}
Test de film in de speler en in HTML. De bal moet verplaatsen met precies dezelfde snelheid in zowel de video als in HTML.
| Houden van knoppen | Responsieve lay-outs |