Share
Parcourez ce didacticiel Premium et créez un jeu de plates-formes en chute amusant avec Flash et ActionScript 3.0. Ne frappez pas les plates-formes violettes et ne sortez pas de l'écran, vous perdrez une vie.!
À l'aide des outils de dessin de Flash, nous allons créer une interface graphique attrayante, optimisée par plusieurs classes ActionScript 3..
L'utilisateur pourra déplacer un personnage sur la scène et les plates-formes. Vous pouvez modifier les paramètres 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, sons et plus.
Passez aux étapes suivantes pour apprendre à créer cette interface graphique..
Sélectionnez l'outil Rectangle (R) pour créer un rectangle de 320x480px # DEBDA0 et le centrer sur la scène. Dupliquez la forme précédente et changez la largeur en 2px et sa couleur en # C3A287, dupliquez la forme (Cmd + D) plusieurs fois et déplacez chaque 2px vers la droite pour obtenir le résultat ci-dessus..
Sélectionnez l'outil Texte (T), choisissez une belle police et écrivez le titre de votre jeu. J'ai utilisé ce format: Candara Bold, 80pt, # 746253. Vous pouvez également ajouter les graphiques de lecteur et de plate-forme que nous allons créer dans les étapes suivantes..
Utilisez la même technique pour créer deux boutons, alignez-les au centre et nommez-les. débutB et créditsB. Convertir tout en un MovieClip et définissez son nom d'instance sur menuView.
Ce sera le GameView. Ajouter le fond MC à la scène et créer deux Champs de texte dynamiques et placez-les comme indiqué dans l'image. Vous pouvez également ajouter des formes simples derrière le Champs de texte rendre le texte plus clair.
Utilisez le Outil primitif rectangle (R) pour créer un carré de 30x30px et le remplir avec # CC6600. Dupliquez la forme, changez sa taille en 28x28px et utilisez ce remplissage en dégradé: # F9D03 à # EA7736. Vous pouvez ajouter une icône ou une lettre pour identifier votre personnage, j'ai utilisé le une à partir du logo ActiveTuts +.
Enfin, sélectionnez la partie inférieure de la forme (comme indiqué dans l’image) et convertissez-la en MovieClip et nommez-le hArea, cela sera vraiment utile pour éviter les collisions indésirables avec les blocs. Sélectionnez toutes les formes et convertissez-les en un seul MC. nomme le Joueur et marquer le Exporter pour ActionScript boîte.
Utilisez la même technique que celle utilisée dans la dernière étape pour créer deux blocs de 60x14px, convertissez-les en MC, nommez le gris. Bloc et le violet BadBlock. N'oubliez pas de marquer le Exporter pour ActionScript boîte.
Une alerte apparaîtra lorsque vous perdez toutes vos vies, elle indiquera le score final que vous avez atteint. Utilisez le Outil primitif rectangle pour le créer et ajouter le filtre montré dans l'image pour un meilleur look. Définissez son nom d'instance sur AlertView et marquer le Exporter pour ActionScript boîte.
Cet écran sera facile à faire car nous avons déjà tous les graphiques. Définissez son nom d'instance sur CréditsVoir et marquer le Exporter pour ActionScript boîte.
Nous utiliserons un moteur d'interpolation différent du moteur par défaut inclus dans Flash. Cela améliorera les performances et facilitera l'utilisation..
Vous pouvez télécharger Tween Nano sur son site officiel. Pour plus d'informations sur son installation, lisez ce tutoriel..
Nous utiliserons les effets sonores pour améliorer le ressenti du jeu (dans ce cas, pour informer le joueur s’ils ont perdu une vie), vous pouvez trouver le son utilisé dans cet exemple sur Soungle.com à l’aide du mot clé spot. Enregistrez le son dans votre bibliothèque avec un nom de classe de Spot.
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.Event; import flash.events.KeyboardEvent; import flash.events.TimerEvent; import flash.utils.Timer; import flash.events.MouseEvent; import flash.net.navigateToURL; import flash.net.URLRequest; import com.greensock.TweenNano; importer com.greensock.easing.Elastic;
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.
blocs de var privés: vecteur.= nouveau vecteur. (); // Un vecteur pour stocker les blocs en mouvement private var player: Player = new Player (); gravité privée var: int = 3; // La variable gravity utilisée pour déplacer le lecteur et bloque private var moveLeft: Boolean = false; // stocke la direction du joueur private var moveRight: Boolean = false; private var blockTimer: Minuterie = nouvelle minuterie (800); // temps d'attente avant qu'un nouveau bloc ne soit généré private var life: Life; vies privées privées: int = 3; private life lifeTimer: Minuterie = nouvelle minuterie (8000); // temps d'attente avant qu'une nouvelle vie ne soit affichée private var blip: Blip = new Blip (); // une instance sonore
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 le premier à s'exécuter lorsque le projet est chargé s'il est dans la classe de document..
Il appelle les fonctions nécessaires pour démarrer le jeu. Vérifiez ces fonctions dans les prochaines étapes.
Accentsconagua
fonction finale publique Main (): void initialListeners ('add'); Nous allons commencer par ajouter les écouteurs de la souris aux boutons de la vue du menu, cela nous mènera à l'écran de jeu ou à l'écran de crédits.
fonction finale privée initialListeners (action: String = 'add'): void if (action == 'add') menuView.startB.addEventListener (MouseEvent.MOUSE_UP, gameView); menuView.creditsB.addEventListener (MouseEvent.MOUSE_UP, showCreditsView);
Quand le Début vous appuyez sur le bouton, le focus est défini sur scène afin de recevoir les actions du clavier permettant de déplacer le lecteur. La vue Menu est ensuite interpolée et supprimée..
fonction finale privée gameView (e: MouseEvent): void / * Focus Stage * / stage.focus = stage; / * Supprimer MenuView, Commencer le jeu * / TweenNano.to (menuView, 0.5, y: -menuView.height, onComplete: function (): void removeChild (menuView); menuView = null; addInitialBlocks (););
L'écran de crédits s'affiche lorsque l'utilisateur clique sur le bouton de crédits, un écouteur à la souris est ajouté au MC complet pour le supprimer..
fonction finale privée showCreditsView (e: MouseEvent): void var crédits: CreditsView = new CreditsView (); addChild (crédits); TweenNano.from (crédits, 0.4, x: stage.stageWidth); credits.addEventListener (MouseEvent.MOUSE_UP, function (): void TweenNano.to (credits, 0.4, x: stage.stageWidth, onComplete: function (): void removeChild (crédits); credits = null;); );
Le code suivant ajoute les blocs spécifiés dans le paramètre à une position aléatoire. Il appellera également la fonction pour ajouter le joueur à la scène..
fonction finale privée addInitialBlocks (n: int = 3): void pour (var i: int = 0; i < n; i++) var block:Block = new Block(); block.x = Math.random() * (stage.stageWidth - block.width); block.y = (stage.stageHeight * 0.5) + Math.random() * (stage.stageHeight * 0.5); addChild(block); blocks.push(block); addPlayer();
Le joueur sera ajouté lorsque les blocs initiaux seront sur la scène. Il apparaîtra au centre X de la scène.
fonction finale privée addPlayer (): void player.x = (stage.stageWidth * 0.5) - (player.width * 0.5); player.y = player.height; addChild (joueur); gameListeners ();
Le code suivant définira la valeur de la variable de mouvement appropriée sur true ou false selon la touche enfoncée. La variable sera ensuite vérifiée à chaque image (dans une autre fonction). Cela fera bouger le joueur en fonction de cette variable.
fonction finale privée movePlayer (e: KeyboardEvent): void if (e.KeyCode == 37) moveRight = false; moveLeft = true; else if (e.keyCode == 39) moveLeft = false; moveRight = true;
Lorsque les touches fléchées sont relâchées, la variable appropriée est définie sur faux arrêter le mouvement.
fonction finale privée stopPlayer (e: KeyboardEvent): void if (e.KeyCode == 37) moveLeft = false; else if (e.keyCode == 39) moveRight = false;
Cette fonction est appelée par une minuterie; il calculera un entier aléatoire de 0 à 3, lorsque le résultat sera égal à 0, un bloc incorrect sera ajouté, si le résultat est différent de 0, un bloc normal sera ajouté. Les blocs sont ajoutés à une propriété de vecteur appelée des blocs, De cette façon, nous sommes en mesure d'y accéder en dehors de cette fonction.
fonction finale privée addBlock (e: TimerEvent): void var r: int = Math.floor (Math.random () * 4); if (r! = 0) var block: Block = new Block (); block.x = Math.random () * (stage.stageWidth - block.width); block.y = stage.stageHeight + block.height; addChild (bloc); blocks.push (block); else var badBlock: BadBlock = new BadBlock (); badBlock.name = 'mauvais'; badBlock.x = Math.random () * (stage.stageWidth - badBlock.width); badBlock.y = stage.stageHeight + badBlock.height; addChild (badBlock); blocks.push (badBlock);
Une autre fonction chronométrée, un graphique de la vie sera ajouté à la fin du chronomètre. La position de vie sera le dernier bloc du vecteur - 1.
fonction finale privée addLife (e: TimerEvent): void life = new Life (); life.x = blocks [blocks.length - 1] .x; life.y = block [blocks.length - 1] .y - life.height; addChild (vie);
Cette fonction ajoute et supprime les écouteurs nécessaires pour démarrer le jeu..
fonction finale privée gameListeners (action: String = 'add'): void if (action == 'add') stage.addEventListener (KeyboardEvent.KEY_DOWN, movePlayer); stage.addEventListener (KeyboardEvent.KEY_UP, stopPlayer); stage.addEventListener (Event.ENTER_FRAME, mise à jour); blockTimer.addEventListener (TimerEvent.TIMER, addBlock); blockTimer.start (); lifeTimer.addEventListener (TimerEvent.TIMER, addLife); lifeTimer.start (); else stage.removeEventListener (KeyboardEvent.KEY_DOWN, movePlayer); stage.removeEventListener (KeyboardEvent.KEY_UP, stopPlayer); stage.removeEventListener (Event.ENTER_FRAME, mise à jour); blockTimer.removeEventListener (TimerEvent.TIMER, addBlock); blockTimer.stop (); lifeTimer.removeEventListener (TimerEvent.TIMER, addLife); lifeTimer.stop ();
Lorsque le joueur perd une vie, une petite animation apparaîtra dans le champ de vies et un son sera joué pour avertir l'utilisateur..
fonction finale privée animateLives (): void TweenNano.from (livesTF, 0.8, x: livesTF.x - 3, facilité: Elastic.easeOut); blip.play ();
Dans cette partie, nous commençons la fonction principale du jeu, cette fonction sera exécutée chaque image.
Les lignes de code suivantes vérifient les variables de mouvement, si true, le joueur sera déplacé.
Mise à jour de la fonction finale privée (e: Event): void / * Controls * / if (moveLeft) player.x - = 4; else if (moveRight) player.x + = 4;
Ce code crée des murs invisibles sur les côtés de la scène pour empêcher le joueur d’en sortir..
/ * Limites d’écran * / if (player.x <= 0) //Left player.x = 0; else if(player.x >= (stage.stageWidth - player.width)) // Droite player.x = (stage.stageWidth - player.width);
Le joueur est poussé par la variable de gravité.
/ * Gravité du joueur * / player.y + = gravité;
Les lignes suivantes vérifient les collisions entre le joueur et les blocs. Lorsque le joueur entre en collision avec un bloc normal, il reste au-dessus de celui-ci. Quand un mauvais bloc est touché, une vie est perdue et le joueur est déplacé.
pour (var i: int = 0; i < blocks.length; i++) if(player.hArea.hitTestObject(blocks[i]) && blocks[i].name == 'bad') for(var j:int = 3; j < blocks.length; j++) if(blocks[j].name != 'bad') player.x = blocks[j].x; player.y = blocks[j].y - player.height; lives--; animateLives(); livesTF.text = 'x' + String(lives); j = blocks.length; if(player.hArea.hitTestObject(blocks[i])) player.y = blocks[i].y - (player.height + 3);
La gravité affecte aussi les blocs, mais dans le sens opposé.
blocs [i] .y - = gravité;
Les blocs sont détruits quand ils ne sont plus visibles sur scène.
si (blocs [i] .y < -blocks[i].height) removeChild(blocks[i]); blocks[i] = null; blocks.splice(i, 1);
Le score du jeu soulève chaque image, ce code modifie le champ de texte pour refléter que.
scoreTF.text = Chaîne (int (scoreTF.text) + 1);
Les lignes suivantes gèrent le graphique de la vie et les variables.
Si une vie (un 1 en haut) est sur la scène, elle sera déplacée vers le haut et supprimée si elle est touchée par le joueur ou si elle n'est plus visible sur la scène..
if (life! = null) life.y - = gravité; / * Remove + Life * / if (life.y < 0) removeChild(life); life = null; /* Grab +Life */ if(life != null && player.hitTestObject(life)) removeChild(life); life = null; lives++; livesTF.text = 'x' + String(lives); /* Lose Lives */ if(player.y > stage.stageHeight || joueur.y < -5) player.x = blocks[3].x; player.y = blocks[3].y - player.height; lives--; animateLives() livesTF.text = 'x' + String(lives);
Quand le joueur est hors de la vie, le showAlert () la fonction est appelée. Cette fonction arrêtera le jeu et révélera le score final.
si (vit < 0) showAlert();
Vous pouvez ajouter autant de niveaux que vous le souhaitez, voici un exemple de la façon dont vous pouvez ajouter un niveau..
Lorsque le score atteint 500, la gravité augmente de 1, cela rend le jeu plus rapide et plus difficile à atterrir sur les plates-formes, cela réduit également le temps que les vies s'ajoutent..
if (int (scoreTF.text)> 500 && int (scoreTF.text) < 502) gravity = 4; lifeTimer = new Timer(12000);
Essayez d'augmenter la vitesse tous les 500 points.
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..
fonction finale privée showAlert (): void gameListeners ('rmv'); var alert: AlertView = new AlertView (); alert.x = stage.stageWidth * 0.5; alert.y = stage.stageHeight * 0,5; alert.scoreTF.text = scoreTF.text + '!'; livesTF.text = "; alert.addEventListener (MouseEvent.MOUSE_UP, restart); addChild (alert); TweenNano.from (alert, 0,7, y: -alert.height, facilité: Elastic.easeOut); La fonction suivante rechargera le fichier SWF, réinitialisant toutes les variables et méthodes et revenant à Écran de menu.
redémarrage de la fonction finale privée (e: MouseEvent): void browseToURL (new URLRequest (stage.loaderInfo.url), '_level0');
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.
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!
