Share
Suivez les étapes simples de ce didacticiel Premium pour créer un shoot-up amusant avec Flash et AS3.
En utilisant des sprites prédéfinis et les outils Flash, nous allons créer une interface graphique attrayante, optimisée par plusieurs classes ActionScript 3..
L'utilisateur sera capable de contrôler un vaisseau spatial et de tirer plusieurs ennemis tout en voyageant dans l'espace.
Ouvrez Flash et créez un document de 320 pixels de large et 480 pixels de haut. Définir le taux de trame à 24fps.
Notre interface sera composée de plusieurs sprites, champs de texte et clips.
Continuez sur les prochaines étapes et nous verrons comment le créer..
L'arrière-plan sera très simple, car les étoiles sont générées à l'aide d'ActionScript.
Créez un rectangle de 320x480 px et remplissez-le de noir. Vous pouvez ajouter un léger dégradé radial.
Utilisez le panneau d’alignement (Cmd + K) pour le centrer dans l’étape..
J'ai utilisé une excellente bibliothèque de sprites dans la démo de ce tutoriel, ils font partie de SpriteLib de Flying Yogi.
Importez les images-objets sur la scène (Cmd + R), convertissez-les en MovieClips et ajustez les images pour afficher une belle animation..
Un Dynamic TextField sera nécessaire pour afficher le score du jeu. Utilisez l'outil Texte (T) pour en créer un. nomme le scoreTF et placez-le dans le coin inférieur gauche de la scène.
Pour utiliser une police personnalisée dans un champ de texte dynamique, vous devez l'incorporer dans votre application. Sélectionnez le champ de texte et utilisez le Propriétés du panneau Intégrer? bouton pour ajouter les caractères nécessaires.
La vue d'alerte sera affichée lorsque l'utilisateur atteindra un état de jeu (gagner, perdre). Utilisez la police de votre choix pour créer un écran simple avec deux champs de texte dynamiques. nomme les titreTF et msgTF, convertir la boîte en un MovieClip et définir son nom de classe sur AlertView.
Nous utiliserons les effets sonores pour améliorer la sensation du jeu. Vous pouvez trouver les sons utilisés dans cet exemple sur Soungle.com en utilisant les mots-clés. espace, explosion et laser.
Nous utiliserons un moteur d'interpolation différent de celui par défaut inclus dans Flash. Cela augmentera les performances et sera plus facile à utiliser..
Vous pouvez télécharger Tween Nano depuis son site officiel.
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; la importation directive met à la disposition de votre code des classes et des packages définis en externe.
import flash.display.Sprite; import flash.ui.Mouse; import com.greensock.TweenNano; importer com.greensock.easing.Expo; import flash.events.MouseEvent; import flash.events.Event; 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 sur eux.
étoiles var privées: Sprite; // stockera les étoiles d'arrière-plan private var starsCopy: Sprite; // Une autre version du fond des étoiles private var ship: Ship; balles var privé: vecteur.= nouveau vecteur. (); // tiendra les balles au stade privé var var ennemis: Array = new Array (); // tiendra les ennemis en scène privé var timer: Timer = new Timer (500); // Heure à laquelle un nouvel ennemi apparaîtra privé var alertView: AlertView; vies privées privées: vecteur. ; // stockera les vies de graphismes privés private var: Boss; privé var bossHealth: int = 20; private var laserSound: Laser = nouveau Laser (); private var bossSound: UFO = nouvel UFO (); private var exSound: Explosion = nouvelle Explosion ();
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 de document..
Il appelle les fonctions nécessaires pour démarrer le jeu. Vérifiez ces fonctions dans les prochaines étapes.
fonction finale publique Main (): void
buildStars (200); // Cette fonction lance la création du jeu
le buildStars () Cette méthode utilise le Star MC de la bibliothèque pour créer un arrière-plan avec des étoiles placées au hasard. Deux sprites sont créés pour interpoler les deux et simuler le mouvement, en utilisant la même astuce que dans ce tutoriel de défilement de parallaxe..
fonction finale privée buildStars (n: int): void stars = new Sprite (); pour (var i: int = 0; i < n; i++) var star:Star = new Star(); star.alpha = Math.random() * 1; star.scaleX = Math.random() * 1; star.scaleY = star.scaleX; star.x = Math.floor(Math.random() * stage.stageWidth); star.y = Math.floor(Math.random() * stage.stageHeight-20); stars.addChild(star); /* Create another stars sprite to make animation */ starsCopy = new Sprite(); for(var j:int = 0; j < n; j++) var star2:Star = new Star(); star2.alpha = Math.random() * 1 + 0.2; star2.scaleX = Math.random() * 1; star2.scaleY = star.scaleX; star2.x = Math.floor(Math.random() * stage.stageWidth); star2.y = Math.floor(Math.random() * stage.stageHeight-20); starsCopy.addChild(star2); starsCopy.y = -stage.stageHeight; addChild(starsCopy); addChild(stars); addShip(); //Add ship (player) to stage
Cette fonction crée une instance du Ship MC dans la bibliothèque et la place sur la scène avec une animation soignée..
fonction finale privée addShip (): void ship = new Ship (); ship.x = stage.stageWidth * 0.5; ship.y = stage.stageHeight + ship.height; addChild (navire); TweenNano.to (navire, 2, y: (stage.stageHeight - navire.height) - 10, facilité: Expo.easeOut, onComplete: auditeurs ()); addLives ();
Réutilisation du navire MC, trois images-objets de navire sont ajoutées à la scène en tant qu'indicateur de durée de vie. Les vaisseaux sont ajoutés à un vecteur pour vérifier le jeu plus tard dans le jeu..
fonction finale privée addLives (): void lives = new Vector.(); pour (var i: int = 0; i < 3; i++) var live:Ship = new Ship(); live.stop(); live.width = 16; live.height = 16; live.x = (stage.stageWidth - live.width * 0.7) - (5 * i+1) - live.width * i; live.y = stage.stageHeight - live.height * 0.7; addChild(live); lives.push(live);
Ces lignes ajouteront les auditeurs nécessaires à la scène et à la minuterie; cela inclut les événements de souris, les événements de minuterie et les événements EnterFrame qui mettront à jour le jeu chaque image.
auditeurs de fonction finale privés (action: String = 'add'): void if (action == 'add') stage.addEventListener (MouseEvent.MOUSE_MOVE, moveShip); stage.addEventListener (MouseEvent.MOUSE_DOWN, shoot); timer.addEventListener (TimerEvent.TIMER, addEnemy); stage.addEventListener (Event.ENTER_FRAME, mise à jour); timer.start (); else stage.removeEventListener (MouseEvent.MOUSE_MOVE, moveShip); stage.removeEventListener (MouseEvent.MOUSE_DOWN, shoot); timer.removeEventListener (TimerEvent.TIMER, addEnemy); stage.removeEventListener (Event.ENTER_FRAME, mise à jour); timer.stop ();
Le vaisseau du joueur sera contrôlé par la souris, la fonction suivante gère:
fonction finale privée moveShip (e: MouseEvent): void ship.x = mouseX;
Notre navire sera capable de tirer des balles pour se détruire et se protéger de ses ennemis. Cette fonction s'exécutera chaque fois que l'utilisateur cliquera sur la scène et placera une balle devant le vaisseau qui sera ensuite déplacée par le mettre à jour() une fonction. Il joue également un son de tir.
shoot de fonction finale privée (e: MouseEvent): void var balle: Bullet = new Bullet (); bullet.x = ship.x; bullet.y = ship.y - (ship.height * 0.5); laserSound.play (); // Joue le son bullets.push (bullet); addChild (bullet);
Ce ne serait pas un tireur sans quelque chose à tirer. Les ennemis sont créés par la fonction suivante, un minuteur est utilisé pour créer un ennemi toutes les 500 millisecondes (vous pouvez modifier cette valeur dans l'étape des variables), qui est ensuite déplacé par le mettre à jour() une fonction.
fonction finale privée addEnemy (e: TimerEvent): void var ennemi: Enemy = new Enemy (); ennemi.x = Math.floor (Math.random () * (stage.stageWidth - ennemis.width)); ennemi.y = -enemy.height; ennemis.push (ennemi); addChild (ennemi);
La vue d'alerte affiche les informations du joueur sur l'état du jeu. Elle s'affiche lorsqu'un événement de jeu est atteint..
Deux paramètres sont utilisés dans cette fonction:
Accentsconagua
alerte de fonction finale privée (t: String, m: String): void listeners ('remove'); / * Créer et afficher alert * / alertView = new AlertView (); alertView.x = stage.stageWidth * 0.5; alertView.y = stage.stageHeight * 0.5; alertView.titleTF.text = t; alertView.msgTF.text = m; alertView.addEventListener (MouseEvent.MOUSE_UP, redémarrer); addChild (alertView); le mettre à jour() La fonction est exécutée à chaque image, elle gère tous les mouvements et collisions du jeu. C'est la fonction de boucle de jeu pour ce jeu. Jetez un coup d'œil aux prochaines étapes pour voir son comportement.
mise à jour de fonction finale privée (e: Event): void // code
L'arrière-plan est déplacé chaque image pour simuler un voyage dans l'espace; lorsque le sprite des étoiles du bas atteint la limite d'étape, il est déplacé vers le haut, créant une boucle.
étoiles.y + = 5; étoilesCopie.y + = 5; if (stars.y> = stage.stageHeight - 20) stars.y = -stars.height; else if (starsCopy.y> = stage.stageHeight - 20) starsCopy.y = -stars.height;
Les lignes de code suivantes vérifient s’il ya des puces dans l’étape; si cela est vrai, les balles sont déplacées vers le haut; quand une balle n'est plus visible, elle est détruite.
if (bullets.length! = 0) for (var i: int = 0; i < bullets.length; i++) bullets[i].y -= 10; /* Destroy offstage bullets */ if(bullets[i].y < 0) removeChild(bullets[i]); bullets[i] = null; bullets.splice(i, 1);
Nous allons ajouter un grand et un mauvais patron au jeu. Lorsque l'utilisateur atteint un certain score, le patron apparaîtra:
if (int (scoreTF.text) == 500 && boss == null) boss = new Boss (); bossSound.play (); boss.x = stage.stageWidth * 0.5; boss.y = -boss.height; TweenNano.to (boss, 3, y: 80); addChild (patron);
Les ennemis sont également déplacés à chaque image. Ce code trouve tous les ennemis dans la scène en utilisant le tableau et les déplace de 5 pixels vers le bas.
si (ennemis.longueur! = 0) pour (var j: int = 0; j < enemies.length; j++) /* Move enemies */ enemies[j].y += 5;
Ici, nous vérifions si un ennemi entre en collision avec le navire du joueur; si c'est le cas, une série d'actions est effectuée en commençant par le son de l'explosion:
/ * si l'ennemi frappe le joueur * / if (ennemis [j] .hitTestObject (navire)) exSound.play ();
Après avoir joué le son, l'ennemi est retiré de la scène et de la matrice et est défini sur null afin de (éventuellement) l'effacer de la mémoire..
/ * Supprimer l'ennemi * / removeChild (ennemis [j]); ennemis [j] = null; ennemis.splice (j, 1);
Une des icônes du compteur de vies sera également supprimée de la même manière que l'ennemi.
/ * Remove Live * / removeChild (lives [vies.longueur-1]); vies [vies.longueur-1] = nul; lives.splice (lives.length-1, 1);
Ensuite, nous vérifions le nombre de vies, si le joueur est hors de vies, nous utilisons la méthode d'alerte pour afficher une alerte indiquant que la partie est terminée, s'il y a encore des vies disponibles, le navire est animé sur la scène..
/ * S'il ne reste plus aucune vie, fin du jeu * / if (lives.length == 0) alert ('Game Over', 'Cliquez pour continuer'); else / * Tween Ship * / ship.y = stage.stageHeight + ship.height; TweenNano.to (ship, 2, y: (stage.stageHeight - ship.height), facilité: Expo.easeOut); Le code suivant gère les collisions de boss, il utilise la même méthode que celle utilisée dans la collision navire-ennemi. Ici nous utilisons le bossHealth variable pour déterminer quand le boss est vaincu.
pour (var k: int = 0; k < bullets.length; k++) /* Hit Boss */ if(boss != null && bullets[k].hitTestObject(boss)) exSound.play(); removeChild(bullets[k]); bullets[k] = null; bullets.splice(k, 1); bossHealth--; scoreTF.text = String(int(scoreTF.text) + 50); if(bossHealth <= 0 && boss != null) removeChild(boss); boss = null; alert('You Won', 'Click to continue'); Un autre code de détection de collision. Les balles du tableau sont testées pour la collision avec les ennemis; lorsque cela se produit, les deux sont retirés de la scène et leurs tableaux.
/ * Si la balle frappe l'ennemi * / if (bullets.length! = 0 && ennemis [j]! = null && balles [k] .hitTestObject (ennemis [j])) exSound.play (); // Jouer le son removeChild (ennemis [j]); ennemis [j] = null; ennemis.splice (j, 1); removeChild (balles [k]); balles [k] = null; bullets.splice (k, 1); scoreTF.text = Chaîne (int (scoreTF.text) + 50); // Ajouter une partition au champ de texte en cours
Le redémarrage une fonction() est appelé par le alerte() fonction, il gère les opérations nécessaires pour réinitialiser le jeu et le redémarrer.
redémarrage de la fonction finale privée (e: MouseEvent): void // code
La première partie de la redémarrer() fonction gère les sprites, les lignes de code suivantes suppriment toutes les images de la scène.
/ * Supprimer Graphics * / removeChild (ship); ship = null; pour (var i: int = 0; i < bullets.length; i++) removeChild(bullets[i]); bullets[i] = null; bullets.length = 0; for(var j:int = 0; j < enemies.length; j++) removeChild(enemies[j]); enemies[j] = null; enemies.length = 0; for(var k:int = 0; k < lives.length; k++) removeChild(lives[k]); lives[k] = null; lives.length = 0; removeChild(stars); stars = null; removeChild(starsCopy); starsCopy = null; if(boss != null) removeChild(boss); boss = null;
La prochaine partie de redémarrer() supprime la vue d'alerte de la scène:
/ * Supprimer l'alerte * / removeChild (alertView); alertView = null;
Dans la prochaine partie de redémarrer(), les variables de score et de santé du boss sont réinitialisées:
/ * Reset Score * / scoreTF.text = '0'; / * Réinitialiser la santé du boss * / bossHealth = 50;
Enfin, à la fin de redémarrer(), nous appelons la méthode qui commence tout:
/ * Redémarrez * / buildStars (200);
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 appris à créer un jeu Space Shooter avec toutes ses fonctionnalités de base. Essayez de l'étendre en utilisant ce que vous connaissez déjà.!
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
