Share
Dans ce tutoriel, nous allons construire un jeu très simple, "Keepy-Uppy". Cliquez sur le frisbee pour l'envoyer vers le ciel, puis faites-le tourner avec votre souris pour l'empêcher de tomber! Recueillir des power-ups pour changer la taille du disque.
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
En utilisant des éléments graphiques prédéfinis, nous allons créer une interface attrayante qui sera alimentée par plusieurs classes ActionScript 3.
L'utilisateur pourra déplacer un personnage sur la scène, collecter des objets de mise à niveau et vaincre la gravité. Vous pouvez modifier les valeurs de la classe pour personnaliser le jeu..
Ouvrez Flash et créez un document de 320 pixels de large et 480 pixels de haut. Définir le taux de trame à 24fps.
Une belle interface colorée sera affichée, cela implique plusieurs formes, boutons et plus.
La plupart des graphiques que nous avons utilisés ont été créés dans des tutoriels précédents. Il n'est donc pas nécessaire d'inclure leur création..
L'image ci-dessus montre la Noms d'instance utilisé dans le MovieClips. Ceux qui commencent par un Lettre capitale sont Noms de classe de la bibliothèque et ne devrait pas être sur scène, il y a aussi deux clips de nuages au-dessus de ce graphique, ils sont appelés des nuages et nuages2.
Nous utiliserons un moteur d'interpolation différent de celui par défaut inclus dans le flash, ce qui augmentera les performances et facilitera l'utilisation..
Vous pouvez télécharger TweenNano de son site officiel. Apprenez à l'ajouter à votre projet ici.
Créez une nouvelle classe ActionScript 3.0 (Cmd + N) et enregistrez-la sous Main.as dans votre dossier de classe.
Créez votre structure de classe de base pour commencer à écrire votre code.
package import flash.display.Sprite; classe publique Main étend Sprite fonction publique Main (): void // code constructeur
Ce sont les classes que nous devons importer pour que notre classe fonctionne, le importation directive met à la disposition de votre code des classes et des packages définis en externe.
import flash.display.Sprite; import flash.events.MouseEvent; import flash.events.Event; import flash.net.navigateToURL; import flash.net.URLRequest; import com.greensock.TweenNano; importer com.greensock.easing.Elastic; import flash.utils.Timer; import flash.events.TimerEvent;
Ce sont les variables que nous allons utiliser, lisez les commentaires dans le code pour en savoir plus à leur sujet, certains de leurs noms s’expliquent d'eux-mêmes, il n'y aura donc pas de commentaire.
private var first time: Boolean = true; gravité privée var: int = 2; private var throwSpeed: int; var privé xMouse: int; var privé xSpeed: int; variable privée topHeight: int = 40; private var top: Boolean; score var privé: int = 0; var scoreVal privé: int = 1; private var timer: Timer = new Timer (10000); private var cancelBonus: Minuterie = nouvelle minuterie (3000); mise à niveau privée de la var: Sprite;
Le constructeur est une fonction qui s'exécute lorsqu'un objet est créé à partir d'une classe. Ce code est le premier à s'exécuter lorsque vous créez une instance d'un objet ou que vous l'exécutez à l'aide de la classe.
Il appelle les fonctions nécessaires pour démarrer le jeu. Vérifiez ces fonctions dans les prochaines étapes.
fonction publique Main (): void addGameListeners ();
Dans cette fonction, nous ajoutons le nombre initial d'auditeurs requis pour démarrer le jeu. Nous avons également mis le boutonMode propriété du frisbee à true (cela affichera le curseur de la main lorsque vous passerez la souris dessus) et masquera.
fonction privée addGameListeners (): void frisbee.addEventListener (MouseEvent.MOUSE_UP, launchFrisbee); frisbee.buttonMode = true; indicateur.visible = faux;
Le premier mouvement du frisbee activera les minuteries en charge des mises à niveau et appellera le mettre à jour fonction qui est la fonction principale du jeu.
fonction privée launchFrisbee (e: MouseEvent): void frisbee.removeEventListener (MouseEvent.MOUSE_UP, launchFrisbee); frisbee.addEventListener (MouseEvent.MOUSE_UP, throwFrisbee); stage.addEventListener (Event.ENTER_FRAME, mise à jour); timer.addEventListener (TimerEvent.TIMER, showUpgrade); timer.start (); xSpeed = 0; xMouse = frisbee.mouseX; throwSpeed = 0;
Cette fonction réinitialise les variables utilisées pour faire bouger et tomber le frisbee; il s'exécute chaque fois que l'on clique sur le frisbee.
fonction privée throwFrisbee (e: MouseEvent): void xSpeed = 0; xMouse = frisbee.mouseX; throwSpeed = 0; top = false;
Une fonction temporisée gérera les bulles de mise à niveau. La minuterie a été définie dans la déclaration des variables pour avoir un intervalle de 10 secondes. La première chose à faire est de rechercher une bulle précédente dans l’écran et de la supprimer s’il en existe une..
fonction privée showUpgrade (e: TimerEvent): void / * Supprimer le sprite précédent * / if (upgrade! = null) removeChild (upgrade); upgrade = null;
Les mises à niveau sont des bulles qui apparaissent à l'écran et qui donneront au joueur des capacités spéciales ou des améliorations..
Le code suivant calcule un nombre aléatoire (il peut être 0 ou 1) et instancie la mise à niveau des points doubles si le nombre est 0.
var randomNumber: int = Math.floor (Math.random () * 2); if (randomNumber == 0) upgrade = new Double (); upgrade.name = 'd';
Si le nombre calculé est 1, la mise à niveau Big Frisbee est ajoutée à la scène. Un nom est donné aux mises à niveau pour déterminer sa valeur lorsque vous touchez.
else upgrade = new Big (); upgrade.name = 'b'; upgrade.x = Math.floor (Math.random () * stage.stageWidth); // donne une position x aléatoire addChild (upgrade);
Une autre fonction chronométrée.
Ce sera appelé lorsque le joueur attrape la bulle de mise à niveau, en comptant 3 secondes pour mettre fin à l'effet de mise à niveau.
fonction privée cancelUpgrade (e: TimerEvent): void cancelBonus.stop (); cancelBonus.removeEventListener (TimerEvent.TIMER, cancelUpgrade); scoreVal = 1; // annule les points doubles scoreTF.textColor = 0xffffff; frisbee.scaleX = 1; // Retourne l'échelle à la normale frisbee.scaleY = 1;
La fonction principale du jeu est de gérer les collisions avec les murs, les améliorations et le mouvement du frisbee à chaque image. Etant une fonction si importante et si étendue, nous la verrons dans la prochaine partie de ce didacticiel..
mise à jour de fonction privée (e: Event): void
Ajoutez le nom de la classe à la Classe champ dans le Publier section de la Propriétés panneau pour associer la FLA à la classe de document Main.
La fonction principale du jeu, il gérera les collisions avec les murs, les mises à niveau et le mouvement du frisbee à chaque image, apprendra comment cela fonctionne dans les étapes suivantes..
Mise à jour de la fonction finale privée (e: Event): void
Le frisbee sera déplacé en utilisant la valeur throwSpeed. Cette valeur changera plus tard dans le code pour faire monter le frisbee. Lorsque cette variable vaut 0, la gravité se déplacera vers le bas du frisbee..
frisbee.y - = throwSpeed;
Le code suivant vérifie si le frisbee a atteint le point le plus haut autorisé, sinon la variable throwSpeed augmente pour le faire monter. Dans le même temps, la variable est appliquée à la variable, ce qui la fait éventuellement perdre sa valeur positive et fait tomber le frisbee..
if (throwSpeed> = topHeight) top = true; if (throwSpeed < topHeight && !top) throwSpeed += 5; if(throwSpeed <= 0) throwSpeed = 0; throwSpeed -= gravity; frisbee.y += gravity * 3;
Le mouvement x du frisbee est calculé en fonction de la zone sur laquelle le joueur clique.
si (xMouse < frisbee.width * 0.5) frisbee.x += xSpeed; //click the left side, so move it right if(xMouse > frisbee.width * 0.5) frisbee.x - = xSpeed; // cliquez sur le côté droit, déplacez-le donc à gauche
xSpeed est la valeur qui fait bouger le frisbee à gauche ou à droite.
Ce code ralentit ce mouvement en soustrayant sa valeur jusqu'à ce que la hauteur maximale soit atteinte.
si (xSpeed < topHeight * 0.01 && !top) xSpeed += 1; if(xSpeed <= 0) xSpeed = 0;
Arrêtons-nous ici pour faire un test rapide et nous assurer que notre code fonctionne:
Pour simuler le mouvement du frisbee, on tourne le une lettre à l'intérieur. (Ceci est un clip à l'intérieur du clip Frisbee, qui a un nom de l'instance de une lettre.)
frisbee.aLetter.rotationZ + = 50;
Le score augmente lorsque le frisbee quitte la scène et au moment où il est invisible pour le joueur. Si vous cliquez dessus plus haut, le score gagné sera plus élevé.
si (frisbee.y < 0) score += scoreVal; scoreTF.text = String(score);
Cet indicateur suit la position x du frisbee alors qu'il n'est pas en phase.
indicateur.visible = vrai; indicateur.x = frisbee.x + (frisbee.width * 0.5);
Le code suivant déplace l'arrière-plan initial (s'il n'a pas été supprimé) et les nuages qui seront réutilisés dans le jeu..
if (bg! = null) bg.y + = throwSpeed; clouds.y + = throwSpeed; clouds2.y + = throwSpeed;
Le premier fond n'apparaitra qu'au début du jeu, il sera donc supprimé lorsque le joueur ne pourra plus le voir..
if (bg! = null && bg.y> stage.stageHeight) removeChild (bg); bg = null;
L'arrière-plan des nuages apparaîtra tout le temps pendant la durée de la partie. Lorsqu'un arrière-plan n'est plus visible, sa position est réinitialisée..
if (clouds.y> stage.stageHeight) clouds.y = -280; if (clouds2.y> stage.stageHeight) clouds2.y = -280;
Arrêtons-nous encore une fois pour faire un test rapide et nous assurer que nous avons le score, l'indicateur, la rotation, les nuages en boucle et les mises à niveau (bien qu'ils ne fassent rien encore?):
я
Double points sont ajoutés au score lorsque le 2x la mise à jour est active, nous changeons également la couleur de la partition pour rendre le changement plus visible.
if (upgrade! = null && frisbee.hitTestObject (upgrade) && upgrade.name == 'd') removeChild (upgrade); upgrade = null; scoreVal = 2; scoreTF.textColor = 0xf3ba35; cancelBonus.addEventListener (TimerEvent.TIMER, cancelUpgrade); cancelBonus.start ();
Quand le joueur attrape le gros bulle, l’échelle de frisbee augmente de 1, ce qui facilite le clic.
if (upgrade! = null && frisbee.hitTestObject (upgrade) && upgrade.name == 'b') removeChild (upgrade); upgrade = null; frisbee.scaleX = 2; frisbee.scaleY = 2;
La mise à niveau actuelle ne sera active que pendant 3 secondes. Lorsque ce temps sera écoulé, ses pouvoirs seront annulés..
cancelBonus.addEventListener (TimerEvent.TIMER, cancelUpgrade); cancelBonus.start ();
La difficulté du jeu est la gravité, ce code modifie la gravité en fonction du score. Lorsque le score atteint 100, la gravité augmente de 0,5..
si (score> = 100 && score < 102) gravity += 0.5;
Des murs invisibles sont utilisés sur les côtés pour empêcher le frisbee de sortir de la scène.
si (frisbee.x <= 0)//Left frisbee.x = 0; else if(frisbee.x >= (stage.stageWidth - frisbee.width)) // Droite frisbee.x = (stage.stageWidth - frisbee.width);
Si le frisbee tombe jusqu'au fond, le jeu est terminé.
if (frisbee.y> stage.stageHeight) gameOver ();
Le code suivant désactive tous les événements de la souris et arrête le chronomètre, ce qui empêchera le jeu d’exécuter des activités indésirables..
fonction finale privée gameOver (): void frisbee.removeEventListener (MouseEvent.MOUSE_UP, throwFrisbee); stage.removeEventListener (Event.ENTER_FRAME, mise à jour); timer.stop (); timer.removeEventListener (TimerEvent.TIMER, showUpgrade);
Cette fonction arrêtera le jeu et révélera le score final, elle ajoutera également un écouteur à la souris pour réinitialiser le jeu en cas de clic..
var alert: AlertView = new AlertView (); alert.buttonMode = true; alert.x = stage.stageWidth * 0.5; alert.y = stage.stageHeight * 0,5; alert.scoreTF.text = scoreTF.text + '!'; alert.addEventListener (MouseEvent.MOUSE_UP, redémarrer); addChild (alerte); TweenNano.from (alert, 0.7, y: -alert.height, easy: Elastic.easeOut);
La fonction suivante rechargera le swf, relancera n'importe quelle variable, méthode et reviendra au premier écran.
redémarrage de la fonction finale privée (e: MouseEvent): void browseToURL (new URLRequest (stage.loaderInfo.url), '_level0');
Avaient fini! Essaye le:
Vous avez créé un jeu très divertissant, essayez d'ajouter vos propres fonctionnalités et graphiques.
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
Accentsconagua