Share
L'un des jeux Flash les plus populaires à ce jour est Bloons, dans lequel vous incarnez un singe à lancer des fléchettes à des ballons éclatants. Il a engendré de nombreuses suites, allant même jusqu'à d'autres genres comme la tour de défense. Ce didacticiel vous montrera comment créer votre propre jeu de bulles à l'aide du moteur QuickBox2D..
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Cliquez et maintenez enfoncé pour déterminer l'angle du tir. Essayez de faire éclater tous les ballons!
Dans ce didacticiel, nous allons utiliser une série de classes ActionScript pour créer un jeu Bloons Inspired. L’objectif du jeu est de tirer sur les ballons pour les faire éclater tous.
Ouvrez Flash et créez un document de 480 pixels de large, 320 pixels de haut. Définir le taux de trame à 24fps.
Une interface colorée et simple sera utilisée, comportant plusieurs formes, boutons et MovieClips. Au cours des prochaines étapes, nous allons construire cette interface graphique. Les graphiques de l'écureuil et du gland proviennent de openclipart.org.
Cet arrière-plan a été créé en Flash à l'aide de simples formes rectangulaires et ovales. La barre brune en bas servira de barre d’information.
Pour créer le titre, sélectionnez l'outil Texte (T) et changez la couleur en #EEEEEE; écrivez votre texte de titre (j'ai utilisé la police GoodDog) et ajoutez une simple ombre portée. Pour la bulle, sélectionnez l'outil Ovale (O) et créez un ovale 20x30 px # FFCE47. Utilisez l'outil Poly Star pour le petit triangle situé en dessous..
Utilisez à nouveau le Outil texte pour créer deux boutons comme indiqué dans l'image ci-dessus. Convertissez-les en boutons et donnez-leur des noms d'instances descriptifs afin que nous puissions facilement les utiliser plus tard dans le code. Convertir les graphiques sur la scène en un seul MovieClip et nommez-le TitleView - n'oubliez pas de vérifier la Exporter pour la boîte ActionScript.
Ceci est l'écran de jeu, qui contient tous les éléments dynamiques et interactifs du jeu. D'autres seront générés au moment de l'exécution à l'aide d'ActionScript. Vous pouvez lire les noms d'occurrence dans l'image ci-dessus.
le Crédits l'écran apparaîtra devant le Titre écran; utilisez les graphiques et les polices d’avant pour le créer. Nomme le CréditsVoir et n'oubliez pas de vérifier la Exporter pour ActionScript boîte.
Une alerte sera affichée lorsque tous les ballons auront été sautés. il affichera un message de jeu et le score. Utilisez le Outil Rectangle pour le créer et définir son nom d'instance sur AlertView. Encore une fois, marquez le Exporter pour ActionScript boîte.
Nous utiliserons des effets sonores pour améliorer le ressenti du jeu. vous pouvez trouver le son utilisé dans cet exemple sur Soungle.com en utilisant le mot-clé pop.
Nous utiliserons un moteur d'interpolation différent de celui par défaut inclus dans Flash, ce qui augmentera les performances et sera plus facile à utiliser..
Vous pouvez télécharger TweenNano depuis son site officiel.
Nous allons utiliser la bibliothèque de physique utile QuickBox2D pour créer ce jeu. Si vous ne le connaissez pas, vous pouvez suivre la série Introduction de Activetuts.+.
Vous pouvez télécharger QuickBox2D depuis son site officiel.
Nous allons rendre notre application interactive en utilisant une classe externe. Ajouter son nom à la Classe champ dans le Publier section de la Propriétés panneau pour associer la FLA à la classe de document Main.
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.MovieClip; importer com.actionsnippet.qbox. *; import com.greensock.TweenNano; importer com.greensock.easing.Expo; import flash.events.MouseEvent; importer Box2D.Common.Math. *; import flash.events.Event; import flash.net.navigateToURL; import flash.net.URLRequest;
Ce sont les variables que nous allons utiliser. Lisez les commentaires dans le code pour en savoir plus à leur sujet. certains de leurs noms sont explicites, il n'y aura donc pas de commentaire.
private var titleView: TitleView = new TitleView (); crédits var privés: CreditsView; monde var privé: QuickBox2D; private var acorn: QuickObject; private var acorns: Array = []; // stocke les glands jetés. Contacts var privés: QuickContacts; // utilisé pour gérer les collisions dans quickbox2d private var balloons: Array = []; // stocke les ballons au stade private var yImpulse: Number = 0; // force verticale pour tirer le gland privé var xImpulse: int = 3; // force horizontale par défaut du gland levé private var pop: Pop = new Pop (); // le son dans la bibliothèque
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. Le constructeur de la classe de document est un cas particulier: il s'exécute au début du jeu..
Nous l'utilisons pour appeler les fonctions nécessaires au démarrage du jeu. Vérifiez ces fonctions dans les prochaines étapes.
fonction finale publique Main (): void // Code
Nous commençons par ajouter TitleView de la bibliothèque à la scène.
addChild (titleView); startButtonListeners ();
Cela ajoutera les écouteurs de la souris aux boutons de la vue du titre, ce qui nous mènera à l'écran de jeu ou de crédits..
fonction finale privée startButtonListeners (action: String = 'add'): void if (action == 'add') titleView.creditsBtn.addEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.playBtn.addEventListener (MouseEvent.MOUSE_UP, showGameView); else titleView.creditsBtn.removeEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.playBtn.removeEventListener (MouseEvent.MOUSE_UP, showGameView);
le Crédits L’écran s’affiche lorsque l’utilisateur clique sur le bouton Crédits. Un écouteur de souris est ajouté au complet MovieClip l'enlever.
fonction finale privée showCredits (e: MouseEvent): void titleView.creditsBtn.visible = false; titleView.playBtn.visible = false; crédits = new CreditsView (); addChild (crédits); TweenNano.from (credits, 0.3, x: -credits.width, onComplete: function (): void credits.addEventListener (MouseEvent.MOUSE_UP, hideCredits););
Quand le Crédits l'écran est cliqué, il sera interpolé et retiré de la scène.
fonction finale privée hideCredits (e: MouseEvent): void TweenNano.to (crédits, 0.3, x: -credits.width, onComplete: function (): void titleView.creditsBtn.visible = true; titleView.playBtn.visible = true; credits.removeEventListener (MouseEvent.MOUSE_UP, hideCredits); removeChild (crédits); credits = null;);
Les lignes suivantes suppriment le Titre écran et quitter le Jeu Écran visible. Ici, nous appelons également les fonctions nécessaires pour démarrer le jeu; ces fonctions sont expliquées dans les prochaines étapes.
Accentsconagua
fonction finale privée showGameView (e: MouseEvent): void TweenNano.to (titleView, 0.3, y: -titleView.height, onComplete: fonction (): void startButtonListeners ('rmv'); removeChild (titleView); titleView = null; startGame ();); Arrêtons-nous ici pour faire un test rapide et pour nous assurer que notre code de jeu fonctionne:
Gardez à l'esprit que certaines lignes ont été commentées, car certaines fonctions n'ont pas encore été créées..
Rappelez-vous que les jalons sont inclus dans les fichiers sources. Si, pour une raison quelconque, votre fichier ne l'imite pas, jetez un coup d'œil à la source pour voir ce qui le cause..
Cette fonction ajoute les écouteurs de souris nécessaires pour effectuer la prise de vue en gland..
fonction finale privée gameListeners (action: String = 'add'): void if (action == 'add') bg.addEventListener (MouseEvent.MOUSE_DOWN, startCharge); bg.addEventListener (MouseEvent.MOUSE_UP, shot); restartBtn.addEventListener (MouseEvent.MOUSE_UP, restartLvl); stage.addEventListener (Event.ENTER_FRAME, mise à jour); else bg.removeEventListener (MouseEvent.MOUSE_DOWN, startCharge); bg.removeEventListener (MouseEvent.MOUSE_UP, shot); restartBtn.removeEventListener (MouseEvent.MOUSE_UP, restartLvl); stage.removeEventListener (Event.ENTER_FRAME, mise à jour);
Ici, nous commençons le jeu en créant le monde Box2D et en appelant les fonctions qui créeront les bulles et géreront les événements de souris..
fonction finale privée startGame (): void / * Hide gCircle * / gCircle.visible = false; / * Nouveau monde B2D * / world = new QuickBox2D (this, debug: 0); contacts = world.addContactListener (); contacts.addEventListener (QuickContacts.ADD, onAdd); / * Créer une fonction ballon * / gameListeners (); createBalloons ();
Imbriqué pour Des boucles sont utilisées pour placer les ballons sur la scène. Cette fonction utilisera le QuickBox2D addBox méthode pour créer un nouvel objet Box2D qui sera défini comme Capteur - cela signifie qu'il n'y aura pas de réaction physique à la collision (le gland ne rebondira pas), mais une collision sera toujours détectée. En utilisant cette méthode, nous pouvons détruire le ballon mais laisser le gland continuer son chemin comme si de rien n'était..
Le ballon est ensuite ajouté à un tableau; cela nous donnera accès à tous les ballons en dehors de cette fonction.
fonction finale privée createBalloons (h: int = 5, v: int = 3): void pour (var i: int = 0; i < h; i++) for(var j:int = 0; j < v; j++) var balloon:QuickObject = world.addBox(x:10 + (i * 0.66), y:4 + (j * 1), width: 0.66, height: 1, skin:Balloon, fixedRotation:true, draggable:false, density:0); balloon.shape.m_isSensor = true; balloons.push(balloon); /* Set balloon counter */ targetTF.text = String(balloons.length); /* Start Physics */ world.start();
Bien sûr, vous n'avez pas besoin d'utiliser imbriqué pour boucles pour positionner les ballons; C’est le moyen le plus simple de les positionner dans une grille, mais vous pouvez les positionner manuellement si vous préférez..
Cette fonction gère la collision mentionnée à l'étape 26. La première chose à faire est de parcourir le tableau de ballons, en vérifiant chacun d'eux pour voir s'il entre en collision avec le gland..
fonction finale privée onAdd (e: Event): void pour (var i: int = 0; i < balloons.length; i++) if(contacts.isCurrentContact(balloons[i], acorn))
Si la collision est vraie, nous appelons le détruire() méthode de la bulle QuickObject et supprimer l'élément du tableau.
ballons [i] .destroy (); balloons.splice (i, 1);
Ensuite, nous émettons un son indiquant le coup, améliorant le sentiment de jeu..
pop.play ();
Les marqueurs de score et de cible sont mis à jour en fonction des ballons sautés et des ballons laissés..
scoreTF.text = Chaîne (int (scoreTF.text) + 50); targetTF.text = String (balloons.length);
Une alerte est appelée lorsque tous les ballons sont éclatés; nous verrons cette fonction plus tard dans le tutoriel.
if (targetTF.text == '0') alert ();
Ce code révélera l'indicateur de direction du gland, réinitialisera la variable y d'impulsion du gland et ajoutera un écouteur enterframe qui gérera l'objectif..
fonction finale privée startCharge (e: MouseEvent): void yImpulse = 0; gCircle.visible = true; gCircle.addEventListener (Event.ENTER_FRAME, charge);
L’indicateur de visée pivote pour indiquer la direction dans laquelle le gland sera tiré et ajuste la variable d’impulsion y en conséquence. La direction du tir est affectée par deux variables, xImpulse et y Impulse, qui sont combinés pour former un impulsion vecteur plus tard. xImpulse reste constant, et y Impulse est modifié lorsque l'utilisateur enfonce le bouton de la souris.
taxe sur la fonction finale privée (e: événement): void gCircle.rotation - = 3; y Impulse - = 0,2; / * Empêche la rotation excessive * / if (gCircle.rotation < -80) yImpulse = -5.4; gCircle.rotation = -80;
Les actions suivantes se produisent lorsque le bouton de la souris est levé.
prise de fonction finale privée (e: MouseEvent): void / * masquer gCircle * / gCircle.removeEventListener (Event.ENTER_FRAME, charge); gCircle.visible = false; gCircle.rotation = 0; / * Créer un nouveau gland * / acorn = world.addBox (x: 2.76, y: 7.33, width: 0.66, height: 0.53, skin: Acorn, fixedRotation: true, draggable: false, densité: 1); glands.push (gland); / * Shoot acorn * / var impulse: b2Vec2 = nouveau b2Vec2 (xImpulse, yImpulse); acorn.body.ApplyImpulse (impulse, acorn.body.GetWorldCenter ()); / * Mise à jour du compteur de glands * / acornsTF.text = String (int (acornsTF.text) -1);
Arrêtons-nous ici pour faire un test rapide et pour nous assurer que notre code de jeu fonctionne:
Gardez à l'esprit que certaines lignes ont été commentées car ces fonctions n'ont pas encore été créées..
La fonction de mise à jour effectuera une série d'opérations EnterFrame. Voyons ces actions dans les étapes suivantes.
mise à jour de fonction finale privée (e: Event): void
Les lignes suivantes vont supprimer chaque gland qui sort de la scène.
/ * Enlevez les glands hors scène * / pour (var i: int = 0; i < acorns.length; i++) if(acorns[i].y > 10.66) glands [i] .destroy (); glands.splice (i, 1);
La partie est terminée lorsque le joueur manque de glands (ou détruit tous les ballons mentionnés précédemment).
/ * Vérification du niveau échoué * / if (int (acornsTF.text) <= 0) alert('lose'); Ce code s'exécute lorsque vous cliquez sur le bouton Redémarrer. Il va réinitialiser les variables nécessaires et les auditeurs pour redémarrer le niveau.
fonction finale privée restartLvl (e: MouseEvent): void / * Supprimer les auditeurs * / gameListeners ('rmv'); / * Destroy World * / world = null; / * Détruire les ballons, réinitialiser le score et les glands * / pour (var i: int = 0; i < balloons.length; i++) balloons[i].destroy(); scoreTF.text = '0'; acornsTF.text = '5'; balloons = [];//clear balloons array startGame(); Cette fonction arrêtera le jeu et affichera le message Game Over. Il ajoute également un écouteur de souris pour réinitialiser le jeu lorsque vous cliquez dessus..
alerte de fonction finale privée (gameState: String = 'win'): void gameListeners ('rmv'); world.stop (); var alert: AlertView = new AlertView (); alert.x = stage.stageWidth * 0.5; alert.y = stage.stageHeight * 0,5; alert.scoreTF.text = scoreTF.text; alert.addEventListener (MouseEvent.MOUSE_UP, redémarrer); if (gameState == 'lost') alert.titleTF.text = 'Level Failed!'; addChild (alerte); TweenNano.from (alert, 0.6, scaleX: 0.2, scaleY: 0.2, facilité: Expo.easeOut); Ce code rechargera le fichier SWF, restaurera les valeurs et reviendra à l'écran initial..
redémarrage de la fonction finale privée (e: MouseEvent): void browseToURL (new URLRequest (stage.loaderInfo.url), '_level0');
Faites vos propres modifications au jeu et profitez-en pour le créer. Peut-être que vous pourriez changer la disposition des bulles, ou ajouter de nouveaux niveaux, ou modifier les graphiques.
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
