Share
Jetez un coup d'œil à ce didacticiel Premium pour créer un jeu de réflexion amusant inspiré de Frenzic, utilisant Flash et ActionScript 3..
Dans la démo ci-dessus, remplissez les cases extérieures avec des carrés de couleur. Vous obtenez plus de points pour remplir une boîte avec des carrés de la même couleur.
À l'aide des outils de dessin de Flash, nous allons créer une interface graphique attrayante, optimisée par plusieurs classes ActionScript 3..
Le joueur pourra cliquer sur quatre emplacements différents pour trier les blocs de couleur sur les carrés. Vous obtiendrez plus de points si vous remplissez un carré avec une seule couleur de bloc..
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 # 0D6191, # 001217 et le centrer dans la scène. Utilisez le même outil pour créer une ligne noire 2x480px avec 20% d'alpha, appuyez sur CMD + D pour la dupliquer à plusieurs reprises et étalez les lignes pour obtenir l'effet dans l'image ci-dessus..
Sélectionnez l'outil Texte (T), sélectionnez une belle police et écrivez le titre de votre jeu. J'ai utilisé ce format: Orbitron Bold, 60 pt, # A3FF24. Vous pouvez ajouter un simple filtre luminescent pour le rendre meilleur.
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 Clip du film et mettre son nom à TitleView; marque le Exporter pour ActionScript boîte et supprimer le clip de la scène.
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. Nommez les champs de texte viesTF et scoreTF.
Utilisez le Outil Rectangle (R) pour créer un carré de 70x70px et le remplir en utilisant le dégradé d’arrière-plan, le convertir en MC et appuyer sur CMD + D pour le dupliquer afin d’en avoir cinq au total. Utilisez le panneau d'alignement pour les placer comme indiqué dans l'image.
Les noms d'instance doivent correspondre à leurs positions - à savoir: haut bas Gauche Droite et le centre sera titulaire principal.
Utilisez la même technique que celle utilisée dans la dernière étape pour créer trois blocs de 30x30px, les convertir en MC et les nommer en fonction de sa couleur: OrangeBlock, PurpleBlock et GreenBlock. N'oubliez pas de marquer le Exporter pour ActionScript boîte.
Une alerte apparaîtra lorsque vous perdez toutes vos vies et indiquera le score final atteint. Utilisez le Outil primitif rectangle pour le créer et le remplir avec ce dégradé linéaire: # 000000 à # 333333. 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 de celui par défaut inclus dans le flash, ce qui augmentera les performances et facilitera l'utilisation..
Vous pouvez télécharger Tween Nano depuis son site officiel.
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. cloche et bourdonner. Ajoutez-les à votre bibliothèque, avec les noms de classe de Cloche, Bell4, et Bourdonner, respectivement.
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 com.greensock.TweenNano; importer com.greensock.easing.Bounce; import flash.utils.Timer; import flash.events.TimerEvent; 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 noms sont explicites, il n'y aura donc pas de commentaire.
private var titleView: TitleView = new TitleView (); crédits var privés: CreditsView; var privé blockColor: vecteur.= nouveau vecteur. (); // Stocke les couleurs disponibles, utilisées pour créer de nouvelles instances de blocs private var blocks: Vector. = nouveau vecteur. (); // va stocker tous les blocs à l’écran pour y accéder à tout moment, positions privées var: Vector. = nouveau vecteur. (); // Contient les positions possibles des blocs private var currentXPosition: int; private var currentYPosition: int; private var eventTarget: Object; // Utilisé pour accéder à la cible de l'événement de la fonction de lieu private var timer: Timer = new Timer (3000); // vous aurez 3 secondes pour placer le bloc au centre private var lives: int = 5; score var privé: int = 0; Cloche var privée: Bell = new Bell (); var privée 4: Bell4 = nouvelle Bell4 (); Var Buzz privé: Buzz = nouveau Buzz ();
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 (dans la classe de document) le premier à s'exécuter lors du chargement du projet..
Il appelle les fonctions nécessaires pour démarrer le jeu. Vérifiez ces fonctions dans les prochaines étapes.
fonction finale publique Main (): void // code?
Nous allons commencer par ajouter le TitleView à la scène; si nous ne le faisons pas, le premier écran sera le GameView.
addChild (titleView);
le couleur de bloc le vecteur est utilisé pour créer une nouvelle instance du bloc sélectionné; les paramètres sont les blocs que nous avons créés aux étapes précédentes.
le positions vecteur stocke le possible X et y les positions qu'un bloc peut avoir; mélanger cela nous donnera la position finale par rapport à la titulaire principal MC.
Accentsconagua
blockColor.push ('orange', 'vert', 'violet'); positions.push (5, 35); startButtonListeners (); Dans cette fonction, nous ajoutons les écouteurs de la souris aux boutons de la vue des titres. Cela nous mènera à l'écran de jeu ou à l'écran de crédits.
fonction finale privée startButtonListeners (action = 'add'): void if (action == 'add') titleView.creditsB.addEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.startB.addEventListener (MouseEvent.MOUSE_UP, showGameView); else titleView.creditsB.removeEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.startB.removeEventListener (MouseEvent.MOUSE_UP, showGameView);
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 showCredits (e: MouseEvent): void crédits = new CreditsView (); addChild (crédits); TweenNano.from (credits, 0.3, x: stage.stageWidth, onComplete: function (): void titleView.visible = false; credits.addEventListener (MouseEvent.MOUSE_UP, hideCredits););
Lorsque l’écran des crédits est cliqué, il sera tweened de la scène et supprimé.
fonction finale privée hideCredits (e: MouseEvent): void titleView.visible = true; TweenNano.to (crédits, 0.3, x: stage.stageWidth, onComplete: fonction (): void crédits.removeEventListener (MouseEvent.MOUSE_UP, hideCredits); removeChild (crédits); crédits = null;);
Quand le Début le bouton est enfoncé, la vue du titre est interpolée et supprimée pour révéler la vue du jeu.
fonction finale privée showGameView (e: MouseEvent): void TweenNano.to (titleView, 0.3, y: -titleView.height, onComplete: fonction (): void startButtonListeners ('rmv'); removeChild (titleView); titleView = nul; ); counter.gotoAndStop (1); addListeners (); Arrêtons-nous ici pour faire un test rapide et nous assurer que notre écran de commutation le code fonctionne (testez d’abord les crédits pour pouvoir revenir en arrière). Définissez la classe de document de votre fichier FLA sur Principale.
Rappelez-vous que les jalons sont inclus dans les fichiers source, donc si pour une raison quelconque votre fichier ne l'imite pas, jetez un coup d'œil à la source pour voir ce qui peut en résulter.
Revenez au code et ajoutez la fonction suivante. Il ajoutera un écouteur de souris aux carrés afin que vous puissiez cliquer dessus pour placer le bloc actuel..
fonction finale privée addListeners (): void up.addEventListener (MouseEvent.MOUSE_UP, placeBlock); right.addEventListener (MouseEvent.MOUSE_UP, placeBlock); down.addEventListener (MouseEvent.MOUSE_UP, placeBlock); left.addEventListener (MouseEvent.MOUSE_UP, placeBlock);
Ces tableaux sont créés à l'intérieur des MovieClips carrés, ils servent à enregistrer les blocs, les couleurs et les positions à l'intérieur de chaque carré..
Les lettres représentent les positions suivantes:
Continuer le addListeners () une fonction:
/ * Crée un tableau pour chaque conteneur afin de déterminer quand il est plein et la couleur des blocs * / up.blocks = []; right.blocks = []; down.blocks = []; left.blocks = []; / * Crée un booléen pour chaque conteneur afin d'éviter de placer des blocs dans la même position * / up.a = false; right.a = false; down.a = false; left.a = false; up.b = false; right.b = false; down.b = false; left.b = false; up.c = faux; right.c = false; down.c = false; left.c = false; up.d = false; right.d = false; down.d = false; left.d = false; newBlock (true);
Ce code sélectionne une couleur de bloc aléatoire dans le vecteur, il sera utilisé pour instancier le bloc réel. Un paramètre est utilisé pour déterminer si le minuteur pour commencer à compter sera activé.
fonction finale privée newBlock (firstTime: Boolean = false): void / * Nouveau bloc * / var randomBlock: int = Math.floor (Math.random () * 3); bloc var: Sprite; commutateur (blockColor [randomBlock]) case 'orange': block = new OrangeBlock (); Pause; case 'green': block = new GreenBlock (); Pause; case 'purple': block = new PurpleBlock (); Pause; défaut: trace ('BlockColor Error'); Pause; Après avoir sélectionné la couleur du bloc, la position où il sera placé est calculée à l'aide du positions Vecteur puis ajouté au vecteur de blocs et à la scène. Continuer le newBlock () une fonction:
currentXPosition = positions [Math.floor (Math.random () * 2)]; currentYPosition = positions [Math.floor (Math.random () * 2)]; block.x = mainHolder.x + currentXPosition; block.y = mainHolder.y + currentYPosition; blocks.push (block); addChild (bloc);
Avant de continuer le jeu, nous devons vérifier que le bloc nouvellement créé peut effectivement être placé dans un conteneur carré. Le code suivant vérifie chaque tableau de conteneurs pour s’assurer qu’une position vide est disponible dans l’une des cases où le bloc peut être placé; s'il n'y en a pas, le bloc est détruit et la fonction est appelée à nouveau pour en générer un autre.
/ * Recherche un espace disponible pour déplacer le bloc * / var position: Array = [currentXPosition, currentYPosition]; if (String (position) == '5,5' && up.a && right.a && down.a && left.a) removeChild (block); block = null; newBlock (); else if (String (position) == '35, 5 '&& up.b && right.b && down.b && left.b) removeChild (block); block = null; newBlock (); else if (String (position) == '5,35' && up.c && right.c && down.c && left.c) removeChild (block); block = null; newBlock (); else if (String (position) == '35, 35 '&& up.d && right.d && down.d && left.d) removeChild (block); block = null; newBlock ();
Si vous avez utilisé une présentation différente pour votre jeu, veillez à modifier la valeur que vous vérifiez (c.-à-d. Non '35, 35 ', car les blocs de votre jeu n'apparaîtront pas nécessairement à ce stade).
La minuterie commence à compter lorsque la fonction est appelée pour la première fois..
if (firstTime) / * Démarrer le minuteur * / timer.addEventListener (TimerEvent.TIMER, timesUp); timer.start (); counter.play (); // termine la fonction newBlock ()
Trois secondes sont données pour placer un bloc dans un conteneur carré. Si ce temps s'écoule et que le bloc est toujours dans le carré central, une vie est supprimée..
fonction finale privée timesUp (e: TimerEvent): void / * Remove Live * / lives--; livesTF.text = String (vies); buzz.play ();
Après avoir retiré la vie, le bloc dans la case centrale sera détruit et un nouveau bloc sera généré. Ce code vérifie également si le lecteur est en fin de vie et appelle une fonction que nous écrirons plus tard..
/ * Supprimer le bloc inutilisé * / var i: int = blocks.length - 1; removeChild (blocs [i]); blocs [i] = null; blocks.splice (i, 1); / * Vérifier si hors de la vie * / si (vit < 1) alert(); else /* Next Block */ newBlock();
Prenons une autre pause pour voir comment notre code fonctionne à ce stade:
Cette fonction est activée lorsque le joueur clique sur l’un des carrés du conteneur. En gros, il vérifie si la bonne position est disponible pour placer le carré et le place si vrai. La fonction dans l'étape suivante est appelée quand le bloc est placé.
fonction finale privée placeBlock (e: MouseEvent): void var i: int = blocks.length - 1; eventTarget = e.target; / * Vérifie si la position est disponible * / var position: Array = [currentXPosition, currentYPosition]; if (String (position) == '5,5' &&! e.target.a) blocs [i] .x = e.target.x + position [0]; blocs [i] .y = e.target.y + position [1]; e.target.a = true; blockPlaced (); else if (String (position) == '35, 5 '&&! e.target.b) blocs [i] .x = e.target.x + position [0]; blocs [i] .y = e.target.y + position [1]; e.target.b = true; blockPlaced (); else if (String (position) == '5,35' &&! e.target.c) blocs [i] .x = e.target.x + position [0]; blocs [i] .y = e.target.y + position [1]; e.target.c = true; blockPlaced (); else if (String (position) == '35, 35 '&&! e.target.d) blocs [i] .x = e.target.x + position [0]; blocs [i] .y = e.target.y + position [1]; e.target.d = true; blockPlaced ();
Encore une fois, vous devrez peut-être modifier les valeurs cochées ici pour qu'elles correspondent à la position de vos blocs..
Lorsque le bloc est placé dans le conteneur, nous ajoutons le bloc au tableau qui enregistre les blocs stockés dans ce conteneur. Cela nous aidera à déterminer quand le conteneur est plein.
fonction finale privée blockPlaced (): void var i: int = blocks.length - 1; / * Envoie un bloc au tableau de blocs du conteneur * / eventTarget.blocks.push (blocks [i]);
Chaque bloc placé augmente le score d'un point. Lorsque la case est pleine, le score augmente de 50. Si la case est complètement remplie d’une seule couleur, le score total augmente de 200..
score ++;
Un bref son indiquera que le bloc a été placé.
bell.play ();
Le code suivant vérifie si le conteneur a été rempli par un seul bloc de couleur à l'aide du tableau de conteneurs. Il incrémente la partition de 200, joue le son correspondant et fait rebondir le conteneur en tant que signe visuel. Il efface également les variables dans le conteneur.
/ * Si le conteneur est plein et que chaque bloc est de même couleur * / if (eventTarget.blocks.length == 4 && String (eventTarget.blocks [0]) == String (eventTarget.blocks [1]) && String (eventTarget. blocks [1]) == String (eventTarget.blocks [2]) && String (eventTarget.blocks [2]) == String (eventTarget.blocks [3])) score + = 200; bell4.play (); TweenNano.from (eventTarget, 0.4, x: eventTarget.x - 5, facilité: Bounce.easeOut, onComplete: function (): void pour (var j: int = 0; j < 4; j++) removeChild(eventTarget.blocks[j]); eventTarget.blocks = []; ); eventTarget.a = false; eventTarget.b = false; eventTarget.c = false; eventTarget.d = false;
Ce code est exécuté lorsque le conteneur est plein mais que les blocs à l'intérieur ne sont pas de la même couleur..
/ * Si le conteneur est plein mais que les blocs ont des couleurs différentes * / else if (eventTarget.blocks.length == 4) bell4.play (500, 2); score + = 50; TweenNano.from (eventTarget, 0.4, x: eventTarget.x - 5, facilité: Bounce.easeOut, onComplete: function (): void pour (var j: int = 0; j < 4; j++) removeChild(eventTarget.blocks[j]); eventTarget.blocks = []; ); eventTarget.a = false; eventTarget.b = false; eventTarget.c = false; eventTarget.d = false;
Après avoir effacé tous les conteneurs, le score est défini sur le champ de texte de la scène, le temporisateur est réinitialisé et un autre bloc est appelé.
scoreTF.text = Chaîne (score); timer.stop (); timer.start (); counter.gotoAndPlay (1); newBlock ();
La fonction d'alerte est activée lorsque le joueur n'a plus de vie. il affiche le score final atteint et ajoute un auditeur pour revenir à l'écran titre.
fonction finale privée alert (): void timer.stop (); counter.gotoAndStop (1); var alert: AlertView = new AlertView (); alert.messageBox.msgTF.text = 'Score:' + String (score); alert.addEventListener (MouseEvent.MOUSE_UP, redémarrer); addChild (alerte); TweenNano.from (alert.messageBox, 0.7, y: -alert.messageBox.height, facilité: Bounce.easeOut);
La fonction suivante rechargera le swf, en redémarrant une variable, une méthode et en retournant à la Écran titre.
redémarrage de la fonction finale privée (e: MouseEvent): void browseToURL (new URLRequest (stage.loaderInfo.url), '_level0');
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!
