| Contenu |
|
| Boutons | Réactifs Layouts |
Création d'une boucle de jeu
Lorsque vous créez des jeux, des images ou des sprites, sont ajoutés au film pour représenter des éléments dans les jeux tels que des personnages, des véhicules ou des explosions. La position du sprite est ajustée plusieurs fois une seconde d'à l'intérieur d'une boucle selon une logique de jeu. Chaque film a construit dans la boucle de jeu, appelé 'Mise à jour'. Elle est appelée chaque fois que les mises à jour aniamtion et il se trouvent dans les propriétés du film.
Créer un nouveau film et ajouter une image, aussi appelée un sprite. Nous avons utilisé un ballon de plage.
 | Importation |
Cliquez pour sauvegarder cette image sur votre ordinateur.
BeachBall.png
dans les propriétés de la première image de la boule de la plage, stoppez la chronologie et l'ensemble de ses 'Script ID' à Ball. Stopper la chronologie permet à la balle à être contrôlé à l'aide de Javascript.
Nous allons faire le ballon de plage rebondir autour du film. Nous avons donc besoin de créer des variables de vitesse dans le 'Générales' événement de script. Toutes les valeurs initiales seront faîtes.
Dans le 'Mise à jour' événement, nous pouvons faire le ballon se déplacent en ajoutant les valeurs de vitesse X et Y des valeurs de la balle.
Ball.Y+=VelocityY;
Appuyez sur play pour tester le film. La balle doit voler directement à la sortie du film.
 | Play |
Le X et Y les propriétés de la balle sont son point central. En vérifiant ces valeurs à la largeur et la hauteur du film, nous pouvons vérifier pour voir si la balle doit rebondir. Pour rebondir la balle, il suffit d'inverser la vitesse.
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;}
Appuyez sur play pour tester à nouveau le film. Le ballon doit désormais rebondir.
Exporter le film au format HTML et remarquez que la balle se déplace à une vitesse légèrement différente pour le joueur. C'est parce que les navigateurs web différents et différents appareils fonctionnent à des vitesses différentes.
Pour que le ballon se déplace à la même vitesse partout, nous devons calculer la différence de temps entre les mises à jour. La 'Mise à jour' événement inclut deux variables utiles pour faire cela précisément. TimeChange : Le nombre d'images qui se sont écoulées depuis la dernière mise à jour. SecondsChange : Le nombre de secondes écoulées depuis la dernière mise à jour. Ces valeurs sont indépendantes de la question de savoir si le film a été arrêté ou non. Ils sont simplement un moyen de calculer le temps depuis la dernière mise à jour. Pour faire en sorte que l'animation s'exécute toujours à la même vitesse, chaque changement de position, angle ou opacité doit être multipliée par le changement de temps ou de secondes.
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;}
Testez l'animation dans le lecteur et le HTML. Le ballon doit se déplacer exactement à la même vitesse dans les deux cas.
| Boutons | Réactifs Layouts |